UI & API Menu Ekonomi, Submenu Demografi

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx

@@ -0,0 +1,102 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
+
+function EditDemografiPekerjaan() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateDemografi = useProxy(demografiPekerjaan)
+
+  const id = params.id
+
+  useEffect(() => {
+    if (!id) return;
+    stateDemografi.update.id = id;
+    stateDemografi.findUnique.load(id)
+      .then(() => {
+        const data = stateDemografi.findUnique.data;
+        if (data) {
+          stateDemografi.update.form = {
+            pekerjaan: String(data.pekerjaan || ''),
+            lakiLaki: Number(data.lakiLaki || 0),
+            perempuan: Number(data.perempuan || 0)
+          };
+        }
+      })
+      .catch(error => {
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data');
+      });
+  }, [id]);
+
+  // Di handleSubmit, ubah menjadi:
+  const handleSubmit = async () => {
+    try {
+      stateDemografi.update.id = id;
+      await stateDemografi.update.submit();
+      toast.success('Data berhasil diperbarui');
+      router.push('/admin/ekonomi/demografi-pekerjaan');
+    } catch (error) {
+      console.error('Error updating data:', error);
+      toast.error('Gagal memperbarui data');
+    }
+  };
+
+  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 Demografi Pekerjaan</Title>
+          <TextInput
+            label="Pekerjaan"
+            placeholder="masukkan pekerjaan"
+            value={stateDemografi.update.form.pekerjaan}
+            onChange={(val) => {
+              stateDemografi.update.form.pekerjaan = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah Pekerja Laki - Laki"
+            type="number"
+            placeholder="masukkan jumlah pekerja laki - laki"
+            value={stateDemografi.update.form.lakiLaki}
+            onChange={(val) => {
+              stateDemografi.update.form.lakiLaki = Number(val.currentTarget.value);
+            }}
+          />
+          <TextInput
+            label="Jumlah Pekerja Perempuan"
+            type="number"
+            placeholder="masukkan jumlah pekerja perempuan"
+            value={stateDemografi.update.form.perempuan}
+            onChange={(val) => {
+              stateDemografi.update.form.perempuan = Number(val.currentTarget.value);
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan Perubahan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx

@@ -1,41 +1,90 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 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 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
 
 function CreateDemografiPekerjaan() {
-  const router = useRouter();
+  const stateDemografi = useProxy(demografiPekerjaan);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateDemografi.create.form = {
+      pekerjaan: "",
+      lakiLaki: 0,
+      perempuan: 0,
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateDemografi.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateDemografi.findUnique.load(idStr);
+      if (stateDemografi.findUnique.data) {
+        setChartData([stateDemografi.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ekonomi/demografi-pekerjaan");
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
         </Button>
       </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Demografi Pekerjaan</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
-          placeholder='Masukkan pekerjaan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
-          placeholder='Masukkan jumlah pekerja laki - laki'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
-          placeholder='Masukkan jumlah pekerja perempuan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
+      <Box>
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Title order={4}>Tambah Demografi Pekerjaan</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Pekerjaan"
+              type="text"
+              value={stateDemografi.create.form.pekerjaan}
+              placeholder="Masukkan pekerjaan"
+              onChange={(val) => {
+                stateDemografi.create.form.pekerjaan = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jumlah Pekerja Laki - Laki"
+              type="number"
+              value={stateDemografi.create.form.lakiLaki}
+              placeholder="Masukkan jumlah pekerja laki - laki"
+              onChange={(val) => {
+                stateDemografi.create.form.lakiLaki = Number(val.currentTarget.value);
+              }}
+            />
+            <TextInput
+              label="Jumlah Pekerja Perempuan"
+              type="number"
+              value={stateDemografi.create.form.perempuan}
+              placeholder="Masukkan jumlah pekerja perempuan"
+              onChange={(val) => {
+                stateDemografi.create.form.perempuan = Number(val.currentTarget.value);
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
   );
 }
 

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/detail/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function DetailDemografiPekerjaan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Demografi Pekerjaan</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Pekerjaan</Text>
-                <Text>Karyawan</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Jumlah Pekerja Laki - Laki</Text>
-                <Text>200</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Jumlah Pekerja Perempuan</Text>
-                <Text>100</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/edit')} color="green">
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-
-      {/* Modal Hapus
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
-      /> */}
-    </Box>
-  );
-}
-
-export default DetailDemografiPekerjaan;
-

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/edit/page.tsx

@@ -1,42 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
-
-function EditDemografiPekerjaan() {
-  const router = useRouter();
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
-        </Button>
-      </Box>
-
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Demografi Pekerjaan</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Pekerjaan</Text>}
-          placeholder='Masukkan pekerjaan'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Laki - Laki</Text>}
-          placeholder='Masukkan jumlah pekerja laki - laki'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Jumlah Pekerja Perempuan</Text>}
-          placeholder='Masukkan jumlah pekerja perempuan'
-          />
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -1,26 +1,85 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import demografiPekerjaan from '../../_state/ekonomi/demografi-pekerjaan';
 
 function DemografiPekerjaan() {
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Demografi Pekerjaan'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListDemografiPekerjaan/>
+      <ListDemografiPekerjaan search={search} />
     </Box>
   );
 }
 
-function ListDemografiPekerjaan() {
+function ListDemografiPekerjaan({ search }: { search: string }) {
+  type DemografiPekerjaan = {
+    id: string;
+    pekerjaan: string;
+    lakiLaki: number;
+    perempuan: number;
+  }
+
   const router = useRouter();
+  const stateDemografi = useProxy(demografiPekerjaan)
+  const [chartData, setChartData] = useState<DemografiPekerjaan[]>([]);
+  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 handleDelete = () => {
+    if (selectedId) {
+      stateDemografi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stateDemografi.findMany.load()
+    }
+  }
+  
+  useShallowEffect(() => {
+    setMounted(true)
+    stateDemografi.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (stateDemografi.findMany.data) {
+      setChartData(stateDemografi.findMany.data.map((item) => ({
+        id: item.id,
+        pekerjaan: item.pekerjaan,
+        lakiLaki: Number(item.lakiLaki),
+        perempuan: Number(item.perempuan),
+      })));
+    }
+  }, [stateDemografi.findMany.data]);
+
+  const filteredData = (stateDemografi.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.pekerjaan.toLowerCase().includes(keyword) ||
+      item.lakiLaki.toString().toLowerCase().includes(keyword) ||
+      item.perempuan.toString().toLowerCase().includes(keyword)
+    );
+  });
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -34,23 +93,71 @@ function ListDemografiPekerjaan() {
               <TableTh>Pekerjaan</TableTh>
               <TableTh>Jumlah Pekerja Laki - Laki</TableTh>
               <TableTh>Jumlah Pekerja Perempuan</TableTh>
-              <TableTh>Detail</TableTh>
-              </TableTr>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Karyawan</TableTd>
-              <TableTd>200</TableTd>
-              <TableTd>100</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/ekonomi/demografi-pekerjaan/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.pekerjaan}</TableTd>
+                <TableTd>{item.lakiLaki}</TableTd>
+                <TableTd>{item.perempuan}</TableTd>
+                <TableTd>
+                  <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    color='red'
+                    disabled={stateDemografi.delete.loading}
+                    onClick={() => {
+                      setSelectedId(item.id)
+                      setModalHapus(true)
+                    }}>
+                    <IconTrash size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </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}>Data Kelahiran & Kematian</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}>Data Kelahiran & Kematian</Title>
+            {mounted && chartData.length > 0 && (
+              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                <XAxis dataKey="pekerjaan" />
+                <YAxis />
+                <Tooltip />
+                <Legend />
+                <Bar dataKey="lakiLaki" fill="#f03e3e" name="Laki - Laki" />
+                <Bar dataKey="perempuan" fill="#ff922b" name="Perempuan" />
+              </BarChart>
+            )}
+          </Paper>
+        </Box>
+      )}
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus demografi pekerjaan ini?'
+      />
     </Box>
   );
 }