Merge pull request 'nico/27-okt-25' (#1) from nico/27-okt-25 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/desa-darmasaba/pulls/1

package.json

@@ -26,7 +26,6 @@
     "@mantine/dropzone": "^8.1.1",
     "@mantine/form": "^8.1.0",
     "@mantine/hooks": "^7.17.4",
-    "@mantine/modals": "^8.3.6",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",
     "@prisma/client": "^6.3.1",
@@ -56,9 +55,8 @@
     "dayjs": "^1.11.13",
     "dotenv": "^17.2.3",
     "elysia": "^1.3.5",
-    "embla-carousel": "^8.6.0",
-    "embla-carousel-autoplay": "^8.6.0",
-    "embla-carousel-react": "^8.6.0",
+    "embla-carousel-autoplay": "^8.5.2",
+    "embla-carousel-react": "^7.1.0",
     "extract-zip": "^2.0.1",
     "form-data": "^4.0.2",
     "framer-motion": "^12.23.5",
@@ -82,7 +80,6 @@
     "prisma": "^6.3.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-exif-orientation-img": "^0.1.5",
     "react-international-phone": "^4.6.0",
     "react-leaflet": "^5.0.0",
     "react-simple-toasts": "^6.1.0",

src/app/admin/(dashboard)/_state/inovasi/program-kreatif.ts

@@ -6,9 +6,9 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-  name: z.string().min(5, "Nama minimal 5 karakter"),
-  deskripsi: z.string().min(5, "Deskripsi minimal 5 karakter"),
-  slug: z.string().min(5, "Deskripsi singkat minimal 5 karakter"),
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
   icon: z.string().min(1, "Icon minimal 1 karakter"),
 });
 
