Sinkronisasi UI & API Admin - User Submenu Info Sekolah

src/app/darmasaba/(pages)/lingkungan/gotong-royong/_lib/layoutTabs.tsx

@@ -87,9 +87,9 @@ function LayoutTabsGotongRoyong({
       href: "/darmasaba/lingkungan/gotong-royong/kebersihan"
     },
     {
-      label: "Infrasturktur",
-      value: "infrasturktur",
-      href: "/darmasaba/lingkungan/gotong-royong/infrasturktur"
+      label: "Infrastruktur",
+      value: "infrastruktur",
+      href: "/darmasaba/lingkungan/gotong-royong/infrastruktur"
     },
     {
       label: "Sosial",

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -81,8 +81,9 @@ function Page() {
               <Box key={k} px={28}>
                 <Paper p={20} bg={colors['white-trans-1']}>
                   <Flex gap={20} align={'center'}>
+                    <Text>{k + 1}</Text>
                     <Box style={{ alignContent: 'center', alignItems: 'center' }}>
-                      {k + 1} {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
+                      {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
                     </Box>
                     <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
                   </Flex>

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-import { IconSearch, IconLeaf, IconTrophy, IconTent, IconChartLine, IconRecycle, IconTruckFilled, IconScale, IconClipboardTextFilled, IconTrashFilled, IconHomeEco, IconChristmasTreeFilled, IconTrendingUp, IconShieldFilled } from '@tabler/icons-react';
-import BackButton from '../../desa/layanan/_com/BackButto';
 import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
-import { useProxy } from 'valtio/utils';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
-import { useState } from 'react';
-import React from 'react';
+import { IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent, IconTrashFilled, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
   const state = useProxy(programPenghijauanState);
@@ -17,7 +16,7 @@ function Page() {
   const { data, load, page, totalPages, loading } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, debouncedSearch);
+    load(page, 4, debouncedSearch);
   }, [page, debouncedSearch]);
 
   const iconMap: Record<string, any> = {
@@ -110,9 +109,6 @@ function Page() {
                 <Text fz="sm" ta="center" c="dimmed">
                   {v.judul}
                 </Text>
-                <Button variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="sm" radius="xl" mt="sm">
-                  Pelajari Lebih Lanjut
-                </Button>
               </Stack>
             </Paper>
           ))}

src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -42,7 +42,7 @@ function Page() {
             Program Bimbingan Belajar Desa
           </Title>
           <Divider size="sm" my="md" mx="auto" w="60%" color={colors['blue-button']} />
-          <Text ta="center" fz="lg" c="dimmed" px={{ base: 'sm', md: 120 }}>
+          <Text ta="center" fz="lg" c="black" px={{ base: 'sm', md: 120 }}>
             Program unggulan untuk mendukung siswa Desa Darmasaba memahami pelajaran sekolah, meningkatkan prestasi akademik, dan menumbuhkan semangat belajar sejak dini.
           </Text>
         </Box>

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/content.tsx

@@ -239,9 +239,9 @@ export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan:
                           paddingRight: 20,
                         }}
                         onClick={() => {
-                          if (v.nama === "Lembaga Pendidikan") router.push(`/darmasaba/pendidikan/info-sekolah-paud/${jenjangPendidikan}/lembaga`);
-                          if (v.nama === "Siswa Terdaftar") router.push(`/darmasaba/pendidikan/info-sekolah-paud/${jenjangPendidikan}/siswa`);
-                          if (v.nama === "Tenaga Pengajar") router.push(`/darmasaba/pendidikan/info-sekolah-paud/${jenjangPendidikan}/pengajar`);
+                          if (v.nama === "Lembaga Pendidikan") router.push(`/darmasaba/pendidikan/info-sekolah/${jenjangPendidikan}/lembaga`);
+                          if (v.nama === "Siswa Terdaftar") router.push(`/darmasaba/pendidikan/info-sekolah/${jenjangPendidikan}/siswa`);
+                          if (v.nama === "Tenaga Pengajar") router.push(`/darmasaba/pendidikan/info-sekolah/${jenjangPendidikan}/pengajar`);
                         }}        
                       >
                         Lihat Detail

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx

@@ -74,8 +74,8 @@ function Page({ params }: PageProps) {
           >
             <TableThead>
               <TableTr>
-                <TableTh w="60%">Nama Lembaga</TableTh>
-                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+                <TableTh w="50%">Nama Lembaga</TableTh>
+                <TableTh w="50%">Jenjang Pendidikan</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/pengajar/page.tsx

@@ -75,7 +75,7 @@ function Page({ params }: PageProps) {
             <TableThead>
               <TableTr>
                 <TableTh w="30%">Nama Pengajar</TableTh>
-                <TableTh w="60%">Nama Lembaga</TableTh>
+                <TableTh w="30%">Nama Lembaga</TableTh>
                 <TableTh w="40%">Jenjang Pendidikan</TableTh>
               </TableTr>
             </TableThead>

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/siswa/page.tsx

@@ -75,7 +75,7 @@ function Page({ params }: PageProps) {
             <TableThead>
               <TableTr>
                 <TableTh w="30%">Nama Siswa</TableTh>
-                <TableTh w="60%">Nama Lembaga</TableTh>
+                <TableTh w="30%">Nama Lembaga</TableTh>
                 <TableTh w="40%">Jenjang Pendidikan</TableTh>
               </TableTr>
             </TableThead>

src/app/darmasaba/(pages)/pendidikan/info-sekolah/_lib/layoutTabs.tsx

@@ -67,10 +67,10 @@ export default function LayoutSekolah({
     // arahkan langsung ke route jenjang pendidikan
     if (k.toLowerCase() === 'semua') {
       setJenjangPendidikanAktif(k);
-      router.push(`/darmasaba/pendidikan/info-sekolah-paud/semua`);
+      router.push(`/darmasaba/pendidikan/info-sekolah/semua`);
     } else {
       setJenjangPendidikanAktif(k);
-      router.push(`/darmasaba/pendidikan/info-sekolah-paud/${encodeURIComponent(k.toLowerCase())}`);
+      router.push(`/darmasaba/pendidikan/info-sekolah/${encodeURIComponent(k.toLowerCase())}`);
     }
   };
   

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/page.tsx

@@ -250,9 +250,9 @@ export default function SekolahPage() {
                           paddingRight: 20,
                         }}
                         onClick={() => {
-                          if (v.nama === "Lembaga Pendidikan") router.push(`/darmasaba/pendidikan/info-sekolah-paud/semua/lembaga`);
-                          if (v.nama === "Siswa Terdaftar") router.push(`/darmasaba/pendidikan/info-sekolah-paud/semua/siswa`);
-                          if (v.nama === "Tenaga Pengajar") router.push(`/darmasaba/pendidikan/info-sekolah-paud/semua/pengajar`);
+                          if (v.nama === "Lembaga Pendidikan") router.push(`/darmasaba/pendidikan/info-sekolah/semua/lembaga`);
+                          if (v.nama === "Siswa Terdaftar") router.push(`/darmasaba/pendidikan/info-sekolah/semua/siswa`);
+                          if (v.nama === "Tenaga Pengajar") router.push(`/darmasaba/pendidikan/info-sekolah/semua/pengajar`);
                         }}                        
                       >
                         Lihat Detail

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/page.tsx

@@ -1,35 +1,34 @@
 'use client'
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import { IconSearch, IconUser } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import Link from 'next/link';
-
-
-const dataSekolah = [
-  {
-    id: 1,
-    gambar: '/api/img/buku-1.png',
-    judul: 'Angkasa dan 56 Hari',
-    deskripsi: 'Angkasa dan 56 hari mengisahkan tentang sebuah perjuangan perihal asa yang belum usai. Tentang cinta pertama yang secara tiba-tiba menghilang dari kehidupan.'
-  },
-  {
-    id: 2,
-    gambar: '/api/img/buku-2.png',
-    judul: 'Sayuran Organik',
-    deskripsi: 'Buku ini membahas cara menanam sayuran secara organik, jenis-jenis sayuran organik, dan cara mengatasi hama dan penyakit. '
-  },
-  {
-    id: 3,
-    gambar: '/api/img/buku-3.png',
-    judul: 'Bali Tempo Dulu',
-    deskripsi: 'Buku Bali Tempo Doeloe oleh Adrian Vickers berisi berbagai catatan perjalanan yang menggambarkan kehidupan sosial budaya Bali di masa lampau.'
-  },
-]
-
+import { useProxy } from 'valtio/utils';
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function Page() {
+  const state = useProxy(perpustakaanDigitalState)
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  useShallowEffect(() => {
+    state.dataPerpustakaan.findMany.load()
+  }, [])
+
+  if (!state.dataPerpustakaan.findMany.load)
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }} pb={50}>
+          <Skeleton h={60} radius="xl" />
+          <Skeleton h={200} mt="lg" radius="md" />
+        </Box>
+      </Stack>
+    )
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -80,22 +79,54 @@ function Page() {
             base: 1,
             md: 3
           }}
+          style={{
+            alignItems: 'stretch'
+          }}
         >
-          {dataSekolah.map((v, k) => {
+          {state.dataPerpustakaan.findMany.data.map((v, k) => {
             return (
-              <Box key={k}>
+              <Box key={k} style={{ height: '100%' }}>
                 <motion.div
                   whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.8 }}
                   style={{ width: '100%', height: '100%' }}
                 >
-                  <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                    <Stack>
+                  <Paper 
+                    p={"xl"} 
+                    bg={colors['white-trans-1']} 
+                    w={{ base: "100%", md: "100%" }}
+                    style={{
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column'
+                    }}
+                  >
+                    <Stack style={{ flex: 1 }}>
                       <Center>
-                        <Image src={v.gambar} alt='' w={{ base: 390, md: 1000 }}/>
+                        <Image src={v.image.link} alt='' w={{ base: 390, md: 1000 }} />
                       </Center>
                       <Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.judul}</Text>
-                      <Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.deskripsi}</Text>
+                      <Spoiler
+                        showLabel={
+                          <Text fw="bold" fz="sm" c={colors['blue-button']}>
+                            Show more
+                          </Text>
+                        }
+                        hideLabel={
+                          <Text fw="bold" fz="sm" c={colors['blue-button']}>
+                            Hide details
+                          </Text>
+                        }
+                        expanded={expandedId === v.id}
+                        onExpandedChange={(isExpanded) => 
+                          setExpandedId(isExpanded ? v.id : null)
+                        }
+                      >
+                        <Text
+                          ta="justify"
+                          fz="sm"
+                          dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                        />
+                      </Spoiler>
                     </Stack>
                   </Paper>
                 </motion.div>