Fix UI User Menu Ekonomi & Fix UI Submenu Profile, Desa Anti Korupsi

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

@@ -1,67 +1,97 @@
+'use client'
+import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { IconMapPin, IconCalendarTime, IconBook2 } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
+  const stateTujuanProgram = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
+  const stateLokasiDanJadwal = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
+  const stateFasilitas = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
+
+  useShallowEffect(() => {
+    stateTujuanProgram.findById.load('edit');
+    stateLokasiDanJadwal.findById.load('edit');
+    stateFasilitas.findById.load('edit');
+  }, []);
+
+  if (!stateTujuanProgram.findById.data || !stateLokasiDanJadwal.findById.data || !stateFasilitas.findById.data)
+    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"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} pb={50}>
-        <Box>
-          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
-            Bimbingan Belajar Desa
+      <Box px={{ base: 'md', md: 120 }} pb={80}>
+        <Box mb="lg">
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} fz={{ base: 28, md: 38 }}>
+            Program Bimbingan Belajar Desa
           </Title>
-          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
-          Bimbingan Belajar Desa merupakan program unggulan untuk membantu siswa-siswi di Desa Darmasaba dalam memahami pelajaran sekolah, meningkatkan prestasi akademik, serta membangun semangat belajar yang tinggi sejak dini.
+          <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 }}>
+            Program unggulan untuk mendukung siswa Desa Darmasaba memahami pelajaran sekolah, meningkatkan prestasi akademik, dan menumbuhkan semangat belajar sejak dini.
           </Text>
         </Box>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3
-          }}
-        >
-          <Box>
-            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Tujuan Program
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Memberikan pendampingan belajar secara gratis bagi siswa SD hingga SMP</ListItem>
-                <ListItem fz={'h4'}>Membantu siswa dalam menghadapi ujian dan menyelesaikan tugas sekolah</ListItem>
-                <ListItem fz={'h4'}>Menumbuhkan kepercayaan diri dan kemandirian dalam belajar</ListItem>
-                <ListItem fz={'h4'}>Meningkatkan kesetaraan pendidikan untuk seluruh anak desa</ListItem>
-              </List>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Lokasi dan Jadwal
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Lokasi: Balai Banjar / Balai Desa Darmasaba / Perpustakaan Desa</ListItem>
-                <ListItem fz={'h4'}>Jadwal: Setiap hari Senin, Rabu, dan Jumat pukul 16.00–18.00 WITA</ListItem>
-                <ListItem fz={'h4'}>Peserta: Terbuka untuk semua siswa SD–SMP di wilayah desa</ListItem>
-              </List>
-            </Paper>
-          </Box> 
-          <Box>
-            <Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-              Fasilitas yang Disediakan
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Buku-buku pelajaran dan alat tulis</ListItem>
-                <ListItem fz={'h4'}>Ruang belajar nyaman dan kondusif</ListItem>
-                <ListItem fz={'h4'}>Modul latihan dan pendampingan tugas</ListItem>
-                <ListItem fz={'h4'}>Minuman ringan dan dukungan motivasi belajar</ListItem>
-              </List>
-            </Paper>
-          </Box> 
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl">
+          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
+            <Stack gap="sm">
+              <Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  Tujuan Program
+                </Badge>
+                <Tooltip label="Gambaran manfaat utama program" position="top-start" withArrow>
+                  <Box>
+                    <IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
+          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
+            <Stack gap="sm">
+              <Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  Lokasi & Jadwal
+                </Badge>
+                <Tooltip label="Tempat dan waktu pelaksanaan" position="top-start" withArrow>
+                  <Box>
+                    <IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
+          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
+            <Stack gap="sm">
+              <Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  Fasilitas
+                </Badge>
+                <Tooltip label="Sarana yang disediakan untuk peserta" position="top-start" withArrow>
+                  <Box>
+                    <IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
         </SimpleGrid>
       </Box>
     </Stack>