QC Tampilan Admin & User, Api berfungsi

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

@@ -3,78 +3,116 @@
 
 import jumlahPendudukMiskin from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
 function EditJumlahPendudukMiskin() {
-  const router = useRouter()
-  const params = useParams() as { id: string }
-  const stateJPM = useProxy(jumlahPendudukMiskin)
+  const router = useRouter();
+  const params = useParams() as { id: string };
+  const stateJPM = useProxy(jumlahPendudukMiskin);
 
-  const id = params.id
+  const id = params.id;
 
-  // Load data saat komponen mount
   useEffect(() => {
-    if (id) {
-      stateJPM.findUnique.load(id).then(() => {
-        const data = stateJPM.findUnique.data
+    if (!id) return;
+
+    const loadData = async () => {
+      try {
+        await stateJPM.findUnique.load(id);
+        const data = stateJPM.findUnique.data;
         if (data) {
           stateJPM.update.form = {
             year: data.year || 0,
             totalPoorPopulation: data.totalPoorPopulation || 0,
-          }
+          };
         }
-      })
-    }
-  }, [id])
+      } catch (error) {
+        console.error('Gagal memuat data:', error);
+        toast.error('Gagal memuat data jumlah penduduk miskin');
+      }
+    };
+
+    loadData();
+  }, [id]);
 
   const handleSubmit = async () => {
-    // Set the ID before submitting
-    stateJPM.update.id = id;
-    await stateJPM.update.submit();
-    router.push('/admin/ekonomi/jumlah-penduduk-miskin')
-  }
-return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-        <Stack>
-          <Title order={3}>Edit Jumlah Penduduk Miskin</Title>
+    try {
+      stateJPM.update.id = id;
+      await stateJPM.update.submit();
+      toast.success('Data jumlah penduduk miskin berhasil diperbarui!');
+      router.push('/admin/ekonomi/jumlah-penduduk-miskin');
+    } catch (error) {
+      console.error('Gagal menyimpan data:', error);
+      toast.error('Terjadi kesalahan saat menyimpan data');
+    }
+  };
+
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <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 Jumlah Penduduk Miskin
+        </Title>
+      </Group>
+
+      <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="Tahun"
-            placeholder="masukkan tahun"
+            placeholder="Masukkan tahun"
+            type="number"
+            required
             value={stateJPM.update.form.year}
             onChange={(val) => {
               stateJPM.update.form.year = Number(val.currentTarget.value);
             }}
           />
+
           <TextInput
             label="Jumlah Penduduk Miskin"
+            placeholder="Masukkan jumlah penduduk miskin"
             type="number"
-            placeholder="masukkan jumlah penduduk miskin"
+            required
             value={stateJPM.update.form.totalPoorPopulation}
             onChange={(val) => {
               stateJPM.update.form.totalPoorPopulation = Number(val.currentTarget.value);
             }}
           />
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Simpan
-          </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>
     </Box>
-  )
+  );
 }
 
 export default EditJumlahPendudukMiskin;

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

@@ -1,26 +1,25 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+'use client';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
+import colors from '@/con/colors';
 import jumlahPendudukMiskin from '../../../_state/ekonomi/jumlah-penduduk-miskin';
 
-function CreateJumlahPendudukMiskin() {
+export default function CreateJumlahPendudukMiskin() {
   const stateJPM = useProxy(jumlahPendudukMiskin);
   const [chartData, setChartData] = useState<any[]>([]);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
     stateJPM.create.form = {
-      year: new Date().getFullYear(), // Default to current year
+      year: new Date().getFullYear(),
       totalPoorPopulation: 0,
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
     const id = await stateJPM.create.create();
@@ -32,52 +31,72 @@ function CreateJumlahPendudukMiskin() {
       }
     }
     resetForm();
-    router.push("/admin/ekonomi/jumlah-penduduk-miskin");
-  }
+    router.push('/admin/ekonomi/jumlah-penduduk-miskin');
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
-          <Stack gap={"xs"}>
-            <TextInput
-              label="Tahun"
-              type="number"
-              value={stateJPM.create.form.year || ''}
-              placeholder="Masukkan tahun"
-              onChange={(val) => {
-                const value = val.currentTarget.value;
-                stateJPM.create.form.year = value ? Number(value) : 0;
+    <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 Jumlah Penduduk Miskin
+        </Title>
+      </Group>
+
+      {/* Form Paper */}
+      <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="Tahun"
+            type="number"
+            value={stateJPM.create.form.year || ''}
+            placeholder="Masukkan tahun"
+            onChange={(e) => {
+              const value = e.currentTarget.value;
+              stateJPM.create.form.year = value ? Number(value) : 0;
+            }}
+            required
+          />
+
+          <TextInput
+            label="Jumlah Penduduk Miskin"
+            type="number"
+            value={stateJPM.create.form.totalPoorPopulation}
+            placeholder="Masukkan jumlah penduduk miskin"
+            onChange={(e) => {
+              stateJPM.create.form.totalPoorPopulation = Number(e.currentTarget.value);
+            }}
+            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)',
               }}
