QC Admin - User Menu Ekonomi : Jumlah Pengangguran

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx

@@ -1,18 +1,30 @@
-'use client'
+'use client';
 import React from 'react';
 import { useProxy } from 'valtio/utils';
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import { useRouter } from 'next/navigation';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Title, TextInput, Group, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Title,
+  TextInput,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
+import { toast } from 'react-toastify';
 
 function CreatePembiayaan() {
-  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan)
-  const router = useRouter()
+  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
+  const router = useRouter();
 
   const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    const number =
+      typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
     return new Intl.NumberFormat('id-ID', {
       style: 'currency',
       currency: 'IDR',
@@ -26,48 +38,85 @@ function CreatePembiayaan() {
 
   const resetForm = () => {
     pembiayaanState.create.form = {
-      name: "",
+      name: '',
       value: 0,
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
-    await pembiayaanState.create.submit();
-    resetForm()
-    router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    if (!pembiayaanState.create.form.name || !pembiayaanState.create.form.value) {
+      return toast.warn('Nama dan nilai wajib diisi');
+    }
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Jenis Pembiayaan</Title>
+    await pembiayaanState.create.submit();
+    resetForm();
+    router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan');
+  };
+
+  return (
+    <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">
+          Tambah Jenis Pembiayaan
+        </Title>
+      </Group>
+
+      {/* Form 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={<Text fw="bold" fz="sm">Nama Jenis Pembiayaan</Text>}
+            placeholder="Masukkan nama jenis pembiayaan"
             value={pembiayaanState.create.form.name}
-            onChange={(val) => {
-              pembiayaanState.create.form.name = val.target.value;
+            onChange={(e) => {
+              pembiayaanState.create.form.name = e.currentTarget.value;
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pembiayaan</Text>}
-            placeholder='Masukkan nama jenis pembiayaan'
+            required
           />
+
           <TextInput
-            type='text'
+            type="text"
+            label={<Text fw="bold" fz="sm">Nilai</Text>}
+            placeholder="Masukkan nilai"
             value={formatRupiah(pembiayaanState.create.form.value)}
-            onChange={(val) => {
-              const raw = val.currentTarget.value;
-              const cleanValue = unformatRupiah(raw);
-              pembiayaanState.create.form.value = cleanValue;
+            onChange={(e) => {
+              const raw = e.currentTarget.value;
+              pembiayaanState.create.form.value = unformatRupiah(raw);
             }}
-            label={<Text fw={"bold"} fz={"sm"}>Nilai</Text>}
-            placeholder='Masukkan nilai'
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <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>