@@ -29,33 +29,26 @@ const programKreatifState = proxy({
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
           .join("\n")}] required`;
-        toast.error(err);
-        return false; // ⬅️ ini penting
+        return toast.error(err);
       }
-    
+
       try {
         programKreatifState.create.loading = true;
         const res = await ApiFetch.api.inovasi.programkreatif["create"].post(
           programKreatifState.create.form
         );
-    
         if (res.status === 200) {
           programKreatifState.findMany.load();
-          toast.success("success create");
-          return true;
+          return toast.success("success create");
         }
-    
-        toast.error("failed create");
-        return false;
+        console.log(res);
+        return toast.error("failed create");
       } catch (error) {
-        console.error((error as Error).message);
-        toast.error("Terjadi kesalahan saat create");
-        return false;
+        console.log((error as Error).message);
       } finally {
         programKreatifState.create.loading = false;
       }
-    }
-    
+    },
   },
   findMany: {
     data: null as any[] | null,

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

@@ -5,6 +5,7 @@ import {
   Box,
   Button,
   Group,
+  Image,
   Paper,
   Stack,
   Text,
@@ -20,7 +21,6 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import desaDigitalState from '../../../_state/inovasi/desa-digital';
 import { Dropzone } from '@mantine/dropzone';
-import ExifOrientationImg from 'react-exif-orientation-img';
 
 export default function CreateDesaDigital() {
   const stateDesaDigital = useProxy(desaDigitalState);
@@ -173,16 +173,17 @@ export default function CreateDesaDigital() {
                   overflow: 'hidden',
                 }}
               >
-                <ExifOrientationImg
-      src={previewImage}
-      alt="Preview"
-      style={{
-        maxHeight: 220,
-        objectFit: 'cover',
-        border: '1px solid #e0e0e0',
-        borderRadius: 12,
-      }}
-    />
+                <Image
+                  src={previewImage}
+                  alt="Preview"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: 'cover',
+                    border: '1px solid #e0e0e0',
+                  }}
+                  loading="lazy"
+                />
               </Box>
             )}
           </Box>

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/page.tsx

@@ -54,8 +54,8 @@ function DetailInfoTeknologiTepatGuna() {
       {/* Card Utama */}
       <Paper
         withBorder
-        w={{ base: "100%", md: "50%" }}
-        bg={colors['white-1']}
+        w={{ base: "100%", md: "70%", lg: "60%" }}
+        bg="#ECEEF8"
         p="lg"
         radius="md"
         shadow="sm"
@@ -65,7 +65,7 @@ function DetailInfoTeknologiTepatGuna() {
             Detail Info Teknologi Tepat Guna
           </Text>
 
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+          <Paper bg={colors['BG-trans']} p="md" radius="md" shadow="xs">
             <Stack gap="sm">
               <Box>
                 <Text fz="lg" fw="bold">Judul</Text>

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
-import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
 import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 import colors from '@/con/colors';
 import {
@@ -12,7 +11,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -20,6 +20,7 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import SelectIconProgramEdit from '../../../../_com/selectIconEdit';
+import { IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
 
 interface FormProgramKreatif {
   name: string;
@@ -40,15 +41,6 @@ function EditProgramKreatifDesa() {
     icon: '',
   });
 
-  const [originalData, setOriginalData] = useState<FormProgramKreatif>({
-    name: '',
-    deskripsi: '',
-    slug: '',
-    icon: '',
-  });
-
-  const [isDataChanged, setIsDataChanged] = useState(false);
-
   // Load data hanya sekali berdasarkan params.id
   useEffect(() => {
     const loadProgramKreatif = async () => {
@@ -59,14 +51,12 @@ function EditProgramKreatifDesa() {
         const data = await stateProgramKreatif.update.load(id);
         if (data) {
           stateProgramKreatif.update.id = id;
-          const loadedData = {
+          setFormData({
             name: data.name || '',
             slug: data.slug || '',
             deskripsi: data.deskripsi || '',
             icon: data.icon || '',
-          };
-          setFormData(loadedData);
-          setOriginalData(loadedData);
+          });
         }
       } catch (error) {
         console.error('Error loading program kreatif:', error);
@@ -77,49 +67,12 @@ function EditProgramKreatifDesa() {
     loadProgramKreatif();
   }, [params?.id]);
 
-  // Deteksi perubahan data
-  useEffect(() => {
-    const hasChanged = 
-      formData.name !== originalData.name ||
-      formData.slug !== originalData.slug ||
-      formData.deskripsi !== originalData.deskripsi ||
-      formData.icon !== originalData.icon;
-    
-    setIsDataChanged(hasChanged);
-  }, [formData, originalData]);
-
-  // Prevent browser back/refresh jika ada perubahan
-  useEffect(() => {
-    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
-      if (isDataChanged) {
-        e.preventDefault();
-        e.returnValue = '';
-      }
-    };
-
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
-  }, [isDataChanged]);
-
   const handleChange =
     (field: keyof FormProgramKreatif) =>
     (value: string) => {
       setFormData((prev) => ({ ...prev, [field]: value }));
     };
 
-  const handleBackClick = () => {
-    if (isDataChanged) {
-      const confirmed = window.confirm(
-        'Anda memiliki perubahan yang belum disimpan. Apakah Anda yakin ingin keluar dari halaman ini? Semua perubahan akan hilang.'
-      );
-      if (confirmed) {
-        router.back();
-      }
-    } else {
-      router.back();
-    }
-  };
-
   const handleSubmit = async () => {
     try {
       stateProgramKreatif.update.form = {
@@ -129,11 +82,6 @@ function EditProgramKreatifDesa() {
         icon: formData.icon.trim(),
       };
       await stateProgramKreatif.update.submit();
-      
-      // Reset isDataChanged agar tidak muncul konfirmasi setelah save
-      setOriginalData(formData);
-      setIsDataChanged(false);
-      
       router.push('/admin/inovasi/program-kreatif-desa');
     } catch (error) {
       console.error('Error updating program kreatif:', error);
@@ -144,14 +92,16 @@ function EditProgramKreatifDesa() {
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
-        <Button
-          variant="subtle"
-          onClick={handleBackClick}
-          p="xs"
-          radius="md"
-        >
-          <IconArrowBack color={colors['blue-button']} size={24} />
-        </Button>
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
         <Title order={4} ml="sm" c="dark">
           Edit Program Kreatif Desa
         </Title>
@@ -222,4 +172,4 @@ function EditProgramKreatifDesa() {
   );
 }
 
-export default EditProgramKreatifDesa;
+export default EditProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx

@@ -32,14 +32,10 @@ function CreateProgramKreatifDesa() {
   };
 
   const handleSubmit = async () => {
-    const success = await stateCreate.create.create();
-  
-    if (success) {
-      resetForm();
-      router.push("/admin/inovasi/program-kreatif-desa");
-    }
+    await stateCreate.create.create();
+    resetForm();
+    router.push("/admin/inovasi/program-kreatif-desa");
   };
-  
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">

src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
@@ -53,14 +52,15 @@ function EditLaporanPublik() {
       try {
         const data = await stateLaporan.edit.load(id);
         if (data) {
-          setFormData({
-            judul: data.judul ?? '',
-            lokasi: data.lokasi ?? '',
-            tanggalWaktu: data.tanggalWaktu ?? '',
-            status: (data.status as Status) ?? 'Proses',
-            penanganan: data.penanganan?.[0]?.deskripsi ?? '',
-            kronologi: data.kronologi ?? '',
-          });
+          setFormData((prev) => ({
+            ...prev,
+            judul: data.judul ?? prev.judul,
+            lokasi: data.lokasi ?? prev.lokasi,
+            tanggalWaktu: data.tanggalWaktu ?? prev.tanggalWaktu,
+            status: (data.status as Status) ?? prev.status,
+            penanganan: data.penanganan?.[0]?.deskripsi ?? prev.penanganan,
+            kronologi: data.kronologi ?? prev.kronologi,
+          }));
         }
       } catch (error) {
         console.error("Error loading laporan publik:", error);
@@ -69,8 +69,7 @@ function EditLaporanPublik() {
     };
   
     loadLaporanPublik();
-  }, [params?.id]);
-  
+  }, [params?.id, stateLaporan.edit]);
   
 
   const handleChange = (field: string, value: string | Status) => {

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/bentuk-konservasi-berdasarkan-adat/page.tsx

@@ -1,4 +1,5 @@
 'use client'
+import colors from '@/con/colors';
 import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
@@ -25,10 +26,10 @@ function Page() {
   }
 
   return (
-    <Box p="md">
-      <Paper withBorder p={{ base: 'md', md: 'lg' }} radius="md">
+    <Box p={{ base: 'md', md: 'xl' }}>
+      <Paper withBorder radius="md" p={{ base: 'md', md: 'lg' }} bg={colors['white-1']}>
         {/* Header */}
-        <Grid align="center" mb={{ base: 'md', md: 'lg' }}>
+        <Grid align="center" mb="lg">
           <GridCol span={{ base: 12, md: 11 }}>
             <Title order={3} fw={600} c="dark">
               Preview Bentuk Konservasi Berdasarkan Adat
@@ -54,8 +55,8 @@ function Page() {
 
         {/* Konten */}
         <Stack gap="md">
-          <Paper p={{ base: 'md', md: 'xl' }} bg="#ECEEF8" radius="md">
-            <Box mb="md" px={{ base: 0, md: 20 }}>
+          <Paper radius="md" p={{ base: 'md', md: 'xl' }} bg={colors['BG-trans']} shadow="sm">
+            <Box mb="md">
               <Text
                 fz={{ base: 'xl', md: '2xl' }}
                 fw={600}
@@ -66,7 +67,7 @@ function Page() {
                 style={{ wordBreak: "break-word", whiteSpace: "normal" }}
               />
             </Box>
-            <Box px={{ base: 0, md: 20 }}>
+            <Box>
               <Text
                 fz={{ base: 'md', md: 'lg' }}
                 ta="justify"

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/_lib/layoutTabs.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import colors from '@/con/colors';
-import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import { IconRecycle, IconTrash } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconTrash, IconRecycle } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.ReactNode }) {
   const router = useRouter();
@@ -16,12 +16,14 @@ function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.R
       value: "listpengelolaansampahbanksampah",
       href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah",
       icon: <IconTrash size={18} stroke={1.8} />,
+      tooltip: "Kelola data pengelolaan sampah bank sampah",
     },
     {
       label: "Keterangan Bank Sampah Terdekat",
       value: "keteranganbanksampahterdekat",
       href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat",
       icon: <IconRecycle size={18} stroke={1.8} />,
+      tooltip: "Kelola data bank sampah terdekat",
     },
   ];
 
@@ -72,8 +74,14 @@ function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.R
             }}
           >
             {tabs.map((tab, i) => (
+              <Tooltip
+                key={i}
+                label={tab.tooltip}
+                position="bottom"
+                withArrow
+                transitionProps={{ transition: 'pop', duration: 200 }}
+              >
                 <TabsTab
-                  key={i}
                   value={tab.value}
                   leftSection={tab.icon}
                   style={{
@@ -84,6 +92,7 @@ function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.R
                 >
                   {tab.label}
                 </TabsTab>
+              </Tooltip>
             ))}
           </TabsList>
         </ScrollArea>

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/page.tsx

@@ -65,32 +65,26 @@ function ListDataPerpustakaan({ search }: { search: string }) {
           <Table striped highlightOnHover withRowBorders style={{ minWidth: '700px' }}>
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '5%' }}>No</TableTh>
-                <TableTh style={{ width: '25%' }}>Judul</TableTh>
-                <TableTh style={{ width: '25%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '23%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '22%' }}>Detail</TableTh>
+                <TableTh>No</TableTh>
+                <TableTh>Judul</TableTh>
+                <TableTh>Kategori</TableTh>
+                <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '5%' }}>
+                    <TableTd>
                       <Text truncate fz="sm">{index + 1}</Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
                       <Text truncate fz="sm">{item.judul}</Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
                       <Text truncate fz="sm">{item.kategori.name}</Text>
                     </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Box w={150}>
-                        <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} lineClamp={1} truncate fz="sm"/>
-                      </Box>
-                    </TableTd>
-                    <TableTd style={{ width: '20%' }}>
+                    <TableTd>
                       <Button
                         variant="light"
                         color="blue"

src/app/darmasaba/(pages)/desa/potensi/[id]/page.tsx

@@ -67,26 +67,16 @@ function Page() {
             <Text ta="center" fw={600} fz={{ base: "md", md: "lg" }} c="dimmed">
               Informasi & Pelayanan Potensi Desa Digital
             </Text>
-            {/* ✅ Bagian gambar dibuat konsisten tanpa CSS manual */}
-            <Box
+            <Image
+              src={state.findUnique.data?.image?.link || ''}
+              alt={state.findUnique.data?.name || 'Potensi Desa'}
+              radius="lg"
+              fit="cover"
               w="100%"
               h={{ base: 220, md: 400 }}
-              style={{
-                overflow: 'hidden',
-                borderRadius: 'var(--mantine-radius-lg)',
-              }}
-            >
-              <Image
-                src={state.findUnique.data?.image?.link || ''}
-                alt={state.findUnique.data?.name || 'Potensi Desa'}
-                fit="cover"
-                w="100%"
-                h="100%"
-                fallbackSrc="https://placehold.co/800x400?text=Gambar+tidak+tersedia"
-                loading="lazy"
-                radius="lg"
-              />
-            </Box>
+              fallbackSrc="https://placehold.co/800x400?text=Gambar+tidak+tersedia"
+              loading="lazy"
+            />
             <Text py="md" fz={{ base: "sm", md: "md" }} ta="justify" lh={1.8} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsi || 'Belum ada deskripsi untuk potensi desa ini.' }} />
           </Stack>
         </Paper>

src/app/darmasaba/(pages)/desa/potensi/page.tsx

@@ -2,7 +2,7 @@
 'use client'
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { IconEye } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
 import { useEffect, useState } from 'react';
@@ -12,7 +12,6 @@ import BackButton from '../layanan/_com/BackButto';
 function Page() {
   const router = useTransitionRouter()
   const [loading, setLoading] = useState(false)
-  const [hoveredId, setHoveredId] = useState<string | null>(null)
   const state = useProxy(potensiDesaState)
 
   useEffect(() => {
@@ -89,55 +88,20 @@ function Page() {
                 src={v.image?.link || ''}
                 h={360}
                 radius="xl"
-                onMouseEnter={() => setHoveredId(v.id)}
-                onMouseLeave={() => setHoveredId(null)}
-                style={{ 
-                  overflow: 'hidden', 
-                  position: 'relative',
-                  cursor: 'pointer',
-                  transition: 'transform 0.3s ease'
-                }}
+                style={{ overflow: 'hidden', position: 'relative' }}
               >
-                {/* Overlay with smooth transition */}
                 <Box
                   pos="absolute"
                   inset={0}
-                  bg={hoveredId === v.id 
-                    ? "linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.75) 100%)" 
-                    : "linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.15) 100%)"
-                  }
-                  style={{
-                    transition: 'background 0.3s ease'
-                  }}
+                  bg="linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%)"
                 />
-                
                 <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
-                  {/* Kategori badge - always visible */}
                   <Group>
-                    <Paper 
-                      radius="lg" 
-                      py={6} 
-                      px={12} 
-                      shadow="md" 
-                      withBorder 
-                      bg="rgba(255,255,255,0.9)"
-                      style={{
-                        transition: 'all 0.3s ease'
-                      }}
-                    >
+                    <Paper radius="lg" py={6} px={12} shadow="md" withBorder bg="rgba(255,255,255,0.85)">
                       <Text fz="sm" fw={600}>{v.kategori?.nama}</Text>
                     </Paper>
                   </Group>
-
-                  {/* Nama potensi - visible on hover */}
-                  <Box
-                    style={{
-                      opacity: hoveredId === v.id ? 1 : 0,
-                      transform: hoveredId === v.id ? 'translateY(0)' : 'translateY(10px)',
-                      transition: 'all 0.3s ease',
-                      pointerEvents: hoveredId === v.id ? 'auto' : 'none'
-                    }}
-                  >
+                  <Box>
                     <Text
                       fw={800}
                       c="white"
@@ -149,28 +113,20 @@ function Page() {
                       {v.name}
                     </Text>
                   </Box>
-
-                  {/* Button - visible on hover */}
-                  <Group 
-                    justify="center"
-                    style={{
-                      opacity: hoveredId === v.id ? 1 : 0,
-                      transform: hoveredId === v.id ? 'translateY(0)' : 'translateY(10px)',
-                      transition: 'all 0.3s ease',
-                      pointerEvents: hoveredId === v.id ? 'auto' : 'none'
-                    }}
-                  >
-                    <Button
-                      radius="xl"
-                      size="md"
-                      leftSection={<IconEye size={18} />}
-                      bg={colors["blue-button"]}
-                      variant="gradient"
-                      gradient={{ from: colors["blue-button"], to: "#4dabf7", deg: 45 }}
-                      onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}
-                    >
-                      Lihat Detail
-                    </Button>
+                  <Group justify="center">
+                    <Tooltip label="Lihat detail potensi" withArrow>
+                      <Button
+                        radius="xl"
+                        size="md"
+                        leftSection={<IconEye size={18} />}
+                        bg={colors["blue-button"]}
+                        variant="gradient"
+                        gradient={{ from: colors["blue-button"], to: "#4dabf7", deg: 45 }}
+                        onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}
+                      >
+                        Lihat Detail
+                      </Button>
+                    </Tooltip>
                   </Group>
                 </Stack>
               </BackgroundImage>
@@ -193,4 +149,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;

src/app/darmasaba/(pages)/desa/profile/page.tsx

@@ -26,7 +26,7 @@ function Page() {
             </Text>
           </Stack>
         </Container>
-        <Stack px={{ base: "md", md: 100 }} gap={"xl"}>
+        <Box px={{ base: "md", md: 100 }}>
           <ProfileDesa />
           <SejarahDesa />
           <VisimisiDesa />
@@ -35,7 +35,7 @@ function Page() {
           <ProfilPerbekel />
           <MotoDesa />
           <SemuaPerbekel />
-        </Stack>
+        </Box>
       </Stack>
       {/* Tombol Scroll ke Atas */}
       <ScrollToTopButton />

src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx

@@ -24,7 +24,7 @@ function LambangDesa() {
   }
 
   return (
-    <Box>
+    <Box pb={90}>
       <Stack align="center" gap="lg">
         <Box pb="lg">
           <Center>
@@ -59,7 +59,7 @@ function LambangDesa() {
           }}
         >
             <Text
-              fz={{ base: '1.125rem', md: '1.375rem' }}
+              fz={{ base: 'md', md: 'lg' }}
               lh={1.8}
               c="dark"
               ta="justify"

src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx

@@ -28,7 +28,7 @@ function MaskotDesa() {
   }
 
   return (
-    <Box>
+    <Box pb={80}>
       <Stack align="center" gap="xl">
         <Stack align="center" gap={10}>
           <Image src="/pudak-icon.png" alt="Ikon Desa" w={{ base: 160, md: 240 }} loading="lazy"/>

src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx

@@ -36,7 +36,7 @@ const letters = ["S", "I", "G", "A", "P"];
 
 function MotoDesa() {
   return (
-    <Box px={{ base: "md", md: "xl" }}>
+    <Box pb={80} px={{ base: "md", md: "xl" }}>
       <Stack align="center" gap="lg">
         <Box>
           <Text

src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx

@@ -25,7 +25,7 @@ function ProfilPerbekel() {
   }
 
   return (
-    <Box px="md">
+    <Box pb={80} px="md">
       <Stack align="center" gap={0} mb={40}>
         <Text
           c={colors['blue-button']}
@@ -95,7 +95,7 @@ function ProfilPerbekel() {
             <Box>
               <Stack gap={6}>
                 <Stack align="center" gap={6}>
-                  <IconUser size={22} />
+                  <IconUser size={22} color={colors['blue-button']} />
                   <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
                 </Stack>
                 <Text
@@ -111,12 +111,12 @@ function ProfilPerbekel() {
             <Box>
               <Stack gap={6}>
                 <Stack align="center" gap={6}>
-                  <IconBriefcase size={22} />
+                  <IconBriefcase size={22} color={colors['blue-button']} />
                   <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
                 </Stack>
                 <Text
                   fz={{ base: "1rem", md: "1.2rem" }}
-                  ta="left"
+                  ta="justify"
                   lh={1.6}
                   dangerouslySetInnerHTML={{ __html: data.pengalaman }}
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
@@ -138,7 +138,7 @@ function ProfilPerbekel() {
         <Stack gap="xl">
           <Box>
             <Stack align="center" gap={6} >
-              <IconUsers size={22} />
+              <IconUsers size={22} color={colors['blue-button']} />
               <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
             </Stack>
             <Text
@@ -152,7 +152,7 @@ function ProfilPerbekel() {
 
           <Box>
             <Stack align="center" gap={6} mb={6}>
-              <IconTargetArrow size={22} />
+              <IconTargetArrow size={22} color={colors['blue-button']} />
               <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Program Kerja Unggulan</Text>
             </Stack>
             <Box px={10}>

src/app/darmasaba/(pages)/desa/profile/ui/profileDesa.tsx

@@ -3,7 +3,7 @@ import { Box, Center, Paper } from '@mantine/core';
 
 function ProfileDesa() {
   return (
-    <Box>
+    <Box pb={90}>
       <Center>
           <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
             <Center>

src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx

@@ -24,7 +24,7 @@ function SejarahDesa() {
   }
 
   return (
-    <Box>
+    <Box py="xl">
       <Stack align="center" gap="xl">
         <Stack align="center" gap="sm">
           <Center>

src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx

@@ -36,7 +36,7 @@ function SemuaPerbekel() {
   }
 
   return (
-    <Box>
+    <Box pb={80}>
       <Stack align="center" gap="lg">
         <Box>
           <Text

src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx

@@ -24,7 +24,7 @@ function VisiMisiDesa() {
   }
 
   return (
-    <Box>
+    <Box py="xl">
       <Stack align="center" gap="xl">
         <Image
           src="/darmasaba-icon.png"

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -52,7 +52,7 @@ function Page() {
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} pb={80}>
+      <Box px={{ base: 'md', md: 100 }}>
         <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Lowongan Kerja Lokal
         </Text>

src/app/darmasaba/(pages)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/page.tsx

@@ -1,7 +1,7 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-
 import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi'
 import colors from '@/con/colors'
 import {
@@ -9,28 +9,20 @@ import {
   Button,
   Card,
   Center,
+  Container,
   Group,
   Image,
   Loader,
   Paper,
   Stack,
   Text,
-  TextInput,
   Title,
-  Transition
+  Tooltip,
+  Transition,
 } from '@mantine/core'
-import {
-  IconArrowsMaximize,
-  IconArrowsMinimize,
-  IconRefresh,
-  IconSearch,
-  IconUsers,
-  IconZoomIn,
-  IconZoomOut,
-} from '@tabler/icons-react'
-import { debounce } from 'lodash'
+import { IconRefresh, IconSearch, IconUsers } from '@tabler/icons-react'
 import { OrganizationChart } from 'primereact/organizationchart'
-import { useEffect, useRef, useState } from 'react'
+import { useEffect } from 'react'
 import { useProxy } from 'valtio/utils'
 import BackButton from '../../desa/layanan/_com/BackButto'
 
@@ -44,40 +36,35 @@ export default function Page() {
         paddingBottom: 48,
       }}
     >
-      <Box px={{ base: 'md', md: 100 }} py="xl">
-        <BackButton />
+      <Container size="xl" py="xl">
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
         <Stack align="center" gap="xl" mt="xl">
           <Title
             order={1}
             ta="center"
             c={colors['blue-button']}
             fz={{ base: 28, md: 36, lg: 44 }}
+
           >
-            Struktur Organisasi & SK Pengurus BumDes
+            Struktur Organisasi Dan SK Pengurus BumDes
           </Title>
           <Text ta="center" c="black" maw={800}>
-            Gambaran visual peran dan pengurus yang ditugaskan. Gunakan kontrol
-            di bawah untuk mencari, memperbesar, atau melihat lebih jelas.
+            Gambaran visual peran dan pegawai yang ditugaskan. Arahkan kursor
+            untuk melihat detail atau klik node untuk fokus tampilan.
           </Text>
         </Stack>
-
         <Box mt="lg">
           <StrukturOrganisasiBumDes />
         </Box>
-      </Box>
+      </Container>
     </Box>
   )
 }
 
 function StrukturOrganisasiBumDes() {
   const stateOrganisasi: any = useProxy(stateStrukturBumDes.pegawai)
-  const chartContainerRef = useRef<HTMLDivElement>(null)
-  const [scale, setScale] = useState(1)
-  const [isFullscreen, setFullscreen] = useState(false)
-  const [searchQuery, setSearchQuery] = useState('')
-  const debouncedSearch = useRef(
-    debounce((value: string) => setSearchQuery(value), 400)
-  ).current
 
   useEffect(() => {
     void stateOrganisasi.findMany.load()
@@ -94,15 +81,17 @@ function StrukturOrganisasiBumDes() {
           <Loader size="lg" />
           <Text fw={600}>Memuat struktur organisasi…</Text>
           <Text c="dimmed" size="sm">
-            Mengambil data pengurus dan posisi. Mohon tunggu sebentar.
+            Mengambil data pegawai dan posisi. Mohon tunggu sebentar.
           </Text>
         </Stack>
       </Center>
     )
   }
 
-  const data = stateOrganisasi.findMany.data || []
-  if (data.length === 0) {
+  if (
+    !stateOrganisasi.findMany.data ||
+    stateOrganisasi.findMany.data.length === 0
+  ) {
     return (
       <Center py={40}>
         <Stack align="center" gap="md">
@@ -120,10 +109,11 @@ function StrukturOrganisasiBumDes() {
               <IconUsers size={56} />
             </Center>
             <Title order={3} mt="md">
-              Data pengurus belum tersedia
+              Data pegawai belum tersedia
             </Title>
             <Text c="dimmed" mt="xs">
-              Belum ada data pengurus yang tercatat untuk BumDes.
+              Belum ada data pegawai yang tercatat untuk BumDes. Silakan coba
+              muat ulang atau periksa sumber data.
             </Text>
             <Group justify="center" mt="lg">
               <Button
@@ -134,6 +124,15 @@ function StrukturOrganisasiBumDes() {
               >
                 Muat Ulang
               </Button>
+              <Button
+                leftSection={<IconSearch size={16} />}
+                variant="subtle"
+                onClick={() =>
+                  stateOrganisasi.findMany.load({ query: { q: '' } })
+                }
+              >
+                Cari Pegawai
+              </Button>
             </Group>
           </Paper>
         </Stack>
@@ -141,232 +140,161 @@ function StrukturOrganisasiBumDes() {
     )
   }
 
-  // 📊 susun struktur organisasi
   const posisiMap = new Map<string, any>()
-  const aktifPegawai = data.filter((p: any) => p.isActive)
+
+  const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive);
 
   for (const pegawai of aktifPegawai) {
-    const posisiId = pegawai.posisi.id
+    const posisiId = pegawai.posisi.id;
     if (!posisiMap.has(posisiId)) {
       posisiMap.set(posisiId, {
         ...pegawai.posisi,
         pegawaiList: [],
         children: [],
-      })
+      });
     }
-    posisiMap.get(posisiId)!.pegawaiList.push(pegawai)
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
   }
 
-  const root: any[] = []
-  posisiMap.forEach((posisi) => {
-    if (posisi.parentId) {
-      const parent = posisiMap.get(posisi.parentId)
-      if (parent) parent.children.push(posisi)
-      else root.push(posisi)
-    } else root.push(posisi)
-  })
+  // First, create a map of all unique positions
+const allPositions = new Map();
+aktifPegawai.forEach((pegawai: any) => {
+  if (!allPositions.has(pegawai.posisi.id)) {
+    allPositions.set(pegawai.posisi.id, {
+      ...pegawai.posisi,
+      pegawaiList: [],
+      children: []
+    });
+  }
+});
 
-  const toOrgChartFormat = (node: any): any => {
-    const pegawai = node.pegawaiList?.[0]
+// Then assign employees to their positions
+aktifPegawai.forEach((pegawai: any) => {
+  const posisi = allPositions.get(pegawai.posisi.id);
+  if (posisi) {
+    posisi.pegawaiList.push(pegawai);
+  }
+});
+
+// Now build the hierarchy
+const root = [];
+for (const [_, posisi] of allPositions) {
+  if (posisi.parentId) {
+    const parent = allPositions.get(posisi.parentId);
+    if (parent) {
+      parent.children.push(posisi);
+    } else {
+      // Only add to root if it's a top-level position
+      if (!posisi.parentId) {
+        root.push(posisi);
+      }
+    }
+  } else {
+    root.push(posisi);
+  }
+}
+  function toOrgChartFormat(node: any): any {
     return {
       expanded: true,
+      type: 'person',
+      styleClass: 'p-person',
       data: {
-        id: pegawai?.id,
-        name: pegawai?.namaLengkap || 'Belum Ditugaskan',
-        title: node.nama || 'Tanpa Jabatan',
-        image: pegawai?.image?.link || '/img/default.png',
+        name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ditugaskan',
+        title: node.nama || 'Tanpa jabatan',
+        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
         description: node.deskripsi || '',
+        positionId: node.id || null,
       },
       children: node.children?.map(toOrgChartFormat) || [],
     }
   }
 
-  let chartData = root.map(toOrgChartFormat)
-
-  // 🔍 filter by search
-  if (searchQuery) {
-    const filterNodes = (nodes: any[]): any[] =>
-      nodes
-        .map((n) => ({
-          ...n,
-          children: filterNodes(n.children || []),
-        }))
-        .filter(
-          (n) =>
-            n.data.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            n.data.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-            n.children.length > 0
-        )
-    chartData = filterNodes(chartData)
-  }
-
-  // 🔍 fullscreen dan zoom control
-  const toggleFullscreen = () => {
-    if (!document.fullscreenElement) {
-      chartContainerRef.current?.requestFullscreen()
-      setFullscreen(true)
-    } else {
-      document.exitFullscreen()
-      setFullscreen(false)
-    }
-  }
-
-  const handleZoomIn = () => setScale((s) => Math.min(s + 0.1, 2))
-  const handleZoomOut = () => setScale((s) => Math.max(s - 0.1, 0.5))
-  const resetZoom = () => setScale(1)
+  const chartData = root.map(toOrgChartFormat)
 
   return (
-    <Stack align="center" mt="xl">
-      {/* 🧭 Kontrol atas */}
-      <Paper shadow="xs" p="md" radius="md" bg={colors['blue-button']}>
-        <Group gap="sm" wrap="wrap" justify="center">
-          <TextInput
-            placeholder="Cari nama atau jabatan..."
-            leftSection={<IconSearch size={16} />}
-            onChange={(e) => debouncedSearch(e.target.value)}
-            styles={{
-              input: {
-                minWidth: 250,
-              },
-            }}
-          />
-          <Group gap="xs">
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={handleZoomOut}
-              leftSection={<IconZoomOut size={16} />}
-            >
-              Zoom Out
-            </Button>
-            <Box
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              px={16}
-              py={8}
-              style={{
-                fontSize: 14,
-                fontWeight: 700,
-                borderRadius: '8px',
-                minWidth: 70,
-                textAlign: 'center',
-              }}
-            >
-              {Math.round(scale * 100)}%
-            </Box>
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={handleZoomIn}
-              leftSection={<IconZoomIn size={16} />}
-            >
-              Zoom In
-            </Button>
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={resetZoom}
-            >
-              Reset
-            </Button>
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={toggleFullscreen}
-              leftSection={
-                isFullscreen ? (
-                  <IconArrowsMinimize size={16} />
-                ) : (
-                  <IconArrowsMaximize size={16} />
-                )
-              }
-            >
-              Fullscreen
-            </Button>
-          </Group>
-        </Group>
+    <Box py={16} >
+      <Paper
+        radius="md"
+        p="md"
+        style={{
+          background: 'rgba(28,110,164,0.2)',
+          border: `1px solid rgba(255,255,255,0.1)`,
+          overflowX: 'auto',
+        }}
+      >
+        <OrganizationChart
+          value={chartData}
+          nodeTemplate={nodeTemplate}
+        />
       </Paper>
-
-      {/* 📊 Chart Container */}
-      <Center style={{ width: '100%' }}>
-        <Box
-          ref={chartContainerRef}
-          style={{
-            overflowX: 'auto',
-            overflowY: 'auto',
-            width: '100%',
-            padding: '32px 16px',
-            transition: 'transform 0.2s ease',
-            transform: `scale(${scale})`,
-            transformOrigin: 'center top',
-          }}
-        >
-          <OrganizationChart
-            value={chartData}
-            nodeTemplate={(node) => <NodeCard node={node} />}
-            className="p-organizationchart p-organizationchart-horizontal"
-          />
-        </Box>
-      </Center>
-    </Stack>
+    </Box>
   )
 }
 
-function NodeCard({ node }: any) {
+function nodeTemplate(node: any) {
   const imageSrc = node?.data?.image || '/img/default.png'
   const name = node?.data?.name || 'Tanpa Nama'
   const title = node?.data?.title || 'Tanpa Jabatan'
   const description = node?.data?.description || ''
 
   return (
-    <Transition mounted transition="pop" duration={300}>
+    <Transition  mounted transition="pop" duration={240}>
       {(styles) => (
         <Card
-          shadow="md"
-          radius="xl"
+          radius="lg"
           withBorder
           style={{
             ...styles,
-            width: 240,
-            padding: 20,
-            background:
-              'linear-gradient(135deg, rgba(28,110,164,0.15) 0%, rgba(255,255,255,0.95) 100%)',
-            borderColor: 'rgba(28, 110, 164, 0.3)',
-            transition: 'all 0.3s ease',
+            width: 260,
+            padding: 16,
+            background: 'rgba(28,110,164,0.3)',
+            borderColor: 'rgba(255,255,255,0.15)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
           }}
         >
-          <Stack align="center" gap={10}>
-            <Box
-              style={{
-                width: 90,
-                height: 90,
-                borderRadius: '50%',
-                overflow: 'hidden',
-                border: '3px solid rgba(28, 110, 164, 0.4)',
+          <Image
+            src={imageSrc}
+            alt={name}
+            radius="md"
+            width={120}
+            height={120}
+            fit="cover"
+            style={{
+              objectFit: 'cover',
+              border: '2px solid rgba(255,255,255,0.2)',
+              marginBottom: 12,
+            }}
+            loading='lazy'
+          />
+          <Text fw={700}>{name}</Text>
+          <Text size="sm" c="dimmed" mt={4}>
+            {title}
+          </Text>
+          <Text size="xs" c="dimmed" mt={8} lineClamp={3}>
+            {description || 'Belum ada deskripsi.'}
+          </Text>
+          <Tooltip label="Kembali ke struktur organisasi" withArrow position="bottom">
+            <Button
+              variant="light"
+              size="xs"
+              mt="md"
+              onClick={() => {
+                const id = node?.data?.positionId
+                if (id && (window as any).scrollTo) {
+                  ;(window as any).scrollTo({ top: 0, behavior: 'smooth' })
+                }
               }}
             >
-              <Image src={imageSrc} alt={name} fit="cover" loading="lazy" />
-            </Box>
-            <Text fw={700} size="sm" ta="center" c={colors['blue-button']}>
-              {name}
-            </Text>
-            <Text size="xs" c="dimmed" ta="center">
-              {title}
-            </Text>
-            <Text size="xs" c="dimmed" ta="center" lineClamp={3}>
-              {description || 'Belum ada deskripsi.'}
-            </Text>
-          </Stack>
+              Kembali
+            </Button>
+          </Tooltip>
         </Card>
       )}
     </Transition>
   )
 }
+
+

src/app/darmasaba/(pages)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -55,7 +55,6 @@ function Page() {
             }}
           >
             <Paper p={'xl'} >
-              <Stack gap={"xs"}>
               <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Tujuan Ide Inovatif Ini</Text>
               <List>
                 <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mendorong partisipasi aktif masyarakat</ListItem>
@@ -63,7 +62,6 @@ function Page() {
                 <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memecahkan tantangan komunal</ListItem>
                 <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengembangkan potensi kreativitas warga</ListItem>
               </List>
-              </Stack>
             </Paper>
             <Paper p={'xl'} >
               <Flex align={'center'} justify={'space-between'}>

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/[id]/page.tsx

@@ -1,83 +0,0 @@
-'use client'
-import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
-import colors from '@/con/colors';
-import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import BackButton from '../../../desa/layanan/_com/BackButto';
-
-function DetailDesaDigitalUser() {
-  const stateDesaDigital = useProxy(desaDigitalState);
-  const params = useParams();
-
-  useShallowEffect(() => {
-    stateDesaDigital.findUnique.load(params?.id as string);
-  }, []);
-
-  if (!stateDesaDigital.findUnique.data) {
-    return (
-      <Stack py={40} align="center">
-        <Skeleton height={400} radius="md" w={{ base: "90%", md: "60%" }} />
-        <Text fz="lg" c="dimmed">Memuat data...</Text>
-      </Stack>
-    );
-  }
-
-  const data = stateDesaDigital.findUnique.data;
-
-  return (
-    <Stack bg={colors.Bg} py="xl" align="center" px={{ base: "md", md: "lg" }}>
-      {/* Tombol Back */}
-      <Box w={{ base: "100%", md: "60%" }}>
-        <BackButton/>
-      </Box>
-
-      {/* Card Detail */}
-      <Paper
-        w={{ base: "100%", md: "60%" }}
-        bg={colors["white-1"]}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text ta={"center"} fz={{ base: "xl", md: "2xl" }} fw="bold" c={colors["blue-button"]}>
-            {data?.name || "Desa Digital"}
-          </Text>
-
-          {/* Gambar */}
-          {data?.image?.link ? (
-            <Center>
-              <Image
-                src={data.image.link}
-                alt={data.name || "Gambar Desa Digital"}
-                radius="md"
-                fit="cover"
-                w={{ base: "100%", md: "80%" }}
-                h={{ base: 250, md: 350 }}
-                style={{ objectPosition: "center", borderRadius: 12 }}
-              />
-            </Center>
-          ) : (
-            <Center>
-              <Text c="dimmed">Tidak ada gambar</Text>
-            </Center>
-          )}
-
-          {/* Deskripsi */}
-          <Box pt="md">
-            <Text
-              fz={{ base: "md", md: "lg" }}
-              c="dimmed"
-              style={{ lineHeight: 1.6 }}
-              dangerouslySetInnerHTML={{ __html: data?.deskripsi || "-" }}
-            />
-          </Box>
-        </Stack>
-      </Paper>
-    </Stack>
-  );
-}
-
-export default DetailDesaDigitalUser;

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,19 +1,17 @@
 'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, Paper, SimpleGrid, Image, Skeleton, Center, Pagination, Grid, GridCol, TextInput, Button } from '@mantine/core';
+import { Stack, Box, Text, Paper, SimpleGrid, Image, Skeleton, Center, Pagination, Grid, GridCol, TextInput } from '@mantine/core';
 import React, { useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { useProxy } from 'valtio/utils';
 import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
 
 function Page() {
   const [search, setSearch] = useState("")
   const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const state = useProxy(desaDigitalState)
-  const router = useRouter()
   const {
     data,
     page,
@@ -41,10 +39,10 @@ function Page() {
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Grid align='center'>
+      <Grid align='center'>
           <GridCol span={{ base: 12, md: 9 }}>
             <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-              Desa Digital / Smart Village
+            Desa Digital / Smart Village
             </Text>
           </GridCol>
           <GridCol span={{ base: 12, md: 3 }}>
@@ -72,62 +70,12 @@ function Page() {
           >
             {filteredData.map((v, k) => {
               return (
-                <Paper
-                  key={k}
-                  radius="xl"
-                  shadow="md"
-                  withBorder
-                  p="lg"
-                  bg={colors['white-trans-1']}
-                  style={{
-                    transition: 'all 200ms ease',
-                    cursor: 'pointer',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    justifyContent: 'space-between', // ✅ biar button selalu di bawah
-                    height: '100%', // ✅ bikin tinggi seragam
-                  }}
-                >
-                  <Stack gap={"xs"}>
-                    <Box
-                      style={{
-                        width: '100%',
-                        aspectRatio: '16/9',
-                        borderRadius: '12px',
-                        overflow: 'hidden',
-                        position: 'relative',
-                      }}
-                    >
-                      <Image
-                        src={v.image.link}
-                        alt={v.name}
-                        fit="cover"
-                        loading="lazy"
-                        style={{
-                          width: '100%',
-                          height: '100%',
-                          transition: 'transform 0.4s ease',
-                        }}
-                        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
-                        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
-                      />
-                    </Box>
-                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
-                    <Box>
-                      <Text lineClamp={3} truncate="end" fz={"md"} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
-                    </Box>
-                  </Stack>
-
-                  <Center mt="md">
-                    <Button
-                      bg={colors['blue-button']}
-                      radius="lg"
-                      w="100%"
-                      onClick={() => router.push(`/darmasaba/inovasi/desa-digital-smart-village/${v.id}`)}
-                    >
-                      Detail
-                    </Button>
-                  </Center>
+                <Paper p={'xl'} key={k}>
+                  <Image src={v.image.link? v.image.link : ''} pb={10} radius={10} alt='' loading="lazy"/>
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
+                  <Box>
+                    <Text fz={"md"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                  </Box>
                 </Paper>
               )
             })}

src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -57,8 +57,7 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text fz={'md'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat,</Text>
-        <Text fz={'md'}>mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
+        <Text fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} p={'lg'}>
@@ -72,22 +71,11 @@ function Page() {
             {filteredData.map((v, k) => {
               return (
                 <Paper p={'xl'} key={k}>
-                  <Stack gap={"xs"}>
-                    <Image src={v.image.link || ''} pb={10} radius={10} alt='' loading="lazy" />
-                    <Text fz={'h3'} fw={'bold'}>{v.name}</Text>
-                    <Box pr={'lg'} pb={10}>
-                      <Text
-                        size="md"
-                        ta="justify"
-                        lh={1} // line height biar enak dibaca
-                        style={{
-                          wordBreak: "break-word",
-                          whiteSpace: "normal",
-                        }}
-                        dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                      />
-                    </Box>
-                  </Stack>
+                  <Image src={v.image.link || ''} pb={10} radius={10} alt='' loading="lazy"/>
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
+                  <Box pr={'lg'} pb={10}>
+                    <Text fz={'h4'} fw={'bold'} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                  </Box>
                 </Paper>
               )
             })}

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/administrasi-online/page.tsx

@@ -75,18 +75,18 @@ function AdministrasiOnline() {
             <Title order={3}>Ajukan Administrasi Online</Title>
             <TextInput
               label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="Masukkan nama"
+              placeholder="masukkan nama"
               onChange={(val) => (state.administrasiOnline.create.form.name = val.target.value)}
             />
             <TextInput
               label={<Text fz="sm" fw="bold">Alamat</Text>}
-              placeholder="Masukkan alamat"
+              placeholder="masukkan alamat"
               onChange={(val) => (state.administrasiOnline.create.form.alamat = val.target.value)}
             />
             <TextInput
               type="number"
               label={<Text fz="sm" fw="bold">Nomor Telepon</Text>}
-              placeholder="Masukkan nomor telepon"
+              placeholder="masukkan nomor telepon"
               onChange={(val) => (state.administrasiOnline.create.form.nomorTelepon = val.target.value)}
             />
             <Select
@@ -95,7 +95,7 @@ function AdministrasiOnline() {
                 state.administrasiOnline.create.form.jenisLayananId = val ?? "";
               }}
               label={<Text fw={"bold"} fz={"sm"}>Jenis Layanan</Text>}
-              placeholder="Pilih jenis layanan"
+              placeholder="Pilih kategori produk"
               data={
                 state.jenisLayanan.findMany.data?.map((v) => ({
                   value: v.id,

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/informasi-desa/detail-berita/[id]/page.tsx

@@ -1,85 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
-import { useParams } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-
-function Page() {
-  const params = useParams<{ id: string }>();
-  const id = Array.isArray(params.id) ? params.id[0] : params.id;
-  const state = useProxy(stateDashboardBerita.berita)
-  const [loading, setLoading] = useState(true)
-
-  useEffect(() => {
-    const loadData = async () => {
-      if (!id) return;
-      try {
-        setLoading(true);
-        await state.findUnique.load(id);
-      } catch (error) {
-        console.error('Error loading data:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    loadData()
-  }, [id])
-
-  if (loading) {
-    return (
-      <Center>
-        <Skeleton height={500} />
-      </Center>
-    );
-  }
-
-  if (!state.findUnique.data) {
-    return (
-      <Center>
-        <Text>Data tidak ditemukan</Text>
-      </Center>
-    );
-  }
-
-
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            {state.findUnique.data?.judul}
-          </Text>
-        </Box>
-        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} loading="lazy" />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={"xs"}>
-          <Text
-            py={20}
-            fz={{ base: "sm", md: "lg" }}
-            lh={{ base: 1.6, md: 1.8 }} // ✅ line-height lebih rapat dan responsif
-            ta="justify"
-            style={{
-              wordBreak: "break-word",
-              whiteSpace: "normal",
-            }}
-            dangerouslySetInnerHTML={{
-              __html: state.findUnique.data?.content || "",
-            }}
-          />
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/informasi-desa/detail-pengumuman/[id]/page.tsx

@@ -1,62 +0,0 @@
-'use client'
-import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Box, Container, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-
-
-function Page() {
-  const detail = useProxy(stateDesaPengumuman.pengumuman.findUnique)
-
-  const params = useParams()
-
-  useShallowEffect(() => {
-    stateDesaPengumuman.pengumuman.findUnique.load(params?.id as string)
-  }, [])
-
-  if (!detail.data) {
-    return (
-      <Box>
-        <Skeleton h={400} />
-      </Box>
-    )
-  }
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
-      {/* Header */}
-      <Box px={{ base: "md", md: 100 }}>
-        <BackButton />
-      </Box>
-      <Container size="lg" px="md">
-        <Stack gap="xs" >
-            <Group justify={"space-between"} align={"center"}>
-              <Text fz={{ base: "2rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
-                {detail.data?.judul}
-              </Text>
-              <Group justify='end'>
-                <Paper bg={colors['blue-button']} p={5}>
-                  <Text  c={colors['white-1']}>{detail.data?.CategoryPengumuman?.name}</Text>
-                </Paper>
-              </Group>
-            </Group>
-          <Paper bg={colors["white-1"]} p="md">
-            <Text fz={"md"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: detail.data?.content }} />
-            <Text fz={"md"} c={colors["blue-button"]} fw="bold" >
-              {new Date(detail.data?.createdAt).toLocaleDateString('id-ID', {
-                weekday: 'long',
-                day: 'numeric',
-                month: 'long',
-                year: 'numeric'
-              })}
-            </Text>
-          </Paper>
-        </Stack>
-      </Container>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/informasi-desa/page.tsx

@@ -1,23 +1,20 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
-import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Badge, Box, Card, Divider, Grid, GridCol, Group, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import { Box, Card, Divider, Grid, GridCol, Image, Paper, Stack, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../../desa/layanan/_com/BackButto';
-import { useTransitionRouter } from 'next-view-transitions';
-import { motion } from "framer-motion";
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 
 dayjs.extend(relativeTime);
 
 function InformasiDesa() {
-  const router = useTransitionRouter()
-  const stateBerita = useProxy(stateDashboardBerita.berita);
-  const statePengumuman = useProxy(stateDesaPengumuman.pengumuman);
+  const stateBerita = useProxy(stateDashboardBerita.berita)
+  const statePengumuman = useProxy(stateDesaPengumuman.pengumuman)
 
   useEffect(() => {
     stateBerita.findFirst.load();
@@ -26,216 +23,116 @@ function InformasiDesa() {
     statePengumuman.findRecent.load();
   }, []);
 
-  const dataBerita = stateBerita.findFirst.data;
-  const dataPengumuman = statePengumuman.findFirst.data;
+  const dataBerita = stateBerita.findFirst.data
+  const dataPengumuman = statePengumuman.findFirst.data
+
 
   return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-
-      <Box px={{ base: 'md', md: 100 }}>
-        <Title ta="center" fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Informasi Desa
-        </Title>
+        </Text>
       </Box>
-
-      <Box px={{ base: 'md', md: 100 }}>
-        <Stack gap={30}>
-
-          {/* === BERITA UTAMA === */}
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={10}>
           {dataBerita && (
-            <motion.div
-              whileHover={{ scale: 1.05 }}
-              whileTap={{ scale: 0.95 }}
-              style={{ cursor: "pointer" }}
-              onClick={() => router.push(`/darmasaba/inovasi/layanan-online-desa/informasi-desa/detail-berita/${dataBerita.id}`)}
-            >
-              <Paper shadow="md" radius="lg" p="lg" withBorder>
-                <Grid align="center" gutter="xl">
-                  <GridCol span={{ base: 12, md: 6 }}>
-                    <Image
-                      src={dataBerita.image?.link || '/fallback.jpg'}
-                      alt={dataBerita.judul}
-                      radius="md"
-                      fit="cover"
-                      height={280}
-                      loading="lazy"
-                      style={{ objectPosition: 'center' }}
-                    />
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 6 }}>
-                    <Stack gap="xs">
-                      <Title order={2} fw={800}>
-                        {dataBerita.judul}
-                      </Title>
-                      <Group justify='space-between'>
-                        <Badge bg={colors['blue-button']}>
-                          {dataBerita.kategoriBerita?.name}
-                        </Badge>
-                        <Text fz="sm" c="dimmed">
-                          {dayjs(dataBerita.createdAt).fromNow()}
-                        </Text>
-                      </Group>
-                      <Text
-                        ta="justify"
-                        mt="xs"
-                        fz="md"
-                        lh={1.7}
-                        lineClamp={6}
-                        style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-                        dangerouslySetInnerHTML={{ __html: dataBerita.content }}
-                      />
-                    </Stack>
-                  </GridCol>
-                </Grid>
-              </Paper>
-            </motion.div>
+            <Paper shadow="md" radius="md" p="md">
+              <Grid>
+                <GridCol span={{ md: 6, base: 12 }}>
+                  <Image
+                    src={dataBerita.image?.link || "/fallback.jpg"}
+                    alt={dataBerita.judul}
+                    radius="md"
+                    fit="cover"
+                    height={250}
+                    maw={600}
+                    loading="lazy"
+                  />
+                </GridCol>
+                <GridCol span={{ md: 6, base: 12 }}>
+                  <Box>
+                    <Text fz="sm" c="dimmed">{dataBerita.kategoriBerita?.name} • {dayjs(dataBerita.createdAt).fromNow()}</Text>
+                    <Title order={1} fw="bold">{dataBerita.judul}</Title>
+                    <Text ta={"justify"} mt="xs" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: dataBerita.content }} />
+                  </Box>
+                </GridCol>
+              </Grid>
+            </Paper>
           )}
-
-          {/* === BERITA TERBARU === */}
-          <Stack>
-            <Title order={3} fw={700}>
-              Berita Terbaru
-            </Title>
-            <Grid gutter="xl">
+          <Stack py={10}>
+            <Title order={3}>Berita Terbaru</Title>
+            <Grid>
               {stateBerita.findRecent.data.map((item) => (
                 <GridCol span={{ base: 12, sm: 6, md: 3 }} key={item.id}>
-                  <motion.div
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    style={{ cursor: "pointer" }}
-                    onClick={() => router.push(`/darmasaba/inovasi/layanan-online-desa/informasi-desa/detail-berita/${item.id}`)}
-                  >
-                    <Card
-                      shadow="sm"
-                      radius="md"
-                      withBorder
-                      h="100%"
-                    >
-                      <Card.Section>
-                        <Image
-                          src={item.image?.link || '/placeholder.jpg'}
-                          alt={item.judul}
-                          height={160}
-                          fit="cover"
-                          radius="sm"
-                          loading="lazy"
-                        />
-                      </Card.Section>
-                      <Stack gap={4} mt="sm">
-                        <Text ta="justify"
-                          size="sm"
-                          c="dimmed"
-                          lineClamp={3}
-                          style={{
-                            wordBreak: "break-word",
-                            overflow: "hidden",
-                            textOverflow: "ellipsis",
-                            whiteSpace: "normal",
-                            lineHeight: 1.5,
-                            display: "-webkit-box",
-                            WebkitLineClamp: 3,
-                            WebkitBoxOrient: "vertical",
-                          }}
-                          dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
-                        <Text size="xs" c="gray">
-                          {dayjs(item.createdAt).fromNow()}
-                        </Text>
-                      </Stack>
-                    </Card>
-                  </motion.div>
+                  <Card shadow="sm" radius="md" withBorder h="100%">
+                    <Card.Section>
+                      <Image
+                        src={item.image?.link || "/placeholder.jpg"}
+                        alt={item.judul}
+                        height={160} // gambar fix height
+                        fit="cover"
+                        loading="lazy"
+                      />
+                    </Card.Section>
+                    <Stack gap="xs" mt="sm">
+                      <Text fw={600} lineClamp={2}>
+                        {item.judul}
+                      </Text>
+                      <Text size="sm" color="dimmed" lineClamp={2}>
+                        {item.deskripsi}
+                      </Text>
+                      <Text size="xs" c="gray">
+                        {dayjs(item.createdAt).fromNow()}
+                      </Text>
+                    </Stack>
+                  </Card>
                 </GridCol>
               ))}
             </Grid>
+
           </Stack>
-
-          <Divider color={colors['blue-button']} my="lg" />
-
-          {/* === PENGUMUMAN === */}
-          <Grid gutter="xl" align="stretch">
-            <GridCol span={{ base: 12, md: 6 }}>
+          <Divider color={colors['blue-button']} my="md" />
+          <Grid>
+            <GridCol span={{ md: 6, base: 12 }}>
               {dataPengumuman && (
-                <motion.div
-                  onClick={() => router.push(`/darmasaba/inovasi/layanan-online-desa/informasi-desa/detail-pengumuman/${dataPengumuman.id}`)}
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  style={{ cursor: "pointer" }}
-                >
-                  <Paper shadow="md" radius="lg" p="lg" h="100%" withBorder>
-                    <Stack gap="xs">
-                      <Title order={2} fw={800}>
-                        {dataPengumuman.judul}
-                      </Title>
-                      <Group justify='space-between'>
-                        <Badge bg={colors['blue-button']}>
-                          {dataPengumuman.CategoryPengumuman?.name}
-                        </Badge>
-                        <Text fz="sm" c="dimmed">
-                          {dayjs(dataPengumuman.createdAt).fromNow()}
-                        </Text>
-                      </Group>
-                      <Text
-                        ta="justify"
-                        mt="xs"
-                        fz="md"
-                        lh={1.7}
-                        lineClamp={8}
-                        style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-                        dangerouslySetInnerHTML={{ __html: dataPengumuman.content }}
-                      />
-                    </Stack>
-                  </Paper>
-                </motion.div>
+                <Paper h={"97%"} shadow="md" radius="md" p="md">
+                  <Stack gap={"xs"}>
+                    <Title order={1} fw="bold">{dataPengumuman.judul}</Title>
+                    <Text fz="sm" c="dimmed">{dataPengumuman.CategoryPengumuman?.name} • {dayjs(dataPengumuman.createdAt).fromNow()}</Text>
+                    <Box>
+                      <Text ta={"justify"} mt="xs" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: dataPengumuman.content }} />
+                    </Box>
+                  </Stack>
+                </Paper>
               )}
             </GridCol>
-
-            <GridCol span={{ base: 12, md: 6 }}>
-              <Stack>
-                <Title order={3} fw={700}>
-                  Pengumuman Terbaru
-                </Title>
-                <Grid gutter="lg">
+            <GridCol span={{ md: 6, base: 12 }}>
+              <Stack py={10}>
+                <Title order={3}>Pengumuman Terbaru</Title>
+                <Grid>
                   {statePengumuman.findRecent.data.map((item) => (
-                    <GridCol span={{ base: 12, sm: 6 }} key={item.id}>
-                      <motion.div
-                        whileHover={{ scale: 1.05 }}
-                        whileTap={{ scale: 0.95 }}
-                        style={{ cursor: "pointer" }}
-                        onClick={() => router.push(`/darmasaba/inovasi/layanan-online-desa/informasi-desa/detail-pengumuman/${item.id}`)}
-                      >
-                        <Card
-                          shadow="xs"
-                          radius="md"
-                          withBorder
-                          h="100%"
-                          p="md"
-                          style={{ transition: '0.2s ease' }}
-                          className="hover:shadow-md"
-                        >
-                          <Stack gap="xs">
-                            <Text fw={600} lineClamp={2}>
-                              {item.judul}
-                            </Text>
-                            <Text
-                              ta="justify"
-                              mt="xs"
-                              fz="md"
-                              lh={1.7}
-                              lineClamp={2}
-                              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-                              dangerouslySetInnerHTML={{ __html: item.content }}
-                            />
-                            <Text size="xs" c="gray">
-                              {dayjs(item.createdAt).fromNow()}
-                            </Text>
-                          </Stack>
-                        </Card>
-                      </motion.div>
+                    <GridCol span={{ base: 12, sm: 8, md: 6 }} key={item.id}>
+                      <Card shadow="sm" radius="md" withBorder h="100%">
+                        <Stack gap="xs" mt="sm">
+                          <Text fw={600} lineClamp={2}>
+                            {item.judul}
+                          </Text>
+                          <Text size="sm" color="dimmed" lineClamp={2}>
+                            {item.deskripsi}
+                          </Text>
+                          <Text size="xs" c="gray">
+                            {dayjs(item.createdAt).fromNow()}
+                          </Text>
+                        </Stack>
+                      </Card>
                     </GridCol>
                   ))}
                 </Grid>
+
               </Stack>
             </GridCol>
           </Grid>

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx

@@ -100,33 +100,33 @@ function PengaduanMasyarakat() {
             <Title order={3}>Ajukan Pengaduan Masyarakat</Title>
             <TextInput
               label={<Text fz="sm" fw="bold">Nama</Text>}
-              placeholder="Masukkan nama"
+              placeholder="masukkan nama"
               onChange={(val) => (state.pengaduanMasyarakat.create.form.name = val.target.value)}
             />
             <TextInput
               label={<Text fz="sm" fw="bold">Email</Text>}
-              placeholder="Masukkan email"
+              placeholder="masukkan email"
               onChange={(val) => (state.pengaduanMasyarakat.create.form.email = val.target.value)}
             />
             <TextInput
               type="number"
               label={<Text fz="sm" fw="bold">Nomor Telepon</Text>}
-              placeholder="Masukkan nomor telepon"
+              placeholder="masukkan nomor telepon"
               onChange={(val) => (state.pengaduanMasyarakat.create.form.nomorTelepon = val.target.value)}
             />
             <TextInput
               label={<Text fz="sm" fw="bold">NIK</Text>}
-              placeholder="Masukkan nik"
+              placeholder="masukkan nik"
               onChange={(val) => (state.pengaduanMasyarakat.create.form.nik = val.target.value)}
             />
             <TextInput
               label={<Text fz="sm" fw="bold">Judul Pengaduan</Text>}
-              placeholder="Masukkan judul pengaduan"
+              placeholder="masukkan judul pengaduan"
               onChange={(val) => (state.pengaduanMasyarakat.create.form.judulPengaduan = val.target.value)}
             />
             <TextInput
               label={<Text fz="sm" fw="bold">Lokasi Kejadian</Text>}
-              placeholder="Masukkan lokasi kejadian"
+              placeholder="masukkan lokasi kejadian"
               onChange={(val) => (state.pengaduanMasyarakat.create.form.lokasiKejadian = val.target.value)}
             />
             <Box>
@@ -144,7 +144,7 @@ function PengaduanMasyarakat() {
                 state.pengaduanMasyarakat.create.form.jenisPengaduanId = val ?? "";
               }}
               label={<Text fw={"bold"} fz={"sm"}>Jenis Pengaduan</Text>}
-              placeholder="Pilih jenis pengaduan"
+              placeholder="Pilih kategori produk"
               data={
                 state.jenisPengaduan.findMany.data?.map((v) => ({
                   value: v.id,

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/[id]/page.tsx

@@ -1,16 +1,16 @@
 'use client'
-import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 import colors from '@/con/colors';
-import { Box, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text, Skeleton } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
+import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 
-import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
-import BackButton from '../../../desa/layanan/_com/BackButto';
+import { IconMapper, IconKey } from '@/app/admin/(dashboard)/_com/iconMap';
 
 function Page() {
   const stateProgramKreatif = useProxy(programKreatifState);
+  const router = useRouter();
   const params = useParams();
 
   useShallowEffect(() => {
@@ -31,7 +31,14 @@ function Page() {
     <Box px={{ base: 'md', md: 100 }} py="md">
       {/* Tombol Kembali */}
       <Box mb="md">
-        <BackButton/>
+        <Text
+          c={colors['blue-button']}
+          fw="bold"
+          style={{ cursor: 'pointer' }}
+          onClick={() => router.back()}
+        >
+          &larr; Kembali
+        </Text>
       </Box>
 
       {/* Konten Utama */}

src/app/darmasaba/(pages)/inovasi/program-kreatif-desa/page.tsx

@@ -117,7 +117,7 @@ function Page() {
                       )}
                     </Center>
                     <Text ta={'center'} fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
-                    <Text lineClamp={2} lh={"1.9"} py={10} ta={'center'} fz={'lg'} c={'black'}>{v.slug}</Text>
+                    <Text py={10} ta={'center'} fz={'lg'} c={'black'}>{v.slug}</Text>
                     <Center>
                       <Button onClick={() => router.push(`/darmasaba/inovasi/program-kreatif-desa/${v.id}`)} bg={colors['blue-button']}>Selengkapnya</Button>
                     </Center>

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -1,89 +0,0 @@
-'use client'
-
-import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'
-import { useShallowEffect } from '@mantine/hooks'
-import { useParams } from 'next/navigation'
-import { useProxy } from 'valtio/utils'
-
-import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan'
-import colors from '@/con/colors'
-import BackButton from '../../../desa/layanan/_com/BackButto'
-
-function DetailKeamananLingkunganUser() {
-  const keamananState = useProxy(keamananLingkunganState)
-  const params = useParams()
-
-  // Ambil data berdasarkan ID dari URL
-  useShallowEffect(() => {
-    keamananState.findUnique.load(params?.id as string)
-  }, [])
-
-  // Loading state
-  if (!keamananState.findUnique.data) {
-    return (
-      <Stack py={40}>
-        <Skeleton height={500} radius="md" />
-      </Stack>
-    )
-  }
-
-  const data = keamananState.findUnique.data
-
-  return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
-    <Box px={{ base: 'md', md: 100 }}>
-     <BackButton />
-
-      {/* Wrapper Detail */}
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '80%' }}
-        mx="auto"
-        bg={colors['white-1']}
-        p="xl"
-        radius="lg"
-        shadow="md"
-      >
-        <Stack gap="lg">
-          {/* Judul */}
-          <Text
-            ta="center"
-            fz={{ base: 'xl', md: '2xl' }}
-            fw={700}
-            c={colors['blue-button']}
-          >
-            {data?.name || 'Tanpa Judul'}
-          </Text>
-
-          {/* Gambar */}
-          <Center>
-            <Image
-              w={{ base: 250, sm: 400, md: 550 }}
-              src={data?.image?.link}
-              alt={data?.name || 'gambar keamanan lingkungan'}
-              radius="md"
-              loading="lazy"
-              fit="cover"
-            />
-          </Center>
-
-          {/* Deskripsi */}
-          <Box>
-            <Text fz="lg" fw="bold" mb={5}>
-              Deskripsi
-            </Text>
-            <Text
-              fz="md"
-              c="dimmed"
-              dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }}
-              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-            />
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-    </Stack>
-  )
-}
-
-export default DetailKeamananLingkunganUser

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -1,18 +1,17 @@
 'use client'
 import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan';
 import colors from '@/con/colors';
-import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { useRouter } from 'next/navigation';
 
 
 function Page() {
   const state = useProxy(keamananLingkunganState)
-  const router = useRouter()  
+    const [expandedMap, setExpandedMap] = useState<Record<number, boolean>>({});
   const [search, setSearch] = useState('')
   const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const {
@@ -27,6 +26,13 @@ function Page() {
     load(page, 3, debouncedSearch)
   }, [page, debouncedSearch])
 
+  const toggleExpanded = (index: number, value: boolean) => {
+    setExpandedMap((prev) => ({
+      ...prev,
+      [index]: value,
+    }));
+  };
+
   if (loading || !data) {
     return (
       <Box py={10}>
@@ -59,100 +65,60 @@ function Page() {
           </GridCol>
         </Grid>
         <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" mt={4} >
-          Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
+        Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <SimpleGrid
-            cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg">
-            {data.map((v, k) => (
-              <Paper
-                key={k}
-                radius="xl"
-                shadow="md"
-                withBorder
-                p="lg"
-                bg={colors['white-trans-1']}
-                style={{
-                  transition: 'all 200ms ease',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  flexDirection: 'column',
-                  justifyContent: 'space-between',
-                  height: '100%',
-                }}
-              >
-                <Stack align="center" gap="sm" style={{ flexGrow: 1 }}>
-                  <Box
-                    style={{
-                      width: '100%',
-                      aspectRatio: '16/9',
-                      borderRadius: '12px',
-                      overflow: 'hidden',
-                      position: 'relative',
-                    }}
-                  >
-                    <Image
-                      src={v.image?.link}
-                      alt={v.name}
-                      fit="cover"
-                      loading="lazy"
-                      style={{
-                        width: '100%',
-                        height: '100%',
-                        transition: 'transform 0.4s ease',
-                      }}
-                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
-                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
-                    />
-                  </Box>
-                  <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
-                    {v.name}
-                  </Text>
-                  <Text
-                    fz="sm"
-                    ta="justify"
-                    lineClamp={3}
-                    lh={1.6}
-                    style={{
-                      minHeight: '4.8em',
-                    }}
-                  >
-                    <span
-                      style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-                      dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                    />
-                  </Text>
-                </Stack>
-                <Center mt="md">
-                  <Button
-                    variant="light"
-                    onClick={() => {
-                      router.push(`/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal/${v.id}`)
-                    }}
-                  >
-                    Detail
-                  </Button>
-                </Center>
-              </Paper>
-            ))}
+            pb={10}
+            cols={{
+              base: 1,
+              md: 3,
+            }}>
+            {data.map((v, k) => {
+              return (
+                <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
+                  <Stack gap={'xs'}>
+                    <Center px={10} py={20}>
+                      <Image loading="lazy" src={v.image?.link} alt='' />
+                    </Center>
+                    <Box px={'lg'}>
+                      <Box pb={20}>
+                        <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                          {v.name}
+                        </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={expandedMap[k] || false}
+                          onExpandedChange={(val) => toggleExpanded(k, val)}
+                        >
+                          <Text pb={10} fz={"h4"} ta={'justify'} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                        </Spoiler>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
           </SimpleGrid>
         </Stack>
       </Box>
-
-      <Center mt="xl">
+      <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage, 3, search)}
+          onChange={(newPage) => load(newPage)} // ini penting!
           total={totalPages}
-          size="lg"
-          radius="xl"
-          styles={{
-            control: {
-              border: `1px solid ${colors['blue-button']}`,
-            },
-          }}
+          my="md"
         />
       </Center>
     </Stack>

src/app/darmasaba/(pages)/keamanan/kontak-darurat/page.tsx

@@ -45,7 +45,7 @@ function Page() {
             <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
               Kontak Darurat
             </Text>
-            <Text fz="md" >
+            <Text fz={{ base: "h4", md: "h3" }} >
               Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung.
             </Text>
           </Box>

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/program-lainnya/page.tsx

@@ -1,26 +1,27 @@
 'use client'
 import {
   Box,
-  Button,
   Card,
   Center,
   Group,
   Pagination,
-  Paper,
   Skeleton,
   Stack,
   Text,
-  Title
+  Title,
+  Tooltip,
+  Button,
+  Paper,
 } from '@mantine/core';
-import { IconArrowRight, IconSearch } from '@tabler/icons-react';
+import { IconSearch, IconArrowRight } from '@tabler/icons-react';
 
-import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
 import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan/pencegahan-kriminalitas';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowLeft } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
+import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import { IconArrowLeft } from '@tabler/icons-react';
 
 function PencegahanKriminalitas() {
   const [search, setSearch] = useState("");
@@ -95,6 +96,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                   style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
                 <Group justify="flex-end" mt="sm">
+                  <Tooltip label="Lihat detail program" withArrow>
                     <Button
                       size="sm"
                       variant="gradient"
@@ -104,6 +106,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                     >
                       Lihat Detail
                     </Button>
+                  </Tooltip>
                 </Group>
               </Stack>
             </Card>

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx

@@ -9,16 +9,21 @@ import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { useRouter } from 'next/navigation';
 
+
 function Page() {
   const state = useProxy(polsekTerdekatState.findFirst);
-  const router = useRouter();
-  const { data, loading, load } = state;
+  const router = useRouter()
+  const {
+    data,
+    loading,
+    load,
+  } = state;
 
   useEffect(() => {
     load();
   }, []);
 
-  // Loading state
+  // kalau masih loading
   if (loading) {
     return (
       <Stack py={10}>
@@ -27,175 +32,104 @@ function Page() {
     );
   }
 
-  // Data kosong
+  // kalau data kosong
   if (!data) {
     return (
-      <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
-        <Box px={{ base: 'md', md: 100 }}>
-          <BackButton />
-        </Box>
-        <Box pb={10} px={{ base: 20, md: 100 }}>
-          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
-            Kantor Polisi Terdekat
-          </Text>
-          <Text pb={15} fz="md">
-            Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
-          </Text>
-        </Box>
-        <Center py="xl">
-          <Text fz="lg" fw="bold" c="red">
-            Data Polsek tidak ada
-          </Text>
-        </Center>
-      </Stack>
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+         <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box pb={10} px={{ base: 20, md: 100 }}>
+        <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Kantor Polisi Terdekat
+        </Text>
+        <Text pb={15} fz={'md'} >
+          Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
+        </Text>
+      </Box>
+      <Center py="xl">
+        <Text fz="lg" fw="bold" c="red">
+          Data Polsek tidak ada
+        </Text>
+      </Center>
+      </Stack >
     );
   }
 
   return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-
       <Box pb={10} px={{ base: 20, md: 100 }}>
-        <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+        <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Kantor Polisi Terdekat
         </Text>
-        <Text pb={15} fz="h4">
+        <Text pb={15} fz={'h4'} >
           Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
         </Text>
       </Box>
-
-      <Box px={{ base: 'md', md: 100 }}>
-        <Stack gap="lg">
-          <Paper radius={10} bg={colors['white-trans-1']} p="xl">
-            <Stack gap="xs">
-              <SimpleGrid cols={{ base: 1, md: 2 }}>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10} bg={colors["white-trans-1"]} p={'xl'}>
+            <Stack gap={'xs'}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  md: 2,
+                }}
+              >
+                {/* Content Sebelah Kiri */}
                 {loading ? (
-                  <Center>
-                    <Skeleton h={400} />
-                  </Center>
-                ) : (
+                  <Center><Skeleton h={400} /></Center>
+                ) : data ? (
                   <>
-                    {/* === KIRI === */}
                     <Box>
-                      <Text c={colors['blue-button']} fw="bold" fz="h2">
-                        {data.nama}
-                      </Text>
-                      <Text c={colors['blue-button']} fz="sm">
-                        {data.jarakKeDesa}
-                      </Text>
-
-                      {/* Alamat */}
-                      <Flex
-                        py={10}
-                        gap={9}
-                        align="flex-start"
-                        wrap="wrap"
-                        style={{ wordBreak: 'break-word' }}
-                      >
-                        <Box w={25} mt={3}>
-                          <IconPin size={22} />
-                        </Box>
-                        <Text
-                          fz="lg"
-                          style={{
-                            flex: 1,
-                            wordBreak: 'break-word',
-                            lineHeight: 1.4,
+                      <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>{data.nama}</Text>
+                      <Text c={colors["blue-button"]} fz={'sm'}>{data.jarakKeDesa}</Text>
+                      <Flex py={10} gap={9} align={'center'}>
+                        <IconPin size={25} color={colors["blue-button"]} />
+                        <Text c={colors["blue-button"]} fz={'lg'}>{data.alamat}</Text>
+                      </Flex>
+                      <Flex gap={9} align={'center'}>
+                        <IconPhone size={25} color={colors["blue-button"]} />
+                        <Text c={colors["blue-button"]} fz={'lg'}>{data.nomorTelepon}</Text>
+                      </Flex>
+                      <Flex py={10} gap={9} align={'center'}>
+                        <IconClock size={25} color={colors["blue-button"]} />
+                        <Text c={colors["blue-button"]} fz={'lg'}>{data.jamOperasional}</Text>
+                      </Flex>
+                      <Box>
+                        <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Layanan Yang Tersedia :</Text>
+                        <SimpleGrid
+                          py={10}
+                          cols={{
+                            base: 1,
+                            md: 2,
                           }}
                         >
-                          {data.alamat}
-                        </Text>
-                      </Flex>
-
-                      {/* Telepon */}
-                      <Flex
-                        gap={9}
-                        align="flex-start"
-                        wrap="wrap"
-                        style={{ wordBreak: 'break-word' }}
-                      >
-                        <Box w={25} mt={3}>
-                          <IconPhone size={22} />
-                        </Box>
-                        <Text fz="lg">
-                          {data.nomorTelepon}
-                        </Text>
-                      </Flex>
-
-                      {/* Jam Operasional */}
-                      <Flex
-                        py={10}
-                        gap={9}
-                        align="flex-start"
-                        wrap="wrap"
-                        style={{ wordBreak: 'break-word' }}
-                      >
-                        <Box w={25} mt={3}>
-                          <IconClock size={22}  />
-                        </Box>
-                        <Text fz="lg">
-                          {data.jamOperasional}
-                        </Text>
-                      </Flex>
-
-                      {/* Layanan */}
-                      <Box>
-                        <Text c={colors['blue-button']} fw="bold" fz="h2">
-                          Layanan Yang Tersedia :
-                        </Text>
-                        <SimpleGrid py={10} cols={{ base: 1, md: 2 }}>
-                          <Text fz="lg">
-                            {data.layananPolsek.nama}
-                          </Text>
+                          <Box>
+                            <Text c={colors["blue-button"]} fz={'lg'}>{data.layananPolsek.nama}</Text>
+                          </Box>
                         </SimpleGrid>
                       </Box>
-
                       <Box>
-                        <Button
-                          bg={colors['blue-button']}
-                          onClick={() =>
-                            router.push(`/darmasaba/keamanan/polsek-terdekat/semua-polsek`)
-                          }
-                          rightSection={<IconArrowDown size={20} />}
-                        >
-                          Lihat Kantor Polisi Lainnya
-                        </Button>
+                        <Button bg={colors["blue-button"]} onClick={() => router.push(`/darmasaba/keamanan/polsek-terdekat/semua-polsek`)} rightSection={<IconArrowDown size={20} />}>Lihat Kantor Polisi Lainnya</Button>
                       </Box>
                     </Box>
-
-                    {/* === KANAN === */}
-                    <Box pos="relative">
+                    <Box pos={'relative'}>
                       <Box style={{ position: 'absolute', top: 0, right: 0 }}>
-                        <Badge size="lg" c="#287407" bg="#A8EDC4">
-                          Buka
-                        </Badge>
+                        <Badge size='lg' c={'#287407'} bg={'#A8EDC4'}>Buka</Badge>
                       </Box>
-
                       <Box pt={40}>
-                        <iframe
-                          style={{ border: 2, width: '100%' }}
-                          src={data.embedMapUrl}
-                          width="550"
-                          height="300"
-                        ></iframe>
+                        <iframe style={{ border: 2, width: "100%" }} src={data.embedMapUrl} width="550" height="300" ></iframe>
                       </Box>
-
                       <Box pt={20}>
-                        <Button
-                          onClick={() => router.push(data.linkPetunjukArah)}
-                          fullWidth
-                          bg={colors['blue-button']}
-                          radius={10}
-                          leftSection={<IconNavigation size={20} />}
-                        >
-                          Petunjuk Arah
-                        </Button>
+                        <Button onClick={() => router.push(data.linkPetunjukArah)} fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20} />}>Petunjuk Arah</Button>
                       </Box>
                     </Box>
                   </>
-                )}
+                ) : null}
               </SimpleGrid>
             </Stack>
           </Paper>

src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx

@@ -56,11 +56,8 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" >
-          Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal).
-        </Text>
-        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" >
-          Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
+          Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
@@ -85,7 +82,7 @@ function Page() {
                           {v.judul}
                         </Text>
                         <Box>
-                          <Text pb={10} fz={"md"} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                          <Text pb={10} fz={"md"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                         </Box>
                       </Box>
                     </Box>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/page.tsx

@@ -54,14 +54,14 @@ function ArtikelKesehatanPage() {
                   <Image style={{ borderTopLeftRadius: '10px', borderTopRightRadius: '10px' }} src={item.image?.link} alt={item.title} height={200} fit="cover" loading="lazy" />
                 </Card.Section>
                 <Stack gap="xs" mt="md">
-                  <Text fw="bold" fz="xl" c={colors['blue-button']}>{item.title}</Text>
+                  <Text fw="bold" fz="xl" c="dark">{item.title}</Text>
                   <Group gap="xs">
-                    <IconCalendar size={16} color='gray' />
+                    <IconCalendar size={16} color={colors['blue-button']} />
                     <Text fz="sm" c="dimmed">
                       {new Date(item.createdAt).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })} • Dinas Kesehatan
                     </Text>
                   </Group>
-                  <Text fz="md" lineClamp={3}>
+                  <Text fz="md" c="dark" lineClamp={3}>
                     {item.content}
                   </Text>
                   <Group justify="flex-start">

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/page.tsx

@@ -73,14 +73,14 @@ function FasilitasKesehatanPage() {
                       </Badge>
                     </Group>
                     <Group gap="xs">
-                      <IconMapPin size={18} stroke={1.5} />
-                      <Text fz="sm">
+                      <IconMapPin size={18} stroke={1.5} color={colors['blue-button']} />
+                      <Text fz="sm" c="dimmed">
                         {item.informasiumum.alamat}
                       </Text>
                     </Group>
                     <Group gap="xs">
-                      <IconClock size={18} stroke={1.5} />
-                      <Text fz="sm">
+                      <IconClock size={18} stroke={1.5} color={colors['blue-button']} />
+                      <Text fz="sm" c="dimmed">
                         {item.informasiumum.jamOperasional}
                       </Text>
                     </Group>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/page.tsx

@@ -49,7 +49,7 @@ function JadwalKegiatanPage() {
               >
                 <Stack gap="sm">
                   <Group justify="space-between">
-                    <Text fw={700} fz="xl" c={colors['blue-button']}>
+                    <Text fw={700} fz="xl">
                       {item.informasijadwalkegiatan.name}
                     </Text>
                     <Text fw={600} fz="sm" c={colors['blue-button']}>
@@ -62,12 +62,12 @@ function JadwalKegiatanPage() {
                   </Group>
 
                   <Group gap="xs">
-                    <IconClockHour4 size={18} />
+                    <IconClockHour4 size={18} color={colors['blue-button']} />
                     <Text fz="sm">{item.informasijadwalkegiatan.waktu}</Text>
                   </Group>
 
                   <Group gap="xs">
-                    <IconMapPin size={18} />
+                    <IconMapPin size={18} color={colors['blue-button']} />
                     <Text fz="sm">{item.informasijadwalkegiatan.lokasi}</Text>
                   </Group>
 

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/[id]/page.tsx

@@ -73,6 +73,7 @@ function DetailInfoWabahPenyakitUser() {
             <Text fz="lg" fw="bold">Deskripsi</Text>
             <Text
               fz="md"
+              c="dimmed"
               dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap || '-' }}
               style={{ wordBreak: "break-word", whiteSpace: "normal" }}
             />

src/app/darmasaba/(pages)/kesehatan/kontak-darurat/page.tsx

@@ -53,7 +53,7 @@ function Page() {
           <Text fz={{ base: '2rem', md: '2.8rem' }} c={colors['blue-button']} fw={800}>
             Kontak Darurat
           </Text>
-          <Text fz="md" mt={4}>
+          <Text c="dimmed" fz="md" mt={4}>
             Hubungi layanan penting dengan cepat dan mudah
           </Text>
         </GridCol>
@@ -88,83 +88,59 @@ function Page() {
         ) : (
           <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg">
             {data.map((v, k) => (
-             <Paper
-             key={k}
-             radius="xl"
-             shadow="md"
-             withBorder
-             p="lg"
-             bg={colors['white-trans-1']}
-             style={{
-               transition: 'all 200ms ease',
-               cursor: 'pointer',
-               display: 'flex',
-               flexDirection: 'column',
-               justifyContent: 'space-between', // ✅ biar button selalu di bawah
-               height: '100%', // ✅ bikin tinggi seragam
-             }}
-           >
-             <Stack align="center" gap="sm" style={{ flexGrow: 1 }}>
-               <Box
-                 style={{
-                   width: '100%',
-                   aspectRatio: '16/9',
-                   borderRadius: '12px',
-                   overflow: 'hidden',
-                   position: 'relative',
-                 }}
-               >
-                 <Image
-                   src={v.image.link}
-                   alt={v.name}
-                   fit="cover"
-                   loading="lazy"
-                   style={{
-                     width: '100%',
-                     height: '100%',
-                     transition: 'transform 0.4s ease',
-                   }}
-                   onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
-                   onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
-                 />
-               </Box>
-           
-               <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
-                 {v.name}
-               </Text>
-           
-               <Text
-                 fz="sm"
-                 ta="center"
-                 lineClamp={3}
-                 lh={1.6}
-                 style={{
-                   minHeight: '4.8em', // tinggi tetap 3 baris
-                 }}
-               >
-                 <span
-                   style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
-                   dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                 />
-               </Text>
-             </Stack>
-           
-             {/* ✅ Tombol selalu di bagian bawah card */}
-             <Center mt="md">
-               <Button
-                 variant="light"
-                 leftSection={<IconBrandWhatsapp size={18} />}
-                 component="a"
-                 href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`}
-                 target="_blank"
-                 aria-label="Hubungi WhatsApp"
-               >
-                 WhatsApp
-               </Button>
-             </Center>
-           </Paper>
-           
-            
+              <Paper
+                key={k}
+                radius="xl"
+                shadow="md"
+                withBorder
+                p="lg"
+                bg={colors['white-trans-1']}
+                style={{
+                  transition: 'all 200ms ease',
+                  cursor: 'pointer',
+                }}
+              >
+                <Stack align="center" gap="sm">
+                  <Box
+                    style={{
+                      width: '100%',
+                      aspectRatio: '16/9',
+                      borderRadius: '12px',
+                      overflow: 'hidden',
+                      position: 'relative',
+                    }}
+                  >
+                    <Image
+                      src={v.image.link}
+                      alt={v.name}
+                      fit="cover"
+                      loading="lazy"
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        transition: 'transform 0.4s ease',
+                      }}
+                      onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                      onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                    />
+                  </Box>
+
+                  <Text ta="center" fw={700} fz="lg" c={colors['blue-button']}>
+                    {v.name}
+                  </Text>
+                  <Text fz="sm" c="dimmed" ta="center" lineClamp={3}>
+                    <span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                  </Text>
+                  <Button
+                    variant="light"
+                    leftSection={<IconBrandWhatsapp size={18} />}
+                    component="a"
+                    href={`https://wa.me/${v.whatsapp.replace(/\D/g, '')}`}
+                    target="_blank"
+                    aria-label="Hubungi WhatsApp"
+                  >WhatsApp</Button>
+                </Stack>
+              </Paper>
             ))}
           </SimpleGrid>
         )}

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/[id]/page.tsx

