QC Admin - User Menu Ekonomi : Jumlah Pengangguran

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[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';
@@ -20,7 +29,7 @@ function EditPembiayaan() {
   });
 
   const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
     return new Intl.NumberFormat('id-ID', {
       style: 'currency',
       currency: 'IDR',
@@ -46,8 +55,8 @@ function EditPembiayaan() {
           });
         }
       } catch (error) {
-        console.error("Error loading pembiayaan:", error);
-        toast.error("Gagal memuat data pembiayaan");
+        console.error('Error loading pembiayaan:', error);
+        toast.error('Gagal memuat data pembiayaan');
       }
     };
 
@@ -60,53 +69,84 @@ function EditPembiayaan() {
         ...pembiayaanState.update.form,
         name: formData.name,
         value: Number(formData.value),
-      }
+      };
 
       await pembiayaanState.update.update();
-      toast.success("Jenis Pembiayaan berhasil diperbarui!");
-      router.push("/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan");
+      toast.success('Jenis Pembiayaan berhasil diperbarui!');
+      router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan');
     } catch (error) {
-      console.error("Error updating jenis pembiayaan:", error);
-      toast.error("Terjadi kesalahan saat memperbarui jenis pembiayaan");
+      console.error('Error updating jenis pembiayaan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui jenis pembiayaan');
     }
-  }
+  };
 
   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 dengan Back Button */}
+      <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 Pembiayaan
+        </Title>
+      </Group>
 
-    <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={4}>Edit Jenis Pembiayaan</Title>
-        <TextInput
-          value={formData.name}
-          onChange={(val) => {
-            setFormData({ ...formData, name: val.target.value });
-          }}
-          label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pembiayaan</Text>}
-          placeholder='Masukkan nama Jenis Pembiayaan'
-        />
-        <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 Form */}
+      <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 Pembiayaan"
+            placeholder="Masukkan nama jenis pembiayaan"
+            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 EditPembiayaan;
+export default EditPembiayaan;

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>

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

@@ -1,14 +1,31 @@
 'use client'
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+  Pagination,
+} from '@mantine/core';
 import React, { useState } from 'react';
 import HeaderSearch from '../../../_com/header';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
 import { useProxy } from 'valtio/utils';
 import { useRouter } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
 import colors from '@/con/colors';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function Pembiayaan() {
@@ -16,8 +33,8 @@ function Pembiayaan() {
   return (
     <Box>
       <HeaderSearch
-        title='Pembiayaan'
-        placeholder='pencarian'
+        title="Pembiayaan"
+        placeholder="Cari nama pembiayaan..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,111 +45,171 @@ function Pembiayaan() {
 }
 
 function ListPembiayaan({ search }: { search: string }) {
-  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan)
+  const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);
   const router = useRouter();
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
 
-  const formatRupiah = (value: number) => {
-    return new Intl.NumberFormat('id-ID', {
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = pembiayaanState.findMany;
+
+  const formatRupiah = (value: number) =>
+    new Intl.NumberFormat('id-ID', {
       style: 'currency',
       currency: 'IDR',
       minimumFractionDigits: 0,
     }).format(value);
-  };
 
-  const totalPembiayaan = pembiayaanState.findMany.data.reduce((sum, item) => sum + item.value, 0);
+  const totalPembiayaan = (data || []).reduce((sum, item) => sum + item.value, 0);
 
   const handleDelete = () => {
     if (selectedId) {
-      pembiayaanState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      pembiayaanState.findMany.load()
+      pembiayaanState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      load(page, 10, search);
     }
-  }
+  };
 
   useShallowEffect(() => {
-    pembiayaanState.findMany.load();
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (pembiayaanState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.value.toString().toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!pembiayaanState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
+
+  const filteredData = data || [];
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Pembiayaan'
-          href='/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Nilai</TableTh>
-              <TableTh>Persentase</TableTh>
-              <TableTh>Edit</TableTh>
-              <TableTh>Delete</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{formatRupiah(item.value)}</TableTd>
-                <TableTd>{((item.value / totalPembiayaan) * 100).toFixed(0)}%</TableTd>
-                <TableTd>
-                  <Button color='green' onClick={() => router.push(`/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/${item.id}`)}>
-                    <IconEdit size={20} />
-                  </Button>
-                </TableTd>
-                <TableTd>
-                  <Button
-                    color='red'
-                    disabled={pembiayaanState.delete.loading}
-                    onClick={() => {
-                      setSelectedId(item.id)
-                      setModalHapus(true)
-                    }}>
-                    <IconTrash size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pembiayaan</Title>
+          <Tooltip label="Tambah Pembiayaan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Nilai</TableTh>
+                <TableTh>Persentase</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
-            ))}
-            <TableTr>
-              <TableTd colSpan={4}>
-                <Text fw={'bold'}>Total</Text>
-              </TableTd>
-              <TableTd>
-                {formatRupiah(pembiayaanState.findMany.data.reduce((total, item) => total + item.value, 0))}
-              </TableTd>
-            </TableTr>
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                <>
+                  {filteredData.map((item) => (
+                    <TableTr key={item.id}>
+                      <TableTd>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </TableTd>
+                      <TableTd>{formatRupiah(item.value)}</TableTd>
+                      <TableTd>
+                        {totalPembiayaan > 0
+                          ? ((item.value / totalPembiayaan) * 100).toFixed(0) + '%'
+                          : '0%'}
+                      </TableTd>
+                      <TableTd>
+                        <Group gap="xs">
+                          <Button
+                            color="green"
+                            variant="light"
+                            onClick={() =>
+                              router.push(
+                                `/admin/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/${item.id}`
+                              )
+                            }
+                          >
+                            <IconEdit size={18} />
+                          </Button>
+                          <Button
+                            color="red"
+                            variant="light"
+                            disabled={pembiayaanState.delete.loading}
+                            onClick={() => {
+                              setSelectedId(item.id);
+                              setModalHapus(true);
+                            }}
+                          >
+                            <IconTrash size={18} />
+                          </Button>
+                        </Group>
+                      </TableTd>
+                    </TableTr>
+                  ))}
+                  {/* Total Row */}
+                  <TableTr>
+                    <TableTd colSpan={2}>
+                      <Text fw="bold">Total</Text>
+                    </TableTd>
+                    <TableTd colSpan={2}>{formatRupiah(totalPembiayaan)}</TableTd>
+                  </TableTr>
+                </>
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data pembiayaan yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
 
+      {/* Pagination */}
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus pembiayaan ini?'
+        text="Apakah anda yakin ingin menghapus pembiayaan ini?"
       />
     </Box>
-  )
+  );
 }
 
 export default Pembiayaan;