Fix QC Kak Inno 22 Des

Fix QC Kak Ayu 22 Des
Fix Tampilan Admin Mobile Device Menu Ekonomi
Fix Search -> useDebounced Menu Ekonomi

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

@@ -108,7 +108,7 @@ function EditBelanja() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+   <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header */}
       <Group mb="md">
         <Button

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

@@ -64,7 +64,7 @@ function CreateBelanja() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Header dengan back button */}
       <Group mb="md">
         <Button

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

@@ -19,7 +19,7 @@ import {
   Text,
   Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -31,7 +31,7 @@ import PendapatanAsliDesa from '../../../_state/ekonomi/PADesa';
 function Belanja() {
   const [search, setSearch] = useState("");
   return (
-    <Box>
+    <Stack gap="xl">
       <HeaderSearch
         title="Belanja"
         placeholder="Cari belanja berdasarkan nama atau nilai..."
@@ -40,7 +40,7 @@ function Belanja() {
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
       <ListBelanja search={search} />
-    </Box>
+    </Stack>
   );
 }
 
@@ -49,6 +49,7 @@ function ListBelanja({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -72,29 +73,35 @@ function ListBelanja({ search }: { search: string }) {
       belanjaState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      load(page, 10, search);
+      load(page, 10, debouncedSearch);
     }
   };
 
   useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
+      <Stack py="md">
         <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Box py={10}>
+    <Stack gap="xl">
+      {/* Desktop Table */}
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Belanja</Title>
+          <Title
+            order={4}
+            lh={{ base: 1.2, md: 1.1 }}
+          >
+            Daftar Belanja
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -107,14 +114,24 @@ function ListBelanja({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withTableBorder withRowBorders>
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            striped
+            withTableBorder
+            withRowBorders
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Nilai</TableTh>
-                <TableTh>Persentase</TableTh>
-                <TableTh>Aksi</TableTh>
+                <TableTh style={{ width: '35%' }}>Nama</TableTh>
+                <TableTh style={{ width: '25%' }}>Nilai</TableTh>
+                <TableTh style={{ width: '20%' }}>Persentase</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -123,15 +140,19 @@ function ListBelanja({ search }: { search: string }) {
                   {filteredData.map((item) => (
                     <TableTr key={item.id}>
                       <TableTd>
-                        <Text fw={500} truncate="end" lineClamp={1}>
+                        <Text fz="md" fw={500} lh={1.45} truncate="end" lineClamp={1}>
                           {item.name}
                         </Text>
                       </TableTd>
-                      <TableTd>{formatRupiah(item.value)}</TableTd>
                       <TableTd>
-                        {totalBelanja > 0
-                          ? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
-                          : '0%'}
+                        <Text fz="md" lh={1.45}>{formatRupiah(item.value)}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text fz="md" lh={1.45}>
+                          {totalBelanja > 0
+                            ? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
+                            : '0%'}
+                        </Text>
                       </TableTd>
                       <TableTd>
                         <Group gap="xs">
@@ -165,18 +186,20 @@ function ListBelanja({ search }: { search: string }) {
                   ))}
                   <TableTr>
                     <TableTd colSpan={2}>
-                      <Text fw="bold">Total</Text>
+                      <Text fz="md" fw={600} lh={1.45}>Total</Text>
                     </TableTd>
                     <TableTd colSpan={2}>
-                      <Text fw="bold">{formatRupiah(totalBelanja)}</Text>
+                      <Text fz="md" fw={600} lh={1.45}>{formatRupiah(totalBelanja)}</Text>
                     </TableTd>
                   </TableTr>
                 </>
               ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada data belanja yang cocok</Text>
+                    <Center py="xl">
+                      <Text c="dimmed" fz="sm" lh={1.4}>
+                        Tidak ada data belanja yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -186,21 +209,107 @@ function ListBelanja({ search }: { search: string }) {
         </Box>
       </Paper>
 
+      {/* Mobile Cards */}
+      <Stack visibleFrom="xs" hiddenFrom="md" gap="sm">
+        {filteredData.length > 0 ? (
+          filteredData.map((item) => (
+            <Paper key={item.id} withBorder p="md" radius="md">
+              <Stack gap={'xs'}>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nama
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4} truncate="end">
+                    {item.name}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Nilai
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {formatRupiah(item.value)}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fz="sm" fw={600} lh={1.4}>
+                    Persentase
+                  </Text>
+                  <Text fz="sm" fw={500} lh={1.4}>
+                    {totalBelanja > 0
+                      ? ((item.value / totalBelanja) * 100).toFixed(0) + '%'
+                      : '0%'}
+                  </Text>
+                </Box>
+                <Group justify="flex-end" mt="xs">
+                  <Button
+                    size="xs"
+                    variant="light"
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/ekonomi/PADesa-pendapatan-asli-desa/belanja/${item.id}`
+                      )
+                    }
+                  >
+                    <IconEdit size={16} />
+                  </Button>
+                  <Button
+                    size="xs"
+                    variant="light"
+                    color="red"
+                    disabled={belanjaState.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id);
+                      setModalHapus(true);
+                    }}
+                  >
+                    <IconTrash size={16} />
+                  </Button>
+                </Group>
+              </Stack>
+            </Paper>
+          ))
+        ) : (
+          <Paper withBorder p="xl" radius="md">
+            <Center>
+              <Text c="dimmed" fz="sm" lh={1.4}>
+                Tidak ada data belanja yang cocok
+              </Text>
+            </Center>
+          </Paper>
+        )}
+
+        {filteredData.length > 0 && (
+          <Paper withBorder p="md" radius="md">
+            <Group justify="space-between">
+              <Text fz="sm" fw={600} lh={1.4}>
+                Total
+              </Text>
+              <Text fz="sm" fw={500} lh={1.4}>
+                {formatRupiah(totalBelanja)}
+              </Text>
+            </Group>
+          </Paper>
+        )}
+      </Stack>
+
       {/* 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>
+      {(totalPages > 1 || page > 1) && (
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10, search);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
+      )}
 
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
@@ -209,8 +318,8 @@ function ListBelanja({ search }: { search: string }) {
         onConfirm={handleDelete}
         text="Apakah anda yakin ingin menghapus belanja ini?"
       />
-    </Box>
+    </Stack>
   );
 }
 
-export default Belanja;
+export default Belanja;