@@ -1,14 +1,15 @@
 'use client';
 import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
 import colors from '@/con/colors';
-import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import BackButton from '../../../desa/layanan/_com/BackButto';
 
 function DetailPenangananDaruratUser() {
   const state = useProxy(penangananDarurat);
+  const router = useRouter();
   const params = useParams();
 
   useShallowEffect(() => {
@@ -31,7 +32,14 @@ function DetailPenangananDaruratUser() {
     <Box py={20}>
       {/* Tombol Back */}
       <Box px={{ base: 'md', md: 100 }}>
-        <BackButton/>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          mb={20}
+        >
+          Kembali
+        </Button>
       </Box>
 
       {/* Wrapper Detail */}

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -52,7 +52,7 @@ function Page() {
           <Text fz={{ base: 30, md: 40 }} c={colors['blue-button']} fw={800} lh={1.2}>
             Penanganan Darurat
           </Text>
-          <Text fz="md" mt={4}>
+          <Text fz="md" c="dimmed" mt={4}>
             Informasi cepat dan jelas untuk situasi darurat kesehatan
           </Text>
         </GridCol>
@@ -105,28 +105,36 @@ function Page() {
                 onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
               >
                 <Stack align="center" gap="md">
-                  <Box
-                    style={{
-                      width: '100%',
-                      aspectRatio: '16/9',
-                      borderRadius: '12px',
-                      overflow: 'hidden',
-                      position: 'relative',
-                    }}
-                  >
-                    <Image
-                      src={v.image.link}
-                      alt={v.name}
-                      fit="cover"
-                      loading="lazy"
+                  <Center>
+                    <Box
                       style={{
                         width: '100%',
-                        height: '100%',
-                        transition: 'transform 0.4s ease',
+                        height: 180, // 🔥 tinggi fix biar semua seragam
+                        borderRadius: 12,
+                        overflow: 'hidden',
+                        position: 'relative',
+                        backgroundColor: '#f0f2f5', // fallback kalau gambar loading
                       }}
-                    />
-                  </Box>
+                    >
+                      <Image
+                        src={v.image?.link || '/img/default.png'}
+                        alt={v.name}
+                        fit="cover"
+                        width="100%"
+                        height="100%"
+                        loading="lazy"
+                        style={{
+                          objectFit: 'cover',
+                          objectPosition: 'center',
+                          transition: 'transform 0.4s ease',
+                        }}
+                        onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
+                        onMouseLeave={(e) => (e.currentTarget.style.transform = 'scale(1)')}
+                      />
+                    </Box>
 
+
+                  </Center>
                   <Stack gap={4} w="100%">
                     <Text
                       fz="lg"
@@ -139,7 +147,8 @@ function Page() {
                     </Text>
                     <Box>
                       <Text
-                        fz="md"
+                        fz="sm"
+                        c="dimmed"
                         lineClamp={3}
                         dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                         style={{ wordBreak: "break-word", whiteSpace: "normal" }}
@@ -150,8 +159,6 @@ function Page() {
                       size="md"
                       component="a"
                       href={`/darmasaba/kesehatan/penanganan-darurat/${v.id}`}
-                      bg={colors['blue-button']}
-                      c="white"
                     >
                       Lihat Detail
                     </Button>

src/app/darmasaba/(pages)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -28,11 +28,10 @@ function Page() {
   }
 
   return (
-    <Stack bg={colors.Bg} py="xl" gap="xl">
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }}>
       <Paper
         px={{ base: 'md', md: 100 }}
         py="xl"
@@ -71,7 +70,7 @@ function Page() {
           <Group gap="xl">
             <Group gap="xs">
               <Tooltip label="Tanggal dibuat" withArrow>
-                <IconCalendar color='gray' size={20} stroke={1.5} />
+                <IconCalendar size={20} stroke={1.5} />
               </Tooltip>
               <Text size="sm" c="dimmed">
                 {state.findUnique.data.createdAt
@@ -85,14 +84,13 @@ function Page() {
             </Group>
             <Group gap="xs">
               <Tooltip label="Dibuat oleh" withArrow>
-                <IconUser color='gray' size={20} stroke={1.5} />
+                <IconUser size={20} stroke={1.5} />
               </Tooltip>
               <Text size="sm" c="dimmed">Admin Desa</Text>
             </Group>
           </Group>
         </Stack>
       </Paper>
-      </Box>
     </Stack>
   );
 }

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

@@ -1,5 +1,4 @@
 'use client'
-import programKesehatan from "@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan";
 import colors from "@/con/colors";
 import {
   Box,
@@ -16,9 +15,9 @@ import {
   Stack,
   Text,
   TextInput,
-  Transition
+  Tooltip,
+  Transition,
 } from "@mantine/core";
-import { useDebouncedValue, useShallowEffect } from "@mantine/hooks";
 import {
   IconBarbell,
   IconCalendar,
@@ -27,10 +26,12 @@ import {
   IconUser,
   IconUsersGroup,
 } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-import { useState } from "react";
-import { useProxy } from "valtio/utils";
 import BackButton from "../../desa/layanan/_com/BackButto";
+import { useProxy } from "valtio/utils";
+import programKesehatan from "@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan";
+import { useState } from "react";
+import { useDebouncedValue, useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 
 const manfaatProgram = [
   {
@@ -193,6 +194,7 @@ export default function Page() {
                           <Text size="sm">Admin Desa</Text>
                         </Group>
                       </Group>
+                      <Tooltip label="Lihat detail program" withArrow>
                         <Button
                           mt="lg"
                           fullWidth
@@ -209,6 +211,7 @@ export default function Page() {
                         >
                           Lihat Detail
                         </Button>
+                      </Tooltip>
                     </Box>
                   </Stack>
                 </Paper>

src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx

@@ -93,23 +93,20 @@ function Page() {
                     <Text fw={600} fz="lg" lineClamp={1}>{v.name}</Text>
                     <Badge color="blue" variant="light" radius="sm" fz="xs">Aktif</Badge>
                   </Group>
-                  <Stack gap={6}>
-                    <Group gap="xs" align="flex-start" wrap="nowrap">
-                      <Box pt={2}><IconMapPin size={16} /></Box>
-                      <Text fz="sm" c="dimmed">{v.alamat}</Text>
+                  <Stack gap={4}>
+                    <Group gap="xs">
+                      <IconMapPin size={16} />
+                      <Text fz="sm" c="dimmed" lineClamp={2}>{v.alamat}</Text>
                     </Group>
-
-                    <Group gap="xs" align="flex-start" wrap="nowrap">
-                      <Box pt={2}><IconPhone size={16} /></Box>
+                    <Group gap="xs">
+                      <IconPhone size={16} />
                       <Text fz="sm" c="dimmed">{v.kontak.kontakPuskesmas}</Text>
                     </Group>
-
-                    <Group gap="xs" align="flex-start" wrap="nowrap">
-                      <Box pt={2}><IconMail size={16} /></Box>
+                    <Group gap="xs">
+                      <IconMail size={16} />
                       <Text fz="sm" c="dimmed">{v.kontak.email}</Text>
                     </Group>
                   </Stack>
-
                   <Anchor
                     href={`/darmasaba/kesehatan/puskesmas/${v.id}`}
                     fz="sm"

src/app/darmasaba/(pages)/lingkungan/edukasi-lingkungan/component/edukasiCard.tsx

@@ -1,7 +1,7 @@
 // Create a new component: components/EdukasiCard.tsx
 'use client';
 
-import { Box, Paper, Stack, Text } from '@mantine/core';
+import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core';
 import { ReactNode } from 'react';
 
 interface EdukasiCardProps {
@@ -31,6 +31,7 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
         <Box>
           <Stack align="center" gap="xs" mb="md">
             <Box style={{ color }}>{icon}</Box>
+            <Tooltip label={title} maw={250} multiline withArrow position="top">
               <Text 
                 fz={{ base: 'h5', md: 'h4' }} 
                 fw={700} 
@@ -44,8 +45,10 @@ export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: Edu
                   alignItems: 'center',
                   justifyContent: 'center'
                 }}
-                dangerouslySetInnerHTML={{ __html: title }}
-              />
+              >
+                {title}
+              </Text>
+            </Tooltip>
           </Stack>
           <Text
             size="sm"

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

@@ -62,6 +62,7 @@ export default function EdukasiLingkunganPage() {
         </Text>
         <Text
           fz={{ base: 'md', md: 'lg' }}
+          c="dimmed"
           maw={800}
           mx="auto"
         >
@@ -77,21 +78,21 @@ export default function EdukasiLingkunganPage() {
           verticalSpacing={{ base: 'md', md: 'xl' }}
         >
           <EdukasiCard
-            icon={<IconLeaf size={45} />}
+            icon={<IconLeaf size={32} />}
             title={tujuan.data?.judul || ''}
             description={tujuan.data?.deskripsi || ''}
             color={colors['blue-button']}
           />
 
           <EdukasiCard
-            icon={<IconRecycle size={45} />}
+            icon={<IconRecycle size={32} />}
             title={materi.data?.judul || ''}
             description={materi.data?.deskripsi || ''}
             color={colors['blue-button']}
           />
 
           <EdukasiCard
-            icon={<IconPlant2 size={45} />}
+            icon={<IconPlant2 size={32} />}
             title={contoh.data?.judul || ''}
             description={contoh.data?.deskripsi || ''}
             color={colors['blue-button']}

src/app/darmasaba/(pages)/lingkungan/gotong-royong/[kategori]/[id]/page.tsx

@@ -1,132 +1,80 @@
-'use client';
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 
-import { useProxy } from 'valtio/utils';
-import { Box, Image, Paper, Skeleton, Stack, Text, Title, Group } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconCalendar, IconMapPin, IconUsers } from '@tabler/icons-react';
-import { useParams } from 'next/navigation';
-import colors from '@/con/colors';
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
-function DetailKegiatanDesaUser() {
-  const kegiatanDesaState = useProxy(gotongRoyongState.kegiatanDesa);
-  const params = useParams();
 
-  useShallowEffect(() => {
-    kegiatanDesaState.findUnique.load(params?.id as string);
-  }, []);
 
-  const data = kegiatanDesaState.findUnique.data;
 
-  if (!data) {
+function Page() {
+  const params = useParams<{ id: string }>();
+  const id = Array.isArray(params.id) ? params.id[0] : params.id;
+  const state = useProxy(gotongRoyongState.kegiatanDesa)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      if (!id) return;
+      try {
+        setLoading(true);
+        await state.findUnique.load(id);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData()
+  }, [id])
+
+  if (loading) {
     return (
-      <Stack py={20}>
-        <Skeleton height={400} radius="md" />
-        <Skeleton height={20} width="70%" />
-        <Skeleton height={15} width="50%" />
-        <Skeleton height={300} radius="md" />
-      </Stack>
+      <Center>
+        <Skeleton height={500} />
+      </Center>
     );
   }
 
+  if (!state.findUnique.data) {
+    return (
+      <Center>
+        <Text>Data tidak ditemukan</Text>
+      </Center>
+    );
+  }
+
+
   return (
-    <Box py={30}>
-      {/* Header Gambar */}
-
-      {/* Konten */}
-      <Paper
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        maw={900}
-        mx="auto"
-        >
-        <Stack gap="md">
-        {data.image?.link && (
-          <Image
-            src={data.image.link}
-            alt={data.judul || 'Kegiatan Desa'}
-            radius="md"
-            fit="cover"
-            h={300}
-            mb="xl"
-            style={{ objectPosition: 'center', width: '100%' }}
-          />
-        )}
-          {/* Judul */}
-          <Title order={2} c={colors['blue-button']}>
-            {data.judul || 'Kegiatan Desa'}
-          </Title>
-
-          {/* Meta Info */}
-          <Group gap="xl" c="dimmed">
-            <Group gap={6}>
-              <IconCalendar size={18} />
-              <Text fz="sm">
-                {data.tanggal ? new Date(data.tanggal).toLocaleDateString('id-ID', { day: 'numeric', month: 'long', year: 'numeric' }) : '-'}
-              </Text>
-            </Group>
-
-            {data.lokasi && (
-              <Group gap={6}>
-                <IconMapPin size={18} />
-                <Text fz="sm">{data.lokasi}</Text>
-              </Group>
-            )}
-
-            {data.partisipan && (
-              <Group gap={6}>
-                <IconUsers size={18} />
-                <Text fz="sm">{data.partisipan}</Text>
-              </Group>
-            )}
-          </Group>
-
-          {/* Deskripsi Singkat */}
-          {data.deskripsiSingkat && (
-            <Box>
-              <Text fw={600} fz="lg" mb={4}>
-                Ringkasan
-              </Text>
-              <Text
-                fz="md"
-                c="dimmed"
-                dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat }}
-              />
-            </Box>
-          )}
-
-          {/* Deskripsi Lengkap */}
-          {data.deskripsiLengkap && (
-            <Box>
-              <Text fw={600} fz="lg" mb={4}>
-                Detail Kegiatan
-              </Text>
-              <Text
-                fz="md"
-                c="dimmed"
-                style={{ lineHeight: 1.6 }}
-                dangerouslySetInnerHTML={{ __html: data.deskripsiLengkap }}
-              />
-            </Box>
-          )}
-
-          {/* Kategori */}
-          {data.kategoriKegiatan?.nama && (
-            <Box mt="md">
-              <Text fw={600} fz="lg">
-                Kategori
-              </Text>
-              <Text fz="md" c="dimmed">
-                {data.kategoriKegiatan.nama}
-              </Text>
-            </Box>
-          )}
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
+      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
+      <Container w={{ base: "100%", md: "50%" }} >
+        <Box pb={20}>
+          <Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
+            {state.findUnique.data?.judul}
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+            fz={"1.5rem"}
+          >
+            Informasi Kegiatan Gotong Royong
+          </Text>
+        </Box>
+        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} loading="lazy"/>
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={"xs"}>
+          <Text py={20} style={{wordBreak: "break-word", whiteSpace: "normal"}} fz={{ base: "sm", md: "lg" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsiLengkap || '' }} />
         </Stack>
-      </Paper>
-    </Box>
+      </Box>
+    </Stack>
   );
 }
 
-export default DetailKegiatanDesaUser;
+export default Page;

src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx

@@ -44,12 +44,13 @@ function Page() {
           <Box style={{ display: 'flex', height: '100%' }}>
             <Paper
               p="lg"
+              bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
               style={{ 
                 borderRadius: 16, 
+                boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
                 width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+                flexDirection: 'column'
               }}
             >
               <Stack gap="md" px={20} style={{ height: '100%' }}>
@@ -73,12 +74,13 @@ function Page() {
          <Box style={{ display: 'flex', height: '100%' }}>
          <Paper
               p="lg"
+              bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
               style={{ 
                 borderRadius: 16, 
+                boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
                 width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+                flexDirection: 'column'
               }}
             >
               <Stack gap="md" px={20} style={{ height: '100%' }}>
@@ -103,12 +105,13 @@ function Page() {
          <Box>
             <Paper
               p="lg"
+              bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
               style={{ 
                 borderRadius: 16, 
+                boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)',
                 width: '100%',
                 display: 'flex',
-                flexDirection: 'column',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+                flexDirection: 'column'
               }}
             >
               <Stack gap="md" px={20} style={{ height: '100%' }}>

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

@@ -91,7 +91,7 @@ function Page() {
                     <Box style={{ alignContent: 'center', alignItems: 'center' }}>
                       {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
                     </Box>
-                    <Text fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
+                    <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
                   </Flex>
                 </Paper>
               </Box>

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

@@ -1,13 +1,13 @@
 'use client'
 import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Image, Modal, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Stepper, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Center, Group, Image, Modal, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Stepper, StepperStep, Text, TextInput, Title } from '@mantine/core';
 import { useDisclosure, useShallowEffect } from '@mantine/hooks';
 import { IconArrowRight, IconCoin, IconInfoCircle, IconSchool, IconUsers } from '@tabler/icons-react';
-import { useTransitionRouter } from 'next-view-transitions';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useTransitionRouter } from 'next-view-transitions';
 
 const dataBeasiswa = [
   { id: 1, nama: 'Penerima Beasiswa', jumlah: '250+', icon: IconUsers },
@@ -27,7 +27,7 @@ function Page() {
       tempatLahir: "",
       tanggalLahir: "",
       jenisKelamin: "",
-      kewarganegaraan: "WNI",
+      kewarganegaraan: "",
       agama: "",
       alamatKTP: "",
       alamatDomisili: "",
@@ -50,21 +50,9 @@ function Page() {
     close();
   };
 
-  const timeline = [
-    { label: "1 Maret 2025", desc: "Pembukaan Pendaftaran", date: new Date("2025-03-01") },
-    { label: "15 Maret 2025", desc: "Seleksi Administrasi", date: new Date("2025-03-15") },
-    { label: "1 April 2025", desc: "Tes Potensi Akademik", date: new Date("2025-04-01") },
-    { label: "15 April 2025", desc: "Wawancara", date: new Date("2025-04-15") },
-    { label: "1 Mei 2025", desc: "Pengumuman Hasil", date: new Date("2025-05-01") },
-  ];
-
   const [active, setActive] = useState(1);
-  useShallowEffect(() => {
-    const today = new Date();
-    // cari berapa banyak tanggal yang sudah lewat
-    const doneSteps = timeline.filter(item => today >= item.date).length;
-    setActive(doneSteps); // active step diset sesuai tanggal
-  }, []);
+  const nextStep = () => setActive((current) => (current < 5 ? current + 1 : current));
+  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
 
   if (loading || !data) {
     return (
@@ -127,7 +115,7 @@ function Page() {
           {data.map((v, k) => (
             <Paper key={k} p="xl" radius="xl" shadow="sm" bg={colors['white-trans-1']}>
               <Title order={3} fw={700} c={colors['blue-button']} mb="xs">{v.judul}</Title>
-              <Text fz="sm" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+              <Text fz="sm" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.deskripsi }}/>
             </Paper>
           ))}
         </SimpleGrid>
@@ -151,22 +139,19 @@ function Page() {
           Timeline Pendaftaran
         </Title>
         <Center>
-          <Stepper
-            mt={20}
-            active={active}
-            onStepClick={setActive}
-            orientation="vertical"
-            allowNextStepsSelect={false}
-          >
-            {timeline.map((item, index) => (
-              <Stepper.Step
-                key={index}
-                label={item.label}
-                description={item.desc}
-              />
-            ))}
+          <Stepper mt={20} active={active} onStepClick={setActive} orientation="vertical" allowNextStepsSelect={false}>
+            <StepperStep label="1 Maret 2025" description="Pembukaan Pendaftaran" />
+            <StepperStep label="15 Maret 2025" description="Seleksi Administrasi" />
+            <StepperStep label="1 April 2025" description="Tes Potensi Akademik" />
+            <StepperStep label="15 April 2025" description="Wawancara" />
+            <StepperStep label="1 Mei 2025" description="Pengumuman Hasil" />
           </Stepper>
         </Center>
+
+        <Group justify="center" mt="xl">
+          <Button variant="default" radius="xl" onClick={prevStep}>Kembali</Button>
+          <Button radius="xl" bg={colors['blue-button']} onClick={nextStep}>Lanjut</Button>
+        </Group>
       </Box>
 
       <Modal
@@ -209,11 +194,7 @@ function Page() {
             <TextInput
               label="Kewarganegaraan"
               placeholder="Masukkan kewarganegaraan"
-              value={beasiswaDesa.create.form.kewarganegaraan || "WNI"} // tampilkan WNI kalau kosong
-              onChange={(e) => {
-                beasiswaDesa.create.form.kewarganegaraan = e.target.value;
-              }}
-            />
+              onChange={(val) => { beasiswaDesa.create.form.kewarganegaraan = val.target.value }} />
             <Select
               label="Agama"
               placeholder="Pilih agama"

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/pelajari-lebih-lanjut/page.tsx

@@ -34,7 +34,7 @@ export default function BeasiswaPage() {
       tempatLahir: "",
       tanggalLahir: "",
       jenisKelamin: "",
-      kewarganegaraan: "WNI",
+      kewarganegaraan: "",
       agama: "",
       alamatKTP: "",
       alamatDomisili: "",
@@ -71,7 +71,7 @@ export default function BeasiswaPage() {
         <Stack gap="md" maw={600}>
           <Group>
             <IconSchool size={30} color={colors["blue-button"]} />
-            <Title order={2} c={colors["blue-button"]}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
+            <Title order={2}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
           </Group>
           <Text>
             Program ini bertujuan untuk mendukung pendidikan generasi muda di Desa Darmasaba
@@ -84,7 +84,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconInfoCircle size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Tentang Program</Title>
+          <Title order={3}>Tentang Program</Title>
         </Group>
         <Text>
           Program Beasiswa Desa Darmasaba adalah inisiatif pemerintah desa untuk meningkatkan akses
@@ -94,11 +94,12 @@ export default function BeasiswaPage() {
 
         {/* Tambahkan info tahun berjalan di sini */}
         <Paper mt="md" p="md" radius="lg" shadow="xs" bg="#f8fbff" withBorder>
-          <Text fw={500}>
-            Periode Beasiswa Tahun 2025
+          <Text fw={500} c={colors["blue-button"]}>
+            📅 Periode Beasiswa Tahun 2025
           </Text>
           <Text fz="sm" c="dimmed">
-            Pendaftaran beasiswa dibuka mulai <strong>1 Januari 2025</strong> dan ditutup pada <strong>31 Mei 2025</strong>.
+            Pendaftaran beasiswa dibuka mulai <strong>1 Januari 2025</strong> dan ditutup pada
+            <strong>31 Mei 2025</strong>.
             Pengumuman hasil seleksi akan diumumkan pada pertengahan Juni 2025 melalui website resmi Desa Darmasaba.
           </Text>
         </Paper>
@@ -108,7 +109,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconChecklist size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Syarat Pendaftaran</Title>
+          <Title order={3}>Syarat Pendaftaran</Title>
         </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
@@ -139,7 +140,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconTimeline size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Proses Seleksi</Title>
+          <Title order={3}>Proses Seleksi</Title>
         </Group>
 
         <Timeline active={4} bulletSize={24} lineWidth={2}>
@@ -147,8 +148,8 @@ export default function BeasiswaPage() {
             <Text c="dimmed" size="sm">
               Calon peserta mengisi formulir pendaftaran dan mengunggah dokumen pendukung.
             </Text>
-            <Text size="sm" fw={500} mt={4}>
-              Estimasi waktu: 1 Februari – 31 Mei 2025
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 1 Februari – 31 Mei 2025
             </Text>
           </Timeline.Item>
 
@@ -156,8 +157,8 @@ export default function BeasiswaPage() {
             <Text c="dimmed" size="sm">
               Panitia memverifikasi kelengkapan dan validitas berkas.
             </Text>
-            <Text size="sm" fw={500} mt={4}>
-              Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
             </Text>
           </Timeline.Item>
 
@@ -165,8 +166,8 @@ export default function BeasiswaPage() {
             <Text c="dimmed" size="sm">
               Peserta yang lolos administrasi akan diundang untuk wawancara langsung dengan tim seleksi.
             </Text>
-            <Text size="sm" fw={500} mt={4}>
-              Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
             </Text>
           </Timeline.Item>
 
@@ -174,14 +175,14 @@ export default function BeasiswaPage() {
             <Text c="dimmed" size="sm">
               Daftar penerima beasiswa diumumkan melalui website resmi Desa Darmasaba.
             </Text>
-            <Text size="sm" fw={500} mt={4}>
-              Estimasi waktu: 5 hari kerja setelah tahap wawancara selesai
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5 hari kerja setelah tahap wawancara selesai
             </Text>
           </Timeline.Item>
         </Timeline>
 
         <Text c="dimmed" size="sm" mt="lg" ta="center">
-          Total estimasi keseluruhan proses: sekitar 3–4 minggu setelah penutupan pendaftaran
+          🗓️ Total estimasi keseluruhan proses: sekitar 3–4 minggu setelah penutupan pendaftaran
         </Text>
       </Container>
 
@@ -190,7 +191,7 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl">
         <Group mb="sm">
           <IconQuote size={24} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Cerita Sukses Penerima Beasiswa</Title>
+          <Title order={3}>Cerita Sukses Penerima Beasiswa</Title>
         </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
@@ -218,12 +219,12 @@ export default function BeasiswaPage() {
       <Container size="lg" py="xl" ta="center">
         <Group justify="center" mb="sm">
           <IconUserPlus size={28} color={colors["blue-button"]} />
-          <Title order={3} c={colors["blue-button"]}>Siap Bergabung dengan Program Ini?</Title>
+          <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
         </Group>
         <Text c="dimmed" mb="md">
           Segera daftar dan wujudkan mimpimu bersama Desa Darmasaba.
         </Text>
-        <Button onClick={open} size="lg" radius="xl" bg={colors["blue-button"]}>
+        <Button onClick={open} size="lg" radius="xl" color="blue">
           Daftar Sekarang
         </Button>
       </Container>
@@ -268,11 +269,7 @@ export default function BeasiswaPage() {
             <TextInput
               label="Kewarganegaraan"
               placeholder="Masukkan kewarganegaraan"
-              value={beasiswaDesa.create.form.kewarganegaraan || "WNI"} // tampilkan WNI kalau kosong
-              onChange={(e) => {
-                beasiswaDesa.create.form.kewarganegaraan = e.target.value;
-              }}
-            />
+              onChange={(val) => { beasiswaDesa.create.form.kewarganegaraan = val.target.value }} />
             <Select
               label="Agama"
               placeholder="Pilih agama"

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

@@ -1,10 +1,10 @@
 'use client'
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Box, Divider, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge, Group } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconBook2, IconCalendarTime, IconMapPin } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
+import { IconMapPin, IconCalendarTime, IconBook2 } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
@@ -55,9 +55,9 @@ function Page() {
                     <IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
                   </Box>
                 </Tooltip>
-                <Title order={3} fw={700} c={colors['blue-button']} mb="xs">
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
                   {stateTujuanProgram.findById.data?.judul}
-                </Title>
+                </Badge>
               </Group>
               <Text fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
             </Stack>
@@ -70,9 +70,9 @@ function Page() {
                     <IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
                   </Box>
                 </Tooltip>
-                <Title order={3} fw={700} c={colors['blue-button']} mb="xs">
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
                   {stateLokasiDanJadwal.findById.data?.judul}
-                </Title>
+                </Badge>
               </Group>
               <Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
             </Stack>
@@ -85,9 +85,9 @@ function Page() {
                     <IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
                   </Box>
                 </Tooltip>
-                <Title order={3} fw={700} c={colors['blue-button']} mb="xs">
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
                   {stateFasilitas.findById.data?.judul}
-                </Title>
+                </Badge>
               </Group>
               <Text fz="md" lh={1.6} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
             </Stack>

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

@@ -57,7 +57,7 @@ function Page() {
           <Title order={1} fw={700} ta="center" c={colors['blue-button']}>
             Statistik Data Pendidikan
           </Title>
-          <Text fz="md" ta="center">
+          <Text c="dimmed" size="sm" ta="center">
             Visualisasi jumlah pendidikan berdasarkan kategori yang tersedia
           </Text>
         </Stack>

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

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
-import colors from '@/con/colors';
 import { Box, Button, Center, Container, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip, ActionIcon } from '@mantine/core';
 import { IconChalkboard, IconMicroscope, IconProps, IconRefresh, IconSchool, IconInfoCircle } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
@@ -24,19 +23,19 @@ export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan:
   const router = useTransitionRouter();
   const [stats, setStats] = useState<Stat[]>([]);
   const [isLoading, setIsLoading] = useState(true);
-
+  
   // Decode the URL parameter
   const decodedJenjangPendidikan = decodeURIComponent(jenjangPendidikan);
-  const jenjangFilter = decodedJenjangPendidikan.toLowerCase() === 'semua'
-    ? undefined
+  const jenjangFilter = decodedJenjangPendidikan.toLowerCase() === 'semua' 
+    ? undefined 
     : decodedJenjangPendidikan;
 
   const loadData = useCallback(async () => {
     if (!decodedJenjangPendidikan) return;
-
+    
     try {
       setIsLoading(true);
-
+      
       // Load all data in parallel with the jenjang filter
       await Promise.all([
         infoSekolahPaud.lembagaPendidikan.findMany.load(1, 100, '', jenjangFilter),
@@ -51,7 +50,7 @@ export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan:
 
       setStats([
         {
-
+         
           icon: IconChalkboard,
           jumlah: totalLembaga,
           nama: 'Lembaga Pendidikan',
@@ -120,15 +119,11 @@ export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan:
               </Text>
             </Box>
             <Button
-              leftSection={<IconRefresh color={colors['blue-button']} size={16} />}
+              leftSection={<IconRefresh size={16} />}
               variant="outline"
               size="xs"
               onClick={handleRefresh}
               loading={stats.some(stat => stat.loading)}
-              c={colors['blue-button']}
-              style={{
-                borderColor: colors['blue-button'],
-              }}
             >
               Segarkan Data
             </Button>
@@ -148,7 +143,7 @@ export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan:
                 aria-label="Tidak ada hasil"
               >
                 <Center style={{ minHeight: 180, flexDirection: 'column' }}>
-                  <Text fz="lg" fw={800} c={colors['blue-button']}>
+                  <Text fz="lg" fw={800} c="#2563eb">
                     Tidak ditemukan
                   </Text>
                   <Text c="dimmed" mt="6px">
@@ -178,81 +173,81 @@ export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan:
                   style={{ width: '100%' }}
                 >
                   <Skeleton visible={v.loading}>
-                    <Paper
-                      p="lg"
-                      radius="lg"
-                      style={{
-                        background: 'white',
-                        border: '1px solid #e2e8f0',
-                        boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
-                        minHeight: 260,
-                      }}
-                      role="article"
-                      aria-label={`${v.nama} kartu statistik`}
-                    >
-                      <Stack gap="sm" mb="md">
-                        <Center>
-                          <Box
-                            style={{
-                              width: 80,
-                              height: 80,
-                              borderRadius: 16,
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                              background: '#eff6ff',
-                              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
-                            }}
-                            aria-hidden
-                          >
-                            {React.createElement(v.icon, {
-                              color: colors['blue-button'],
-                              size: 34,
-                              stroke: 1.6,
-                            })}
-                          </Box>
-                        </Center>
-
-                        <Group justify="center" align="center" gap="xs">
-                          <Stack gap={0}>
-                            <Text ta={"center"} fz={{ base: 18, md: 22 }} fw={800} c="#0f172a">
-                              {v.jumlah.toLocaleString()}
-                            </Text>
-                            <Group gap={6} align="center">
-                              <Text ta={"center"} fz="sm" fw={700} c={colors['blue-button']}>
-                                {v.nama}
-                              </Text>
-                              <Tooltip label={v.helper ?? ''} position="right" withArrow>
-                                <ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
-                                  <IconInfoCircle size={16} style={{ color: colors['blue-button'] }} />
-                                </ActionIcon>
-                              </Tooltip>
-                            </Group>
-                          </Stack>
-                        </Group>
-                      </Stack>
-
-                      <Group justify="center" mt="8px">
-                        <Button
-                          radius="xl"
-                          variant="outline"
-                          aria-label={`Lihat detail ${v.nama}`}
+                  <Paper
+                    p="lg"
+                    radius="lg"
+                    style={{
+                      background: 'white',
+                      border: '1px solid #e2e8f0',
+                      boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
+                      minHeight: 260,
+                    }}
+                    role="article"
+                    aria-label={`${v.nama} kartu statistik`}
+                  >
+                    <Stack gap="sm" mb="md">
+                      <Center>
+                        <Box
                           style={{
-                            borderColor: colors['blue-button'],
-                            color: colors['blue-button'],
-                            paddingLeft: 20,
-                            paddingRight: 20,
-                          }}
-                          onClick={() => {
-                            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`);
+                            width: 80,
+                            height: 80,
+                            borderRadius: 16,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            background: '#eff6ff',
+                            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
                           }}
+                          aria-hidden
                         >
-                          Lihat Detail
-                        </Button>
+                          {React.createElement(v.icon, {
+                            color: '#2563eb',
+                            size: 34,
+                            stroke: 1.6,
+                          })}
+                        </Box>
+                      </Center>
+
+                      <Group justify="center" align="center" gap="xs">
+                        <Stack gap={0}>
+                          <Text ta={"center"} fz={{ base: 18, md: 22 }} fw={800} c="#0f172a">
+                            {v.jumlah.toLocaleString()}
+                          </Text>
+                          <Group gap={6} align="center">
+                            <Text ta={"center"} fz="sm" fw={700} c="#2563eb">
+                              {v.nama}
+                            </Text>
+                            <Tooltip label={v.helper ?? ''} position="right" withArrow>
+                              <ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
+                                <IconInfoCircle size={16} style={{ color: '#2563eb' }} />
+                              </ActionIcon>
+                            </Tooltip>
+                          </Group>
+                        </Stack>
                       </Group>
-                    </Paper>
+                    </Stack>
+
+                    <Group justify="center" mt="8px">
+                      <Button
+                        radius="xl"
+                        variant="outline"
+                        aria-label={`Lihat detail ${v.nama}`}
+                        style={{
+                          borderColor: '#e2e8f0',
+                          color: '#2563eb',
+                          paddingLeft: 20,
+                          paddingRight: 20,
+                        }}
+                        onClick={() => {
+                          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
+                      </Button>
+                    </Group>
+                  </Paper>
                   </Skeleton>
                 </motion.div>
               ))

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

@@ -55,7 +55,7 @@ function Page({ params }: PageProps) {
         <Group justify="space-between" align="center" mb="md">
           <Group gap="sm">
             <IconChalkboard size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Lembaga Pendidikan</Title>
+            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
           </Group>
           <TextInput
            placeholder='pencarian'

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

@@ -55,7 +55,7 @@ function Page({ params }: PageProps) {
         <Group justify="space-between" align="center" mb="md">
           <Group gap="sm">
             <IconMicroscope size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Pengajar</Title>
+            <Title order={2} fz="xl">Daftar Pengajar</Title>
           </Group>
           <TextInput
             placeholder='pencarian'

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

@@ -55,7 +55,7 @@ function Page({ params }: PageProps) {
         <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" c={colors['blue-button']}>Daftar Siswa</Title>
+            <Title order={2} fz="xl">Daftar Siswa</Title>
           </Group>
           <TextInput
             placeholder='pencarian'

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

@@ -96,21 +96,23 @@
 'use client'
 import colors from '@/con/colors';
  // pastikan path benar
-import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import {
+  ActionIcon,
   Box,
   Button,
   Container,
   Group,
-  Loader,
   Paper,
   Stack,
-  Text
+  Text,
+  VisuallyHidden,
+  Loader,
 } from '@mantine/core';
+import { IconArrowLeft } from '@tabler/icons-react';
 import { useRouter, useSearchParams } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
-import BackButton from '../../../desa/layanan/_com/BackButto';
+import React, { useEffect, useState } from 'react';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 
 type LayoutSekolahProps = {
   title?: string;
@@ -151,7 +153,10 @@ export default function LayoutSekolah({
       <Container size="xl" py={{ base: 'md', md: 'xl' }}>
         <Stack gap="lg">
           {/* Back Button */}
-          <BackButton/>
+          <ActionIcon onClick={() => window.history.back()} variant="light" radius="md" size="lg">
+            <IconArrowLeft size={20} />
+            <VisuallyHidden>Kembali</VisuallyHidden>
+          </ActionIcon>
 
           {/* Search & Filter */}
           <Paper radius="lg" p="xl" withBorder>
@@ -180,8 +185,6 @@ export default function LayoutSekolah({
                         radius="xl"
                         size="sm"
                         variant={aktif ? 'filled' : 'light'}
-                        bg={aktif? colors['blue-button'] : '#BDCADE'}
-                        c={aktif ? colors['white-1'] : colors['blue-button']}
                       >
                         {k}
                       </Button>

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

@@ -47,7 +47,7 @@ function Page() {
         <Group justify="space-between" align="center" mb="md">
           <Group gap="sm">
             <IconChalkboard size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Lembaga Pendidikan</Title>
+            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
           </Group>
           <TextInput
             placeholder='pencarian'

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

@@ -1,7 +1,6 @@
 /* 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 {
   ActionIcon,
   Box,
@@ -131,15 +130,11 @@ export default function SekolahPage() {
         <Box>
           <Group justify="start" mb="md">
             <Button
-              leftSection={<IconRefresh color={colors['blue-button']} size={16} />}
+              leftSection={<IconRefresh size={16} />}
               variant="outline"
               size="xs"
               onClick={handleRefresh}
               loading={stats.some(stat => stat.loading)}
-              c={colors['blue-button']}
-              style={{
-                borderColor: colors['blue-button'],
-              }}
             >
               Segarkan Data
             </Button>
@@ -159,7 +154,7 @@ export default function SekolahPage() {
                 aria-label="Tidak ada hasil"
               >
                 <Center style={{ minHeight: 180, flexDirection: 'column' }}>
-                  <Text fz="lg" fw={800} c={colors['blue-button']}>
+                  <Text fz="lg" fw={800} c="#2563eb">
                     Tidak ditemukan
                   </Text>
                   <Text c="dimmed" mt="6px">
@@ -217,7 +212,7 @@ export default function SekolahPage() {
                           aria-hidden
                         >
                           {React.createElement(v.icon, {
-                            color: colors['blue-button'],
+                            color: '#2563eb',
                             size: 34,
                             stroke: 1.6,
                           })}
@@ -230,12 +225,12 @@ export default function SekolahPage() {
                             {v.jumlah.toLocaleString()}
                           </Text>
                           <Group gap={6} align="center">
-                            <Text ta={"center"} fz="sm" fw={700} c={colors['blue-button']}>
+                            <Text ta={"center"} fz="sm" fw={700} c="#2563eb">
                               {v.nama}
                             </Text>
                             <Tooltip label={v.helper ?? ''} position="right" withArrow>
                               <ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
-                                <IconInfoCircle size={16} style={{ color: colors['blue-button'] }} />
+                                <IconInfoCircle size={16} style={{ color: '#2563eb' }} />
                               </ActionIcon>
                             </Tooltip>
                           </Group>
@@ -249,8 +244,8 @@ export default function SekolahPage() {
                         variant="outline"
                         aria-label={`Lihat detail ${v.nama}`}
                         style={{
-                          borderColor: colors['blue-button'],
-                          color: colors['blue-button'],
+                          borderColor: '#e2e8f0',
+                          color: '#2563eb',
                           paddingLeft: 20,
                           paddingRight: 20,
                         }}

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

@@ -46,7 +46,7 @@ function Page() {
         <Group justify="space-between" align="center" mb="md">
           <Group gap="sm">
             <IconMicroscope size={28} stroke={1.5} color={colors['blue-button']} />
-            <Title order={2} fz="xl" c={colors['blue-button']}>Daftar Pengajar</Title>
+            <Title order={2} fz="xl">Daftar Pengajar</Title>
           </Group>
           <TextInput
             placeholder='pencarian'

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

@@ -47,7 +47,7 @@ function Page() {
         <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" c={colors['blue-button']}>Daftar Siswa</Title>
+            <Title order={2} fz="xl">Daftar Siswa</Title>
           </Group>
           <TextInput
             placeholder='pencarian'

src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx

@@ -37,15 +37,13 @@ function Page() {
 
       <Box px={{ base: 'md', md: 100 }} pb={50}>
         <Box mb="xl">
-          <Title ta="center" order={1} fw="bold" c={colors['blue-button']}>
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} mb="sm">
             Program Pendidikan Anak
           </Title>
-          <Box my={"sm"}>
-            <Divider size="sm" color={colors['blue-button']} mx="auto" maw={550} />
-          </Box>
           <Text ta="center" fz="lg" c="black" mb="lg" maw={800} mx="auto">
             Desa Darmasaba berkomitmen mencetak generasi muda yang cerdas, berkarakter, dan siap bersaing melalui program pendidikan yang inklusif dan berkelanjutan.
           </Text>
+          <Divider size="sm" color={colors['blue-button']} mx="auto" maw={120} />
         </Box>
 
         <SimpleGrid
@@ -68,7 +66,7 @@ function Page() {
                 </Title>
               </Group>
               <Tooltip label="Detail tujuan program pendidikan anak" position="top-start" withArrow>
-                <Text fz="lg" lh={1.6} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateTujuan.findById.data?.deskripsi }} />
+                <Text fz="lg" lh={1.6} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateTujuan.findById.data?.deskripsi }} />
               </Tooltip>
             </Stack>
           </Paper>
@@ -89,7 +87,7 @@ function Page() {
                 </Title>
               </Group>
               <Tooltip label="Detail program unggulan yang sedang berjalan" position="top-start" withArrow>
-                <Text fz="lg" lh={1.6} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateUnggulan.findById.data?.deskripsi }} />
+                <Text fz="lg" lh={1.6} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateUnggulan.findById.data?.deskripsi }} />
               </Tooltip>
             </Stack>
           </Paper>

src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -7,7 +7,6 @@ import {
   Box,
   Button,
   Center,
-  Group,
   Image,
   Pagination,
   Paper,
@@ -69,16 +68,16 @@ function Page() {
         <Image src="/darmasaba-icon.png" w={{ base: 70, md: 100 }} alt="Logo Desa Darmasaba" loading="lazy" />
       </Center>
       <Text ta="center" fz={{ base: "1.8rem", md: "2.5rem" }} c={colors["blue-button"]} fw="bold" lh={1.4}>
-        Daftar Informasi Publik
+        Daftar Informasi Publik Desa Darmasaba
       </Text>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap="lg">
           <Paper p="lg" radius="xl" shadow="sm" withBorder>
             <Stack gap="sm">
-              <Text ta={"center"} fz={{ base: 'lg', md: 'xl' }} fw="bold" c={colors["blue-button"]}>
+              <Text fz={{ base: 'lg', md: 'xl' }} fw="bold" c={colors["blue-button"]}>
                 Tentang Informasi Publik
               </Text>
-              <Text ta={"center"} fz={{ base: 'sm', md: 'md' }} c="dimmed">
+              <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
                 Daftar Informasi Publik Desa Darmasaba adalah kumpulan data yang dapat diakses oleh masyarakat sesuai dengan ketentuan peraturan yang berlaku.
               </Text>
             </Stack>
@@ -118,45 +117,41 @@ function Page() {
                     <TableTr key={item.id}>
                       <TableTd ta="center">{(page - 1) * 5 + index + 1}</TableTd>
                       <TableTd>
-                        <Box>
+                        <Box w={150}>
                           <Badge variant="light" size="lg" color="blue">
-                            <Text fw={650} fz={"sm"} c={'blue'} lineClamp={1}>
-                              {item.jenisInformasi}
-                            </Text>
+                            {item.jenisInformasi}
                           </Badge>
                         </Box>
                       </TableTd>
                       <TableTd>
-                        <Box>
-                          <Text lineClamp={1} fz="sm" c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                        <Box w={150}>
+                          <Text lineClamp={1} fz="sm" c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                         </Box>
                       </TableTd>
                       <TableTd ta="center">
-                        <Box>
-                          <Text ta={"center"}>
-                            {item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID', {
-                              day: '2-digit',
-                              month: 'long',
-                              year: 'numeric'
-                            }) : '-'}
-                          </Text>
+                        <Box w={150}>
+                          {item.tanggal ? new Date(item.tanggal).toLocaleDateString('id-ID', {
+                            day: '2-digit',
+                            month: 'long',
+                            year: 'numeric'
+                          }) : '-'}
                         </Box>
                       </TableTd>
                       <TableTd style={{ textAlign: 'center' }}>
-                        <Box>
+                        <Box w={150}>
                           <Tooltip label="Lihat Detail" withArrow>
                             <Button
                               size="xs"
                               radius="md"
                               variant="light"
-                              color="blue"
-                              leftSection={<IconDeviceImacCog size={16} />}
-                              onClick={() => router.push(`/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}
-                            >
-                              Detail
-                            </Button>
-                          </Tooltip>
-                        </Box>
+                            color="blue"
+                            leftSection={<IconDeviceImacCog size={16} />}
+                            onClick={() => router.push(`/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}
+                          >
+                            Detail
+                          </Button>
+                        </Tooltip>
+                      </Box>
                       </TableTd>
                     </TableTr>
                   ))}
@@ -179,18 +174,12 @@ function Page() {
           <Paper p="lg" radius="xl" shadow="xs" withBorder>
             <Stack gap="xs">
               <Text fz="lg" fw="bold" c={colors["blue-button"]}>Kontak PPID</Text>
-              <Group>
-                <IconMail color='gray' size={16} style={{ marginRight: 6 }} />
-                <Text c={"dimmed"} fz="sm" lh={1.6}>
-                  Email: <Text c={"dimmed"} span fw="500">ppid@desadarmasaba.id</Text>
-                </Text>
-              </Group>
-              <Group>
-                <IconBrandWhatsapp color='gray' size={16} style={{ marginRight: 6 }} />
-                <Text c={"dimmed"} fz="sm" lh={1.6}>
-                  WhatsApp: <Text c={"dimmed"} span fw="500">081-xxx-xxx-xxx</Text>
-                </Text>
-              </Group>
+              <Text fz="sm" c="dimmed" lh={1.6}>
+                <IconMail size={16} style={{ marginRight: 6 }} /> Email: <Text span fw="500">ppid@desadarmasaba.id</Text>
+              </Text>
+              <Text fz="sm" c="dimmed" lh={1.6}>
+                <IconBrandWhatsapp size={16} style={{ marginRight: 6 }} /> WhatsApp: <Text span fw="500">081-xxx-xxx-xxx</Text>
+              </Text>
             </Stack>
           </Paper>
         </Stack>

src/app/darmasaba/(pages)/ppid/ikm-desa-darmasaba/page.tsx

@@ -239,7 +239,7 @@ const state = useProxy(indeksKepuasanState.responden);
                 {/* Chart Rating */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Ulasan</Title>
+                    <Title order={4}>Pilihan</Title>
                     {donutDataRating.every(item => item.value === 0) ? (
                       <Text c="dimmed" ta="center" my="md">
                         Belum ada data untuk ditampilkan dalam grafik
@@ -505,7 +505,7 @@ const state = useProxy(indeksKepuasanState.responden);
               {/* Chart Rating */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Ulasan</Title>
+                  <Title order={4}>Pilihan</Title>
                   {donutDataRating.every(item => item.value === 0) ? (
                     <Text c="dimmed" ta="center" my="md">
                       Belum ada data untuk ditampilkan dalam grafik

src/app/darmasaba/(pages)/ppid/struktur-ppid/[id]/page.tsx

@@ -39,9 +39,9 @@ function DetailPegawaiUser() {
   const data = statePegawai.findUnique.data;
 
   return (
-    <Box px={{ base: 'md', md: 100 }} py="xl">
+    <Box px={{ base: 'sm', md: 'lg' }} py="xl">
       {/* Back button */}
-      <Group mb="lg" px={{ base: 'md', md: 100 }}>
+      <Group mb="lg">
         <Box
           onClick={() => router.back()}
           style={{

src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
+
 import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID'
 import ScrollToTopButton from '@/app/darmasaba/_com/scrollToTopButton'
 import colors from '@/con/colors'
@@ -9,6 +10,7 @@ import {
   Button,
   Card,
   Center,
+  Container,
   Group,
   Image,
   Loader,
@@ -34,7 +36,6 @@ import { OrganizationChart } from 'primereact/organizationchart'
 import { useEffect, useRef, useState } from 'react'
 import { useProxy } from 'valtio/utils'
 import BackButton from '../../desa/layanan/_com/BackButto'
-import './struktur.css'
 
 export default function Page() {
   return (
@@ -46,9 +47,10 @@ export default function Page() {
         paddingBottom: 48,
       }}
     >
-      <Box px={{ base: 'md', md: 100 }} py={"xl"}>
-        <BackButton />
-
+      <Container size="xl" py="xl">
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
         <Stack align="center" gap="xl" mt="xl">
           <Title
             order={1}
@@ -63,12 +65,12 @@ export default function Page() {
             untuk melihat detail atau klik node untuk fokus tampilan.
           </Text>
         </Stack>
-
         <Box mt="lg">
           <StrukturOrganisasiPPID />
         </Box>
-      </Box>
+      </Container>
 
+      {/* Tombol Scroll ke Atas */}
       <ScrollToTopButton />
     </Box>
   )
@@ -82,7 +84,7 @@ function StrukturOrganisasiPPID() {
   const [isFullscreen, setFullscreen] = useState(false)
   const [searchQuery, setSearchQuery] = useState('')
 
-  // debounce pencarian
+  // debounce untuk pencarian
   const debouncedSearch = useRef(
     debounce((value: string) => {
       setSearchQuery(value)
@@ -110,8 +112,7 @@ function StrukturOrganisasiPPID() {
     )
   }
 
-  const data = stateOrganisasi.findMany.data || []
-  if (data.length === 0) {
+  if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
     return (
       <Center py={40}>
         <Stack align="center" gap="md">
@@ -150,9 +151,9 @@ function StrukturOrganisasiPPID() {
     )
   }
 
-  // 🧩 buat struktur organisasi
+  // Buat struktur organisasi
   const posisiMap = new Map<string, any>()
-  const aktifPegawai = data.filter((p: any) => p.isActive)
+  const aktifPegawai = stateOrganisasi.findMany.data.filter((p: any) => p.isActive)
 
   for (const pegawai of aktifPegawai) {
     const posisiId = pegawai.posisi.id
@@ -175,15 +176,19 @@ function StrukturOrganisasiPPID() {
     } else root.push(posisi)
   })
 
-  const toOrgChartFormat = (node: any): any => {
+  function toOrgChartFormat(node: any): any {
     const pegawai = node.pegawaiList?.[0]
     return {
       expanded: true,
+      type: 'person',
+      styleClass: 'p-person',
       data: {
-        id: pegawai?.id,
-        name: pegawai?.namaLengkap || 'Belum Ditugaskan',
-        title: node.nama || 'Tanpa Jabatan',
+        id: pegawai?.id || null,
+        name: pegawai?.namaLengkap || 'Belum ditugaskan',
+        title: node.nama || 'Tanpa jabatan',
         image: pegawai?.image?.link || '/img/default.png',
+        description: node.deskripsi || '',
+        positionId: node.id || null,
       },
       children: node.children?.map(toOrgChartFormat) || [],
     }
@@ -208,7 +213,7 @@ function StrukturOrganisasiPPID() {
     chartData = filterNodes(chartData)
   }
 
-  // 🎬 fullscreen & zoom control
+  // 🧭 fungsi fullscreen
   const toggleFullscreen = () => {
     if (!document.fullscreenElement) {
       chartContainerRef.current?.requestFullscreen()
@@ -219,249 +224,138 @@ function StrukturOrganisasiPPID() {
     }
   }
 
-  const handleZoomIn = () => setScale((s) => Math.min(s + 0.1, 2))
-  const handleZoomOut = () => setScale((s) => Math.max(s - 0.1, 0.5))
+  // 🧭 fungsi zoom
+  const handleZoomIn = () => setScale((prev) => Math.min(prev + 0.1, 2))
+  const handleZoomOut = () => setScale((prev) => Math.max(prev - 0.1, 0.5))
   const resetZoom = () => setScale(1)
 
   return (
     <Stack align="center" mt="xl">
-      {/* 🔍 Controls */}
-      <Paper
-        shadow="xs"
-        p="md"
-        radius="md"
-        style={{
-          background: colors['blue-button']
-        }}
-      >
-        <Group gap="sm" wrap="wrap" justify="center">
-          <TextInput
-            placeholder="Cari nama atau jabatan..."
-            leftSection={<IconSearch size={16} />}
-            onChange={(e) => debouncedSearch(e.target.value)}
-            styles={{
-              input: {
-                minWidth: 250,
-              },
-            }}
-          />
+      {/* 🔍 Search + Zoom + Fullscreen controls */}
+      <Group mb="md" justify="center" gap="sm" align="center">
+        <TextInput
+          placeholder="Cari nama atau jabatan..."
+          leftSection={<IconSearch size={16} />}
+          onChange={(e) => debouncedSearch(e.target.value)}
+        />
 
-          <Group gap="xs">
-            <Button
-              variant="light"
-              bg={colors['blue-button-2']}
-              size="sm"
-              onClick={handleZoomOut}
-              leftSection={<IconZoomOut size={16} />}
-              c={colors['blue-button']}
-            >
-              Zoom Out
-            </Button>
+        <Button variant="light" size="sm" onClick={handleZoomOut}>
+          <IconZoomOut size={16} />
+        </Button>
 
-            <Box
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              px={16}
-              py={8}
-              style={{
-                fontSize: 14,
-                fontWeight: 700,
-                borderRadius: '8px',
-                minWidth: 70,
-                textAlign: 'center',
-              }}
-            >
-              {Math.round(scale * 100)}%
-            </Box>
-
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              variant="light"
-              size="sm"
-              onClick={handleZoomIn}
-              leftSection={<IconZoomIn size={16} />}
-            >
-              Zoom In
-            </Button>
-
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              variant="light"
-              size="sm"
-              onClick={resetZoom}
-            >
-              Reset
-            </Button>
-
-            <Button
-              bg={colors['blue-button-2']}
-              c={colors['blue-button']}
-              size="sm"
-              onClick={toggleFullscreen}
-              leftSection={
-                isFullscreen ? (
-                  <IconArrowsMinimize size={16} />
-                ) : (
-                  <IconArrowsMaximize size={16} />
-                )
-              }
-            >
-              Fullscreen
-            </Button>
-          </Group>
-        </Group>
-      </Paper>
-
-      {/* 🧩 Chart Container */}
-      <Center style={{ width: '100%' }}>
+        {/* 🔍 Tambahkan indikator zoom di sini */}
+        {/* Floating Zoom Indicator */}
         <Box
-          ref={chartContainerRef}
+          bg="#C3D0E8"
+          c="blue"
+          px={9}
+          py={8}
           style={{
-            overflowX: 'auto',
-            overflowY: 'auto',
-            width: '100%',
-            maxWidth: '100%',
-            padding: '32px 16px',
-            transition: 'transform 0.2s ease',
-            transform: `scale(${scale})`,
-            transformOrigin: 'center top',
+            fontSize: 14,
+            fontWeight: 600,
+            borderRadius: '5px',
           }}
         >
-          <OrganizationChart
-            value={chartData}
-            nodeTemplate={(node) => <NodeCard node={node} router={router} />}
-            className="p-organizationchart p-organizationchart-horizontal"
-          />
+          {Math.round(scale * 100)}%
         </Box>
-      </Center>
+
+
+        <Button variant="light" size="sm" onClick={handleZoomIn}>
+          <IconZoomIn size={16} />
+        </Button>
+
+        <Button variant="light" size="sm" onClick={resetZoom}>
+          Reset
+        </Button>
+
+        <Button
+          variant="light"
+          size="sm"
+          onClick={toggleFullscreen}
+          leftSection={
+            isFullscreen ? <IconArrowsMinimize size={16} /> : <IconArrowsMaximize size={16} />
+          }
+        >
+          {isFullscreen ? 'Keluar' : 'Fullscreen'}
+        </Button>
+      </Group>
+
+
+      {/* Chart Container */}
+      <Box
+        ref={chartContainerRef}
+        style={{
+          overflow: 'auto',
+          transform: `scale(${scale})`,
+          transformOrigin: 'center top',
+          transition: 'transform 0.25s ease',
+        }}
+      >
+        <OrganizationChart
+          value={chartData}
+          nodeTemplate={(node) => nodeTemplate(node, router)}
+        />
+      </Box>
     </Stack>
   )
 }
 
-function NodeCard({ node, router }: any) {
+function nodeTemplate(node: any, router: ReturnType<typeof useTransitionRouter>) {
   const imageSrc = node?.data?.image || '/img/default.png'
   const name = node?.data?.name || 'Tanpa Nama'
   const title = node?.data?.title || 'Tanpa Jabatan'
-  const hasId = Boolean(node?.data?.id)
+  const description = node?.data?.description || ''
 
   return (
-    <Transition mounted transition="pop" duration={300}>
+    <Transition mounted transition="pop" duration={240}>
       {(styles) => (
         <Card
-          shadow="md"
-          radius="xl"
+          radius="lg"
           withBorder
           style={{
             ...styles,
-            width: 240,
-            minHeight: 280,
-            padding: 20,
-            background: 'linear-gradient(135deg, rgba(28,110,164,0.15) 0%, rgba(255,255,255,0.95) 100%)',
-            borderColor: 'rgba(28, 110, 164, 0.3)',
-            borderWidth: 2,
-            transition: 'all 0.3s ease',
-            cursor: hasId ? 'pointer' : 'default',
-          }}
-          onMouseEnter={(e) => {
-            if (hasId) {
-              e.currentTarget.style.transform = 'translateY(-4px)'
-              e.currentTarget.style.boxShadow = '0 8px 24px rgba(28, 110, 164, 0.25)'
-            }
-          }}
-          onMouseLeave={(e) => {
-            if (hasId) {
-              e.currentTarget.style.transform = 'translateY(0)'
-              e.currentTarget.style.boxShadow = ''
-            }
+            width: 260,
+            padding: 16,
+            background: 'rgba(28,110,164,0.3)',
+            borderColor: 'rgba(255,255,255,0.15)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
           }}
         >
-          <Stack align="center" gap={12}>
-            {/* Photo */}
-            <Box
-              style={{
-                width: 96,
-                height: 96,
-                borderRadius: '50%',
-                overflow: 'hidden',
-                border: '3px solid rgba(28, 110, 164, 0.4)',
-                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-                background: 'white',
-              }}
-            >
-              <Image
-                src={imageSrc}
-                alt={name}
-                width={96}
-                height={96}
-                fit="cover"
-                loading="lazy"
-                style={{
-                  objectFit: 'cover',
-                }}
-              />
-            </Box>
-
-            {/* Name */}
-            <Text
-              fw={700}
-              size="sm"
-              ta="center"
-              c={colors['blue-button']}
-              lineClamp={2}
-              style={{
-                minHeight: 40,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                wordBreak: 'break-word',
-                lineHeight: 1.3,
-              }}
-            >
-              {name}
-            </Text>
-
-            {/* Title/Position */}
-            <Text
+          <Image
+            src={imageSrc}
+            alt={name}
+            radius="md"
+            width={60}
+            height={60}
+            fit="cover"
+            style={{
+              objectFit: 'cover',
+              border: '2px solid rgba(255,255,255,0.2)',
+              marginBottom: 12,
+            }}
+            loading="lazy"
+          />
+          <Text fw={700}>{name}</Text>
+          <Text size="sm" c="dimmed" mt={4}>
+            {title}
+          </Text>
+          <Text size="xs" c="dimmed" mt={8} lineClamp={3}>
+            {description || 'Belum ada deskripsi.'}
+          </Text>
+            <Button
+              variant="light"
               size="xs"
-              c="dimmed"
-              ta="center"
-              fw={500}
-              lineClamp={2}
-              style={{
-                minHeight: 32,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                wordBreak: 'break-word',
-                lineHeight: 1.2,
+              mt="md"
+              onClick={() => {
+                const id = node?.data?.id
+                router.push(`/darmasaba/ppid/struktur-ppid/${id}`)
               }}
             >
-              {title}
-            </Text>
-
-            {/* Detail Button */}
-            {hasId && (
-              <Button
-                variant="gradient"
-                gradient={{ from: 'blue', to: 'cyan' }}
-                size="xs"
-                fullWidth
-                mt={8}
-                radius="md"
-                onClick={() =>
-                  router.push(`/darmasaba/ppid/struktur-ppid/${node.data.id}`)
-                }
-                style={{
-                  height: 32,
-                  fontWeight: 600,
-                }}
-              >
-                Lihat Detail
-              </Button>
-            )}
-          </Stack>
+              Lihat Detail
+            </Button>
         </Card>
       )}
     </Transition>

src/app/darmasaba/(pages)/ppid/struktur-ppid/struktur.css

@@ -1,68 +0,0 @@
-/* ============================================
-   STRUKTUR ORGANISASI PPID - STYLING
-   ============================================ */
-
-/* Tabel chart selalu center */
-.p-organizationchart-table {
-    margin: 0 auto !important;
-  }
-  
-  /* Jarak vertikal antar level - lebih lega */
-  .p-organizationchart-line-down {
-    height: 32px !important;
-  }
-  
-  /* Padding di dalam node - lebih rapi */
-  .p-organizationchart-node-content {
-    padding: 0 !important;
-    background: transparent !important;
-    border: none !important;
-  }
-  
-  /* Garis connector antar node - lebih tebal dan jelas */
-  .p-organizationchart-line-down,
-  .p-organizationchart-line-left,
-  .p-organizationchart-line-right,
-  .p-organizationchart-line-top {
-    border-color: rgba(28, 110, 164, 0.4) !important;
-    border-width: 2px !important;
-  }
-  
-  /* Garis horizontal */
-  .p-organizationchart-line-left,
-  .p-organizationchart-line-right {
-    border-top-width: 2px !important;
-  }
-  
-  /* Jarak horizontal antar node - lebih proporsional */
-  .p-organizationchart-table > tbody > tr > td {
-    padding: 0 24px !important;
-    vertical-align: top !important;
-  }
-  
-  /* Node container spacing */
-  .p-organizationchart-node {
-    padding: 8px !important;
-  }
-  
-  /* Responsive adjustments */
-  @media (max-width: 768px) {
-    .p-organizationchart-table > tbody > tr > td {
-      padding: 0 12px !important;
-    }
-    
-    .p-organizationchart-line-down {
-      height: 24px !important;
-    }
-  }
-  
-  /* Smooth transitions untuk zoom */
-  .p-organizationchart {
-    transition: transform 0.2s ease;
-  }
-  
-  /* Fullscreen mode adjustments */
-  .p-organizationchart-table:fullscreen {
-    background: rgba(230, 240, 255, 0.98);
-    padding: 40px;
-  }

src/app/darmasaba/(tambahan)/apbdes/page.tsx

@@ -63,7 +63,7 @@ function Page() {
         <SimpleGrid px={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
           {data.map((v: any, k: number) => (
             <BackgroundImage key={k} src={v.image?.link || ''} h={360} radius="xl" pos="relative">
-              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 27 }} />
+              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
               <Stack justify="space-between" h="100%" p="lg" pos="relative">
                 <Box>
                   <Text fz="lg" fw={600} c="white" ta="center">

src/app/darmasaba/(tambahan)/penghargaan/page.tsx

@@ -2,9 +2,11 @@
 'use client';
 import penghargaanState from "@/app/admin/(dashboard)/_state/desa/penghargaan";
 import colors from "@/con/colors";
-import { Box, Button, Container, Group, Paper, Skeleton, Stack, Text } from "@mantine/core";
+import { Carousel } from "@mantine/carousel";
+import { Box, Button, Container, Group, Paper, Skeleton, Stack, Text, useMantineTheme } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import { IconArrowRight, IconAward } from "@tabler/icons-react";
+import Autoplay from "embla-carousel-autoplay";
 import { useTransitionRouter } from "next-view-transitions";
 import { useEffect, useRef } from "react";
 import { useProxy } from "valtio/utils";
@@ -17,6 +19,7 @@ export default function Page() {
         <BackButton />
       </Box>
       <Container w={{ base: "100%", md: "90%", lg: "60%" }}>
+
         <Stack align="center" gap="sm">
           <Group gap="xs">
             <IconAward size={40} color={colors["blue-button"]} />
@@ -27,35 +30,21 @@ export default function Page() {
           <Text fz="lg" c="dimmed" ta="center">
             Desa Darmasaba berhasil meraih beragam penghargaan bergengsi yang mencerminkan dedikasi dan kerja keras masyarakat dalam membangun desa yang maju dan berkelanjutan.
           </Text>
+          <Slider />
         </Stack>
       </Container>
-      <Slider />
     </Stack>
   );
 }
 
 function Slider() {
-  const mobile = useMediaQuery("(max-width: 768px)", false);
+  const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  const tablet = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const autoplay = useRef(Autoplay({ delay: 3000, stopOnInteraction: false }));
   const state = useProxy(penghargaanState);
   const router = useTransitionRouter();
 
-  // Refs for smooth animation
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollPositionRef = useRef(0);
-  const animationFrameRef = useRef<number>(0);
-  const isHoveredRef = useRef(false);
-  
-  // Refs for drag functionality
-  const isDraggingRef = useRef(false);
-  const startXRef = useRef(0);
-  const scrollLeftRef = useRef(0);
-  const velocityRef = useRef(0);
-  const lastScrollTimeRef = useRef(0);
-
-  // Speed configuration
-  const normalSpeed = 1.0; // pixels per frame
-  const hoverSpeed = 0.5; // slower speed on hover
-
   useEffect(() => {
     state.findMany.load();
   }, []);
@@ -63,128 +52,12 @@ function Slider() {
   const data = state.findMany.data || [];
   const loading = state.findMany.loading;
 
-  // Duplicate slides for seamless infinite loop
-  const slidesData = [...data, ...data, ...data];
-
-  useEffect(() => {
-    if (loading || !containerRef.current || slidesData.length === 0) return;
-
-    const container = containerRef.current;
-    const slideWidth = container.scrollWidth / slidesData.length;
-    const originalDataLength = data.length;
-
-    // Start from the middle set of slides
-    scrollPositionRef.current = slideWidth * originalDataLength;
-    container.scrollLeft = scrollPositionRef.current;
-
-    const animate = () => {
-      if (!containerRef.current) return;
-
-      const container = containerRef.current;
-      const slideWidth = container.scrollWidth / slidesData.length;
-
-      // Check if user recently scrolled manually
-      const timeSinceLastScroll = Date.now() - lastScrollTimeRef.current;
-      const isUserScrolling = timeSinceLastScroll < 100;
-
-      // Only auto-scroll if user is not actively scrolling or dragging
-      if (!isDraggingRef.current && !isUserScrolling) {
-        const currentSpeed = isHoveredRef.current ? hoverSpeed : normalSpeed;
-        scrollPositionRef.current += currentSpeed;
-
-        // Reset position for infinite loop
-        if (scrollPositionRef.current >= slideWidth * (originalDataLength * 2)) {
-          scrollPositionRef.current -= slideWidth * originalDataLength;
-        }
-
-        if (scrollPositionRef.current <= 0) {
-          scrollPositionRef.current += slideWidth * originalDataLength;
-        }
-
-        container.scrollLeft = scrollPositionRef.current;
-      } else {
-        // Sync scroll position when user is scrolling
-        scrollPositionRef.current = container.scrollLeft;
-        
-        // Apply momentum/velocity for smooth drag release
-        if (!isDraggingRef.current && Math.abs(velocityRef.current) > 0.1) {
-          scrollPositionRef.current += velocityRef.current;
-          velocityRef.current *= 0.95; // Decay velocity
-          container.scrollLeft = scrollPositionRef.current;
-        }
-      }
-
-      animationFrameRef.current = requestAnimationFrame(animate);
-    };
-
-    animationFrameRef.current = requestAnimationFrame(animate);
-
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [loading, slidesData.length, data.length, mobile]);
-
-  const handleMouseEnter = () => {
-    isHoveredRef.current = true;
-  };
-
-  const handleMouseLeave = () => {
-    isHoveredRef.current = false;
-    isDraggingRef.current = false;
-  };
-
-  // Mouse drag handlers
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (!containerRef.current) return;
-    
-    isDraggingRef.current = true;
-    startXRef.current = e.pageX - containerRef.current.offsetLeft;
-    scrollLeftRef.current = containerRef.current.scrollLeft;
-    velocityRef.current = 0;
-    
-    containerRef.current.style.cursor = 'grabbing';
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current) return;
-    
-    e.preventDefault();
-    const x = e.pageX - containerRef.current.offsetLeft;
-    const walk = (x - startXRef.current) * 2;
-    const newScrollLeft = scrollLeftRef.current - walk;
-    
-    velocityRef.current = containerRef.current.scrollLeft - newScrollLeft;
-    
-    containerRef.current.scrollLeft = newScrollLeft;
-    scrollPositionRef.current = newScrollLeft;
-    lastScrollTimeRef.current = Date.now();
-  };
-
-  const handleMouseUp = () => {
-    if (!containerRef.current) return;
-    
-    isDraggingRef.current = false;
-    containerRef.current.style.cursor = 'grab';
-  };
-
-  // Wheel scroll handler
-  const handleWheel = (e: React.WheelEvent) => {
-    if (!containerRef.current) return;
-    
-    e.preventDefault();
-    containerRef.current.scrollLeft += e.deltaY;
-    scrollPositionRef.current = containerRef.current.scrollLeft;
-    lastScrollTimeRef.current = Date.now();
-  };
-
   if (loading) {
     return (
       <Group justify="center" py="xl" gap="md">
-        <Skeleton w={300} h={400} radius="lg" />
-        <Skeleton w={300} h={400} radius="lg" visibleFrom="sm" />
-        <Skeleton w={300} h={400} radius="lg" visibleFrom="md" />
+        <Skeleton w={300} h={200} radius="lg" />
+        <Skeleton w={300} h={200} radius="lg" visibleFrom="sm" />
+        <Skeleton w={300} h={200} radius="lg" visibleFrom="md" />
       </Group>
     );
   }
@@ -200,129 +73,138 @@ function Slider() {
     );
   }
 
-  return (
-    <Box
-      ref={containerRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onWheel={handleWheel}
-      py="xl"
-      style={{
-        overflow: "hidden",
-        cursor: "grab",
-        userSelect: "none",
-        position: "relative",
-      }}
-    >
-      {/* Blur edges effect */}
-      <Box
+  const slides = data.map((item) => (
+    <Carousel.Slide key={item.id}>
+      <Paper
+        radius="lg"
+        shadow="md"
+        pos="relative"
         style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "120px",
           height: "100%",
-          background: "linear-gradient(to right, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0))",
-          zIndex: 10,
-          pointerEvents: "none",
+          backgroundImage: `url(${item.image?.link})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          transition: "transform 0.3s ease, box-shadow 0.3s ease",
         }}
-      />
-      <Box
-        style={{
-          position: "absolute",
-          top: 0,
-          right: 0,
-          width: "120px",
-          height: "100%",
-          background: "linear-gradient(to left, rgba(249, 250, 251, 1), rgba(249, 250, 251, 0))",
-          zIndex: 10,
-          pointerEvents: "none",
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = "translateY(-4px)";
+          e.currentTarget.style.boxShadow = "0 8px 20px rgba(0,0,0,0.2)";
         }}
-      />
-
-      <Box
-        style={{
-          display: "flex",
-          gap: mobile ? "1rem" : "1.5rem",
-          paddingLeft: mobile ? "1rem" : "2rem",
-          paddingRight: mobile ? "1rem" : "2rem",
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = "translateY(0)";
+          e.currentTarget.style.boxShadow = "none";
         }}
       >
-        {slidesData.map((item, index) => (
-          <Box
-            key={`${item.id}-${index}`}
-            style={{
-              flex: `0 0 ${mobile ? "90%" : "calc(33.333% - 1rem)"}`,
-              minWidth: mobile ? "90%" : "calc(33.333% - 1rem)",
-            }}
+        <Box
+          pos="absolute"
+          inset={0}
+          bg="linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2))"
+          style={{ borderRadius: 16 }}
+        />
+        <Stack justify="flex-end" h="100%" gap="sm" p="lg" pos="relative">
+          <Text
+            fz={{ base: "md", sm: "lg", md: "xl" }}
+            fw={700}
+            ta="center"
+            c="white"
+            lineClamp={3}
+            style={{ textShadow: "0 2px 4px rgba(0,0,0,0.6)" }}
           >
-            <Paper
-              radius="lg"
-              shadow="md"
-              pos="relative"
-              style={{
-                height: mobile ? "380px" : "450px",
-                backgroundImage: `url(${item.image?.link})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                transition: "transform 0.3s ease, box-shadow 0.3s ease",
-                overflow: "hidden",
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.transform = "translateY(-8px) scale(1.02)";
-                e.currentTarget.style.boxShadow = "0 12px 28px rgba(0,0,0,0.25)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.transform = "translateY(0) scale(1)";
-                e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
-              }}
+            {item.name}
+          </Text>
+          <Group justify="center">
+            <Button
+              onClick={() =>
+                router.push(`/darmasaba/penghargaan/${item.id}`)
+              }
+              size="md"
+              radius="xl"
+              rightSection={<IconArrowRight size={18} />}
+              variant="gradient"
+              gradient={{ from: "#1C6EA4", to: "#69BFF8" }}
             >
-              <Box
-                pos="absolute"
-                inset={0}
-                bg="linear-gradient(to top, rgba(0,0,0,0.85), rgba(0,0,0,0.3))"
-                style={{ borderRadius: 16 }}
-              />
-              <Stack justify="flex-end" h="100%" gap="sm" p="lg" pos="relative">
-                <Text
-                  fz={{ base: "lg", sm: "xl", md: "1.5rem" }}
-                  fw={700}
-                  ta="center"
-                  c="white"
-                  lineClamp={3}
-                  style={{ textShadow: "0 2px 8px rgba(0,0,0,0.8)" }}
-                >
-                  {item.name}
-                </Text>
-                <Group justify="center">
-                  <Button
-                    onClick={() => router.push(`/darmasaba/penghargaan/${item.id}`)}
-                    size="md"
-                    radius="xl"
-                    rightSection={<IconArrowRight size={18} />}
-                    variant="gradient"
-                    gradient={{ from: "#1C6EA4", to: "#69BFF8" }}
-                    style={{
-                      transition: "transform 0.2s ease",
-                    }}
-                    onMouseEnter={(e) => {
-                      e.currentTarget.style.transform = "scale(1.05)";
-                    }}
-                    onMouseLeave={(e) => {
-                      e.currentTarget.style.transform = "scale(1)";
-                    }}
-                  >
-                    Lihat Detail
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-        ))}
-      </Box>
+              Lihat Detail
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Box 
+      pos="relative" 
+      w="100%" 
+      mx="auto" 
+      px={{ base: "md", sm: "xl", md: "2rem", lg: "3rem" }}
+      style={{ 
+        maxWidth: 1300,
+      }}
+    >
+      <Carousel
+        py="xl"
+        w="100%"
+        h={{ base: 320, sm: 380, md: 420, lg: 450 }}
+        slideSize={{
+          base: "100%",  // Mobile: 1
+          sm: "50%",     // Tablet kecil (≥768): 2
+          md: "50%",     // 1024px: tetap 2
+          lg: "33.333%", // Desktop besar: 3
+        }}
+        slideGap={{ base: "md", sm: "md", md: "lg" }}
+        loop
+        align="start"
+        slidesToScroll={mobile ? 1 : tablet ? 2 : 3}
+        plugins={[autoplay.current]}
+        onMouseEnter={autoplay.current.stop}
+        onMouseLeave={autoplay.current.reset}
+        withControls={data.length > 3}
+        draggable={data.length > 1}
+        styles={{
+          root: {
+            position: "relative",
+          },
+          viewport: {
+            overflow: "hidden",
+          },
+          container: {
+            alignItems: "stretch",
+          },
+          control: {
+            zIndex: 20,
+            backgroundColor: "rgba(255,255,255,0.95)",
+            color: colors["blue-button"],
+            border: `2px solid ${colors["blue-button"]}`,
+            width: 46,
+            height: 46,
+            borderRadius: "50%",
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+            transition: "all 0.2s ease",
+            '&:hover': {
+              backgroundColor: colors["blue-button"],
+              color: "white",
+              transform: "scale(1.1)",
+            },
+            '&[data-inactive]': {
+              opacity: 0,
+              cursor: 'default',
+            },
+          },
+          controls: {
+            position: "absolute",
+            top: mobile ? "70%" : tablet ? "65%" : "60%",
+            transform: "translateY(-50%)",
+            width: mobile ? "100%" : tablet ? "calc(100% + 60px)" : "calc(100% + 100px)",
+            left: mobile ? "0" : tablet ? "-30px" : "-50px",
+            right: mobile ? "0" : tablet ? "-30px" : "-50px",
+            padding: "0",
+            justifyContent: "space-between",
+            zIndex: 30,
+          },
+        }} 
+      >
+        {slides}
+      </Carousel>
     </Box>
   );
 }

src/app/darmasaba/(tambahan)/sdgs-desa/page.tsx

@@ -1,10 +1,10 @@
 'use client'
-import colors from '@/con/colors';
-import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
+import { Box, Center, Container, Image, LoadingOverlay, Paper, SimpleGrid, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { Prisma } from '@prisma/client';
-import { IconMoodSad } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
+import { IconMoodSad } from '@tabler/icons-react';
 import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
 
 function Page() {
   const [sdgsDesa, setSdgsDesa] = useState<Prisma.SdgsDesaGetPayload<{ include: { image: true } }>[]>([]);
@@ -114,9 +114,11 @@ function Page() {
                     />
                   </Box>
                   <Stack gap="xs" align="center" style={{ width: '100%' }}>
+                    <Tooltip label={item.name} position="top" withArrow>
                       <Title order={4} ta="center" c="dark" fw={600} lineClamp={2} style={{ minHeight: '3rem' }}>
                         {item.name}
                       </Title>
+                    </Tooltip>
                     <Text
                       ta="center"
                       fw={700}

src/app/darmasaba/_com/Navbar.tsx

@@ -116,7 +116,7 @@ function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
                 radius="md"
                 p="sm"
                 withBorder
-                bg={active ? colors["blue-button-2"] : "gray.0"}
+                bg={active ? "blue.0" : "gray.0"}
                 onClick={() => {
                   if (item.href) {
                     router.push(item.href);
@@ -126,21 +126,21 @@ function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
                 style={{
                   cursor: item.href ? "pointer" : "default",
                   transition: "background 0.15s ease",
-                  borderLeft: active ? `4px solid ${colors['blue-button']}` : "4px solid transparent",
+                  borderLeft: active ? "4px solid #1e66f5" : "4px solid transparent",
                 }}
               >
                 <Group justify="space-between" align="center" wrap="nowrap">
                   <Text
                     fw={active ? 700 : 600}
                     fz="md"
-                    c={active ? colors['blue-button'] : "dark.9"}
+                    c={active ? "blue.7" : "dark.9"}
                   >
                     {item.name}
                   </Text>
                   {item.href && (
                     <IconSquareArrowRight
                       size={18}
-                      color={active ? colors['blue-button'] : "inherit"}
+                      color={active ? "#1e66f5" : "inherit"}
                     />
                   )}
                 </Group>
@@ -167,21 +167,21 @@ function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
                           cursor: child.href ? "pointer" : "default",
                           opacity: child.href ? 1 : 0.8,
                           borderRadius: "0.5rem",
-                          backgroundColor: childActive ? colors["blue-button-2"] : "transparent",
-                          borderLeft: childActive ? `3px solid ${colors['blue-button']}` : "3px solid transparent",
+                          backgroundColor: childActive ? "#e7f0ff" : "transparent",
+                          borderLeft: childActive ? "3px solid #1e66f5" : "3px solid transparent",
                           transition: "background 0.15s ease",
                         }}
                       >
                         <Text
                           fz="sm"
                           fw={childActive ? 600 : 400}
-                          c={childActive ? colors['blue-button'] : "dark.8"}
+                          c={childActive ? "blue.7" : "dark.8"}
                         >
                           {child.name}
                         </Text>
                         <IconSquareArrowRight
                           size={14}
-                          color={childActive ? colors['blue-button'] : "inherit"}
+                          color={childActive ? "#1e66f5" : "inherit"}
                         />
                       </Group>
                     );

src/app/darmasaba/_com/NavbarMainMenu.tsx

@@ -112,7 +112,7 @@ function MenuItemCom({ item, isActive = false }: { item: MenuItem, isActive?: bo
       <MenuTarget>
         <Button
           variant="subtle"
-          color={isActive ? colors['blue-button'] : 'gray'}
+          color={isActive ? 'blue' : 'gray'}
           onClick={() => {
             if (item.href) {
               router.push(item.href);

src/app/darmasaba/_com/NavbarSubMenu.tsx

@@ -49,12 +49,12 @@ export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
               rightSection={<IconArrowRight size={18} />}
               styles={(theme) => ({
                 root: {
-                  background: link.href && pathname.startsWith(link.href) ? colors['blue-button-2'] : 'transparent',
-                  color: link.href && pathname.startsWith(link.href) ? colors['blue-button'] : 'gray',
+                  background: link.href && pathname.startsWith(link.href) ? theme.colors.blue[0] : 'transparent',
+                  color: link.href && pathname.startsWith(link.href) ? theme.colors.blue[7] : colors['blue-button'],
                   fontWeight: link.href && pathname.startsWith(link.href) ? 600 : 500,
                   transition: "all 0.2s ease",
                   "&:hover": {
-                    background: link.href && pathname.startsWith(link.href) ? colors['blue-button-2'] : theme.colors.gray[0],
+                    background: link.href && pathname.startsWith(link.href) ? theme.colors.blue[1] : theme.colors.gray[0],
                   }
                 },
               })}

src/app/darmasaba/_com/main-page/apbdes/index.tsx

@@ -35,7 +35,7 @@ function Apbdes() {
 
   return (
     <Stack p="sm" gap="xl" bg={colors.Bg}>
-      <Box mt={"xl"}>
+      <Box>
         <Stack gap="sm">
           <Text c={colors["blue-button"]} ta={"center"} fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>
             {textHeading.title}
@@ -72,7 +72,12 @@ function Apbdes() {
               pos="relative"
               style={{ overflow: 'hidden' }}
             >
-               <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
+              <Box
+                pos="absolute"
+                inset={0}
+                bg="rgba(0,0,0,0.55)"
+                style={{ backdropFilter: 'blur(4px)' }}
+              />
               <Stack justify="space-between" h="100%" p="xl" pos="relative">
                 <Text
                   c="white"
@@ -112,7 +117,7 @@ function Apbdes() {
         )}
       </SimpleGrid>
 
-      <Group justify="center" pb={"xl"}>
+      <Group justify="center" pb={10}>
         <Button
           component={Link}
           href="/darmasaba/apbdes"

src/app/darmasaba/_com/main-page/desaantikorupsi/index.tsx

@@ -29,7 +29,7 @@ function DesaAntiKorupsi() {
 
   const data = (state.desaAntikorupsi.findMany.data || []).slice(0, 6);
   return (
-    <Stack gap={"0"} bg={colors.Bg} p={"sm"} my={"xs"}>
+    <Stack gap={"0"} bg={colors.Bg} p={"sm"}>
       <Container w={{ base: "100%", md: "80%" }} p={"md"} >
         <Center>
           <Text fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>

src/app/darmasaba/_com/main-page/kepuasan/index.tsx

@@ -153,7 +153,7 @@ function Kepuasan() {
 
   if (data.length === 0) {
     return (
-      <Stack p="sm" my={"xs"}>
+      <Stack p="sm">
         <Container w={{ base: "100%", md: "80%" }} p={"sm"}>
           <Center>
             <Text
@@ -245,7 +245,7 @@ function Kepuasan() {
                 {/* Chart Rating */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
                   <Stack>
-                    <Title order={4}>Ulasan</Title>
+                    <Title order={4}>Pilihan</Title>
                     {donutDataRating.every(item => item.value === 0) ? (
                       <Text c="dimmed" ta="center" my="md">
                         Belum ada data untuk ditampilkan dalam grafik
@@ -421,7 +421,7 @@ function Kepuasan() {
     );
   }
   return (
-    <Stack p={"sm"} my={"xs"}>
+    <Stack p={"sm"}>
       <Container size="lg" px="sm">
         <Center>
           <Text
@@ -517,7 +517,7 @@ function Kepuasan() {
               {/* Chart Rating */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
-                  <Title order={4}>Ulasan</Title>
+                  <Title order={4}>Pilihan</Title>
                   {donutDataRating.every(item => item.value === 0) ? (
                     <Text c="dimmed" ta="center" my="md">
                       Belum ada data untuk ditampilkan dalam grafik

src/app/darmasaba/_com/main-page/layanan/index.tsx

@@ -2,6 +2,7 @@
 "use client";
 import stateLayananDesa from "@/app/admin/(dashboard)/_state/desa/layananDesa";
 import colors from "@/con/colors";
+import { Carousel } from "@mantine/carousel";
 import {
   Box,
   Button,
@@ -12,8 +13,10 @@ import {
   Skeleton,
   Stack,
   Text,
+  useMantineTheme
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import Autoplay from "embla-carousel-autoplay";
 import _ from "lodash";
 import { useTransitionRouter } from "next-view-transitions";
 import Link from "next/link";
@@ -21,309 +24,123 @@ import { useEffect, useRef, useState } from "react";
 import { useProxy } from "valtio/utils";
 
 const textHeading = {
-  title: "Layanan",
-  des: "Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!",
+ title: "Layanan",
+ des: "Layanan adalah fitur yang membantu warga desa mengakses berbagai kebutuhan administrasi, informasi, dan bantuan secara cepat, mudah, dan transparan. Dengan fitur ini, semua layanan desa ada dalam genggaman Anda!",
 };
-
 function Layanan() {
-  return (
-    <Stack pos={"relative"} bg={colors.grey[1]} gap={"xl"} py={"md"}>
-      <Container w={{ base: "100%", md: "80%" }} p={"md"}>
-        <Stack align="center" gap={"0"}>
-          <Text
-            fw={"bold"}
-            c={colors["blue-button"]}
-            fz={{ base: "1.8rem", md: "3.4rem" }}
-          >
-            {textHeading.title}
-          </Text>
-          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
-            {textHeading.des}
-          </Text>
-          <Box p={"md"}>
-            <Button
-              component={Link}
-              href={"/darmasaba/desa/layanan"}
-              variant="filled"
-              bg={colors["blue-button"]}
-              radius={100}
-            >
-              Detail
-            </Button>
-          </Box>
-        </Stack>
-      </Container>
-      <Slider />
-      <Divider />
-    </Stack>
-  );
+
+ return (
+   <Stack pos={"relative"} bg={colors.grey[1]} gap={"xl"} py={"md"}>
+     <Container w={{ base: "100%", md: "80%" }} p={"md"} >
+       <Stack align="center" gap={"0"}>
+       <Text fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>
+           {textHeading.title}
+         </Text>
+         <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
+           {textHeading.des}
+         </Text>
+         <Box p={"md"}>
+           <Button component={Link} href={"/darmasaba/desa/layanan"} variant="filled" bg={colors["blue-button"]} radius={100}>
+             Detail
+           </Button>
+         </Box>
+       </Stack>
+     </Container>
+     <Slider />
+     <Divider />
+   </Stack>
+ );
 }
 
 const height = 720;
-
 function Slider() {
-  const state = useProxy(stateLayananDesa);
-  const [loading, setLoading] = useState(false);
-  const mobile = useMediaQuery("(max-width: 768px)", false);
-  const router = useTransitionRouter();
+ const state = useProxy(stateLayananDesa)
+ const [loading, setLoading] = useState(false);
+ const theme = useMantineTheme();
+ const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+ const autoplay = useRef(Autoplay({ delay: 2000 }));
+ const router = useTransitionRouter()
 
-  // Refs for smooth animation
-  const containerRef = useRef<HTMLDivElement>(null);
-  const scrollPositionRef = useRef(0);
-  const animationFrameRef = useRef<number>(0);
-  const isHoveredRef = useRef(false);
-  
-  // Refs for drag functionality
-  const isDraggingRef = useRef(false);
-  const startXRef = useRef(0);
-  const scrollLeftRef = useRef(0);
-  const velocityRef = useRef(0);
-  const lastScrollTimeRef = useRef(0);
-  
-  // Speed configuration
-  const normalSpeed = 1.0; // pixels per frame
-  const hoverSpeed = 0.3; // slower speed on hover
+ useEffect(()=> {
+   const loadData = async () => {
+     try {
+       setLoading(true);
+       await state.suratKeterangan.findMany.load()
+     } catch (error) {
+       console.error('Error loading data:', error);
+     } finally {
+       setLoading(false);
+     }
+   }
+   loadData()
+ }, [])
 
-  useEffect(() => {
-    const loadData = async () => {
-      try {
-        setLoading(true);
-        await state.suratKeterangan.findMany.load();
-      } catch (error) {
-        console.error("Error loading data:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
-    loadData();
-  }, []);
+ const data = (state.suratKeterangan.findMany.data || []).slice(0, 8);
 
-  const data = state.suratKeterangan.findMany.data || [];
+ const slides = data.map((item) => (
+   <Carousel.Slide key={item.id} >
+     <Paper h={height} pos={"relative"} style={{
+       backgroundImage: `url(${item.image?.link})`,
+       backgroundSize: "cover",
+       backgroundPosition: "center",
+       backgroundRepeat: "no-repeat",
+     }}>
+       <Box
+         style={{
+           borderRadius: 16,
+           zIndex: 0,
+         }}
+         pos={"absolute"}
+         w={"100%"}
+         h={"100%"}
+         bg={colors.trans.dark[2]}
+       />
+       <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
+         <Box p={"lg"}>
+           <Text
 
-  // Duplicate slides for seamless infinite loop
-  // We need at least 3x the data for smooth infinite scrolling
-  const slidesData = [...data, ...data, ...data];
+             fw={"bold"}
+             c={"white"}
+             size={"3.5rem"}
+             style={{
+               textAlign: "center",
+             }}
+           >
+             {_.startCase(item.name)}
+           </Text>
+         </Box>
+         <Group justify="center">
+           <Button onClick={()=> router.push(`/darmasaba/desa/layanan/${item.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
+             Detail
+           </Button>
+         </Group>
+       </Stack>
+     </Paper>
+   </Carousel.Slide>
+ ));
 
-  useEffect(() => {
-    if (loading || !containerRef.current || slidesData.length === 0) return;
-
-    const container = containerRef.current;
-    const slideWidth = container.scrollWidth / slidesData.length;
-    const originalDataLength = data.length;
-
-    // Start from the middle set of slides
-    scrollPositionRef.current = slideWidth * originalDataLength;
-    container.scrollLeft = scrollPositionRef.current;
-
-    const animate = () => {
-      if (!containerRef.current) return;
-
-      const container = containerRef.current;
-      const slideWidth = container.scrollWidth / slidesData.length;
-
-      // Check if user recently scrolled manually
-      const timeSinceLastScroll = Date.now() - lastScrollTimeRef.current;
-      const isUserScrolling = timeSinceLastScroll < 100;
-
-      // Only auto-scroll if user is not actively scrolling or dragging
-      if (!isDraggingRef.current && !isUserScrolling) {
-        const currentSpeed = isHoveredRef.current ? hoverSpeed : normalSpeed;
-        scrollPositionRef.current += currentSpeed;
-
-        // Reset position for infinite loop
-        if (scrollPositionRef.current >= slideWidth * (originalDataLength * 2)) {
-          scrollPositionRef.current -= slideWidth * originalDataLength;
-        }
-
-        if (scrollPositionRef.current <= 0) {
-          scrollPositionRef.current += slideWidth * originalDataLength;
-        }
-
-        container.scrollLeft = scrollPositionRef.current;
-      } else {
-        // Sync scroll position when user is scrolling
-        scrollPositionRef.current = container.scrollLeft;
-        
-        // Apply momentum/velocity for smooth drag release
-        if (!isDraggingRef.current && Math.abs(velocityRef.current) > 0.1) {
-          scrollPositionRef.current += velocityRef.current;
-          velocityRef.current *= 0.95; // Decay velocity
-          container.scrollLeft = scrollPositionRef.current;
-        }
-      }
-
-      animationFrameRef.current = requestAnimationFrame(animate);
-    };
-
-    animationFrameRef.current = requestAnimationFrame(animate);
-
-    return () => {
-      if (animationFrameRef.current) {
-        cancelAnimationFrame(animationFrameRef.current);
-      }
-    };
-  }, [loading, slidesData.length, data.length, mobile]);
-
-  const handleMouseEnter = () => {
-    isHoveredRef.current = true;
-  };
-
-  const handleMouseLeave = () => {
-    isHoveredRef.current = false;
-    isDraggingRef.current = false;
-  };
-
-  // Mouse drag handlers
-  const handleMouseDown = (e: React.MouseEvent) => {
-    if (!containerRef.current) return;
-    
-    isDraggingRef.current = true;
-    startXRef.current = e.pageX - containerRef.current.offsetLeft;
-    scrollLeftRef.current = containerRef.current.scrollLeft;
-    velocityRef.current = 0;
-    
-    containerRef.current.style.cursor = 'grabbing';
-  };
-
-  const handleMouseMove = (e: React.MouseEvent) => {
-    if (!isDraggingRef.current || !containerRef.current) return;
-    
-    e.preventDefault();
-    const x = e.pageX - containerRef.current.offsetLeft;
-    const walk = (x - startXRef.current) * 2; // Multiply for faster scroll
-    const newScrollLeft = scrollLeftRef.current - walk;
-    
-    // Calculate velocity for momentum
-    velocityRef.current = containerRef.current.scrollLeft - newScrollLeft;
-    
-    containerRef.current.scrollLeft = newScrollLeft;
-    scrollPositionRef.current = newScrollLeft;
-    lastScrollTimeRef.current = Date.now();
-  };
-
-  const handleMouseUp = () => {
-    if (!containerRef.current) return;
-    
-    isDraggingRef.current = false;
-    containerRef.current.style.cursor = 'grab';
-  };
-
-  // Wheel scroll handler
-  const handleWheel = (e: React.WheelEvent) => {
-    if (!containerRef.current) return;
-    
-    e.preventDefault();
-    containerRef.current.scrollLeft += e.deltaY;
-    scrollPositionRef.current = containerRef.current.scrollLeft;
-    lastScrollTimeRef.current = Date.now();
-  };
-
-  if (loading) {
-    return <Skeleton height={height} />;
-  }
-
-  if (data.length === 0) {
-    return (
-      <Container>
-        <Text ta="center" c="dimmed">
-          Tidak ada layanan tersedia
-        </Text>
-      </Container>
-    );
-  }
-
-  return (
-    <Box
-      ref={containerRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onWheel={handleWheel}
-      style={{
-        overflow: "hidden",
-        cursor: "grab",
-        userSelect: "none",
-      }}
+ return (
+  <Box>
+   {loading ? (
+    <Skeleton height={height} />
+   ) : (
+    <Carousel
+      plugins={[autoplay.current]}
+      onMouseEnter={autoplay.current.stop}
+      onMouseLeave={autoplay.current.reset}
+      height={height}
+      slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
+      slideGap={{ base: "xl", sm: "md" }}
+      loop
+      align="start"
+      slidesToScroll={mobile ? 1 : 2}
     >
-      <Box
-        style={{
-          display: "flex",
-          gap: mobile ? "1rem" : "1.5rem",
-          paddingLeft: mobile ? "1rem" : "1.5rem",
-          paddingRight: mobile ? "1rem" : "1.5rem",
-        }}
-      >
-        {slidesData.map((item, index) => (
-          <Box
-            key={`${item.id}-${index}`}
-            style={{
-              flex: `0 0 ${mobile ? "100%" : "calc(33.333% - 1rem)"}`,
-              minWidth: mobile ? "100%" : "calc(33.333% - 1rem)",
-            }}
-          >
-            <Paper
-              h={height}
-              pos={"relative"}
-              style={{
-                backgroundImage: `url(${item.image?.link})`,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                borderRadius: 8,
-                overflow: "hidden",
-              }}
-            >
-              <Box
-                style={{
-                  borderRadius: 8,
-                  zIndex: 0,
-                }}
-                pos={"absolute"}
-                w={"100%"}
-                h={"100%"}
-                bg={colors.trans.dark[2]}
-              />
-              <Stack
-                justify="space-between"
-                h={"100%"}
-                gap={0}
-                p={"lg"}
-                pos={"relative"}
-              >
-                <Box p={"lg"}>
-                  <Text
-                    fw={"bold"}
-                    c={"white"}
-                    size={"3.5rem"}
-                    style={{
-                      textAlign: "center",
-                    }}
-                  >
-                    {_.startCase(item.name)}
-                  </Text>
-                </Box>
-                <Group justify="center">
-                  <Button
-                    onClick={() =>
-                      router.push(`/darmasaba/desa/layanan/${item.id}`)
-                    }
-                    px={46}
-                    radius={"100"}
-                    size="md"
-                    bg={colors["blue-button"]}
-                  >
-                    Detail
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-        ))}
-      </Box>
-    </Box>
-  );
+      {slides}
+    </Carousel>
+   )}
+  </Box>
+ );
 }
 
-export default Layanan;
+export default Layanan;
+

src/app/darmasaba/_com/main-page/prestasi/index.tsx

@@ -3,10 +3,11 @@
 import prestasiState from "@/app/admin/(dashboard)/_state/landing-page/prestasi-desa";
 import colors from "@/con/colors";
 import { BackgroundImage, Box, Button, Center, Container, Group, Loader, SimpleGrid, Stack, Text } from "@mantine/core";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { useEffect, useState } from "react";
 import { useProxy } from "valtio/utils";
+import { useEffect, useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { IconTrophy } from "@tabler/icons-react";
 
 function Prestasi() {
   const state = useProxy(prestasiState.prestasiDesa);
@@ -32,9 +33,12 @@ function Prestasi() {
     <Stack p="sm" bg="linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)">
       <Container w={{ base: "100%", md: "80%" }} p="xl">
         <Stack align="center" gap="sm">
+          <Group gap="xs">
+            <IconTrophy size={36} color={colors["blue-button"]} />
             <Text c={colors["blue-button"]} ta="center" fz={{ base: "2rem", md: "3.4rem" }} fw={700}>
               Prestasi Desa
             </Text>
+          </Group>
           <Text fz={{ base: "1rem", md: "1.3rem" }} ta="center" c="dimmed" maw={700}>
             Kami bangga dengan pencapaian desa hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.
           </Text>
@@ -59,13 +63,14 @@ function Prestasi() {
         ) : data.length === 0 ? (
           <Center mih={200}>
             <Stack align="center" gap="xs">
+              <IconTrophy size={48} color="gray" />
               <Text fz="1.2rem" fw={500} c="dimmed">
                 Belum ada prestasi yang ditampilkan
               </Text>
             </Stack>
           </Center>
         ) : (
-          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mb={"xl"}>
+          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
             {data.map((v, k) => (
               <BackgroundImage
                 key={k}
@@ -77,7 +82,7 @@ function Prestasi() {
                   pos="absolute"
                   inset={0}
                   bg="linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%)"
-                  style={{ borderRadius: 27 }}
+                  style={{ borderRadius: "1rem" }}
                 />
                 <Stack justify="space-between" h="100%" pos="relative" p="lg">
                   <Box>

src/app/darmasaba/_com/main-page/sdgs/index.tsx

@@ -1,12 +1,11 @@
 'use client'
-import colors from "@/con/colors"
-import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, Title, useMantineTheme } from "@mantine/core"
+import { useEffect, useState } from "react"
+import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, Title, useMantineTheme, Tooltip } from "@mantine/core"
 import { useMediaQuery } from "@mantine/hooks"
 import { Prisma } from "@prisma/client"
-import { IconMoodSad } from "@tabler/icons-react"
 import Link from "next/link"
-import { useEffect, useState } from "react"
-import { motion } from "framer-motion";
+import { IconMoodSad } from "@tabler/icons-react"
+import colors from "@/con/colors"
 
 export default function SDGS() {
   const theme = useMantineTheme()
@@ -26,8 +25,8 @@ export default function SDGS() {
           setSdgsDesa([])
           return
         }
-        const top4Sdgs = [...data].sort((a, b) => parseInt(b.jumlah) - parseInt(a.jumlah)).slice(0, 4)
-        setSdgsDesa(top4Sdgs)
+        const top3Sdgs = [...data].sort((a, b) => parseInt(b.jumlah) - parseInt(a.jumlah)).slice(0, 3)
+        setSdgsDesa(top3Sdgs)
       } catch {
         setSdgsDesa([])
       }
@@ -36,7 +35,7 @@ export default function SDGS() {
   }, [])
 
   return (
-    <Stack p="sm" my={"xs"}>
+    <Stack p="sm">
       <Container w={{ base: "100%", md: "80%" }} p="xl">
         <Center>
           <Title
@@ -53,56 +52,63 @@ export default function SDGS() {
         </Text>
 
         <Box py="lg">
-          {sdgsDesa && sdgsDesa.length > 0 ? (
-            <SimpleGrid cols={{ base: 1, sm: 4 }} spacing="xl" verticalSpacing="xl" pb={30}>
+          <Paper
+            p={{ base: "md", md: "xl" }}
+            radius="2xl"
+            withBorder
+            shadow="lg"
+            style={{
+              background: "linear-gradient(145deg, #FFFFFF, #F9FAFB)",
+              border: "1px solid rgba(0,0,0,0.06)",
+            }}
+          >
+            {sdgsDesa && sdgsDesa.length > 0 ? (
+              <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="xl" verticalSpacing="xl">
               {sdgsDesa.map((item) => (
-                <motion.div
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
+                <Paper
                   key={item.id}
+                  p="lg"
+                  radius="xl"
+                  shadow="sm"
+                  withBorder
+                  style={{
+                    background: "linear-gradient(180deg, #FFFFFF, #F6F8FA)",
+                    border: "1px solid rgba(0,0,0,0.05)",
+                    transition: "all 0.3s ease",
+                    height: "100%", // biar tinggi antar card konsisten
+                    display: "flex",
+                    flexDirection: "column",
+                  }}
                 >
-                  <Paper
-                    p="lg"
-                    radius="xl"
-                    shadow="sm"
-                    withBorder
-                    style={{
-                      background: "linear-gradient(180deg, #FFFFFF, #F6F8FA)",
-                      border: "1px solid rgba(0,0,0,0.05)",
-                      transition: "all 0.3s ease",
-                      height: "100%", // biar tinggi antar card konsisten
-                      display: "flex",
-                      flexDirection: "column",
-                    }}
-                  >
-                    <Center mb="lg">
-                      <Box
-                        p="md"
-                        style={{
-                          background: "rgba(240, 249, 255, 0.8)",
-                          backdropFilter: "blur(6px)",
-                          width: mobile ? 140 : 160,
-                          height: mobile ? 140 : 160,
-                          display: "flex",
-                          alignItems: "center",
-                          justifyContent: "center",
-                          borderRadius: "1rem",
-                          boxShadow: "0 6px 16px rgba(0,0,0,0.06)",
-                        }}
-                      >
-                        <Image
-                          src={item.image?.link ? item.image.link : "/placeholder-sdgs.png"}
-                          alt={item.name}
-                          w={mobile ? 90 : 110}
-                          h={mobile ? 90 : 110}
-                          fit="contain"
-                          loading="lazy"
-                        />
-                      </Box>
-                    </Center>
-
-                    {/* Stack isi teks & angka */}
-                    <Stack justify="space-between" align="center" gap="xs" h="100%">
+                  <Center mb="lg">
+                    <Box
+                      p="md"
+                      style={{
+                        background: "rgba(240, 249, 255, 0.8)",
+                        backdropFilter: "blur(6px)",
+                        width: mobile ? 140 : 160,
+                        height: mobile ? 140 : 160,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        borderRadius: "1rem",
+                        boxShadow: "0 6px 16px rgba(0,0,0,0.06)",
+                      }}
+                    >
+                      <Image
+                        src={item.image?.link ? item.image.link : "/placeholder-sdgs.png"}
+                        alt={item.name}
+                        w={mobile ? 90 : 110}
+                        h={mobile ? 90 : 110}
+                        fit="contain"
+                        loading="lazy"
+                      />
+                    </Box>
+                  </Center>
+            
+                  {/* Stack isi teks & angka */}
+                  <Stack justify="space-between" align="center" gap="xs" h="100%">
+                    <Tooltip label="Nama tujuan SDGs Desa" position="top" withArrow>
                       <Text
                         ta="center"
                         fz={{ base: "lg", md: "xl" }}
@@ -112,33 +118,34 @@ export default function SDGS() {
                       >
                         {item.name}
                       </Text>
-
-                      <Title
-                        order={2}
-                        ta="center"
-                        style={{
-                          fontSize: mobile ? "2.4rem" : "3.2rem",
-                          fontWeight: 900,
-                          letterSpacing: "-0.5px",
-                          color: "#124170",
-                        }}
-                      >
-                        {item.jumlah}
-                      </Title>
-                    </Stack>
-                  </Paper>
-                </motion.div>
+                    </Tooltip>
+            
+                    <Title
+                      order={2}
+                      ta="center"
+                      style={{
+                        fontSize: mobile ? "2.4rem" : "3.2rem",
+                        fontWeight: 900,
+                        letterSpacing: "-0.5px",
+                        color: "#124170",
+                      }}
+                    >
+                      {item.jumlah}
+                    </Title>
+                  </Stack>
+                </Paper>
               ))}
             </SimpleGrid>
-
-          ) : (
-            <Center mih={200} style={{ flexDirection: "column" }}>
-              <IconMoodSad size={48} stroke={1.5} style={{ marginBottom: "1rem" }} />
-              <Text fz="lg" c="dimmed">
-                Data SDGs Desa belum tersedia
-              </Text>
-            </Center>
-          )}
+            
+            ) : (
+              <Center mih={200} style={{ flexDirection: "column" }}>
+                <IconMoodSad size={48} stroke={1.5} style={{ marginBottom: "1rem" }} />
+                <Text fz="lg" c="dimmed">
+                  Data SDGs Desa belum tersedia
+                </Text>
+              </Center>
+            )}
+          </Paper>
 
           <Center>
             <Button
@@ -149,19 +156,7 @@ export default function SDGS() {
               mt="md"
               variant="gradient"
               gradient={{ from: "#26667F", to: "#124170" }}
-              style={{
-                boxShadow: "0 6px 14px rgba(18,65,112,0.25)",
-                transition: "all 0.3s ease",
-                transform: "translateY(0)",
-              }}
-              onMouseEnter={(e) => {
-                e.currentTarget.style.transform = "translateY(-4px)";
-                e.currentTarget.style.boxShadow = "0 10px 20px rgba(18,65,112,0.35)";
-              }}
-              onMouseLeave={(e) => {
-                e.currentTarget.style.transform = "translateY(0)";
-                e.currentTarget.style.boxShadow = "0 6px 14px rgba(18,65,112,0.25)";
-              }}
+              style={{ boxShadow: "0 6px 14px rgba(18,65,112,0.25)"}}
             >
               <Text c="white" fz={{ base: "md", md: "lg" }} fw="bold">Jelajahi Semua Tujuan SDGs Desa</Text>
             </Button>

src/app/darmasaba/page.tsx

@@ -19,7 +19,7 @@ export default function Page() {
     <Box>
       <Stack 
       bg={colors.grey[1]} 
-      gap={0}
+      gap={"1.5rem"}
       >
         <LandingPage />
         <Penghargaan />

src/con/navbar-list-menu.ts

@@ -35,13 +35,13 @@ const navbarListMenu = [
             },
             {
                 id: "1.7",
-                name: "Daftar Informasi Publik",
-                href: "/darmasaba/ppid/daftar-informasi-publik"
+                name: "Daftar Informasi Publik Desa Darmasaba",
+                href: "/darmasaba/ppid/daftar-informasi-publik-desa-darmasaba"
             },
             {
                 id: "1.8",
-                name: "Indeks Kepuasan Masyarakat",
-                href: "/darmasaba/ppid/indeks-kepuasan-masyarakat"
+                name: "IKM Desa Darmasaba",
+                href: "/darmasaba/ppid/ikm-desa-darmasaba"
             },
 
         ]

src/types/react-exif-orientation-img.d.ts

@@ -1,12 +0,0 @@
-declare module 'react-exif-orientation-img' {
-  import { ImgHTMLAttributes } from 'react';
-
-  interface ExifOrientationImgProps extends ImgHTMLAttributes<HTMLImageElement> {
-    src: string;
-    className?: string;
-    style?: React.CSSProperties;
-  }
-
-  const ExifOrientationImg: React.FC<ExifOrientationImgProps>;
-  export default ExifOrientationImg;
-}