-            />
-            <TextInput
-              label="Jumlah Penduduk Miskin"
-              type="number"
-              value={stateJPM.create.form.totalPoorPopulation}
-              placeholder="Masukkan jumlah penduduk miskin"
-              onChange={(val) => {
-                stateJPM.create.form.totalPoorPopulation = Number(val.currentTarget.value);
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                mt={10}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }
-
-export default CreateJumlahPendudukMiskin;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx

@@ -1,15 +1,14 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { useShallowEffect, useMediaQuery } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
-import { Bar, BarChart, Legend, XAxis, YAxis, Tooltip } from 'recharts';
+import { Bar, BarChart, Legend, XAxis, YAxis, Tooltip as RechartsTooltip } from 'recharts';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 
 function JumlahPendudukMiskin() {
@@ -18,7 +17,7 @@ function JumlahPendudukMiskin() {
     <Box>
       <HeaderSearch
         title='Jumlah Penduduk Miskin'
-        placeholder='pencarian'
+        placeholder='Cari tahun atau jumlah penduduk miskin...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -29,138 +28,158 @@ function JumlahPendudukMiskin() {
 }
 
 function ListJumlahPendudukMiskin({ search }: { search: string }) {
-  type JPMGrafik = {
-    id: string;
-    year: number;
-    totalPoorPopulation: number;
-  }
+  type JPMGrafik = { id: string; year: number; totalPoorPopulation: number }
   const stateJPM = useProxy(jumlahPendudukMiskin);
   const [chartData, setChartData] = useState<JPMGrafik[]>([]);
-  const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
-  const isTablet = useMediaQuery('(max-width: 1024px)')
-  const isMobile = useMediaQuery('(max-width: 768px)')
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
 
-  const handleDelete = () => {
-    if (selectedId) {
-      stateJPM.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      stateJPM.findMany.load()
-    }
-  }
+  const isTablet = useMediaQuery('(max-width:1024px)');
+  const isMobile = useMediaQuery('(max-width:768px)');
 
+  const {
+    data,
+    page,
+    loading,
+    load,
+    totalPages,
+  } = stateJPM.findMany;
+  // Load data
   useShallowEffect(() => {
-    setMounted(true)
-    stateJPM.findMany.load()
-  }, [])
+    setMounted(true);
+    load(page, 10, search);
+  }, [page, search]);
 
   useEffect(() => {
-    setMounted(true);
     if (stateJPM.findMany.data) {
-      setChartData(stateJPM.findMany.data.map((item) => ({
+      setChartData(stateJPM.findMany.data.map(item => ({
         id: item.id,
         year: Number(item.year),
-        totalPoorPopulation: Number(item.totalPoorPopulation),
+        totalPoorPopulation: Number(item.totalPoorPopulation)
       })));
     }
   }, [stateJPM.findMany.data]);
 
-  const filteredData = (stateJPM.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.year.toString().toLowerCase().includes(keyword) ||
-      item.totalPoorPopulation.toString().toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!stateJPM.findMany.data) {
+  const handleDelete = () => {
+    if (selectedId) {
+      stateJPM.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      stateJPM.findMany.load();
+    }
+  }
+
+  if (loading || !data) {
     return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
     <Box py={10}>
-      <Stack gap={'xs'}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Jumlah Penduduk Miskin'
-            href='/admin/ekonomi/jumlah-penduduk-miskin/create'
-          />
-          <Table striped withTableBorder withRowBorders>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Jumlah Penduduk Miskin</Title>
+          <Tooltip label="Tambah Data" withArrow>
+            <Button
+              leftSection={<IconEdit size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh>Tahun</TableTh>
-                <TableTh>Jumlah Penduduk Miskin</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '25%' }}>Tahun</TableTh>
+                <TableTh style={{ width: '35%' }}>Jumlah Penduduk Miskin</TableTh>
+                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
+              {filteredData.length > 0 ? filteredData.map(item => (
                 <TableTr key={item.id}>
                   <TableTd>{item.year}</TableTd>
                   <TableTd>{item.totalPoorPopulation}</TableTd>
                   <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)}>
+                    <Button variant='light' color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
                   <TableTd>
-                    <Button
-                      color='red'
-                      disabled={stateJPM.delete.loading}
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}>
+                    <Button variant='light' color="red" disabled={stateJPM.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true) }}>
                       <IconTrash size={20} />
                     </Button>
                   </TableTd>
                 </TableTr>
-              ))}
+              )) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
             </TableTbody>
           </Table>
-        </Paper>
+        </Box>
+      </Paper>
 
-        {/* Chart */}
-        {!mounted && !chartData ? (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={3}>Grafik Jumlah Penduduk Miskin</Title>
-              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-            </Paper>
-          </Box>
-        ) : (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={4}>Grafik Jumlah Penduduk Miskin</Title>
-              {mounted && chartData.length > 0 && (
-                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
-                  <XAxis dataKey="year" />
-                  <YAxis />
-                  <Tooltip />
-                  <Legend />
-                  <Bar dataKey="totalPoorPopulation" fill={colors['blue-button']} name="Jumlah Penduduk Miskin" />
-                </BarChart>
-              )}
-            </Paper>
-          </Box>
-        )}
-      </Stack>
+      <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>
 
-      {/* Modal Konfirmasi Hapus */}
+      {/* Chart */}
+      <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
+        <Stack>
+          <Box mt="lg" style={{ width: '100%', minHeight: 350 }}>
+            <Title order={4} mb="sm">Grafik Jumlah Penduduk Miskin</Title>
+            {mounted && chartData.length > 0 ? (
+              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData}>
+                <XAxis dataKey="year" />
+                <YAxis />
+                <RechartsTooltip />
+                <Legend />
+                <Bar dataKey="totalPoorPopulation" fill={colors['blue-button']} name="Jumlah Penduduk Miskin" />
+              </BarChart>
+            ) : (
+              <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+            )}
+          </Box>
+        </Stack>
+      </Paper>
+
+
+      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik jumlah penduduk miskin ini?'
+        text='Apakah anda yakin ingin menghapus data ini?'
       />
     </Box>
   );