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/jumlah-pengangguran/[id]/edit/page.tsx

@@ -176,7 +176,7 @@ function EditDetailDataPengangguran() {
   };
 
   return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       <Group mb="md">
         <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
           <IconArrowBack color={colors['blue-button']} size={24} />

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/page.tsx

@@ -40,7 +40,7 @@ function DetailJumlahPengangguran() {
   const data = stateDetail.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box px={{ base: 0, md: 'xs' }} py="xs">
       {/* Tombol Kembali */}
       <Button
         variant="subtle"
@@ -54,7 +54,7 @@ function DetailJumlahPengangguran() {
       {/* Paper Detail */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "60%" }}
+        w={{ base: "100%", md: "70%" }}
         bg={colors['white-1']}
         p="lg"
         radius="md"

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx

@@ -96,7 +96,7 @@ function CreateJumlahPengangguran() {
   };
 
   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/jumlah-pengangguran/page.tsx

@@ -7,7 +7,7 @@ import {
   Table, TableTbody, TableTd, TableTh, TableThead, TableTr,
   Text, Title
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -20,7 +20,7 @@ function DetailDataPengangguran() {
   const [search, setSearch] = useState("");
 
   return (
-    <Box>
+    <Stack>
       <HeaderSearch
         title='Detail Data Pengangguran'
         placeholder='Cari bulan atau tahun...'
@@ -29,7 +29,7 @@ function DetailDataPengangguran() {
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
       <ListDetailDataPengangguran search={search} />
-    </Box>
+    </Stack>
   );
 }
 
@@ -38,6 +38,7 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
   const [mounted, setMounted] = useState(false);
   const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran);
   const router = useRouter();
+  const [debouncedSearch] = useDebouncedValue(search, 1000);
 
   const {
     data,
@@ -49,8 +50,8 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
 
   useShallowEffect(() => {
     setMounted(true);
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
 
   useEffect(() => {
     if (data) {
@@ -68,23 +69,25 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
     }
   }, [data]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   // Loading state
   if (loading || !data) {
     return (
-      <Stack py="md">
+      <Stack py={{ base: 'md', md: 'lg' }} gap="lg">
         <Skeleton h={500} radius="md" />
       </Stack>
     );
   }
 
   return (
-    <Stack py="md" gap="lg">
-      {/* Table Section */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Detail Data Pengangguran</Title>
+    <Stack py={{ base: 'md', md: 'lg' }} gap="lg">
+      {/* Table / Card Section */}
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Group justify="space-between" mb={{ base: 'sm', md: 'md' }}>
+          <Title order={4} lh={1.2}>
+            Daftar Detail Data Pengangguran
+          </Title>
           <Button
             leftSection={<IconPlus size={18} />}
             color="blue"
@@ -95,23 +98,45 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
           </Button>
         </Group>
 
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover striped withTableBorder withRowBorders>
+        {/* Desktop Table */}
+        <Box visibleFrom="md">
+          <Table
+            highlightOnHover
+            miw={0}
+            withTableBorder
+            withRowBorders
+            style={{
+              tableLayout: 'fixed',
+              width: '100%',
+            }}
+          >
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Bulan</TableTh>
-                <TableTh style={{ width: '20%' }}>Terdidik</TableTh>
-                <TableTh style={{ width: '20%' }}>Tidak Terdidik</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+                <TableTh style={{ width: '30%' }}>Bulan</TableTh>
+                <TableTh style={{ width: '25%' }}>Terdidik</TableTh>
+                <TableTh style={{ width: '25%' }}>Tidak Terdidik</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.month} {item.year}</TableTd>
-                    <TableTd>{item.educatedUnemployment}</TableTd>
-                    <TableTd>{item.uneducatedUnemployment}</TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.month} {item.year}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.educatedUnemployment}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="md" fw={500} lh={1.5}>
+                        {item.uneducatedUnemployment}
+                      </Text>
+                    </TableTd>
                     <TableTd>
                       <Button
                         variant="light"
@@ -119,7 +144,9 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
                         onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${item.id}`)}
                       >
                         <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                          Detail
+                        </Text>
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -128,7 +155,9 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
-                      <Text c="dimmed">Tidak ada data yang cocok</Text>
+                      <Text c="dimmed" fz="sm" fw={500} lh={1.4}>
+                        Tidak ada data yang cocok
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -136,25 +165,85 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+
+        {/* Mobile Card View */}
+        <Box hiddenFrom="md">
+          <Stack gap="xs">
+            {filteredData.length > 0 ? (
+              filteredData.map((item) => (
+                <Paper key={item.id} withBorder p="sm" radius="sm">
+                  <Stack gap={"xs"}>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Bulan
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.month} {item.year}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Terdidik
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.educatedUnemployment}
+                      </Text>
+                    </Box>
+                    <Box>
+                      <Text fz="sm" fw={600} lh={1.4}>
+                        Tidak Terdidik
+                      </Text>
+                      <Text fz="sm" fw={500} lh={1.4}>
+                        {item.uneducatedUnemployment}
+                      </Text>
+                    </Box>
+                    <Button
+                      variant="light"
+                      color="blue"
+                      fullWidth
+                      onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${item.id}`)}
+                      mt="xs"
+                    >
+                      <IconDeviceImac size={18} />
+                      <Text ml={5} fz="sm" fw={500} lh={1.4}>
+                        Detail
+                      </Text>
+                    </Button>
+                  </Stack>
+                </Paper>
+              ))
+            ) : (
+              <Center py={20}>
+                <Text c="dimmed" fz="sm" fw={500} lh={1.4}>
+                  Tidak ada data yang cocok
+                </Text>
+              </Center>
+            )}
+          </Stack>
+        </Box>
       </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+            color="blue"
+            radius="md"
+          />
+        </Center>
+      )}
 
       {/* Chart Section */}
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Title order={4} mb="md">
+      <Paper withBorder bg={colors['white-1']} p={{ base: 'sm', md: 'lg' }} shadow="md" radius="md">
+        <Title order={4} lh={1.2} mb={{ base: 'sm', md: 'md' }}>
           Data Pengangguran Terdidik & Tidak Terdidik
         </Title>
         {mounted && chartData.length > 0 ? (
@@ -170,11 +259,13 @@ function ListDetailDataPengangguran({ search }: { search: string }) {
             />
           </Box>
         ) : (
-          <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+          <Text c="dimmed" fz={{ base: 'sm', md: 'md' }} fw={500} lh={1.5}>
+            Belum ada data untuk ditampilkan dalam grafik
+          </Text>
         )}
       </Paper>
     </Stack>
   );
 }
 
-export default DetailDataPengangguran;
+export default DetailDataPengangguran;