Sinkronisasi UI & API Admin - User Submenu Info Sekolah

2025-08-29 15:20:46 +08:00
parent b6d6583e77
commit 9f9a0fb451
59 changed files with 1848 additions and 521 deletions
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx
@@ -0,0 +1,89 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { IconArrowBack } from '@tabler/icons-react';
+
+
+export default function EditLembaga() {
+  const router = useRouter();
+  const { id } = useParams<{ id: string }>();
+  const state = useProxy(infoSekolahPaud.lembagaPendidikan);
+  const jenjangPendidikanList = infoSekolahPaud.jenjangPendidikan.findMany.data;
+
+  const [form, setForm] = useState({
+    nama: '',
+    jenjangId: '',
+  });
+
+  useEffect(() => {
+    infoSekolahPaud.jenjangPendidikan.findMany.load();
+
+    if (id) {
+      state.edit.load(id).then(data => {
+        if (data) {
+          setForm({
+            nama: data.nama,
+            jenjangId: data.jenjangId,
+          });
+        }
+      });
+    }
+  }, [id]);
+
+  const handleSubmit = async () => {
+    if (!form.nama || !form.jenjangId) {
+      toast.warn("Nama dan jenjang pendidikan harus diisi");
+      return;
+    }
+
+    state.edit.id = id;
+    state.edit.form = form;
+
+    const result = await state.edit.update();
+
+    if (result) {
+      toast.success("Data berhasil diperbarui");
+      router.push('/admin/pendidikan/info-sekolah/lembaga');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack>
+          <Title order={3}>Edit Lembaga</Title>
+          <TextInput
+            label="Nama Lembaga"
+            placeholder="Masukkan nama lembaga"
+            value={form.nama}
+            onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
+          />
+          <Select
+            label="Jenjang Pendidikan"
+            placeholder="Pilih jenjang pendidikan"
+            searchable
+            data={jenjangPendidikanList?.map(p => ({
+              value: p.id,
+              label: p.nama,
+            })) || []}
+            value={form.jenjangId}
+            onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
+          />
+          <Button onClick={handleSubmit} color="blue">Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx
@@ -0,0 +1,115 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import colors from '@/con/colors';
+
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+
+function DetailLembaga() {
+  const detailState = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    detailState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      detailState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/pendidikan/info-sekolah/lembaga")
+    }
+  }
+
+  if (!detailState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Lembaga</Text>
+          {detailState.findUnique.data ? (
+            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jenjang Pendidikan</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.jenjangPendidikan?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah Siswa</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.siswa?.length}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah Pengajar</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.pengajar?.length}</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        setSelectedId(detailState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={detailState.delete.loading || !detailState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        router.push(`/admin/pendidikan/info-sekolah/lembaga/${detailState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!detailState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus lembaga ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailLembaga;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx
@@ -0,0 +1,76 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
+
+function CreateLembaga() {
+  const router = useRouter();
+  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan)
+
+  useEffect(() => {
+    stateLembaga.findMany.load();
+    infoSekolahPaud.jenjangPendidikan.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateLembaga.create.form = {
+      nama: "",
+      jenjangId: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateLembaga.create.create();
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah/lembaga")
+  }
+
+  return (
+    <Box>
+      <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}>Create Lembaga</Title>
+            <TextInput
+              value={stateLembaga.create.form.nama}
+              onChange={(val) => {
+                stateLembaga.create.form.nama = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Lembaga</Text>}
+              placeholder='Masukkan nama lembaga'
+            />
+            <Select
+              label="Jenjang Pendidikan"
+              placeholder="Pilih jenjang pendidikan"
+              searchable
+              data={infoSekolahPaud.jenjangPendidikan.findMany.data?.map(j => ({
+                value: j.id,
+                label: j.nama,
+              })) || []}
+              value={stateLembaga.create.form.jenjangId}
+              onChange={(val) => {
+                stateLembaga.create.form.jenjangId = val || '';
+              }}
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateLembaga;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx
@@ -0,0 +1,89 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+
+
+function Lembaga() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Lembaga'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListLembaga search={search} />
+    </Box>
+  );
+}
+
+function ListLembaga({ search }: { search: string }) {
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const router = useRouter()
+
+
+  useShallowEffect(() => {
+    stateList.findMany.load()
+  }, [])
+
+  const filteredData = (stateList.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.jenjangPendidikan?.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateList.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Lembaga'
+          href='/admin/pendidikan/info-sekolah/lembaga/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Lembaga</TableTh>
+              <TableTh>Jenjang Pendidikan</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>{item.jenjangPendidikan?.nama}</TableTd>
+                <TableTd>
+                  <Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Lembaga;