UI & API Menu Pendidikan, Submenu Info Sekolah

2025-07-28 14:17:42 +08:00
parent 5601e59922
commit b24bcd8019
48 changed files with 3387 additions and 75 deletions
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/_lib/layoutTabs.tsx
@@ -0,0 +1,72 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Jenjang Pendidikan",
+      value: "jenjangPendidikan",
+      href: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
+    },
+    {
+      label: "Lembaga",
+      value: "lembaga",
+      href: "/admin/pendidikan/info-sekolah-paud/lembaga"
+    },
+    {
+      label: "Siswa",
+      value: "siswa",
+      href: "/admin/pendidikan/info-sekolah-paud/siswa"
+    },
+    {
+      label: "Pengajar",
+      value: "pengajar",
+      href: "/admin/pendidikan/info-sekolah-paud/pengajar"
+    },
+  ];
+  const curentTab = tabs.find(tab => tab.href === pathname)
+  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value)
+    if (tab) {
+      router.push(tab.href)
+    }
+    setActiveTab(value)
+  }
+
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname)
+    if (match) {
+      setActiveTab(match.value)
+    }
+  }, [pathname])
+
+  return (
+    <Stack>
+      <Title order={3}>Info Sekolah & PAUD</Title>
+      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          {tabs.map((e, i) => (
+            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabs;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/[id]/page.tsx
@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditJenjangPendidikan() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
+  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
+
+  const [formData, setFormData] = useState({
+    nama: "",
+  });
+
+  useEffect(() => {
+    const loadJenjangPendidikan = async () => {
+      if (!id) return;
+
+      try {
+        const data = await stateJenjang.edit.load(id);
+
+        if (data) {
+          // pastikan id-nya masuk ke state edit
+          stateJenjang.edit.id = id;
+          setFormData({
+            nama: data.nama || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading jenjang pendidikan:", error);
+        toast.error("Gagal memuat data jenjang pendidikan");
+      }
+    };
+
+    loadJenjangPendidikan();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.nama.trim()) {
+        toast.error('Nama jenjang pendidikan tidak boleh kosong');
+        return;
+      }
+
+      stateJenjang.edit.form = {
+        nama: formData.nama.trim(),
+      };
+
+      // Safety check tambahan: pastikan ID tidak kosong
+      if (!stateJenjang.edit.id) {
+        stateJenjang.edit.id = id; // fallback
+      }
+
+      const success = await stateJenjang.edit.update();
+
+      if (success) {
+        router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan");
+      }
+    } catch (error) {
+      console.error("Error updating jenjang pendidikan:", error);
+      // toast akan ditampilkan dari fungsi update
+    }
+  };
+
+  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 Jenjang Pendidikan</Title>
+          <TextInput
+            value={formData.nama}
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
+            placeholder='Masukkan nama jenjang pendidikan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditJenjangPendidikan;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/create/page.tsx
@@ -0,0 +1,61 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'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';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
+
+function CreateJenjangPendidikan() {
+  const router = useRouter();
+  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan)
+
+  useEffect(() => {
+    stateJenjang.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateJenjang.create.form = {
+      nama: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateJenjang.create.create();
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan")
+  }
+
+  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 Jenjang Pendidikan</Title>
+            <TextInput
+              value={stateJenjang.create.form.nama}
+              onChange={(val) => {
+                stateJenjang.create.form.nama = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
+              placeholder='Masukkan nama jenjang pendidikan'
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateJenjangPendidikan;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/page.tsx
@@ -0,0 +1,112 @@
+'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 { IconEdit, IconSearch, IconX } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+
+
+function JenjangPendidikan() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Jenjang Pendidikan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListJenjangPendidikan search={search} />
+    </Box>
+  );
+}
+
+function ListJenjangPendidikan({ search }: { search: string }) {
+  const stateList = useProxy(infoSekolahPaud.jenjangPendidikan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateList.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  useShallowEffect(() => {
+    stateList.findMany.load()
+  }, [])
+
+  const filteredData = (stateList.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.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 Jenjang Pendidikan'
+          href='/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Jenjang Pendidikan</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>
+                  <Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button color="red" onClick={() => {
+                    setSelectedId(item.id)
+                    setModalHapus(true)
+                  }}>
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus jenjang pendidikan ini?'
+      />
+    </Box>
+  );
+}
+
+export default JenjangPendidikan;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/layout.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/layout.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import LayoutTabs from './_lib/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  );
+}
+
+export default Layout;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/lembaga/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/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-paud/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-paud/lembaga/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/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-paud/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-paud/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-paud/lembaga/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/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-paud/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-paud/lembaga/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/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-paud/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-paud/lembaga/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Lembaga;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx
@@ -1,69 +0,0 @@
-'use client'
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import React from 'react';
-import HeaderSearch from '../../_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import colors from '@/con/colors';
-import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
-
-function InfoSekolahPaud() {
-  return (
-    <Box>
-      <HeaderSearch
-      title='Info Sekolah & PAUD'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListInfoSekolahPaud/>
-    </Box>
-  );
-}
-
-function ListInfoSekolahPaud() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-          <JudulList
-          title='List Info Sekolah & PAUD'
-          href='/admin/pendidikan/info-sekolah-paud/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Sekolah PAUD</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Sekolah PAUD</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Image w={100} src={"/"}  alt="image" />
-                  </TableTd>
-                  <TableTd>Deskripsi</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/info-sekolah-paud/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default InfoSekolahPaud;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/[id]/edit/page.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+interface FormPengajar {
+  nama: string;
+  lembagaId: string;
+}
+
+function EditPengajar() {
+  const pengajarState = useProxy(infoSekolahPaud.pengajar)
+  const params = useParams()
+  const router = useRouter()
+
+  const [formData, setFormData] = useState<FormPengajar>({
+    nama: '',
+    lembagaId: ''
+  })
+
+  useEffect(() => {
+    const loadPengajar = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await pengajarState.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            lembagaId: data.lembagaId || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pengajar:", error);
+        toast.error("Gagal memuat data pengajar");
+      }
+    }
+    infoSekolahPaud.lembagaPendidikan.findMany.load()
+    loadPengajar();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      pengajarState.edit.form = {
+        ...pengajarState.edit.form,
+        nama: formData.nama.trim(),
+        lembagaId: formData.lembagaId.trim(),
+      }
+      await pengajarState.edit.update()
+      router.push("/admin/pendidikan/info-sekolah-paud/pengajar");
+    } catch (error) {
+      console.error("Error updating pengajar:", error);
+      toast.error("Terjadi kesalahan saat memperbarui pengajar");
+    }
+  }
+
+  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']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Pengajar</Title>
+          <TextInput
+            value={formData.nama}
+            label={<Text fz="sm" fw="bold">Nama Pengajar</Text>}
+            placeholder="masukkan nama siswa"
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+          />
+          <Select
+            label="Lembaga Pendidikan"
+            data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
+              value: k.id,
+              label: k.nama
+            })) ?? []}
+            value={formData.lembagaId}
+            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPengajar;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/[id]/page.tsx
@@ -0,0 +1,107 @@
+'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 DetailPengajar() {
+  const detailState = useProxy(infoSekolahPaud.pengajar)
+  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-paud/pengajar")
+    }
+  }
+
+  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 Pengajar</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"}>Lembaga</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</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-paud/pengajar/${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 pengajar ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPengajar;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/create/page.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+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';
+
+
+function CreatePengajar() {
+  const router = useRouter();
+  const stateCreate = useProxy(infoSekolahPaud.pengajar)
+
+  useEffect(() => {
+    stateCreate.findMany.load();
+    infoSekolahPaud.lembagaPendidikan.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      nama: "",
+      lembagaId: "",
+    };
+  };
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
+  }
+  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}>Create Pengajar</Title>
+          <TextInput
+            value={stateCreate.create.form.nama}
+            onChange={(val) => {
+              stateCreate.create.form.nama = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+          />
+          <Select
+            value={stateCreate.create.form.lembagaId}
+            onChange={(val) => {
+              stateCreate.create.form.lembagaId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
+            placeholder="Pilih lembaga"
+            data={
+              infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama,
+              })) || []
+            }
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePengajar;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/page.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, 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 Pengajar() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pengajar'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPengajar search={search} />
+    </Box>
+  );
+}
+
+function ListPengajar({ search }: { search: string }) {
+  const listState = useProxy(infoSekolahPaud.pengajar)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.lembaga.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Pengajar'
+            href='/admin/pendidikan/info-sekolah-paud/pengajar/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Pengajar</TableTh>
+                  <TableTh>Lembaga</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.nama}</TableTd>
+                    <TableTd>{item.lembaga.nama}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default Pengajar;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/[id]/edit/page.tsx
@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+interface FormSiswa {
+  nama: string;
+  lembagaId: string;
+}
+
+function EditSiswa() {
+  const siswaState = useProxy(infoSekolahPaud.siswa)
+  const params = useParams()
+  const router = useRouter()
+
+  const [formData, setFormData] = useState<FormSiswa>({
+    nama: '',
+    lembagaId: ''
+  })
+
+  useEffect(() => {
+    const loadSiswa = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await siswaState.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            lembagaId: data.lembagaId || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        toast.error("Gagal memuat data siswa");
+      }
+    }
+    infoSekolahPaud.lembagaPendidikan.findMany.load()
+    loadSiswa();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      siswaState.edit.form = {
+        ...siswaState.edit.form,
+        nama: formData.nama.trim(),
+        lembagaId: formData.lembagaId.trim(),
+      }
+      await siswaState.edit.update()
+      router.push("/admin/pendidikan/info-sekolah-paud/siswa");
+    } catch (error) {
+      console.error("Error updating siswa:", error);
+      toast.error("Terjadi kesalahan saat memperbarui siswa");
+    }
+  }
+
+  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']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Edit Siswa</Title>
+          <TextInput
+            value={formData.nama}
+            label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
+            placeholder="masukkan nama siswa"
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+          />
+          <Select
+            label="Lembaga Pendidikan"
+            data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
+              value: k.id,
+              label: k.nama
+            })) ?? []}
+            value={formData.lembagaId}
+            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditSiswa;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/[id]/page.tsx
@@ -0,0 +1,107 @@
+'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 DetailSiswa() {
+  const detailState = useProxy(infoSekolahPaud.siswa)
+  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-paud/siswa")
+    }
+  }
+
+  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 Siswa</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"}>Lembaga</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</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-paud/siswa/${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 siswa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailSiswa;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/create/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/create/page.tsx
@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+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';
+
+
+function CreateSiswa() {
+  const router = useRouter();
+  const stateCreate = useProxy(infoSekolahPaud.siswa)
+
+  useEffect(() => {
+    stateCreate.findMany.load();
+    infoSekolahPaud.lembagaPendidikan.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      nama: "",
+      lembagaId: "",
+    };
+  };
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/siswa")
+  }
+  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}>Create Siswa</Title>
+          <TextInput
+            value={stateCreate.create.form.nama}
+            onChange={(val) => {
+              stateCreate.create.form.nama = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+          />
+          <Select
+            value={stateCreate.create.form.lembagaId}
+            onChange={(val) => {
+              stateCreate.create.form.lembagaId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
+            placeholder="Pilih lembaga"
+            data={
+              infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama,
+              })) || []
+            }
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateSiswa;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/page.tsx
+++ b/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/page.tsx
@@ -0,0 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, 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 Siswa() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Siswa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListSiswa search={search} />
+    </Box>
+  );
+}
+
+function ListSiswa({ search }: { search: string }) {
+  const listState = useProxy(infoSekolahPaud.siswa)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.lembaga.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Siswa'
+            href='/admin/pendidikan/info-sekolah-paud/siswa/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Siswa</TableTh>
+                  <TableTh>Lembaga</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.nama}</TableTd>
+                    <TableTd>{item.lembaga.nama}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default Siswa;