Sinkronisasi UI & API Admin - User Submenu Info Sekolah

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>