QC Admin - User Menu Ekonomi : Jumlah Pengangguran

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx

@@ -2,7 +2,16 @@
 'use client'
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -72,41 +81,72 @@ function EditBelanja() {
   }
 
   return (
-    <Box>
-    <Box mb={10}>
-      <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-        <IconArrowBack color={colors['blue-button']} size={25} />
-      </Button>
-    </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Jenis Belanja
+        </Title>
+      </Group>
 
-    <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={4}>Edit Jenis Pendapatan</Title>
-        <TextInput
-          value={formData.name}
-          onChange={(val) => {
-            setFormData({ ...formData, name: val.target.value });
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pendapatan</Text>}
-          placeholder='Masukkan nama Jenis Pendapatan'
-        />
-        <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
-          placeholder='Masukkan nilai'
-          value={formatRupiah(formData.value)}
-          onChange={(val) => {
-            const raw = val.currentTarget.value;
-            const cleanValue = unformatRupiah(raw);
-            setFormData({ ...formData, value: cleanValue });
-          }}
-        />
-        <Group>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-        </Group>
-      </Stack>
-    </Paper>
-  </Box>
+      {/* Card */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Jenis Belanja"
+            placeholder="Masukkan nama jenis belanja"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+
+          <TextInput
+            label="Nilai"
+            placeholder="Masukkan nilai"
+            value={formatRupiah(formData.value)}
+            onChange={(e) => {
+              const raw = e.currentTarget.value;
+              const cleanValue = unformatRupiah(raw);
+              setFormData({ ...formData, value: cleanValue });
+            }}
+            required
+          />
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 
-export default EditBelanja;
+export default EditBelanja;