UI & API Menu Pendidikan, Submenu Data Pendidikan

src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx

@@ -0,0 +1,80 @@
+/* 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 { useProxy } from 'valtio/utils';
+import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
+
+function EditDataPendidikan() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateDPM = useProxy(dataPendidikan)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      stateDPM.findUnique.load(id).then(() => {
+        const data = stateDPM.findUnique.data
+        if (data) {
+          stateDPM.update.form = {
+            name: data.name || "",
+            jumlah: data.jumlah || "",
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    stateDPM.update.id = id;
+    await stateDPM.update.submit();
+    router.push('/admin/pendidikan/data-pendidikan')
+  }
+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 Data Pendidikan</Title>
+          <TextInput
+            label="Nama"
+            placeholder="masukkan nama"
+            value={stateDPM.update.form.name}
+            onChange={(val) => {
+              stateDPM.update.form.name = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah"
+            type="number"
+            placeholder="masukkan jumlah"
+            value={stateDPM.update.form.jumlah}
+            onChange={(val) => {
+              stateDPM.update.form.jumlah = val.currentTarget.value;
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditDataPendidikan;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/create/page.tsx

@@ -0,0 +1,81 @@
+/* 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, 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 dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
+
+function CreateDataPendidikan() {
+  const stateDPM = useProxy(dataPendidikan);
+  const [chartData, setChartData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateDPM.create.form = {
+      name: "",
+      jumlah: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stateDPM.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stateDPM.findUnique.load(idStr);
+      if (stateDPM.findUnique.data) {
+        setChartData([stateDPM.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/pendidikan/data-pendidikan");
+  }
+  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 Data Pendidikan</Title>
+          <Stack gap={"xs"}>
+            <TextInput
+              label="Nama"
+              type="text"
+              value={stateDPM.create.form.name}
+              placeholder="Masukkan nama"
+              onChange={(val) => {
+                stateDPM.create.form.name = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jumlah"
+              type="number"
+              value={stateDPM.create.form.jumlah}
+              placeholder="Masukkan jumlah"
+              onChange={(val) => {
+                stateDPM.create.form.jumlah = val.currentTarget.value;
+              }}
+            />
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                mt={10}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateDataPendidikan;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/page.tsx

@@ -1,74 +1,169 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Paper, Skeleton, Stack, 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 { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import dataPendidikan from '../../_state/pendidikan/data-pendidikan';
 
 function DataPendidikan() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-      title='Data Pendidikan'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
+        title='Data Pendidikan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListDataPendidikan/>
+      <ListDataPendidikan search={search} />
     </Box>
   );
 }
 
-function ListDataPendidikan() {
+function ListDataPendidikan({ search }: { search: string }) {
+  type DPMrafik = {
+    id: string;
+    name: string;
+    jumlah: number;
+  }
+  const stateDPM = useProxy(dataPendidikan);
+  const [chartData, setChartData] = useState<DPMrafik[]>([]);
+  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 router = useRouter();
+
+  const handleDelete = () => {
+    if (selectedId) {
+      stateDPM.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stateDPM.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true)
+    stateDPM.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    setMounted(true);
+    if (stateDPM.findMany.data) {
+      setChartData(stateDPM.findMany.data.map((item) => ({
+        id: item.id,
+        name: item.name,
+        jumlah: Number(item.jumlah)
+      })));
+    }
+  }, [stateDPM.findMany.data]);
+
+  const filteredData = (stateDPM.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.jumlah.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateDPM.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Data Pendidikan'
-          href='/admin/pendidikan/data-pendidikan/create'
+      <Stack gap={'xs'}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Data Pendidikan'
+            href='/admin/pendidikan/data-pendidikan/create'
           />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nomor</TableTh>
-                  <TableTh>Nama Lengkap</TableTh>
-                  <TableTh>Nomor Telepon</TableTh>
-                  <TableTh>Email</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Jumlah</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.jumlah}</TableTd>
                   <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>1</Text>
-                    </Box>
+                    <Button color='green' onClick={() => router.push(`/admin/pendidikan/data-pendidikan/${item.id}`)}>
+                      <IconEdit size={20} />
+                    </Button>
                   </TableTd>
                   <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Email</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/data-pendidikan/detail')}>
-                      <IconDeviceImacCog size={25} />
+                    <Button
+                      color='red'
+                      disabled={stateDPM.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id)
+                        setModalHapus(true)
+                      }}>
+                      <IconTrash size={20} />
                     </Button>
                   </TableTd>
                 </TableTr>
-              </TableTbody>
-            </Table>
+              ))}
+            </TableTbody>
+          </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}>Grafik Data Pendidikan</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Paper>
           </Box>
-        </Stack>
-      </Paper>
+        ) : (
+          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Title pb={10} order={4}>Grafik Data Pendidikan</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
+                  <XAxis dataKey="name" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="jumlah" fill={colors['blue-button']} name="Data Pendidikan" />
+                </BarChart>
+              )}
+            </Paper>
+          </Box>
+        )}
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik data pendidikan ini?'
+      />
     </Box>
-  )
+  );
 }
 
 export default DataPendidikan;