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/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx
+++ b/src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx
@@ -0,0 +1,100 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data lembaga pendidikan</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="60%">Nama Lembaga</TableTh>
+                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd fw={500}>{item.nama}</TableTd>
+                  <TableTd>{item.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;