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

@@ -3,7 +3,7 @@
   "version": "0.1.5",
   "private": true,
   "scripts": {
-    "dev": "bun --bun next dev --hostname 0.0.0.0",
+    "dev": "bun --bun next dev",
     "build": "bun --bun next build",
     "start": "bun --bun next start"
   },
@@ -43,6 +43,7 @@
     "@types/bun": "^1.2.2",
     "@types/leaflet": "^1.9.20",
     "@types/lodash": "^4.17.16",
+    "@types/nodemailer": "^7.0.2",
     "add": "^2.0.6",
     "adm-zip": "^0.5.16",
     "animate.css": "^4.1.1",
@@ -52,6 +53,7 @@
     "classnames": "^2.5.1",
     "colors": "^1.4.0",
     "dayjs": "^1.11.13",
+    "dotenv": "^17.2.3",
     "elysia": "^1.3.5",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
@@ -71,6 +73,7 @@
     "next": "^15.5.2",
     "next-view-transitions": "^0.3.4",
     "node-fetch": "^3.3.2",
+    "nodemailer": "^7.0.10",
     "p-limit": "^6.2.0",
     "primeicons": "^7.0.0",
     "primereact": "^10.9.6",

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx

@@ -55,9 +55,9 @@ function EditProgramKemiskinan() {
   useEffect(() => {
     if (!id) return;
 
-    stateProgram.findUnique
+    const loadData = async () => {
-      .load(id)
+      try {
-      .then(() => {
+        await stateProgram.findUnique.load(id);
         const data = stateProgram.findUnique.data;
         if (data) {
           setFormData({
@@ -70,12 +70,16 @@ function EditProgramKemiskinan() {
             },
           });
         }
-      })
+      } catch (err) {
-      .catch((err) => {
         console.error('Error load data:', err);
         toast.error('Gagal mengambil data program');
-      });
+      }
-  }, [id, stateProgram.findUnique]);
+    };
+
+    loadData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]); // ✅ hanya trigger saat id berubah
+
 
   // generic handler untuk field top-level
   const handleChange = useCallback(

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/[id]/edit/page.tsx

@@ -183,7 +183,7 @@ function EditArtikelKesehatan() {
           {/* Gambar */}
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
+              Gambar Artikel Kesehatan
             </Text>
             <Dropzone
               onDrop={handleFileChange}
@@ -240,15 +240,15 @@ function EditArtikelKesehatan() {
           />
 
           {/* Pendahuluan */}
-          <InputText
+          <Box>
-            label="Pendahuluan"
+            <Text fw="bold">Pendahuluan</Text>
-            value={formData.introduction.content}
+            <EditEditor
-            onChange={(value) =>
+              value={formData.introduction.content}
-              setFormData((prev) => ({ ...prev, introduction: { content: value } }))
+              onChange={(value) =>
-            }
+                setFormData((prev) => ({ ...prev, introduction: { ...prev.introduction, content: value } }))
-            placeholder="Masukkan pendahuluan"
+              }
-          />
+            />
-
+          </Box>
           {/* Gejala */}
           <Box>
             <Text fw="bold">Gejala</Text>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/create/page.tsx

@@ -115,7 +115,7 @@ function CreateArtikelKesehatan() {
         <Stack gap="md">
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
+              Gambar Artikel Kesehatan
             </Text>
             <Dropzone
               onDrop={(files) => {
@@ -163,7 +163,7 @@ function CreateArtikelKesehatan() {
               </Box>
             )}
           </Box>
-          
+
           <TextInput
             label={"Judul"}
             placeholder="Masukkan judul"
@@ -182,16 +182,15 @@ function CreateArtikelKesehatan() {
             }}
             required
           />
-          <TextInput
+          <Box>
-            label={"Pendahuluan"}
+            <Text fz="sm" fw="bold">Pendahuluan</Text>
-            placeholder="Masukkan pendahuluan"
+            <CreateEditor
-            required
+              value={stateArtikelKesehatan.create.form.introduction.content}
-            defaultValue={stateArtikelKesehatan.create.form.introduction.content}
+              onChange={(e) => {
-            onChange={(e) => {
+                stateArtikelKesehatan.create.form.introduction.content = e;
-              stateArtikelKesehatan.create.form.introduction.content = e.target.value;
+              }}
-            }}
+            />
-          />
+          </Box>
-
           {/* Gejala */}
           <Box>
             <Text fz="md" fw="bold">Gejala</Text>

src/app/admin/layout.tsx

@@ -132,7 +132,7 @@ export default function Layout({ children }: { children: React.ReactNode }) {
             <Tooltip label="Keluar" position="bottom" withArrow>
               <ActionIcon
                 onClick={() => {
-                  router.push("/login");
+                  router.push("/darmasaba");
                 }}
                 color={colors["blue-button"]}
                 radius="xl"

src/app/api/[[...slugs]]/_lib/search/searchState.ts

@@ -25,26 +25,40 @@ const searchState = proxy({
       searchState.results = [];
       return;
     }
-
+  
     searchState.loading = true;
+  
+    try {
+      const res = await ApiFetch.api.search.findMany.get({
+        query: {
+          query: searchState.query,
+          page: searchState.page,
+          limit: searchState.limit,
+          type: searchState.type,
+        },
+      });
+  
+      console.log("Search API Response:", res);
+      const rawItems = res.data?.data || [];
+      const parsedItems = structuredClone(rawItems); // ✅ penting!
+  
+      console.log("✅ Parsed items:", parsedItems);
+  
+      if (searchState.page === 1) {
+        searchState.results = parsedItems;
+      } else {
+        searchState.results.push(...parsedItems);
+      }
 
-    const res = await ApiFetch.api.search.findMany.get({
+      console.log("Search results render:", searchState.results);
-      query: {
-        query: searchState.query,
-        page: searchState.page,
-        limit: searchState.limit,
-        type: searchState.type,
-      },
-    });
 
-    if (searchState.page === 1) {
+  
-      searchState.results = res.data?.data || [];
+      searchState.nextPage = res.data?.nextPage || null;
-    } else {
+    } catch (error) {
-      searchState.results.push(...(res.data?.data || []));
+      console.error("Search fetch error:", error);
+    } finally {
+      searchState.loading = false;
     }
-
-    searchState.nextPage = res.data?.nextPage || null;
-    searchState.loading = false;
   },
 
   async next() {

src/app/api/subscribe/route.ts

@@ -0,0 +1,54 @@
+import { NextResponse } from 'next/server';
+import nodemailer from 'nodemailer';
+
+export async function POST(request: Request) {
+  try {
+    const { email } = await request.json();
+
+    // Input validation
+    if (!email) {
+      return NextResponse.json(
+        { success: false, message: 'Email is required' },
+        { status: 400 }
+      );
+    }
+
+    // Email regex validation
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) {
+      return NextResponse.json(
+        { success: false, message: 'Invalid email format' },
+        { status: 400 }
+      );
+    }
+
+    // Configure nodemailer
+    const transporter = nodemailer.createTransport({
+      service: 'gmail',
+      auth: {
+        user: process.env.EMAIL_USER,
+        pass: process.env.EMAIL_PASS,
+      },
+    });
+
+    // Send email
+    await transporter.sendMail({
+      from: `"Tim Info" <${process.env.EMAIL_USER}>`,
+      to: email,
+      subject: '✅ Berhasil Berlangganan!',
+      html: `<p>Terima kasih telah berlangganan info terbaru dari kami!</p>`,
+    });
+
+    return NextResponse.json({
+      success: true,
+      message: 'Subscription successful! Please check your email.',
+    });
+
+  } catch (error) {
+    console.error('Error in subscribe API:', error);
+    return NextResponse.json(
+      { success: false, message: 'Internal server error' },
+      { status: 500 }
+    );
+  }
+}

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

@@ -62,11 +62,23 @@ function Page() {
             Informasi dan Pelayanan Administrasi Digital
           </Text>
         </Box>
-        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} loading="lazy"/>
+        <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" }} ta={"justify"} style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.content || '' }} />
+          <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>

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

@@ -186,12 +186,11 @@ function Page() {
                   stateCreate.create.form.kategoriId = '';
                 }
               }}
-              searchable
+              // searchable
               clearable
               nothingFoundMessage="Tidak ditemukan"
               required
             />
-
             <Button bg={colors['blue-button']} onClick={handleSubmit}>
               Simpan
             </Button>

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPerizinanBerusaha.tsx

@@ -7,34 +7,52 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function PelayananPerizinanBerusaha() {
-  const state = useProxy(stateLayananDesa)
+  const state = useProxy(stateLayananDesa);
-  const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
-  const [active, setActive] = useState(1);
+  const [active, setActive] = useState(0);
-  const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
+
-  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+  const totalSteps = 6;
+
+  const nextStep = () => {
+    if (active < totalSteps - 1) {
+      setActive(active + 1);
+    } else if (active === totalSteps - 1) {
+      setActive(totalSteps); // Mark as completed
+    }
+  };
+
+  const prevStep = () => {
+    if (active > 0) {
+      setActive(active - 1);
+    }
+  };
 
   useEffect(() => {
     const loadData = async () => {
       try {
         setLoading(true);
-        await state.pelayananPerizinanBerusaha.findById.load('edit')
+        await state.pelayananPerizinanBerusaha.findById.load('edit');
       } catch (error) {
         console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false);
       }
-    }
+    };
-    loadData()
+    loadData();
-  }, [])
+  }, []);
 
   const data = state.pelayananPerizinanBerusaha.findById.data;
-  
+
   if (!data && !loading) {
     return (
       <Center mih={300}>
         <Stack align="center" gap="sm">
-          <Text fz="lg" fw={500} c="dimmed">Belum ada informasi layanan yang tersedia</Text>
+          <Text fz="lg" fw={500} c="dimmed">
-          <Button component="a" href="https://oss.go.id" target="_blank" radius="xl">Kunjungi OSS</Button>
+            Belum ada informasi layanan yang tersedia
+          </Text>
+          <Button component="a" href="https://oss.go.id" target="_blank" radius="xl">
+            Kunjungi OSS
+          </Button>
         </Stack>
       </Center>
     );
@@ -47,72 +65,111 @@ function PelayananPerizinanBerusaha() {
           <Loader size="lg" color="blue" />
         </Center>
       ) : (
-          <Stack gap="lg">
+        <Stack gap="lg">
-            <Box>
+          <Box>
-              <Title order={2} fw={700} fz={{ base: 22, md: 32 }} mb="sm">
+            <Title order={2} fw={700} fz={{ base: 22, md: 32 }} mb="sm">
-                Perizinan Berusaha Berbasis Risiko melalui OSS
+              Perizinan Berusaha Berbasis Risiko melalui OSS
-              </Title>
+            </Title>
-              <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
+            <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
-                Sistem Online Single Submission (OSS) untuk pendaftaran NIB
+              Sistem Online Single Submission (OSS) untuk pendaftaran NIB
-              </Text>
+            </Text>
-            </Box>
+          </Box>
 
-            <Text fz={{ base: 'sm', md: 'md' }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: data?.deskripsi || '' }} />
+          <Text
+            fz={{ base: 'sm', md: 'md' }}
+            ta="justify"
+            style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+            dangerouslySetInnerHTML={{ __html: data?.deskripsi || '' }}
+          />
 
-            <Box>
+          <Box>
-              <Text fw={600} mb="sm" fz={{ base: 'sm', md: 'lg' }}>Alur pendaftaran NIB:</Text>
+            <Text fw={600} mb="sm" fz={{ base: 'sm', md: 'lg' }}>
-              <Stepper active={active} onStepClick={setActive} orientation="vertical" color="blue" radius="md"
+              Alur pendaftaran NIB:
-                styles={{
+            </Text>
-                  step: { padding: '14px 0' },
+            <Stepper
-                  stepBody: { marginLeft: 8 }
+              active={active}
-                }}
+              onStepClick={(step) => {
-              >
+                if (step <= active) { // Only allow clicking on previous or current steps
-                <StepperStep label="Langkah 1" description="Daftar Akun">
+                  setActive(step);
-                  <Text fz="sm">Membuat akun di portal OSS</Text>
+                }
-                </StepperStep>
+              }}
-                <StepperStep label="Langkah 2" description="Isi Data Perusahaan">
+              orientation="vertical"
-                  <Text fz="sm">Lengkapi informasi perusahaan, data pemegang saham, dan alamat</Text>
+              color="blue"
-                </StepperStep>
+              radius="md"
-                <StepperStep label="Langkah 3" description="Pilih KBLI">
+              styles={{
-                  <Text fz="sm">Menentukan kode KBLI sesuai jenis usaha</Text>
+                step: { padding: '14px 0' },
-                </StepperStep>
+                stepBody: { marginLeft: 8 }
-                <StepperStep label="Langkah 4" description="Unggah Dokumen">
+              }}
-                  <Text fz="sm">Unggah akta pendirian, surat izin, dan dokumen wajib lainnya</Text>
+            >
-                </StepperStep>
+              <StepperStep label="Langkah 1" description="Daftar Akun">
-                <StepperStep label="Langkah 5" description="Verifikasi Instansi">
+                <Text fz="sm">Membuat akun di portal OSS</Text>
-                  <Text fz="sm">Menunggu verifikasi dan persetujuan dari pihak berwenang</Text>
+              </StepperStep>
-                </StepperStep>
+              <StepperStep label="Langkah 2" description="Isi Data Perusahaan">
-                <StepperStep label="Langkah 6" description="Terbit NIB">
+                <Text fz="sm">Lengkapi informasi perusahaan, data pemegang saham, dan alamat</Text>
-                  <Text fz="sm">Menerima NIB sebagai identitas resmi usaha</Text>
+              </StepperStep>
-                </StepperStep>
+              <StepperStep label="Langkah 3" description="Pilih KBLI">
-                <StepperCompleted>
+                <Text fz="sm">Menentukan kode KBLI sesuai jenis usaha</Text>
-                  <Center>
+              </StepperStep>
-                    <Stack align="center" gap="xs">
+              <StepperStep label="Langkah 4" description="Unggah Dokumen">
-                      <IconCheck size={40} color="green" />
+                <Text fz="sm">Unggah akta pendirian, surat izin, dan dokumen wajib lainnya</Text>
-                      <Text fz="sm" fw={500}>Proses pendaftaran selesai</Text>
+              </StepperStep>
-                    </Stack>
+              <StepperStep label="Langkah 5" description="Verifikasi Instansi">
-                  </Center>
+                <Text fz="sm">Menunggu verifikasi dan persetujuan dari pihak berwenang</Text>
-                </StepperCompleted>
+              </StepperStep>
-              </Stepper>
+              <StepperStep label="Langkah 6" description="Terbit NIB">
+                <Text fz="sm">Menerima NIB sebagai identitas resmi usaha</Text>
+              </StepperStep>
+              <StepperCompleted>
+                <Center>
+                  <Stack align="center" gap="xs">
+                    <IconCheck size={40} color="green" />
+                    <Text fz="sm" fw={500}>Proses pendaftaran selesai</Text>
+                  </Stack>
+                </Center>
+              </StepperCompleted>
+            </Stepper>
 
+            {active < totalSteps && (
               <Group justify="center" mt="lg">
-                <Button variant="light" leftSection={<IconArrowLeft size={18} />} onClick={prevStep} disabled={active === 0}>
+                <Button
+                  variant="light"
+                  leftSection={<IconArrowLeft size={18} />}
+                  onClick={prevStep}
+                  disabled={active === 0}
+                >
                   Kembali
                 </Button>
-                <Button rightSection={<IconArrowRight size={18} />} onClick={nextStep}>
-                  Lanjut
-                </Button>
-              </Group>
-            </Box>
 
-            <Text fz="sm" ta="justify" c="dimmed" mt="md">
+                {active < totalSteps ? (
-              Catatan: Persyaratan dan prosedur dapat berubah sewaktu-waktu. Untuk informasi resmi terbaru, silakan kunjungi situs{" "}
+                  <Button
-              <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">oss.go.id</a> atau hubungi instansi pemerintah terkait.
+                    rightSection={active < totalSteps - 1 ? <IconArrowRight size={18} /> : null}
-            </Text>
+                    onClick={nextStep}
-          </Stack>
+                  >
+                    {active === totalSteps - 1 ? 'Selesai' : 'Lanjut'}
+                  </Button>
+                ) : (
+                  <Button
+                    variant="light"
+                    onClick={() => setActive(0)}
+                  >
+                    Mulai Lagi
+                  </Button>
+                )}
+              </Group>
+            )}
+          </Box>
+
+          <Text fz="sm" ta="justify" c="dimmed" mt="md">
+            Catatan: Persyaratan dan prosedur dapat berubah sewaktu-waktu. Untuk informasi resmi terbaru, silakan kunjungi situs{' '}
+            <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">
+              oss.go.id
+            </a>{' '}
+            atau hubungi instansi pemerintah terkait.
+          </Text>
+        </Stack>
       )}
     </Box>
   );
 }
 
-export default PelayananPerizinanBerusaha;
+export default PelayananPerizinanBerusaha;

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx

@@ -47,13 +47,13 @@ function PelayananSuratKeterangan({ search }: { search: string }) {
     <Box pb="xl">
       <Group justify="space-between" align="center" mb="md">
         <Group gap="xs">
-          <IconFileDescription size={28} stroke={1.8} color={colors["blue-button"]} />
+          <IconFileDescription size={28} stroke={1.8} />
           <Text fz={{ base: "h4", md: "h2" }} fw={700}>
             Layanan Surat Keterangan
           </Text>
         </Group>
         <Tooltip label="Pilih layanan surat keterangan sesuai kebutuhan Anda" withArrow>
-          <IconInfoCircle size={22} stroke={1.8} color={colors["blue-button"]} />
+          <IconInfoCircle size={22} stroke={1.8} />
         </Tooltip>
       </Group>
 

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

@@ -43,7 +43,7 @@ function Page() {
             <Text fz={{ base: "2rem", md: "3rem" }} fw={900} c={colors["blue-button"]} lh={1.2}>
               Potensi Desa Darmasaba
             </Text>
-            <Text fz="lg" c="dimmed" ta="justify">
+            <Text fz="lg" ta="justify">
               Temukan berbagai potensi unggulan, peluang, dan daya tarik yang menjadikan Desa Darmasaba istimewa.
             </Text>
           </Stack>

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

@@ -2,7 +2,7 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile'
 import colors from '@/con/colors'
-import { Box, Center, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
+import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core'
 import { useEffect } from 'react'
 import { useProxy } from 'valtio/utils'
 
@@ -58,7 +58,6 @@ function LambangDesa() {
             borderColor: '#e0e9ff',
           }}
         >
-          <Tooltip label="Deskripsi lambang desa" position="top-start" withArrow>
             <Text
               fz={{ base: 'md', md: 'lg' }}
               lh={1.8}
@@ -67,7 +66,6 @@ function LambangDesa() {
               style={{ fontWeight: 400, wordBreak: "break-word", whiteSpace: "normal", }}
               dangerouslySetInnerHTML={{ __html: data.deskripsi }}
             />
-          </Tooltip>
         </Paper>
       </Stack>
     </Box>

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

@@ -1,11 +1,11 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import colors from '@/con/colors';
+import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text } from '@mantine/core';
+import { IconPhoto } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
-import { IconPhoto } from '@tabler/icons-react';
-import colors from '@/con/colors';
 
 function MaskotDesa() {
   const state = useProxy(stateProfileDesa.maskotDesa);
@@ -54,8 +54,8 @@ function MaskotDesa() {
           <Group justify="center" gap="lg" mt="lg">
             {data.images.length > 0 ? (
               data.images.map((img, index) => (
-                <Tooltip key={index} label={img.label} position="bottom" withArrow>
                   <Card
+                  key={index}
                     radius="lg"
                     shadow="md"
                     withBorder
@@ -79,7 +79,6 @@ function MaskotDesa() {
                       {img.label}
                     </Text>
                   </Card>
-                </Tooltip>
               ))
             ) : (
               <Stack align="center" gap="xs" mt="lg">

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

@@ -2,10 +2,10 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Divider, Tooltip } from '@mantine/core';
+import { Box, Divider, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { IconBriefcase, IconTargetArrow, IconUser, IconUsers } from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
-import { IconUser, IconBriefcase, IconUsers, IconTargetArrow } from '@tabler/icons-react';
 
 function ProfilPerbekel() {
   const state = useProxy(stateProfileDesa.profilPerbekel)
@@ -27,10 +27,10 @@ function ProfilPerbekel() {
   return (
     <Box pb={80} px="md">
       <Stack align="center" gap={0} mb={40}>
-        <Text 
+        <Text
-          c={colors['blue-button']} 
+          c={colors['blue-button']}
-          ta="center" 
+          ta="center"
-          fw="bold" 
+          fw="bold"
           fz={{ base: "2rem", md: "2.8rem" }}
           style={{ letterSpacing: "0.5px" }}
         >
@@ -41,11 +41,11 @@ function ProfilPerbekel() {
 
       <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl" pb={50}>
         <Box>
-          <Paper 
+          <Paper
-            bg={colors['white-trans-1']} 
+            bg={colors['white-trans-1']}
-            w="100%" 
+            w="100%"
-            radius="xl" 
+            radius="xl"
-            shadow="md" 
+            shadow="md"
             withBorder
           >
             <Stack gap={0}>
@@ -70,9 +70,9 @@ function ProfilPerbekel() {
                 <Text c={colors['white-1']} fz={{ base: "lg", md: "h3" }}>
                   Perbekel Desa Darmasaba
                 </Text>
-                <Text 
+                <Text
-                  c={colors['white-1']} 
+                  c={colors['white-1']}
-                  fw="bolder" 
+                  fw="bolder"
                   fz={{ base: "xl", md: "h2" }}
                   mt={8}
                 >
@@ -83,60 +83,56 @@ function ProfilPerbekel() {
           </Paper>
         </Box>
 
-        <Paper 
+        <Paper
-          p="xl" 
+          p="xl"
-          bg={colors['white-trans-1']} 
+          bg={colors['white-trans-1']}
-          w="100%" 
+          w="100%"
-          radius="xl" 
+          radius="xl"
-          shadow="md" 
+          shadow="md"
           withBorder
         >
           <Stack gap="xl">
             <Box>
-              <Tooltip label="Informasi pribadi perbekel" withArrow>
+              <Stack gap={6}>
-                <Stack gap={6}>
+                <Stack align="center" gap={6}>
-                  <Stack align="center" gap={6}>
+                  <IconUser size={22} color={colors['blue-button']} />
-                    <IconUser size={22} color={colors['blue-button']} />
+                  <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
-                    <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
-                  </Stack>
-                  <Text 
-                    fz={{ base: "1rem", md: "1.2rem" }} 
-                    ta="justify" 
-                    lh={1.6}
-                    dangerouslySetInnerHTML={{ __html: data.biodata }} 
-                    style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                  />
                 </Stack>
-              </Tooltip>
+                <Text
+                  fz={{ base: "1rem", md: "1.2rem" }}
+                  ta="justify"
+                  lh={1.6}
+                  dangerouslySetInnerHTML={{ __html: data.biodata }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                />
+              </Stack>
             </Box>
 
             <Box>
-              <Tooltip label="Pengalaman kerja perbekel" withArrow>
+              <Stack gap={6}>
-                <Stack gap={6}>
+                <Stack align="center" gap={6}>
-                  <Stack align="center" gap={6}>
+                  <IconBriefcase size={22} color={colors['blue-button']} />
-                    <IconBriefcase size={22} color={colors['blue-button']} />
+                  <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
-                    <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
-                  </Stack>
-                  <Text 
-                    fz={{ base: "1rem", md: "1.2rem" }} 
-                    ta="justify" 
-                    lh={1.6}
-                    dangerouslySetInnerHTML={{ __html: data.pengalaman }} 
-                    style={{wordBreak: "break-word", whiteSpace: "normal"}}
-                  />
                 </Stack>
-              </Tooltip>
+                <Text
+                  fz={{ base: "1rem", md: "1.2rem" }}
+                  ta="justify"
+                  lh={1.6}
+                  dangerouslySetInnerHTML={{ __html: data.pengalaman }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                />
+              </Stack>
             </Box>
           </Stack>
         </Paper>
       </SimpleGrid>
 
-      <Paper 
+      <Paper
-        p="xl" 
+        p="xl"
-        bg={colors['white-trans-1']} 
+        bg={colors['white-trans-1']}
-        w="100%" 
+        w="100%"
-        radius="xl" 
+        radius="xl"
-        shadow="md" 
+        shadow="md"
         withBorder
       >
         <Stack gap="xl">
@@ -145,27 +141,27 @@ function ProfilPerbekel() {
               <IconUsers size={22} color={colors['blue-button']} />
               <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
             </Stack>
-            <Text 
+            <Text
-              fz={{ base: "1rem", md: "1.2rem" }} 
+              fz={{ base: "1rem", md: "1.2rem" }}
-              ta="justify" 
+              ta="justify"
               lh={1.6}
-              dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} 
+              dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }}
-              style={{wordBreak: "break-word", whiteSpace: "normal"}}
+              style={{ wordBreak: "break-word", whiteSpace: "normal" }}
             />
           </Box>
 
           <Box>
-            <Stack align="center" gap={6}  mb={6}>
+            <Stack align="center" gap={6} mb={6}>
               <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}>
-              <Text 
+              <Text
-                fz={{ base: "1rem", md: "1.2rem" }} 
+                fz={{ base: "1rem", md: "1.2rem" }}
-                ta="justify" 
+                ta="justify"
                 lh={1.6}
-                dangerouslySetInnerHTML={{ __html: data.programUnggulan }} 
+                dangerouslySetInnerHTML={{ __html: data.programUnggulan }}
-                style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                style={{ wordBreak: "break-word", whiteSpace: "normal" }}
               />
             </Box>
           </Box>

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconUser } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
@@ -77,23 +77,17 @@ function SemuaPerbekel() {
                 </Box>
 
                 <Stack gap={4} align="center">
-                  <Tooltip label="Nama Perbekel" withArrow>
                     <Text fw={700} fz="lg" ta="center">
                       {v.nama}
                     </Text>
-                  </Tooltip>
 
-                  <Tooltip label="Wilayah menjabat" withArrow>
+                  <Text c="dimmed" fz="sm" ta="center">
-                    <Text c="dimmed" fz="sm" ta="center">
                       {v.daerah}
                     </Text>
-                  </Tooltip>
 
-                  <Tooltip label="Periode jabatan" withArrow>
+                  <Text c="blue" fw={600} fz="sm" ta="center">
-                    <Text c="blue" fw={600} fz="sm" ta="center">
                       {v.periode}
                     </Text>
-                  </Tooltip>
                 </Stack>
               </Stack>
             </Paper>

src/app/darmasaba/(pages)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -1,167 +1,3 @@
-// 'use client'
-// import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
-// import colors from '@/con/colors';
-// import { Box, Grid, GridCol, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
-// import { useProxy } from 'valtio/utils';
-// import BackButton from '../../desa/layanan/_com/BackButto';
-// import { useShallowEffect } from '@mantine/hooks';
-
-
-// function Page() {
-//   const state = useProxy(PendapatanAsliDesa.ApbDesa);
-
-//   useShallowEffect(() => {
-//     state.findMany.load();
-//   }, []);
-
-//   useShallowEffect(() => {
-//     PendapatanAsliDesa.pembiayaan.findMany.load();
-//     PendapatanAsliDesa.belanja.findMany.load();
-//     PendapatanAsliDesa.pendapatan.findMany.load();
-//   }, []);
-
-//   // Get the latest APB data
-//   const latestApb = state.findMany.data?.[0];
-
-//   // Calculate totals
-//   const totalPendapatan = latestApb?.pendapatan?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
-//   const totalBelanja = latestApb?.belanja?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
-//   const totalPembiayaan = latestApb?.pembiayaan?.reduce((sum, item) => sum + (item?.value || 0), 0) || 0;
-  
-
-//   return (
-//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
-//       <Box px={{ base: 'md', md: 100 }}>
-//         <BackButton />
-//       </Box>
-//       <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
-//         Pendapatan Asli Desa
-//       </Text>
-//       <Box px={{ base: "md", md: 100 }}>
-//         <Stack gap="lg" justify="center">
-//           <Paper bg={colors['white-1']} p="xl">
-//             <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
-//               {/* Pendapatan Card */}
-//               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
-//                 <Stack gap={"xs"}>
-//                   <Title order={3}>Pendapatan</Title>
-//                   {PendapatanAsliDesa.pendapatan.findMany.data?.map((item) => (
-//                     <Box key={item.id}>
-//                       <Grid>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{item.name}</Text>
-//                         </GridCol>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-//                             style: 'currency',
-//                             currency: 'IDR',
-//                             minimumFractionDigits: 0
-//                           }).format(item.value)}</Text>
-//                         </GridCol>
-//                       </Grid>
-//                     </Box>
-//                   ))}
-//                   <Grid>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="lg" fw={600} mb="xs">Total Pendapatan</Text>
-//                     </GridCol>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="xl" fw={700} c={colors['blue-button']}>
-//                         {new Intl.NumberFormat('id-ID', {
-//                           style: 'currency',
-//                           currency: 'IDR',
-//                           minimumFractionDigits: 0
-//                         }).format(totalPendapatan)}
-//                       </Text>
-//                     </GridCol>
-//                   </Grid>
-//                 </Stack>
-//               </Box>
-
-//               {/* Belanja Card */}
-//               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
-//                 <Stack gap={"xs"}>
-//                   <Title order={3}>Belanja</Title>
-//                   {PendapatanAsliDesa.belanja.findMany.data?.map((item) => (
-//                     <Box key={item.id}>
-//                       <Grid>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{item.name}</Text>
-//                         </GridCol>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-//                             style: 'currency',
-//                             currency: 'IDR',
-//                             minimumFractionDigits: 0
-//                           }).format(item.value)}</Text>
-//                         </GridCol>
-//                       </Grid>
-//                     </Box>
-//                   ))}
-//                   <Grid>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="lg" fw={600} mb="xs">Total Belanja</Text>
-//                     </GridCol>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="xl" fw={700} c="orange">
-//                         {new Intl.NumberFormat('id-ID', {
-//                           style: 'currency',
-//                           currency: 'IDR',
-//                           minimumFractionDigits: 0
-//                         }).format(totalBelanja)}
-//                       </Text>
-//                     </GridCol>
-//                   </Grid>
-//                 </Stack>
-//               </Box>
-
-//               {/* Pembiayaan Card */}
-//               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
-//                 <Stack gap={"xs"}>
-//                   <Title order={3}>Pembiayaan</Title>
-//                   {PendapatanAsliDesa.pembiayaan.findMany.data?.map((item) => (
-//                     <Box key={item.id}>
-//                       <Grid>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{item.name}</Text>
-//                         </GridCol>
-//                         <GridCol span={{ base: 12, md: 6 }}>
-//                           <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
-//                             style: 'currency',
-//                             currency: 'IDR',
-//                             minimumFractionDigits: 0
-//                           }).format(item.value)}</Text>
-//                         </GridCol>
-//                       </Grid>
-//                     </Box>
-//                   ))}
-//                   <Grid>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="lg" fw={600} mb="xs">Total Pembiayaan</Text>
-//                     </GridCol>
-//                     <GridCol span={{ base: 12, md: 6 }}>
-//                       <Text fz="xl" fw={700} c="green">
-//                         {new Intl.NumberFormat('id-ID', {
-//                           style: 'currency',
-//                           currency: 'IDR',
-//                           minimumFractionDigits: 0
-//                         }).format(totalPembiayaan)}
-//                       </Text>
-//                     </GridCol>
-//                   </Grid>
-//                 </Stack>
-//               </Box>
-              
-//             </SimpleGrid>
-//           </Paper>
-//         </Stack>
-//       </Box>
-//     </Stack>
-//   );
-// }
-
-// export default Page;
-
 'use client'
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
@@ -206,32 +42,41 @@ function Page() {
         <Stack gap="lg" justify="center">
           <Paper bg={colors['white-1']} p="xl">
             <SimpleGrid cols={{ base: 1, md: 3 }} spacing="md">
-             {/* Pendapatan Card */}
+              {/* Pendapatan Card */}
-             <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
+              <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
                 <Stack gap={"xs"}>
                   <Title order={3}>Pendapatan</Title>
-                  {PendapatanAsliDesa.pendapatan.findMany.data?.map((item) => (
+                  {latestApb?.pendapatan?.map((item) => (
                     <Box key={item.id}>
                       <Grid>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           <Text fz="md" fw={500}>{item.name}</Text>
                         </GridCol>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                          <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
+                          <Text
-                            style: 'currency',
+                            fz="md"
-                            currency: 'IDR',
+                            fw={500}
-                            minimumFractionDigits: 0
+                            style={{
-                          }).format(item.value)}</Text>
+                              wordBreak: 'break-word',
+                              whiteSpace: 'normal',
+                              textAlign: 'right',
+                            }}
+                          >
+                            {new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(item.value)}
+                          </Text>
                         </GridCol>
                       </Grid>
                     </Box>
                   ))}
                   <Grid>
-                    <GridCol span={{ base: 12, md: 6 }}>
+                    <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                       <Text fz="lg" fw={600} mb="xs">Total Pendapatan</Text>
                     </GridCol>
-                    <GridCol span={{ base: 12, md: 6 }}>
+                    <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                      <Text fz="xl" fw={700} c={colors['blue-button']}>
+                      <Text style={{
+                        wordBreak: 'break-word',
+                        whiteSpace: 'normal'
+                      }} fz="xl" fw={700} c={colors['blue-button']}>
                         {new Intl.NumberFormat('id-ID', {
                           style: 'currency',
                           currency: 'IDR',
@@ -247,18 +92,28 @@ function Page() {
               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
                 <Stack gap={"xs"}>
                   <Title order={3}>Belanja</Title>
-                  {PendapatanAsliDesa.belanja.findMany.data?.map((item) => (
+                  {latestApb?.belanja?.map((item) => (
                     <Box key={item.id}>
                       <Grid>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           <Text fz="md" fw={500}>{item.name}</Text>
                         </GridCol>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                          <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
+                          <Text 
-                            style: 'currency',
+                            fz="md" 
-                            currency: 'IDR',
+                            fw={500}
-                            minimumFractionDigits: 0
+                            style={{
-                          }).format(item.value)}</Text>
+                              wordBreak: 'break-word',
+                              whiteSpace: 'normal',
+                              textAlign: 'right',
+                            }}
+                          >
+                            {new Intl.NumberFormat('id-ID', {
+                              style: 'currency',
+                              currency: 'IDR',
+                              minimumFractionDigits: 0
+                            }).format(item.value)}
+                          </Text>
                         </GridCol>
                       </Grid>
                     </Box>
@@ -284,18 +139,28 @@ function Page() {
               <Box p="md" style={{ border: '1px solid #e9ecef', borderRadius: '8px' }}>
                 <Stack gap={"xs"}>
                   <Title order={3}>Pembiayaan</Title>
-                  {PendapatanAsliDesa.pembiayaan.findMany.data?.map((item) => (
+                  {latestApb?.pembiayaan?.map((item) => (
                     <Box key={item.id}>
                       <Grid>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                           <Text fz="md" fw={500}>{item.name}</Text>
                         </GridCol>
-                        <GridCol span={{ base: 12, md: 6 }}>
+                        <GridCol span={{ base: 12, md: 6 }} style={{ maxWidth: '180px', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                          <Text fz="md" fw={500}>{new Intl.NumberFormat('id-ID', {
+                          <Text 
-                            style: 'currency',
+                            fz="md" 
-                            currency: 'IDR',
+                            fw={500}
-                            minimumFractionDigits: 0
+                            style={{
-                          }).format(item.value)}</Text>
+                              wordBreak: 'break-word',
+                              whiteSpace: 'normal',
+                              textAlign: 'right',
+                            }}
+                          >
+                            {new Intl.NumberFormat('id-ID', {
+                              style: 'currency',
+                              currency: 'IDR',
+                              minimumFractionDigits: 0
+                            }).format(item.value)}
+                          </Text>
                         </GridCol>
                       </Grid>
                     </Box>
@@ -366,5 +231,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;
-

src/app/darmasaba/(pages)/ekonomi/demografi-pekerjaan/page.tsx

@@ -48,7 +48,7 @@ function Page() {
                 p={10}
                 mb={50}
                 h={400}
-                w={150}
+                w={Math.max(data.length * 120, 800)} // auto lebar sesuai jumlah data
                 data={data.map((item) => ({
                   id: item.id,
                   Pekerjaan: item.pekerjaan,

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

@@ -0,0 +1,136 @@
+'use client'
+
+import lowonganKerjaState from '@/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja';
+import colors from '@/con/colors';
+import { Box, Button, Center, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconBrandWhatsapp, IconBriefcase, IconCurrencyDollar, IconMapPin, IconPhone } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailLowonganKerjaUser() {
+  const state = useProxy(lowonganKerjaState);
+  const router = useRouter();
+  const params = useParams();
+  const [loading, setLoading] = useState(true);
+
+  useShallowEffect(() => {
+    const loadData = async () => {
+      await state.findUnique.load(params?.id as string);
+      setLoading(false);
+    };
+    loadData();
+  }, []);
+
+  const data = state.findUnique.data;
+
+  if (loading || !data) {
+    return (
+      <Center py="xl">
+        <Skeleton height={500} w={{ base: '90%', md: '70%' }} radius="lg" />
+      </Center>
+    );
+  }
+
+  return (
+    <Stack bg={colors.Bg} py="xl" px={{ base: 'md', md: 100 }} align="center">
+      <Box w={{ base: '100%', md: '70%' }}>
+          <Button
+            variant="subtle"
+            color="blue"
+            leftSection={<IconArrowBack size={20} />}
+            mb="md"
+            onClick={() => router.back()}
+          >
+            Kembali
+          </Button>
+
+        <Paper
+          radius="lg"
+          shadow="md"
+          withBorder
+          p="xl"
+          bg={colors['white-1']}
+        >
+          <Stack gap="lg">
+            {/* Judul */}
+            <Text fz={{ base: '1.6rem', md: '2rem' }} fw={700} c={colors['blue-button']}>
+              {data.posisi}
+            </Text>
+            <Text c="dimmed" fz="sm">
+              Diposting: {new Date(data.createdAt).toLocaleDateString('id-ID', {
+                day: '2-digit',
+                month: 'long',
+                year: 'numeric'
+              })}
+            </Text>
+
+            {/* Info Ringkas */}
+            <Stack gap="sm" mt="md">
+              <Group gap="xs">
+                <IconBriefcase size={20} color={colors['blue-button']} />
+                <Text fz="md" fw={600}>{data.namaPerusahaan}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconMapPin size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.lokasi}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconPhone size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.notelp}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconCurrencyDollar size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.gaji || '-'}</Text>
+              </Group>
+              <Group gap="xs">
+                <IconBriefcase size={20} color={colors['blue-button']} />
+                <Text fz="md">{data.tipePekerjaan}</Text>
+              </Group>
+            </Stack>
+
+            <Box>
+              <Text fw={600} fz="lg" mb={4}>
+                Deskripsi Pekerjaan
+              </Text>
+              <Text
+                fz="sm"
+                lh={1.6}
+                style={{ wordBreak: 'break-word' }}
+                dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+              />
+            </Box>
+
+            <Box>
+              <Text fw={600} fz="lg" mb={4}>
+                Kualifikasi
+              </Text>
+              <Text
+                fz="sm"
+                lh={1.6}
+                style={{ wordBreak: 'break-word' }}
+                dangerouslySetInnerHTML={{ __html: data.kualifikasi || '-' }}
+              />
+            </Box>
+
+            <Center>
+              <Button
+                radius="md"
+                size="md"
+                mt="md"
+                bg={colors['blue-button']}
+                onClick={() => window.open(`https://wa.me/${data.notelp}`, '_blank')}
+                leftSection={<IconBrandWhatsapp size={20} />}
+              >
+                Hubungi Sekarang
+              </Button>
+            </Center>
+          </Stack>
+        </Paper>
+      </Box>
+    </Stack>
+  );
+}
+
+export default DetailLowonganKerjaUser;

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

@@ -12,13 +12,13 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 const formatCurrency = (value: string | number) => {
   // Convert to string if it's a number
   const numStr = typeof value === 'number' ? value.toString() : value;
-  
+
   // Remove all non-digit characters
   const digitsOnly = numStr.replace(/\D/g, '');
-  
+
   // Format with thousand separators
   const formatted = digitsOnly.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-  
+
   return `Rp.${formatted}`;
 };
 
@@ -103,7 +103,7 @@ function Page() {
                         </Box>
                       </Flex>
                     </Box>
-                    <Button onClick={() => router.push(`https://wa.me/${v.notelp?.replace(/\D/g, '')}`)}>Lamar Sekarang</Button>
+                    <Button onClick={() => router.push(`/darmasaba/ekonomi/lowongan-kerja-lokal/${v.id}`)}>Detail</Button>
                   </Stack>
                 </Paper>
               )

src/app/darmasaba/(pages)/ekonomi/pasar-desa/[id]/page.tsx

@@ -0,0 +1,157 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, Image, Skeleton, Group, Badge, Divider } from '@mantine/core';
+import { IconArrowBack, IconMapPin, IconPhone, IconStar } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
+
+function DetailProdukPasarUser() {
+  const router = useRouter();
+  const params = useParams();
+  const statePasar = useProxy(pasarDesaState);
+
+  useShallowEffect(() => {
+    statePasar.pasarDesa.findUnique.load(params?.id as string);
+  }, []);
+
+  const data = statePasar.pasarDesa.findUnique.data;
+
+  if (!data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={400} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={20}>
+      {/* Tombol kembali */}
+      <Box px={{ base: 'md', md: 100 }}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={20} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali ke daftar produk
+      </Button>
+      </Box>
+
+      <Paper
+        w={{ base: '100%', md: '70%' }}
+        mx="auto"
+        p="lg"
+        radius="md"
+        shadow="sm"
+        bg={colors['white-1']}
+      >
+        <Stack gap="lg">
+          {/* Gambar Produk */}
+          {data.image?.link ? (
+            <Image
+              src={data.image.link}
+              alt={data.nama}
+              radius="md"
+              h={250}
+              w="100%"
+              fit="cover"
+              loading="lazy"
+            />
+          ) : (
+            <Box
+              h={300}
+              bg="gray.1"
+              display="flex"
+              style={{ alignItems: 'center', justifyContent: 'center', borderRadius: 'md' }}
+            >
+              <Text c="dimmed">Tidak ada gambar</Text>
+            </Box>
+          )}
+
+          {/* Detail Produk */}
+          <Stack gap="xs">
+            <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+              {data.nama || 'Produk Tanpa Nama'}
+            </Text>
+            <Group>
+              <Badge color="green" size="lg" radius="md">
+                Rp {data.harga?.toLocaleString('id-ID')}
+              </Badge>
+              {data.rating && (
+                <Group gap={4}>
+                  <IconStar size={18} color="#FFD43B" />
+                  <Text fz="md" fw={500}>{data.rating}</Text>
+                </Group>
+              )}
+            </Group>
+          </Stack>
+
+          <Divider my="sm" />
+
+          {/* Info Tambahan */}
+          <Stack gap="sm">
+            <Box>
+              <Text fz="lg" fw={600}>Kategori</Text>
+              <Group gap="xs" mt={4}>
+                {data.KategoriToPasar && data.KategoriToPasar.length > 0 ? (
+                  data.KategoriToPasar.map((kategori) => (
+                    <Badge key={kategori.id} color="blue" variant="light">
+                      {kategori.kategori.nama}
+                    </Badge>
+                  ))
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada kategori</Text>
+                )}
+              </Group>
+            </Box>
+
+            {data.alamatUsaha && (
+              <Group gap={6}>
+                <IconMapPin size={18} color={colors['blue-button']} />
+                <Text fz="md">{data.alamatUsaha}</Text>
+              </Group>
+            )}
+
+            {data.kontak && (
+              <Group gap={6}>
+                <IconPhone size={18} color={colors['blue-button']} />
+                <Text fz="md">{data.kontak}</Text>
+              </Group>
+            )}
+          </Stack>
+
+          <Divider my="sm" />
+
+          {/* Deskripsi */}
+          <Box>
+            <Text fz="lg" fw={600}>Deskripsi Produk</Text>
+            <Text fz="md" c="dimmed" mt={4}>
+              Tidak ada deskripsi.
+            </Text>
+          </Box>
+
+          {/* Tombol Aksi User */}
+          {data.kontak && (
+            <Button
+              mt="md"
+              color="green"
+              size="lg"
+              radius="md"
+              component="a"
+              href={`https://wa.me/${data.kontak.replace(/[^0-9]/g, '')}`}
+              target="_blank"
+            >
+              Hubungi Penjual via WhatsApp
+            </Button>
+          )}
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailProdukPasarUser;

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -71,8 +71,11 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" >
-          Pasar Desa Online merupakan Media Promosi yang bertujuan untuk membantu warga desa dalam memasarkan dan memperkenalkan produknya kepada masyarakat.
+        Pasar Desa Online adalah media promosi untuk membantu warga memasarkan
+        </Text>
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" >
+        dan memperkenalkan produk mereka.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
@@ -105,7 +108,7 @@ function Page() {
               return (
                 <Stack key={k}>
                   <motion.div
-                    onClick={() => router.push(`https://wa.me/${v.kontak?.replace(/\D/g, '')}`)}
+                    onClick={() => router.push(`/darmasaba/ekonomi/pasar-desa/${v.id}`)}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.8 }}
                   >
@@ -117,7 +120,7 @@ function Page() {
                         h={200}
                         w='100%'
                         style={{ objectFit: 'cover' }}
-                        loading="lazy"
+                        loading="lazy" 
                       />
                       <Text py={10} fw={'bold'} fz={'lg'}>{v.nama}</Text>
                       <Text fz={'md'}>Rp {v.harga.toLocaleString('id-ID')}</Text>

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

@@ -56,7 +56,8 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
+        <Text fz={'md'}>Menjadikan Desa Darmasaba pusat inovasi digital untuk pemberdayaan masyarakat</Text>
+        <Text fz={'md'}>dan peningkatan ekonomi berbasis teknologi.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>

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

@@ -1,14 +1,14 @@
 'use client'
+import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconSearch } from '@tabler/icons-react';
-import { IconKey, IconMapper } from '@/app/admin/(dashboard)/_com/iconMap';
 
 // const data = [
 //   {
@@ -75,17 +75,23 @@ function Page() {
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Group justify="space-between" mb="md" align='center'>
+        <Grid align='center'>
-          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          <GridCol span={{ base: 12, md: 9 }}>
-            Program Kreatif Desa
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          </Text>
+              Program Kreatif Desa
-          <TextInput
+            </Text>
-            placeholder="Cari program kreatif..."
+          </GridCol>
-            leftSection={<IconSearch size={20} />}
+          <GridCol span={{ base: 12, md: 3 }}>
-            value={search}
+            <TextInput
-            onChange={(e) => setSearch(e.currentTarget.value)}
+              radius={"lg"}
-          />
+              placeholder='Cari Program Kreatif'
-        </Group>
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>

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

@@ -64,8 +64,8 @@ function Page() {
             />
           </GridCol>
         </Grid>
-        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz="md" mt={4} >
-          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.
+        Pecalang dan Patwal (Patroli Pengawal) bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>

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

@@ -1,15 +1,15 @@
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import laporanPublikState from '@/app/admin/(dashboard)/_state/keamanan/laporan-publik';
 import colors from '@/con/colors';
-import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Center, ColorSwatch, Flex, Group, Modal, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { DateTimePicker } from '@mantine/dates';
 import { useDebouncedValue, useDisclosure, useShallowEffect } from '@mantine/hooks';
 import { IconArrowRight, IconPlus, IconSearch } 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';
-import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 
 function Page() {
   const [search, setSearch] = useState("");
@@ -53,7 +53,7 @@ function Page() {
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
-        <Flex justify="space-between" align="center">
+        <Group justify="space-between" align="center">
           <BackButton />
           <TextInput
               radius={"lg"}
@@ -61,9 +61,9 @@ function Page() {
               value={search}
               onChange={(e) => setSearch(e.target.value)}
               leftSection={<IconSearch size={20} />}
-              w={{ base: "50%", md: "100%" }}
+              w={{ base: "100%", md: "30%" }}
             />
-        </Flex>
+        </Group>
       </Box>
       <Box px={{ base: 'md', md: 100 }}>
         <Group justify="space-between">
@@ -118,7 +118,7 @@ function Page() {
               return (
                 <Paper radius={'lg'} key={k} bg={colors['white-trans-1']} p={'xl'}>
                   <Stack>
-                    <Title c={colors['blue-button']} order={1}>{v.judul}</Title>
+                    <Text c={colors['blue-button']} lineClamp={3} truncate="end" fz="h4" fw="bold">{v.judul}</Text>
                     <Text fs={'italic'} fz={'xl'}>
                       {v.tanggalWaktu
                         ? new Date(v.tanggalWaktu).toLocaleString('id-ID')

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/[id]/page.tsx

@@ -45,7 +45,7 @@ function DetailPencegahanKriminalitas() {
   const data = kriminalitasState.findUnique.data;
 
   return (
-    <Box py="md" px="md">
+    <Box py="md" px={{ base: 'md', md: 100 }}>
       <Group mb="md">
         <Button
           variant="light"

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

@@ -48,7 +48,7 @@ function Page() {
           <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
             Pencegahan Kriminalitas
           </Text>
-          <Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
+          <Text fz='md'>
             Keamanan Komunitas & Pencegahan Kriminal
           </Text>
         </Box>
@@ -78,7 +78,7 @@ function Page() {
         <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
           Pencegahan Kriminalitas
         </Text>
-        <Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
+        <Text fz='md'>
           Keamanan Komunitas & Pencegahan Kriminal
         </Text>
       </Box>
@@ -92,31 +92,63 @@ function Page() {
             Program Keamanan Berjalan
           </Text>
           <Stack pt={30} gap="lg">
-            {data.length > 0 ? (
+            <Box
-              data.map((item) => (
+              style={{
-                <a key={item.id} href={`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`}>
+                minHeight: 300, // sesuaikan: tinggi area yg muat 3 item
-                  <Paper p="md" bg={colors['blue-button']} radius="md" shadow="sm">
+              }}
-                    <Stack gap={"xs"}>
+            >
+              {data.length > 0 ? (
+                data.map((item) => (
+                  <Paper
+                    key={item.id}
+                    p="md"
+                    radius="md"
+                    shadow="sm"
+                    style={{
+                      cursor: 'pointer',
+                      backgroundColor: colors['blue-button'],
+                      transition: 'all 0.2s ease',
+                    }}
+                    onClick={() =>
+                      router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/${item.id}`)
+                    }
+                    onMouseEnter={(e) =>
+                      (e.currentTarget.style.backgroundColor = '#1a3e7a')
+                    }
+                    onMouseLeave={(e) =>
+                      (e.currentTarget.style.backgroundColor = colors['blue-button'])
+                    }
+                  >
+                    <Stack gap="xs">
                       <Text fz="h3" c={colors['white-1']}>
                         {item.judul}
                       </Text>
                     </Stack>
                   </Paper>
-                </a>
+                ))
-              ))
+              ) : (
-            ) : (
+                <Text c="dimmed">Tidak ada data pencegahan kriminalitas yang cocok</Text>
-              <Text color="dimmed">
+              )}
-                Tidak ada data pencegahan kriminalitas yang cocok
+            </Box>
-              </Text>
-            )}
             <Button
               mt={20}
               fullWidth
               radius="xl"
               size="md"
-              bg={colors['blue-button']}
+              variant="outline"
-              rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
+              color="blue"
-              onClick={() => router.push(`/darmasaba/keamanan/pencegahan-kriminalitas/program-lainnya`)}
+              rightSection={<IconArrowRight size={20} />}
+              styles={{
+                root: {
+                  fontWeight: 600,
+                  borderWidth: 2,
+                },
+              }}
+              onClick={() =>
+                router.push(
+                  `/darmasaba/keamanan/pencegahan-kriminalitas/program-lainnya`
+                )
+              }
             >
               Jelajahi Program Lainnya
             </Button>
@@ -142,9 +174,7 @@ function Page() {
               <Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
                 {findFirst.data?.judul}
               </Text>
-              <Text fz="h4" c={colors['blue-button']}>
+              <Text fz="h4" dangerouslySetInnerHTML={{ __html: findFirst.data?.deskripsiSingkat }} />
-                {findFirst.data?.deskripsiSingkat}
-              </Text>
             </Paper>
           ) : null}
         </Box>

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

@@ -21,12 +21,23 @@ import pencegahanKriminalitasState from '@/app/admin/(dashboard)/_state/keamanan
 import { useShallowEffect } from '@mantine/hooks';
 import { useState } from 'react';
 import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import { IconArrowLeft } from '@tabler/icons-react';
 
 function PencegahanKriminalitas() {
   const [search, setSearch] = useState("");
-
+  const router = useRouter();
   return (
-    <Box>
+    <Box pt={20} px={{ base: 'md', md: 100 }}>
+      <Group mb="md">
+        <Button
+          variant="light"
+          color="blue"
+          onClick={() => router.back()}
+          leftSection={<IconArrowLeft size={20} />}
+        >
+          Kembali
+        </Button>
+      </Group>
       <HeaderSearch
         title="Program Pencegahan Kriminalitas"
         placeholder="Cari program atau deskripsi..."
@@ -82,7 +93,7 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                   c="dimmed"
                   lineClamp={2}
                   dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat || '' }}
-                  style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
                 <Group justify="flex-end" mt="sm">
                   <Tooltip label="Lihat detail program" withArrow>

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

@@ -43,7 +43,7 @@ function Page() {
         <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={'md'} >
           Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
         </Text>
       </Box>

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

@@ -78,15 +78,12 @@ function Page() {
                   <Box>
                     <Text fz="h4" fw="bold">Pendahuluan</Text>
                     <Divider my="xs" />
-                    <Text fz="md" lh={1.6} ta="justify">
+                    <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.introduction?.content }} />
-                      {state.findUnique.data.introduction?.content}
-                    </Text>
                   </Box>
 
                   <Box>
-                    <Text fz="h4" fw="bold">Kenali Gejala DBD</Text>
+                    <Text fz="h4" fw="bold">{state.findUnique.data.symptom?.title}</Text>
                     <Divider my="xs" />
-                    <Text fz="md" fw="semibold">{state.findUnique.data.symptom?.title}</Text>
                     <Text fz="md" lh={1.6} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
                   </Box>
 

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

@@ -1,7 +1,7 @@
 'use client'
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
-import { Anchor, Box, Card, Divider, Group, Image, Loader, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Button, Card, Divider, Group, Image, Loader, Paper, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCalendar, IconChevronRight } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -28,9 +28,9 @@ function ArtikelKesehatanPage() {
     <Box>
       <Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md">
         <Stack gap="lg">
-          <Title order={2} ta="center" c={colors['blue-button']}>
+          <Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
             Artikel Kesehatan
-          </Title>
+          </Text>
           <Divider size="sm" color={colors['blue-button']} />
           {state.findMany.data.length === 0 ? (
             <Box py="xl" ta="center">
@@ -51,7 +51,7 @@ function ArtikelKesehatanPage() {
                 onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
               >
                 <Card.Section>
-                  <Image src={item.image?.link} alt={item.title} height={200} fit="cover" loading="lazy"/>
+                  <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="dark">{item.title}</Text>
@@ -64,18 +64,17 @@ function ArtikelKesehatanPage() {
                   <Text fz="md" c="dark" lineClamp={3}>
                     {item.content}
                   </Text>
-                  <Tooltip label="Baca artikel lengkap">
+                  <Group justify="flex-start">
-                    <Anchor
+                    <Button
+                      bg={colors['blue-button']}
+                      radius="lg"
+                      size="sm"
+                      rightSection={<IconChevronRight size={18} />}
                       onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)}
-                      variant="light"
-                      c={colors['blue-button']}
                     >
-                      <Group gap="xs">
+                      Baca Selengkapnya
-                        <Text fw="bold" fz="md">Baca Selengkapnya</Text>
+                    </Button>
-                        <IconChevronRight size={18} />
+                  </Group>
-                      </Group>
-                    </Anchor>
-                  </Tooltip>
                 </Stack>
               </Card>
             ))

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

@@ -3,9 +3,9 @@
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { ActionIcon, Anchor, AspectRatio, Badge, Box, Button, Card, Chip, CopyButton, Divider, Grid, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
+import { ActionIcon, AspectRatio, Badge, Box, Button, Card, CopyButton, Divider, Grid, Group, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconStethoscope, IconUser, IconUsersGroup, IconWallet } from '@tabler/icons-react';
+import { IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useMemo } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -149,11 +149,6 @@ function Page() {
                 </CopyButton>
               </Group>
             </Group>
-            <Group gap="xs" mt="sm" wrap="wrap">
-              <Chip defaultChecked radius="xl" variant="light" icon={<IconStethoscope size={16} />}>Layanan Medis</Chip>
-              <Chip radius="xl" variant="light" icon={<IconUsersGroup size={16} />}>Ramah Keluarga</Chip>
-              <Chip radius="xl" variant="light" icon={<IconWallet size={16} />}>Pembayaran Non-Tunai</Chip>
-            </Group>
           </Stack>
         </Card>
       </Box>
@@ -210,7 +205,6 @@ function Page() {
                     <Button variant="light" leftSection={<IconBrandWhatsapp size={18} />} component="a" href={`https://wa.me/${kontak.whatsapp.replace(/\D/g, '')}`} target="_blank" aria-label="Hubungi WhatsApp">WhatsApp</Button>
                     <Button variant="light" leftSection={<IconMail size={18} />} component="a" href={`mailto:${kontak.email}`} aria-label="Kirim Email">Email</Button>
                   </Group>
-                  <Anchor target="_blank" underline="hover">Kunjungi situs resmi</Anchor>
                 </Stack>
               </Card>
 
@@ -246,15 +240,8 @@ function Page() {
                   </Table>
                 </Stack>
               </Card>
-            </Stack>
-          </Grid.Col>
-        </Grid>
-      </Box>
 
-      <Box px={{ base: 'md', md: 100 }}>
+             <Card radius="xl" p="lg" withBorder>
-        <Grid gutter="lg">
-          <Grid.Col span={{ base: 12, md: 8 }}>
-            <Card radius="xl" p="lg" withBorder>
               <Stack gap="md">
                 <Title order={3}>Fasilitas Pendukung</Title>
                 <Divider />
@@ -270,8 +257,7 @@ function Page() {
                 )}
               </Stack>
             </Card>
-          </Grid.Col>
+
-          <Grid.Col span={{ base: 12, md: 4 }}>
             <Card radius="xl" p="lg" withBorder>
               <Stack gap="md">
                 <Title order={3}>Layanan & Tarif</Title>
@@ -309,10 +295,11 @@ function Page() {
                 )}
               </Stack>
             </Card>
+            </Stack>
           </Grid.Col>
         </Grid>
       </Box>
-
+      
       <Box px={{ base: 'md', md: 100 }} pb="xl">
         <Paper radius="xl" p="lg" withBorder>
           <Stack gap="md">

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

@@ -1,11 +1,11 @@
 'use client'
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Anchor, Badge, Box, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Badge, Box, Button, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconChevronRight, IconClock, IconMapPin } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import { IconMapPin, IconClock, IconArrowRight } from '@tabler/icons-react';
 
 function FasilitasKesehatanPage() {
   const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
@@ -36,72 +36,73 @@ function FasilitasKesehatanPage() {
           </Text>
           <Divider size="sm" color={colors['blue-button']} />
           <Stack gap="lg">
-          {state.findMany.data.length === 0 ? (
+            {state.findMany.data.length === 0 ? (
-            <Box py="xl" ta="center">
+              <Box py="xl" ta="center">
-              <Text fz="lg" c="dimmed">
+                <Text fz="lg" c="dimmed">
-                Belum ada fasilitas kesehatan yang tersedia
+                  Belum ada fasilitas kesehatan yang tersedia
-              </Text>
+                </Text>
-            </Box>
+              </Box>
-          ) : (
+            ) : (
-            state.findMany.data.map((item) => (
+              state.findMany.data.map((item) => (
-              <Card
+                <Card
-                key={item.id}
+                  key={item.id}
-                withBorder
+                  withBorder
-                radius="xl"
+                  radius="xl"
-                shadow="sm"
+                  shadow="sm"
-                p="lg"
+                  p="lg"
-                style={{
+                  style={{
-                  background: 'linear-gradient(135deg, #fdfdfd, #f7faff)',
+                    background: 'linear-gradient(135deg, #fdfdfd, #f7faff)',
-                  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                    transition: 'transform 0.2s ease, box-shadow 0.2s ease',
-                }}
+                  }}
-                onMouseEnter={(e) => {
+                  onMouseEnter={(e) => {
-                  (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
+                    (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
-                  (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 20px rgba(0,0,0,0.08)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 20px rgba(0,0,0,0.08)';
-                }}
+                  }}
-                onMouseLeave={(e) => {
+                  onMouseLeave={(e) => {
-                  (e.currentTarget as HTMLElement).style.transform = 'translateY(0px)';
+                    (e.currentTarget as HTMLElement).style.transform = 'translateY(0px)';
-                  (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
+                    (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
-                }}
+                  }}
-              >
+                >
-                <Stack gap="sm">
+                  <Stack gap="sm">
-                  <Group justify="space-between" align="center">
+                    <Group justify="space-between" align="center">
-                    <Text fw={700} fz="lg" c={colors['blue-button']}>
+                      <Text fw={700} fz="lg" c={colors['blue-button']}>
-                      {item.name}
+                        {item.name}
-                    </Text>
+                      </Text>
-                    <Badge color="blue" radius="sm" variant="light" fz="xs">
+                      <Badge color="blue" radius="sm" variant="light" fz="xs">
-                      Aktif
+                        Aktif
-                    </Badge>
+                      </Badge>
-                  </Group>
+                    </Group>
-                  <Group gap="xs">
+                    <Group gap="xs">
-                    <IconMapPin size={18} stroke={1.5} color={colors['blue-button']} />
+                      <IconMapPin size={18} stroke={1.5} color={colors['blue-button']} />
-                    <Text fz="sm" c="dimmed">
+                      <Text fz="sm" c="dimmed">
-                      {item.informasiumum.alamat}
+                        {item.informasiumum.alamat}
-                    </Text>
+                      </Text>
-                  </Group>
+                    </Group>
-                  <Group gap="xs">
+                    <Group gap="xs">
-                    <IconClock size={18} stroke={1.5} color={colors['blue-button']} />
+                      <IconClock size={18} stroke={1.5} color={colors['blue-button']} />
-                    <Text fz="sm" c="dimmed">
+                      <Text fz="sm" c="dimmed">
-                      {item.informasiumum.jamOperasional}
+                        {item.informasiumum.jamOperasional}
-                    </Text>
+                      </Text>
-                  </Group>
+                    </Group>
-                  <Anchor
+                    <Group justify="flex-start">
-                    onClick={() =>
+                      <Button
-                      router.push(
+                        bg={colors['blue-button']}
-                        `/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`
+                        radius="lg"
-                      )
+                        size="sm"
-                    }
+                        rightSection={<IconChevronRight size={18} />}
-                    c={colors['blue-button']}
+                        onClick={() =>
-                    fz="sm"
+                          router.push(
-                    fw={600}
+                            `/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`
-                    style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+                          )
-                  >
+                        }
-                    Lihat Detail
+                      >
-                    <IconArrowRight size={16} stroke={1.5} />
+                        Lihat Detail
-                  </Anchor>
+                      </Button>
-                </Stack>
+                    </Group>
-              </Card>
+                  </Stack>
-            ))
+                </Card>
-          )}
+              ))
+            )}
           </Stack>
         </Stack>
       </Paper>

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

@@ -4,14 +4,16 @@ import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
 import {
   Box,
+  Button,
   Divider,
   Group,
+  Modal,
   Paper,
   Skeleton,
   Stack,
   Text
 } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDisclosure, useShallowEffect } from '@mantine/hooks';
 import { IconMail, IconPhone, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -21,6 +23,7 @@ import CreatePendaftaran from '../create/page';
 function Page() {
   const params = useParams();
   const state = useProxy(jadwalkegiatanState);
+  const [opened, { open, close }] = useDisclosure(false);
 
   useShallowEffect(() => {
     state.findUnique.load(params?.id as string);
@@ -66,28 +69,38 @@ function Page() {
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Deskripsi Kegiatan</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Layanan yang Tersedia</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Syarat & Ketentuan</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
                 </Stack>
 
                 <Stack gap="sm">
                   <Text fz="lg" fw="bold">Dokumen yang Perlu Dibawa</Text>
                   <Divider />
-                  <Text ta="justify" fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
+                  <Text ta="justify" fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
                 </Stack>
 
-                <CreatePendaftaran />
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Pendaftaran Kegiatan</Text>
+                  <Divider />
+                  <Group>
+                    <Button onClick={open}>Buat Pendaftaran</Button>
+                  </Group>
+                </Stack>
+
+                <Modal opened={opened} onClose={close}>
+                  <CreatePendaftaran />
+                </Modal>
 
                 <Paper p="lg" radius="md" bg={colors['blue-button-trans']} shadow="sm">
                   <Stack gap="xs">

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

@@ -73,9 +73,9 @@ function JadwalKegiatanPage() {
 
                   <Divider my="sm" />
 
-                  <Group justify="flex-end">
+                  <Group justify="flex-start">
                     <Button
-                      variant="light"
+                      bg={colors['blue-button']}
                       radius="lg"
                       size="sm"
                       rightSection={<IconChevronRight size={18} />}
@@ -84,14 +84,6 @@ function JadwalKegiatanPage() {
                           `/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/${item.id}`
                         )
                       }
-                      styles={{
-                        root: {
-                          background: colors['blue-button'],
-                          color: 'white',
-                          boxShadow: '0 0 12px rgba(0, 123, 255, 0.4)',
-                          transition: 'all 0.2s ease',
-                        },
-                      }}
                     >
                       Lihat Detail & Daftar
                     </Button>

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

@@ -28,16 +28,18 @@ function DetailInfoWabahPenyakitUser() {
   const data = state.findUnique.data;
 
   return (
-    <Box py={10}>
+    <Box py={10} px={{ base: 'md', md: 100 }}>
       {/* Tombol Back */}
-      <Button
+      <Box>
-        variant="subtle"
+        <Button
-        onClick={() => router.back()}
+          variant="subtle"
-        leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          onClick={() => router.back()}
-        mb={15}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
-      >
+          mb={15}
-        Kembali
+        >
-      </Button>
+          Kembali
+        </Button>
+      </Box>
 
       {/* Wrapper Detail */}
       <Paper

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

@@ -61,7 +61,7 @@ function Page() {
           >
             Informasi Wabah & Penyakit
           </Text>
-          <Text fz="md" c="dimmed" mt={4}>
+          <Text fz="md" mt={4}>
             Dapatkan informasi terbaru mengenai wabah dan penyakit yang sedang
             diawasi.
           </Text>
@@ -84,7 +84,7 @@ function Page() {
           <Center py="6xl">
             <Stack align="center" gap="sm">
               <IconInfoCircle size={50} color={colors['blue-button']} />
-              <Text fz="lg" fw={500} c="dimmed">
+              <Text fz="lg" fw={500} >
                 Tidak ada data yang cocok dengan pencarian Anda.
               </Text>
             </Stack>
@@ -101,17 +101,35 @@ function Page() {
                 bg={colors['white-trans-1']}
                 style={{
                   transition: 'transform 200ms ease, box-shadow 200ms ease',
+                  display: 'flex',
+                  flexDirection: 'column',
                 }}
               >
-                <Stack gap="sm">
+                <Stack gap="sm" style={{ flex: 1 }}>
-                  <Image
+                  {/* Gambar */}
-                    radius="md"
+                  <Box
                     h={180}
-                    src={v.image.link}
+                    w="100%"
-                    alt={v.name}
+                    style={{
-                    fit="cover"
+                      overflow: 'hidden',
-                    loading="lazy"
+                      borderRadius: '8px',
-                  />
+                    }}
+                  >
+                    <Image
+                      src={v.image?.link}
+                      alt={v.name}
+                      fit="cover"
+                      w="100%"
+                      h="100%"
+                      style={{
+                        objectFit: 'cover',
+                        objectPosition: 'center',
+                      }}
+                      loading="lazy"
+                    />
+                  </Box>
+
+                  {/* Judul dan badge */}
                   <Group justify="space-between" mt="sm">
                     <Text fw={700} fz="lg" c={colors['blue-button']}>
                       {v.name}
@@ -120,20 +138,46 @@ function Page() {
                       Wabah
                     </Badge>
                   </Group>
+
                   <Text fz="sm" c="dimmed">
-                    Diposting: {v.createdAt.toLocaleDateString()}
+                    Diposting:{' '}
+                    {new Date(v.createdAt).toLocaleDateString('id-ID', {
+                      day: '2-digit',
+                      month: 'long',
+                      year: 'numeric',
+                    })}
                   </Text>
+
                   <Divider />
-                  <Text fz="sm" lh={1.5} lineClamp={3} truncate="end">
+
-                    {v.deskripsiSingkat}
+                  {/* Bagian deskripsi dan tombol */}
-                  </Text>
+                  <Box style={{ display: 'flex', flexDirection: 'column', flexGrow: 1 }}>
-                  <Button variant="light" radius="md" size="md" onClick={() => router.push(`/darmasaba/kesehatan/info-wabah-penyakit/${v.id}`)}>
+                    <Text
-                    Selengkapnya
+                      fz="sm"
-                  </Button>
+                      lh={1.5}
+                      lineClamp={3}
+                      dangerouslySetInnerHTML={{ __html: v.deskripsiSingkat }}
+                      style={{ flexGrow: 1 }}
+                    />
+
+                    <Button
+                      variant="light"
+                      radius="md"
+                      size="md"
+                      mt="md"
+                      onClick={() =>
+                        router.push(`/darmasaba/kesehatan/info-wabah-penyakit/${v.id}`)
+                      }
+                    >
+                      Selengkapnya
+                    </Button>
+                  </Box>
                 </Stack>
               </Paper>
+
             ))}
           </SimpleGrid>
+
         )}
       </Box>
 

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

@@ -0,0 +1,86 @@
+'use client';
+import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
+import colors from '@/con/colors';
+import { Box, Button, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function DetailPenangananDaruratUser() {
+  const state = useProxy(penangananDarurat);
+  const router = useRouter();
+  const params = useParams();
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string);
+  }, []);
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={40}>
+        <Skeleton height={400} radius="md" />
+        <Skeleton height={20} width="80%" radius="md" />
+        <Skeleton height={20} width="60%" radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = state.findUnique.data;
+
+  return (
+    <Box py={20}>
+      {/* Tombol Back */}
+      <Box px={{ base: 'md', md: 100 }}>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          mb={20}
+        >
+          Kembali
+        </Button>
+      </Box>
+
+      {/* Wrapper Detail */}
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '70%', lg: '60%' }}
+        mx="auto"
+        bg={colors['white-1']}
+        p="xl"
+        radius="lg"
+        shadow="sm"
+      >
+        <Stack gap="md" align="center" ta="center">
+          <Text fz="xl" fw={700} c={colors['blue-button']}>
+            {data.name || 'Penanganan Darurat'}
+          </Text>
+
+          {data.image?.link && (
+            <Image
+              src={data.image.link}
+              alt={data.name}
+              radius="md"
+              mah={300}
+              fit="contain"
+              loading="lazy"
+              mb="md"
+            />
+          )}
+
+          <Box>
+            <Text
+              fz="md"
+              ta="justify"
+              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+            />
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default DetailPenangananDaruratUser;

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

@@ -3,6 +3,7 @@ import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penangan
 import colors from '@/con/colors'
 import {
   Box,
+  Button,
   Center,
   Grid,
   GridCol,
@@ -108,20 +109,23 @@ function Page() {
                     <Box
                       style={{
                         width: '100%',
-                        aspectRatio: '16/9',
+                        height: 180, // 🔥 tinggi fix biar semua seragam
-                        borderRadius: '12px',
+                        borderRadius: 12,
                         overflow: 'hidden',
                         position: 'relative',
+                        backgroundColor: '#f0f2f5', // fallback kalau gambar loading
                       }}
                     >
                       <Image
-                        src={v.image.link}
+                        src={v.image?.link || '/img/default.png'}
                         alt={v.name}
                         fit="cover"
+                        width="100%"
+                        height="100%"
                         loading="lazy"
                         style={{
-                          width: '100%',
+                          objectFit: 'cover',
-                          height: '100%',
+                          objectPosition: 'center',
                           transition: 'transform 0.4s ease',
                         }}
                         onMouseEnter={(e) => (e.currentTarget.style.transform = 'scale(1.05)')}
@@ -129,6 +133,7 @@ function Page() {
                       />
                     </Box>
 
+
                   </Center>
                   <Stack gap={4} w="100%">
                     <Text
@@ -144,11 +149,19 @@ function Page() {
                       <Text
                         fz="sm"
                         c="dimmed"
-                        lineClamp={4}
+                        lineClamp={3}
                         dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                         style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                       />
                     </Box>
+                    <Button
+                      radius="xl"
+                      size="md"
+                      component="a"
+                      href={`/darmasaba/kesehatan/penanganan-darurat/${v.id}`}
+                    >
+                      Lihat Detail
+                    </Button>
                   </Stack>
                 </Stack>
               </Paper>

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

@@ -0,0 +1,121 @@
+'use client';
+
+import colors from '@/con/colors';
+import { Button, Center, Flex, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconCalendar, IconInfoCircle, IconPhone } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import posyanduState from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
+
+export default function DetailPosyanduUser() {
+  const statePosyandu = useProxy(posyanduState);
+  const params = useParams();
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    statePosyandu.findUnique.load(params?.id as string);
+  }, []);
+
+  if (!statePosyandu.findUnique.data) {
+    return (
+      <Stack py="xl" px={{ base: 'md', md: 100 }}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = statePosyandu.findUnique.data;
+
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" px={{ base: 'md', md: 100 }} gap="xl">
+      {/* Tombol Kembali */}
+      <Group>
+        <Button
+          variant="subtle"
+          onClick={() => router.back()}
+          leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}
+          mb="sm"
+          c={colors['blue-button']}
+        >
+          Kembali
+        </Button>
+      </Group>
+
+      {/* Konten utama */}
+      <Paper
+        withBorder
+        p="xl"
+        radius="lg"
+        shadow="md"
+        bg={colors['white-trans-1']}
+        maw={800}
+        mx="auto"
+      >
+        <Stack gap="md">
+          {/* Header */}
+          <Text
+            ta="center"
+            fz={{ base: '1.8rem', md: '2.2rem' }}
+            fw={700}
+            c={colors['blue-button']}
+          >
+            {data.name || 'Posyandu Desa'}
+          </Text>
+
+          {/* Gambar */}
+          {data.image?.link ? (
+            <Center>
+              <Image
+                src={data.image.link}
+                alt={`Gambar ${data.name}`}
+                w="100%"
+                h={300}
+                radius="md"
+                fit="cover"
+                loading="lazy"
+              />
+            </Center>
+          ) : (
+            <Center>
+              <Text fz="sm" c="dimmed">
+                Tidak ada gambar
+              </Text>
+            </Center>
+          )}
+
+          {/* Info utama */}
+          <Stack gap="sm" mt="md">
+            <Flex align="center" gap="xs">
+              <IconPhone size={18} stroke={1.5} />
+              <Text fz="sm" c="dimmed">
+                {data.nomor || 'Nomor tidak tersedia'}
+              </Text>
+            </Flex>
+
+            <Flex align="center" gap="xs">
+              <IconCalendar size={18} stroke={1.5} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data.jadwalPelayanan || '-' }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+              />
+            </Flex>
+
+            <Flex align="center" gap="xs">
+              <IconInfoCircle size={18} stroke={1.5} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                lh={1.6}
+                dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}
+              />
+            </Flex>
+          </Stack>
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+}

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

@@ -1,18 +1,19 @@
 'use client'
 import posyandustate from "@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu";
 import colors from "@/con/colors";
-import { Badge, Box, Center, Flex, Group, Image, List, ListItem, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from "@mantine/core";
+import { Badge, Box, Button, Center, Flex, Group, Image, List, ListItem, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
+import { useDebouncedValue, useShallowEffect } from "@mantine/hooks";
 import { IconCalendar, IconInfoCircle, IconPhone, IconSearch } from "@tabler/icons-react";
 import { useState } from "react";
 import { useProxy } from "valtio/utils";
 import BackButton from "../../desa/layanan/_com/BackButto";
-import { useDebouncedValue } from "@mantine/hooks";
+import { useTransitionRouter } from "next-view-transitions";
 
 export default function Page() {
   const state = useProxy(posyandustate);
   const [search, setSearch] = useState("");
   const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const router = useTransitionRouter()
 
   const { data, page, totalPages, loading, load } = state.findMany;
 
@@ -133,33 +134,41 @@ export default function Page() {
                       loading="lazy"
                     />
                   </Center>
-                  <Flex align="center" gap="xs">
+                  <Flex align="flex-start" gap="xs">
-                    <IconPhone size={18} stroke={1.5} />
+                    <IconPhone size={18} stroke={1.5} style={{ marginTop: 3 }} />
-                    <Text fz="sm" c="dimmed">
+                    <Box>
-                      {v.nomor || "Tidak tersedia"}
+                      <Text fz="sm" c="dimmed" lh={1.4}>
-                    </Text>
+                        {v.nomor || "Tidak tersedia"}
+                      </Text>
+                    </Box>
                   </Flex>
-                  <Flex align="center" gap="xs">
+
-                    <IconCalendar size={18} stroke={1.5} />
+                  <Flex align="flex-start" gap="xs">
-                    <Text fz="sm" c="dimmed">
+                    <IconCalendar size={18} stroke={1.5} style={{ marginTop: 3 }} />
-                      Jadwal:{" "}
+                    <Box>
-                      <span style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }} />
+                      <Text fz="sm" c="dimmed" lh={1.4}>
-                    </Text>
+                        <strong>Jadwal:</strong>{" "}
+                        <span
+                          style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                          dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }}
+                        />
+                      </Text>
+                    </Box>
                   </Flex>
-                  <Spoiler
+
-                    key={`spoiler-${v.id}`}
+                  <Flex align="flex-start" gap="xs">
-                    maxHeight={70}
+                    <IconInfoCircle size={18} stroke={1.5} style={{ marginTop: 3 }} />
-                    showLabel="Lihat selengkapnya"
-                    hideLabel="Sembunyikan"
-                    transitionDuration={300}
-                  >
                     <Text
                       fz="sm"
                       lh={1.5}
+                      c="dimmed"
                       dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                       style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                      lineClamp={3}
+                      truncate="end"
                     />
-                  </Spoiler>
+                  </Flex>
+                  <Button radius="lg" size="md" variant="outline" onClick={() => router.push(`/darmasaba/kesehatan/posyandu/${v.id}`)}>Detail</Button>
                 </Stack>
               </Paper>
             ))}

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

@@ -88,7 +88,7 @@ export default function Page() {
           >
             Program Kesehatan Desa
           </Text>
-          <Text fz="lg" c="dimmed" mt="xs">
+          <Text fz="lg" mt="xs">
             Temukan berbagai program kesehatan untuk mendukung kualitas hidup
             masyarakat Darmasaba.
           </Text>
@@ -126,17 +126,36 @@ export default function Page() {
                   className="hover-scale"
                 >
                   <Stack gap="md">
-                    <Box h={180} w="100%">
+                    <Center>
-                      <Image
+                      <Box
-                        src={v.image?.link}
+                        style={{
-                        alt={v.name}
+                          width: '100%',
-                        radius="xl"
+                          height: 180, // 🔥 tinggi fix biar semua seragam
-                        w="100%"
+                          borderRadius: 12,
-                        h="100%"
+                          overflow: 'hidden',
-                        fit="cover"
+                          position: 'relative',
-                        loading="lazy"
+                          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>
 
                     <Box px="lg" pb="lg">
                       <Text
@@ -149,7 +168,7 @@ export default function Page() {
                       </Text>
                       <Text
                         fz="sm"
-                        c="dimmed"
+                        ta={"justify"}
                         lineClamp={3}
                         dangerouslySetInnerHTML={{ __html: v.deskripsi }}
                         style={{ wordBreak: "break-word", whiteSpace: "normal" }}
@@ -230,7 +249,7 @@ export default function Page() {
           >
             Manfaat Program Kesehatan
           </Text>
-          <Text fz="lg" c="dimmed" maw={700}>
+          <Text fz="lg" maw={700}>
             Program kesehatan Desa Darmasaba berperan penting dalam meningkatkan
             kesejahteraan dan kualitas hidup warganya.
           </Text>
@@ -260,7 +279,7 @@ export default function Page() {
                 <Text ta="center" fw="bold" fz="xl" c={colors["blue-button"]}>
                   {v.title}
                 </Text>
-                <Text ta="center" fz="sm" c="dimmed">
+                <Text ta="center" fz="sm">
                   {v.desc}
                 </Text>
               </Stack>

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

@@ -43,7 +43,7 @@ function Page() {
           <Text fz={{ base: "2rem", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
             Daftar Puskesmas
           </Text>
-          <Text fz="sm" c="dimmed">
+          <Text fz="md">
             Temukan informasi lengkap mengenai layanan, kontak, dan lokasi Puskesmas Darmasaba
           </Text>
         </GridCol>

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

@@ -71,8 +71,11 @@ function Page() {
             onChange={(e) => setSearch(e.currentTarget.value)}
           />
         </Group>
-        <Text fz="lg" c={'black'}>
+        <Text fz="md" >
-          Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
+          Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. 
+        </Text>
+        <Text fz="md">
+          Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
         </Text>
       </Box>
       <Box px={{ base: 'md', md: 100 }}>

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

@@ -0,0 +1,66 @@
+// Create a new component: components/EdukasiCard.tsx
+'use client';
+
+import { Box, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import { ReactNode } from 'react';
+
+interface EdukasiCardProps {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  color?: string;
+}
+
+export function EdukasiCard({ icon, title, description, color = '#1e88e5' }: EdukasiCardProps) {
+  return (
+    <Paper
+      p={{ base: 'md', md: 'lg' }}
+      radius="md"
+      shadow="sm"
+      withBorder
+      style={{ 
+        height: '100%',
+        transition: 'transform 0.2s, box-shadow 0.2s',
+        '&:hover': {
+          transform: 'translateY(-4px)',
+          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
+        }
+      }}
+    >
+      <Stack h="100%" justify="space-between" gap="md">
+        <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} 
+                c={color}
+                ta="center"
+                lineClamp={2}
+                style={{ 
+                  wordBreak: 'break-word',
+                  minHeight: '3.5rem',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}
+              >
+                {title}
+              </Text>
+            </Tooltip>
+          </Stack>
+          <Text
+            size="sm"
+            style={{
+              wordBreak: 'break-word',
+              lineHeight: 1.6,
+              color: 'var(--mantine-color-gray-7)'
+            }}
+            dangerouslySetInnerHTML={{ __html: description }}
+          />
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}

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

@@ -1,128 +1,104 @@
-'use client'
+'use client';
-import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
+
-import colors from '@/con/colors';
+import { Box, Container, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
-import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconLeaf, IconPlant2, IconRecycle } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
-function Page() {
+import stateEdukasiLingkungan from '@/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan';
-  const tujuan = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi.findById)
+import colors from '@/con/colors';
-  const materi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan.findById)
+import { EdukasiCard } from './component/edukasiCard';
-  const contoh = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan.findById)
+
+function LoadingSkeleton() {
+  return (
+    <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
+      {[1, 2, 3].map((item) => (
+        <Skeleton key={item} height={300} radius="md" />
+      ))}
+    </SimpleGrid>
+  );
+}
+
+export default function EdukasiLingkunganPage() {
+  const tujuan = useProxy(stateEdukasiLingkungan.stateTujuanEdukasi.findById);
+  const materi = useProxy(stateEdukasiLingkungan.stateMateriEdukasiLingkungan.findById);
+  const contoh = useProxy(stateEdukasiLingkungan.stateContohEdukasiLingkungan.findById);
 
   useShallowEffect(() => {
-    tujuan.load('edit')
+    tujuan.load('edit');
-    materi.load('edit')
+    materi.load('edit');
-    contoh.load('edit')
+    contoh.load('edit');
-  }, [])
+  }, []);
 
-  if (tujuan.loading || !tujuan.data || materi.loading || !materi.data || contoh.loading || !contoh.data) {
+  const isLoading = tujuan.loading || !tujuan.data ||
+    materi.loading || !materi.data ||
+    contoh.loading || !contoh.data;
+
+  if (isLoading) {
     return (
-      <Stack py={20}>
+      <Stack py="xl" px={{ base: 'md', md: 'xl' }}>
-        <Skeleton radius="md" height={600} />
+        <BackButton />
+        <LoadingSkeleton />
       </Stack>
     );
   }
 
   return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+    <Stack bg={colors.Bg} py="xl" gap="xl" px={{ base: 'md', md: 'xl' }}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
 
-      <Box px={{ base: 'md', md: 100 }} pb={20}>
+      <Container size="lg" ta="center">
-        <Text ta={'center'} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
+        <Text
+          component="h1"
+          fz={{ base: 'h2', md: '2.5rem' }}
+          c={colors['blue-button']}
+          fw={700}
+          mb="md"
+        >
           Edukasi Lingkungan
         </Text>
-        <Text ta={'center'} fz="h4" c="black">
+        <Text
+          fz={{ base: 'md', md: 'lg' }}
+          c="dimmed"
+          maw={800}
+          mx="auto"
+        >
           Program edukasi ini membimbing masyarakat untuk peduli dan bertanggung jawab terhadap alam,
           meningkatkan kesehatan, kenyamanan, dan keberlanjutan hidup bersama.
         </Text>
-      </Box>
+      </Container>
 
-      <Box px={{ base: 'md', md: 100 }}>
+      <Container size="xl">
-        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg" style={{ alignItems: 'stretch' }}>
+        <SimpleGrid
-          {/* Tujuan Edukasi Lingkungan */}
+          cols={{ base: 1, sm: 2, lg: 3 }}
-         <Box style={{ display: 'flex', height: '100%' }}>
+          spacing="xl"
-            <Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md" style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+          verticalSpacing={{ base: 'md', md: 'xl' }}
-              <Stack gap="md">
+        >
-                <Box>
+          <EdukasiCard
-                  <Tooltip label={tujuan.data?.judul} position="top" withArrow>
+            icon={<IconLeaf size={32} />}
-                    <Stack gap={4} align="center">
+            title={tujuan.data?.judul || ''}
-                    <IconLeaf size={28} color={colors['blue-button']} />
+            description={tujuan.data?.deskripsi || ''}
-                      <Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
+            color={colors['blue-button']}
-                        {tujuan.data?.judul}
+          />
-                      </Text>
+
-                    </Stack>
+          <EdukasiCard
-                  </Tooltip>
+            icon={<IconRecycle size={32} />}
-                </Box>
+            title={materi.data?.judul || ''}
-                <Text 
+            description={materi.data?.deskripsi || ''}
-                  style={{ 
+            color={colors['blue-button']}
-                    wordBreak: "break-word", 
+          />
-                    whiteSpace: "normal",
+
-                    flexGrow: 1
+          <EdukasiCard
-                  }} 
+            icon={<IconPlant2 size={32} />}
-                  dangerouslySetInnerHTML={{ __html: tujuan.data?.deskripsi || '' }} 
+            title={contoh.data?.judul || ''}
-                />
+            description={contoh.data?.deskripsi || ''}
-                <Box style={{ flexGrow: 1 }} />
+            color={colors['blue-button']}
-              </Stack>
+          />
-            </Paper>
-          </Box>
-          {/* Materi Edukasi Lingkungan */}
-          <Box style={{ display: 'flex', height: '100%' }}>
-            <Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
-              <Stack gap="md">
-                <Box>
-                  <Tooltip label={materi.data?.judul} position="top" withArrow>
-                    <Stack gap={4} align="center">
-                    <IconRecycle size={28} color={colors['blue-button']} />
-                      <Text fz="h3" fw="bold" c={colors['blue-button']} ta="center" dangerouslySetInnerHTML={{ __html: materi.data?.judul || '' }} />
-                    </Stack>
-                  </Tooltip>
-                </Box>
-                <Text 
-                  style={{ 
-                    wordBreak: "break-word", 
-                    whiteSpace: "normal",
-                    flexGrow: 1
-                  }} 
-                  dangerouslySetInnerHTML={{ __html: materi.data?.deskripsi || '' }} 
-                />
-                <Box style={{ flexGrow: 1 }} />
-              </Stack>
-            </Paper>
-          </Box>
-          {/* Contoh Edukasi Lingkungan */}
-          <Box style={{ display: 'flex', height: '100%' }}>
-            <Paper p={20} bg={colors['white-trans-1']} shadow="md" radius="md">
-              <Stack gap="md">
-                <Box>
-                  <Tooltip label={contoh.data?.judul} position="top" withArrow>
-                    <Stack gap={4} align="center">
-                    <IconPlant2  size={28} color={colors['blue-button']} />
-                      <Text fz="h3" fw="bold" c={colors['blue-button']} ta="center">
-                        {contoh.data?.judul}
-                      </Text>
-                    </Stack>
-                  </Tooltip>
-                </Box>
-                <Text 
-                  style={{ 
-                    wordBreak: "break-word", 
-                    whiteSpace: "normal",
-                    flexGrow: 1
-                  }} 
-                  dangerouslySetInnerHTML={{ __html: contoh.data?.deskripsi || '' }} 
-                />
-              </Stack>
-            </Paper>
-          </Box>
         </SimpleGrid>
-      </Box>
+      </Container>
     </Stack>
   );
-}
+}
-
-export default Page;

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

@@ -1,323 +1,5 @@
-// 'use client'
-// import colors from '@/con/colors';
-// import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
-// import { IconSearch } from '@tabler/icons-react';
-// import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-// import React, { useEffect, useState } from 'react';
-// import BackButton from '../../../desa/layanan/_com/BackButto';
-
-
-// type HeaderSearchProps = {
-//   placeholder?: string;
-//   searchIcon?: React.ReactNode;
-//   value?: string;
-//   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-//   children?: React.ReactNode;
-// };
-
-// function LayoutTabsGotongRoyong({
-//   children,
-//   placeholder = "pencarian",
-//   searchIcon = <IconSearch size={20} />
-// }: HeaderSearchProps) {
-//   const router = useRouter();
-//   const pathname = usePathname();
-//   const searchParams = useSearchParams();
-  
-//   // Get active tab from URL path
-//   const activeTab = pathname.split('/').pop() || 'semua';
-  
-//   // Get initial search value from URL
-//   const initialSearch = searchParams.get('search') || '';
-//   const [searchValue, setSearchValue] = useState(initialSearch);
-//   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-  
-//   // Update active tab state when pathname changes
-//   const [activeTabState, setActiveTabState] = useState(activeTab);
-//   useEffect(() => {
-//     setActiveTabState(activeTab);
-//   }, [activeTab]);
-
-//   // Clean up timeouts on unmount
-//   useEffect(() => {
-//     return () => {
-//       if (searchTimeout !== null) {
-//         clearTimeout(searchTimeout);
-//       }
-//     };
-//   }, [searchTimeout]);
-
-//   // Handle search input change with debounce
-//   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     const value = event.target.value;
-//     setSearchValue(value);
-    
-//     // Clear previous timeout
-//     if (searchTimeout !== null) {
-//       clearTimeout(searchTimeout);
-//     }
-    
-//     // Set new timeout
-//     const newTimeout = window.setTimeout(() => {
-//       const params = new URLSearchParams(searchParams.toString());
-      
-//       if (value) {
-//         params.set('search', value);
-//       } else {
-//         params.delete('search');
-//       }
-      
-//       // Only update URL if the search value has actually changed
-//       if (params.toString() !== searchParams.toString()) {
-//         router.push(`/darmasaba/lingkungan/gotong-royong/${activeTab}?${params.toString()}`);
-//       }
-//     }, 500); // 500ms debounce delay
-    
-//     setSearchTimeout(newTimeout);
-//   };
-//   const tabs = [
-//     {
-//       label: "Semua",
-//       value: "semua",
-//       href: "/darmasaba/lingkungan/gotong-royong/semua"
-//     },
-//     {
-//       label: "Kebersihan",
-//       value: "kebersihan",
-//       href: "/darmasaba/lingkungan/gotong-royong/kebersihan"
-//     },
-//     {
-//       label: "Infrastruktur",
-//       value: "infrastruktur",
-//       href: "/darmasaba/lingkungan/gotong-royong/infrastruktur"
-//     },
-//     {
-//       label: "Sosial",
-//       value: "sosial",
-//       href: "/darmasaba/lingkungan/gotong-royong/sosial"
-//     },
-//     {
-//       label: "Lingkungan",
-//       value: "lingkungan",
-//       href: "/darmasaba/lingkungan/gotong-royong/lingkungan"
-//     }
-//   ];
-//   const handleTabChange = (value: string | null) => {
-//     if (!value) return;
-//     const tab = tabs.find(t => t.value === value);
-//     if (tab) {
-//       const params = new URLSearchParams(searchParams.toString());
-//       router.push(`/darmasaba/lingkungan/gotong-royong/${value}${params.toString() ? `?${params.toString()}` : ''}`);
-//     }
-//   };
-
-//   return (
-//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
-//       {/* Header */}
-//       <Box px={{ base: "md", md: 100 }}>
-//         <BackButton />
-//       </Box>
-//       <Container size="lg" px="md">
-//         <Stack align="center" gap="0" >
-//           <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
-//             Gotong Royong Desa Darmasaba
-//           </Text>
-//           <Text ta="center" px="md">
-//             Gotong royong rutin dilakukan oleh warga desa untuk meningkatkan kualitas hidup dan kesejahteraan masyarakat Desa Darmasaba
-//           </Text>
-//         </Stack>
-//       </Container>
-
-//       <Tabs
-//         color={colors['blue-button']}
-//         variant="pills"
-//         value={activeTabState}
-//         onChange={handleTabChange}
-//       >
-//         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-//           <Grid>
-//             <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
-//               <TabsList>
-//                 {tabs.map((tab, index) => (
-//                   <TabsTab
-//                     key={index}
-//                     value={tab.value}
-//                     onClick={() => router.push(tab.href)}
-//                   >
-//                     {tab.label}
-//                   </TabsTab>
-//                 ))}
-//               </TabsList>
-//             </GridCol>
-//             <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-//               <TextInput
-//                 radius="lg"
-//                 placeholder={placeholder}
-//                 leftSection={searchIcon}
-//                 w="100%"
-//                 value={searchValue}
-//                 onChange={handleSearchChange}
-//               />
-//             </GridCol>
-//           </Grid>
-//         </Box>
-
-//         {children}
-//       </Tabs>
-//     </Stack>
-//   );
-// }
-
-// export default LayoutTabsGotongRoyong;
-
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// 'use client'
-// import colors from '@/con/colors';
-// import { Box, Group, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
-// import { IconSearch } from '@tabler/icons-react';
-// import { usePathname, useRouter, useSearchParams } from 'next/navigation';
-// import React, { useEffect, useState } from 'react';
-// import BackButton from '../../layanan/_com/BackButto';
-
-// type HeaderSearchProps = {
-//   placeholder?: string;
-//   searchIcon?: React.ReactNode;
-//   value?: string;
-//   onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-//   children?: React.ReactNode;
-// };
-
-// function LayoutTabsBerita({
-//   children,
-//   placeholder = "pencarian",
-//   searchIcon = <IconSearch size={20} />
-// }: HeaderSearchProps) {
-//   const router = useRouter();
-//   const pathname = usePathname();
-//   const searchParams = useSearchParams();
-
-//   const activeTab = pathname.split('/').pop() || 'semua';
-//   const initialSearch = searchParams.get('search') || '';
-//   const [searchValue, setSearchValue] = useState(initialSearch);
-//   const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
-
-//   const [activeTabState, setActiveTabState] = useState(activeTab);
-//   useEffect(() => {
-//     setActiveTabState(activeTab);
-//   }, [activeTab]);
-
-//   useEffect(() => {
-//     return () => {
-//       if (searchTimeout !== null) clearTimeout(searchTimeout);
-//     };
-//   }, [searchTimeout]);
-
-//   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-//     const value = event.target.value;
-//     setSearchValue(value);
-
-//     if (searchTimeout !== null) clearTimeout(searchTimeout);
-
-//     const newTimeout = window.setTimeout(() => {
-//       const params = new URLSearchParams(searchParams.toString());
-
-//       if (value) params.set('search', value);
-//       else params.delete('search');
-
-//       if (params.toString() !== searchParams.toString()) {
-//         router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
-//       }
-//     }, 500);
-
-//     setSearchTimeout(newTimeout);
-//   };
-
-//   const tabs = [
-//     { label: "Semua", value: "semua", href: "/darmasaba/desa/berita/semua" },
-//     { label: "Budaya", value: "budaya", href: "/darmasaba/desa/berita/budaya" },
-//     { label: "Pemerintahan", value: "pemerintahan", href: "/darmasaba/desa/berita/pemerintahan" },
-//     { label: "Ekonomi", value: "ekonomi", href: "/darmasaba/desa/berita/ekonomi" },
-//     { label: "Pembangunan", value: "pembangunan", href: "/darmasaba/desa/berita/pembangunan" },
-//     { label: "Sosial", value: "sosial", href: "/darmasaba/desa/berita/sosial" },
-//     { label: "Teknologi", value: "teknologi", href: "/darmasaba/desa/berita/teknologi" },
-//   ];
-
-//   const handleTabChange = (value: string | null) => {
-//     if (!value) return;
-//     const tab = tabs.find(t => t.value === value);
-//     if (tab) {
-//       const params = new URLSearchParams(searchParams.toString());
-//       router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
-//     }
-//   };
-
-//   return (
-//     <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
-//       {/* Header */}
-//       <Box px={{ base: "md", md: 100 }}>
-//         <BackButton />
-//       </Box>
-
-//       <Box px={{ base: 'md', md: 100 }}>
-//         <Group justify='space-between' align="center">
-//           <Stack gap="0">
-//             <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
-//               Portal Berita Darmasaba
-//             </Text>
-//             <Text>
-//               Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
-//             </Text>
-//           </Stack>
-//           <Box>
-//             <TextInput
-//               radius="lg"
-//               placeholder={placeholder}
-//               leftSection={searchIcon}
-//               w="100%"
-//               value={searchValue}
-//               onChange={handleSearchChange}
-//             />
-//           </Box>
-//         </Group>
-//       </Box>
-
-//       <Tabs
-//         color={colors['blue-button']}
-//         variant="pills"
-//         value={activeTabState}
-//         onChange={handleTabChange}
-//       >
-//         <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
-//           {/* SCROLLABLE TABS */}
-//           <Box style={{ overflowX: 'auto', whiteSpace: 'nowrap' }}>
-//             <TabsList style={{ display: 'flex', flexWrap: 'nowrap', gap: '0.5rem' }}>
-//               {tabs.map((tab, index) => (
-//                 <TabsTab
-//                   key={index}
-//                   value={tab.value}
-//                   onClick={() => router.push(tab.href)}
-//                   style={{
-//                     flex: '0 0 auto', // Prevent shrinking
-//                     minWidth: 100, // optional: makes them touch-friendly
-//                     textAlign: 'center'
-//                   }}
-//                 >
-//                   {tab.label}
-//                 </TabsTab>
-//               ))}
-//             </TabsList>
-//           </Box>
-//         </Box>
-
-//         {children}
-//       </Tabs>
-//     </Stack>
-//   );
-// }
-
-// export default LayoutTabsBerita;
-
 
 'use client'
 import gotongRoyongState from '@/app/admin/(dashboard)/_state/lingkungan/gotong-royong';
@@ -402,7 +84,7 @@ function LayoutTabsGotongRoyong({ children }: { children: React.ReactNode }) {
             <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold">
               Portal Gotong royong Darmasaba
             </Text>
-            <Text>Temukan berbagai kegiatan lingkungan yang dimiliki Desa Darmasaba</Text>
+            <Text fz="md">Temukan berbagai kegiatan lingkungan yang dimiliki Desa Darmasaba</Text>
           </Stack>
           <Box>
             <TextInput

src/app/darmasaba/(pages)/lingkungan/gotong-royong/semua/page.tsx

@@ -43,15 +43,48 @@ export default function Page() {
   const loadingGrid = state.findMany.loading;
   const loadingFeatured = featured.loading;
 
+  // Load featured data once on component mount
   useEffect(() => {
-    if (!featured.data && !loadingFeatured) {
+    let mounted = true;
-      gotongRoyongState.kegiatanDesa.findFirst.load();
+    
+    const loadFeatured = async () => {
+      try {
+        if (!featured.data && !loadingFeatured) {
+          await gotongRoyongState.kegiatanDesa.findFirst.load();
+        }
+      } catch (error) {
+        console.error('Error loading featured data:', error);
+      }
+    };
+
+    if (mounted) {
+      loadFeatured();
     }
-  }, [featured.data, loadingFeatured]);
+
+    return () => {
+      mounted = false;
+    };
+  }, []); // Empty dependency array to run only once on mount
 
   useEffect(() => {
-    const limit = 3;
+    let mounted = true;
-    state.findMany.load(page, limit, search);
+    
+    const loadData = async () => {
+      try {
+        const limit = 3;
+        await state.findMany.load(page, limit, search);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      }
+    };
+
+    if (mounted) {
+      loadData();
+    }
+
+    return () => {
+      mounted = false;
+    };
   }, [page, search]);
 
   const handlePageChange = (newPage: number) => {
@@ -59,7 +92,9 @@ export default function Page() {
     if (search) url.set('search', search);
     if (newPage > 1) url.set('page', newPage.toString());
     else url.delete('page');
-    router.replace(`?${url.toString()}`);
+    
+    // Use push instead of replace to keep browser history
+    router.push(`?${url.toString()}`, { scroll: false });
   };
 
   const featuredData = featured.data;

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

@@ -1,9 +1,9 @@
 'use client'
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Center, Flex, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
-import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconRoute, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
@@ -122,20 +122,28 @@ function Page() {
               <Stack gap="md">
                 {data2?.map((v, k) => (
                   <Paper key={k} p="md" withBorder radius="md">
-                    <Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
+                    <Group justify='space-between'>
-                    <Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
+                      <Box>
-                    {v.lat && v.lng ? (
+                        <Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
-                      <a
+                        <Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
-                        href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
+                      </Box>
-                        target="_blank"
+                      <Box>
-                        rel="noopener noreferrer"
+                        <IconRoute color={colors['blue-button']} size={30} />
-                        style={{ color: colors['blue-button'], textDecoration: 'none' }}
+                        <Text fw={"bold"} fz="sm" c={colors['blue-button']}>Rute</Text>
-                      >
+                      </Box>
-                        <Text fz="sm">📌 Buka di Google Maps</Text>
+                    </Group>
-                      </a>
+                        {v.lat && v.lng ? (
-                    ) : (
+                          <a
-                      <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                            href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
-                    )}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            style={{ color: colors['blue-button'], textDecoration: 'none' }}
+                          >
+                            <Text fz="sm">📌 Lihat Peta Lebih Besar</Text>
+                          </a>
+                        ) : (
+                          <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                        )}
                   </Paper>
                 ))}
               </Stack>

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

@@ -66,8 +66,11 @@ function Page() {
             />
           </Group>
         </Box>
-        <Text c="dimmed" fz={{ base: 'sm', md: 'lg' }} mt="sm">
+        <Text fz="md" mt="sm">
-          Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau, sehat, dan seimbang bagi seluruh warga desa.
+          Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau,
+        </Text>
+        <Text fz="md">
+          sehat, dan seimbang bagi seluruh warga desa.
         </Text>
       </Box>
       <Box px={{ base: 'md', md: 100 }} pb={60}>

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

@@ -74,7 +74,7 @@ function Page() {
             <Title fz={55} fw={900} c={colors['blue-button']}>
               Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
             </Title>
-            <Text fz="lg" mt="md" c="dimmed">
+            <Text fz="lg" mt="md" fw={"bold"}>
               Program beasiswa untuk mendukung pendidikan berkualitas bagi generasi muda Desa Darmasaba.
             </Text>
             <Group mt="xl">

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

@@ -15,7 +15,7 @@ import {
   Timeline,
   Title
 } from '@mantine/core';
-import { IconArrowLeft } from '@tabler/icons-react';
+import { IconArrowLeft, IconChecklist, IconInfoCircle, IconQuote, IconSchool, IconTimeline, IconUserPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useDisclosure } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
@@ -69,10 +69,11 @@ export default function BeasiswaPage() {
       {/* Hero Section */}
       <Container size="lg" py="xl">
         <Stack gap="md" maw={600}>
-          <Title order={2} c="blue.9">
+          <Group>
-            Program Beasiswa Pendidikan Desa Darmasaba
+            <IconSchool size={30} color={colors["blue-button"]} />
-          </Title>
+            <Title order={2}>Program Beasiswa Pendidikan Desa Darmasaba</Title>
-          <Text c="dimmed">
+          </Group>
+          <Text>
             Program ini bertujuan untuk mendukung pendidikan generasi muda di Desa Darmasaba
             agar dapat melanjutkan studi ke jenjang lebih tinggi dengan dukungan finansial dan pendampingan.
           </Text>
@@ -81,21 +82,35 @@ export default function BeasiswaPage() {
 
       {/* Tentang Program */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
+        <Group mb="sm">
-          Tentang Program
+          <IconInfoCircle size={24} color={colors["blue-button"]} />
-        </Title>
+          <Title order={3}>Tentang Program</Title>
+        </Group>
         <Text>
           Program Beasiswa Desa Darmasaba adalah inisiatif pemerintah desa untuk meningkatkan akses
           pendidikan bagi siswa berprestasi dan kurang mampu. Melalui program ini, desa memberikan bantuan
           biaya sekolah, bimbingan akademik, serta pelatihan soft skill bagi peserta terpilih.
         </Text>
+
+        {/* Tambahkan info tahun berjalan di sini */}
+        <Paper mt="md" p="md" radius="lg" shadow="xs" bg="#f8fbff" withBorder>
+          <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>.
+            Pengumuman hasil seleksi akan diumumkan pada pertengahan Juni 2025 melalui website resmi Desa Darmasaba.
+          </Text>
+        </Paper>
       </Container>
 
       {/* Syarat dan Ketentuan */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
+        <Group mb="sm">
-          Syarat Pendaftaran
+          <IconChecklist size={24} color={colors["blue-button"]} />
-        </Title>
+          <Title order={3}>Syarat Pendaftaran</Title>
+        </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
           <Paper shadow="sm" p="md" radius="lg" withBorder>
@@ -123,42 +138,61 @@ export default function BeasiswaPage() {
 
       {/* Proses Seleksi */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
+        <Group mb="sm">
-          Proses Seleksi
+          <IconTimeline size={24} color={colors["blue-button"]} />
-        </Title>
+          <Title order={3}>Proses Seleksi</Title>
+        </Group>
 
         <Timeline active={4} bulletSize={24} lineWidth={2}>
           <Timeline.Item title="Pendaftaran Online">
             <Text c="dimmed" size="sm">
               Calon peserta mengisi formulir pendaftaran dan mengunggah dokumen pendukung.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 1 Februari – 31 Mei 2025
+            </Text>
           </Timeline.Item>
 
           <Timeline.Item title="Seleksi Administrasi">
             <Text c="dimmed" size="sm">
               Panitia memverifikasi kelengkapan dan validitas berkas.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 5–7 hari kerja setelah penutupan pendaftaran
+            </Text>
           </Timeline.Item>
 
           <Timeline.Item title="Wawancara dan Penilaian">
             <Text c="dimmed" size="sm">
               Peserta yang lolos administrasi akan diundang untuk wawancara langsung dengan tim seleksi.
             </Text>
+            <Text size="sm" fw={500} c={colors["blue-button"]} mt={4}>
+              ⏰ Estimasi waktu: 7–10 hari kerja setelah pengumuman seleksi administrasi
+            </Text>
           </Timeline.Item>
 
           <Timeline.Item title="Pengumuman Penerima">
             <Text c="dimmed" size="sm">
               Daftar penerima beasiswa diumumkan melalui website resmi Desa Darmasaba.
             </Text>
+            <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
+        </Text>
       </Container>
 
+
       {/* Testimoni */}
       <Container size="lg" py="xl">
-        <Title order={3} mb="sm">
+        <Group mb="sm">
-          Cerita Sukses Penerima Beasiswa
+          <IconQuote size={24} color={colors["blue-button"]} />
-        </Title>
+          <Title order={3}>Cerita Sukses Penerima Beasiswa</Title>
+        </Group>
 
         <SimpleGrid cols={{ base: 1, sm: 2 }} spacing="lg">
           <Paper shadow="md" p="lg" radius="lg">
@@ -183,7 +217,10 @@ export default function BeasiswaPage() {
 
       {/* CTA Akhir */}
       <Container size="lg" py="xl" ta="center">
-        <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+        <Group justify="center" mb="sm">
+          <IconUserPlus size={28} color={colors["blue-button"]} />
+          <Title order={3}>Siap Bergabung dengan Program Ini?</Title>
+        </Group>
         <Text c="dimmed" mb="md">
           Segera daftar dan wujudkan mimpimu bersama Desa Darmasaba.
         </Text>

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

@@ -92,7 +92,7 @@ function Page() {
                   cursor={{ fill: 'var(--mantine-color-gray-1)' }}
                 />
                 <Legend />
-                <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Pendidikan" radius={[8, 8, 0, 0]} />
+                <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Penduduk dengan Pendidikan" radius={[8, 8, 0, 0]} />
               </BarChart>
             </ResponsiveContainer>
           </Paper>

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

@@ -84,7 +84,7 @@ function Page({ params }: PageProps) {
               <TableTr>
                 <TableTh w="30%">Nama Pengajar</TableTh>
                 <TableTh w="30%">Nama Lembaga</TableTh>
-                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+                <TableTh w="40%">Mengajar Di Jenjang Pendidikan</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -95,7 +95,7 @@ function Page({ params }: PageProps) {
                   <TableTd>{item.lembaga.jenjangPendidikan?.nama || '-'}</TableTd>
                 </TableTr>
               ))}
-            </TableTbody>
+            </TableTbody> 
           </Table>
         )}
       </Paper>

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

@@ -1,7 +1,7 @@
 'use client'
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { Box, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
 import { IconMapPin, IconTarget, IconBook2 } from '@tabler/icons-react';
@@ -43,7 +43,7 @@ function Page() {
             Pendidikan Non Formal
           </Title>
           <Text ta="center" fz="lg" lh={1.6} c="black" maw={800} mx="auto">
-            Bentuk pendidikan di luar sekolah yang terstruktur, bertujuan memberikan keterampilan, pengetahuan, dan pengembangan karakter masyarakat dari berbagai usia serta latar belakang.
+          Pendidikan non formal merupakan bentuk pendidikan di luar sekolah yang terstruktur, bertujuan untuk memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
           </Text>
         </Box>
         <SimpleGrid
@@ -59,13 +59,17 @@ function Page() {
             withBorder
           >
             <Stack>
-              <Tooltip label="Fokus utama program" withArrow>
+              <Group align="center" gap={8} wrap="nowrap">
-                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
+                <Tooltip label="Fokus utama program" withArrow>
-                  <IconTarget size={28} style={{ marginRight: 8 }} />
+                  <Box display="flex" style={{ alignItems: "center" }}>
+                    <IconTarget color={colors['blue-button']} size={26} />
+                  </Box>
+                </Tooltip>
+                <Text fw={700} fz="xl" c={colors['blue-button']}>
                   {stateTujuanPendidikanNonFormal.findById.data?.judul}
-                </Title>
+                </Text>
-              </Tooltip>
+              </Group>
-              <Text fz="md" lh={1.7} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateTujuanPendidikanNonFormal.findById.data?.deskripsi }} />
+              <Text fz="md" lh={1.7} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateTujuanPendidikanNonFormal.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
           <Paper
@@ -76,13 +80,17 @@ function Page() {
             withBorder
           >
             <Stack>
-              <Tooltip label="Lokasi pelaksanaan kegiatan" withArrow>
+              <Group align="center" gap={8} wrap="nowrap">
-                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
+                <Tooltip label="Lokasi pelaksanaan kegiatan" withArrow>
-                  <IconMapPin size={28} style={{ marginRight: 8 }} />
+                  <Box display="flex" style={{ alignItems: "center" }}>
+                    <IconMapPin color={colors['blue-button']} size={26} />
+                  </Box>
+                </Tooltip>
+                <Text fw={700} fz="xl" c={colors['blue-button']}>
                   {stateTempatKegiatan.findById.data?.judul}
-                </Title>
+                </Text>
-              </Tooltip>
+              </Group>
-              <Text fz="md" style={{wordBreak: "break-word", whiteSpace: "normal"}} lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTempatKegiatan.findById.data?.deskripsi }} />
+              <Text fz="md" style={{ wordBreak: "break-word", whiteSpace: "normal" }} lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTempatKegiatan.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
         </SimpleGrid>
@@ -95,13 +103,17 @@ function Page() {
             withBorder
           >
             <Stack>
-              <Tooltip label="Ragam jenis program yang tersedia" withArrow>
+              <Group align="center" gap={8} wrap="nowrap">
-                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
+                <Tooltip label="Ragam jenis program yang tersedia" withArrow>
-                  <IconBook2 size={28} style={{ marginRight: 8 }} />
+                  <Box display="flex" style={{ alignItems: "center" }}>
+                    <IconBook2 color={colors['blue-button']} size={26} />
+                  </Box>
+                </Tooltip>
+                <Text fw={700} fz="xl" c={colors['blue-button']}>
                   {stateJenisProgram.findById.data?.judul}
-                </Title>
+                </Text>
-              </Tooltip>
+              </Group>
-              <Text fz="md" lh={1.7} c="dark" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: stateJenisProgram.findById.data?.deskripsi }} />
+              <Text fz="md" lh={1.7} c="dark" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateJenisProgram.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
         </Box>

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

@@ -16,16 +16,11 @@ import {
   TextInput,
 } from '@mantine/core';
 import { DateInput } from '@mantine/dates';
-import {
+import { IconArrowRight, IconBook2, IconUser } from '@tabler/icons-react';
-  IconArrowRight,
-  IconBook2,
-  IconUser
-} from '@tabler/icons-react';
 import { useEffect } from 'react';
 import { toast } from 'react-toastify';
 import { useSnapshot } from 'valtio';
 
-
 export interface ModalPeminjamanProps {
   opened: boolean;
   onClose: () => void;
@@ -45,11 +40,12 @@ export default function ModalPeminjaman({
 }: ModalPeminjamanProps) {
   const snap = useSnapshot(perpustakaanDigitalState.peminjamanBuku);
 
-  // reset form setiap modal dibuka
+  const BATAS_HARI_PINJAM = 4;
+
+  // Reset form setiap modal dibuka
   useEffect(() => {
     if (opened && buku) {
       perpustakaanDigitalState.peminjamanBuku.create.form = {
-        ...perpustakaanDigitalState.peminjamanBuku.create.form,
         bukuId: buku.id,
         nama: '',
         noTelp: '',
@@ -99,7 +95,14 @@ export default function ModalPeminjaman({
                 </Badge>
               )}
 
-              <Text fz="sm" c="dimmed" lineClamp={3} dangerouslySetInnerHTML={{ __html: buku.deskripsi || 'Tidak ada deskripsi' }} />
+              <Text
+                fz="sm"
+                c="dimmed"
+                lineClamp={3}
+                dangerouslySetInnerHTML={{
+                  __html: buku.deskripsi || 'Tidak ada deskripsi',
+                }}
+              />
             </Stack>
           </Group>
 
@@ -112,7 +115,8 @@ export default function ModalPeminjaman({
             leftSection={<IconUser size={16} />}
             value={snap.create.form.nama}
             onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.nama = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.nama =
+                e.currentTarget.value)
             }
             required
           />
@@ -123,7 +127,8 @@ export default function ModalPeminjaman({
             leftSection={<IconUser size={16} />}
             value={snap.create.form.noTelp}
             onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.noTelp =
+                e.currentTarget.value)
             }
             required
           />
@@ -134,11 +139,13 @@ export default function ModalPeminjaman({
             leftSection={<IconUser size={16} />}
             value={snap.create.form.alamat}
             onChange={(e) =>
-              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat = e.currentTarget.value)
+              (perpustakaanDigitalState.peminjamanBuku.create.form.alamat =
+                e.currentTarget.value)
             }
             required
           />
 
+          {/* === OTOMATIS SET BATAS DAN TANGGAL KEMBALI === */}
           <DateInput
             label="Tanggal Pinjam"
             placeholder="Pilih tanggal pinjam"
@@ -148,64 +155,83 @@ export default function ModalPeminjaman({
                 : null
             }
             onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = 
+              if (date) {
-                date ? new Date(date).toISOString() : '';
+                const tanggalPinjam = new Date(date);
+
+                // simpan tanggal pinjam
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam =
+                  tanggalPinjam.toISOString();
+
+                // hitung batas +4 hari
+                const batasKembali = new Date(tanggalPinjam);
+                batasKembali.setDate(batasKembali.getDate() + BATAS_HARI_PINJAM);
+
+                // set batas & tanggal kembali otomatis
+                perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali =
+                  batasKembali.toISOString();
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali =
+                  batasKembali.toISOString();
+
+                toast.info(
+                  `Batas pengembalian otomatis diset ke ${batasKembali.toLocaleDateString('id-ID')} (+${BATAS_HARI_PINJAM} hari).`
+                );
+              } else {
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalPinjam = '';
+                perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = '';
+                perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = '';
+              }
             }}
             required
           />
 
           <Box>
-            <Text>Catatan</Text>
+            <Text fw={500}>Catatan</Text>
             <CreateEditor
               value={snap.create.form.catatan}
-              onChange={(e) =>
+              onChange={(val) =>
-                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan = e)
+                (perpustakaanDigitalState.peminjamanBuku.create.form.catatan =
+                  val)
               }
             />
           </Box>
 
-          <DateInput
-            label="Tanggal Kembali"
-            placeholder="Pilih tanggal kembali"
-            value={
-              snap.create.form.tanggalKembali
-                ? new Date(snap.create.form.tanggalKembali)
-                : null
-            }
-            onChange={(date) => {
-              perpustakaanDigitalState.peminjamanBuku.create.form.tanggalKembali = 
-                date ? new Date(date).toISOString() : '';
-            }}
-            required
-          />
-          
           <DateInput
             label="Batas Pengembalian"
-            placeholder="Pilih tanggal kembali"
+            placeholder="Otomatis diatur +4 hari dari tanggal pinjam"
             value={
               snap.create.form.batasKembali
                 ? new Date(snap.create.form.batasKembali)
                 : null
             }
-            onChange={(date) => {
+            disabled
-              perpustakaanDigitalState.peminjamanBuku.create.form.batasKembali = 
+            readOnly
-                date ? new Date(date).toISOString() : '';
-            }}
-            required
           />
 
+          <DateInput
+            label="Tanggal Kembali"
+            placeholder="Otomatis sama dengan batas pengembalian"
+            value={
+              snap.create.form.tanggalKembali
+                ? new Date(snap.create.form.tanggalKembali)
+                : null
+            }
+            disabled
+            readOnly
+          />
 
           <Button
             onClick={handleSubmit}
             loading={snap.create.loading}
             disabled={
-              !snap.create.form.nama || 
+              !snap.create.form.nama || !snap.create.form.tanggalPinjam
-              !snap.create.form.tanggalPinjam || 
-              !snap.create.form.batasKembali ||
-              !snap.create.form.tanggalKembali
             }
             rightSection={<IconArrowRight size={16} />}
             radius="xl"
+            style={{
+              background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+              color: '#fff',
+              boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+            }}
           >
             Pinjam Buku
           </Button>

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

@@ -42,7 +42,7 @@ function Page() {
         >
           Dasar Hukum
         </Text>
-        <Text ta="center" fz="sm" c="dimmed">
+        <Text ta="center" fz="md" >
           Informasi regulasi dan kebijakan resmi yang menjadi dasar hukum
         </Text>
       </Stack>

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

@@ -3,8 +3,8 @@
 import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan";
 import colors from "@/con/colors";
 import { BarChart, PieChart } from '@mantine/charts';
-import { Box, Button, Center, Container, Flex, Group, Modal, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from "@mantine/core";
+import { Box, Button, Center, Container, Flex, Modal, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from "@mantine/core";
-import { useDisclosure, useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
 import { useState } from "react";
 import { useProxy } from "valtio/utils";
 
@@ -18,14 +18,13 @@ interface ChartDataItem {
 
 
 function Kepuasan() {
-  const state = useProxy(indeksKepuasanState.responden);
+const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
   const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
   const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
   const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
-  const [barChartData, setBarChartData] = useState<Array<{ month: string; count: number }>>([]);
+  const [barChartData, setBarChartData] = useState<Array<{ month: string; Responden: number }>>([]);
-  const [opened, { open, close }] = useDisclosure(false);
+  const [opened, { open, close }] = useDisclosure(false)
-  const isMobile = useMediaQuery("(max-width: 768px)");
 
   const resetForm = () => {
     state.create.form = {
@@ -122,18 +121,18 @@ function Kepuasan() {
 
       // Convert map to array and sort by date
       const barData = Array.from(monthYearMap.entries())
-        .map(([key, count]) => {
+        .map(([key, Responden]) => {
           const [year, month] = key.split('-');
           const monthName = new Date(Number(year), Number(month) - 1, 1)
             .toLocaleString('id-ID', { month: 'long' });
           return {
             month: `${monthName} ${year}`,
-            count,
+            Responden,
             sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
           };
         })
         .sort((a, b) => a.sortKey - b.sortKey)
-        .map(({ month, count }) => ({ month, count }));
+        .map(({ month, Responden }) => ({ month, Responden }));
 
       setBarChartData(barData);
     }
@@ -141,12 +140,12 @@ function Kepuasan() {
 
   if ((loading && !data) || !data) {
     return (
-      <Stack py={10} px="sm">
+      <Stack py={10} px="xl">
-        <Skeleton height={200} mb="md" />
+        <Skeleton height={300} mb="md" />
-        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="md">
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
-          <Skeleton height={200} />
+          <Skeleton height={300} />
-          <Skeleton height={200} />
+          <Skeleton height={300} />
-          <Skeleton height={200} />
+          <Skeleton height={300} />
         </SimpleGrid>
       </Stack>
     );
@@ -157,10 +156,16 @@ function Kepuasan() {
       <Stack p="sm">
         <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
           <Center>
-            <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+          <Text fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
           </Center>
+          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
           <Center mt={10}>
-            <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
+            <Button
+              radius={"lg"}
+              onClick={open}
+              variant="gradient"
+              gradient={{ from: "#26667F", to: "#124170" }}
+            >Ajukan Responden</Button>
           </Center>
         </Container>
         <Box px={"xl"}>
@@ -177,10 +182,10 @@ function Kepuasan() {
                   </Box>
                 </Flex>
                 <BarChart
-                  h={300}
+                  h={window.innerWidth < 480 ? 200 : 300}
                   data={barChartData}
                   dataKey="month"
-                  series={[{ name: 'count', color: colors['blue-button'] }]}
+                  series={[{ name: 'Responden', color: colors['blue-button'] }]}
                   tickLine="y"
                   xAxisLabel="Bulan"
                   yAxisLabel="Jumlah Responden"
@@ -191,12 +196,9 @@ function Kepuasan() {
             </Paper>
             <Box py={"xl"}>
               <SimpleGrid
-                cols={{
+                cols={{ base: 1, sm: 2, lg: 3 }}
-                  base: 1,
+                spacing="md"
-                  md: 1,
+                verticalSpacing="md"
-                  lg: 1,
-                  xl: 3
-                }}
               >
                 {/* Chart Jenis Kelamin */}
                 <Paper bg={colors['white-1']} p="md" radius="md">
@@ -215,7 +217,7 @@ function Kepuasan() {
                                 withLabels
                                 withTooltip
                                 labelsType="percent"
-                                size={200}
+                                size={250} // Fixed size in pixels
                                 data={donutDataJenisKelamin}
                               />
                             </Center>
@@ -254,7 +256,7 @@ function Kepuasan() {
                                 labelsPosition="outside"
                                 labelsType="percent"
                                 withLabelsLine
-                                size={200}
+                                size={250}
                                 data={donutDataRating}
                               />
                             </Center>
@@ -297,7 +299,7 @@ function Kepuasan() {
                                 labelsPosition="outside"
                                 labelsType="percent"
                                 withLabelsLine
-                                size={190}
+                                size={250}
                                 data={donutDataKelompokUmur}
                               />
                             </Center>
@@ -330,7 +332,7 @@ function Kepuasan() {
               <TextInput
                 label="Nama"
                 type='text'
-                placeholder="masukkan nama"
+                placeholder="Masukkan nama"
                 defaultValue={state.create.form.name}
                 onChange={(val) => {
                   state.create.form.name = val.currentTarget.value;
@@ -413,41 +415,57 @@ function Kepuasan() {
     );
   }
   return (
-    <Stack p="sm">
+    <Stack p={"sm"}>
-      <Container w={{ base: "100%", md: "80%" }} p={isMobile ? "md" : "xl"}>
+     <Container size="lg" px="md">
-        <Stack gap="xs">
+        <Center>
-          <Text ta="center" fz={{ base: "2rem", md: "3rem" }}>Indeks Kepuasan Masyarakat</Text>
+          <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
-          <Group justify="center">
+        </Center>
-            <Button radius="lg" bg={colors["blue-button"]} onClick={open}>
+        <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
-              Ajukan Responden
+        <Center mt={10}>
-            </Button>
+          <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
-          </Group>
+        </Center>
-        </Stack>
       </Container>
-      <Box px={isMobile ? "sm" : "xl"}>
+      <Box px={"xl"}>
-        <Paper p="lg" bg={colors.Bg}>
+        <Paper p={"lg"} bg={colors.Bg}>
-          <Paper p={isMobile ? "sm" : "lg"}>
+          <Paper p={"lg"}>
-            <Stack gap="xs">
+            <Stack gap={"xs"}>
-              <Flex direction={isMobile ? "column" : "row"} justify="space-between" align={isMobile ? "start" : "center"}>
+              <Flex
-                <Text fw="bold" mb={isMobile ? "sm" : 0}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
+                direction={{ base: "column", sm: "row" }}
-                <Box>
+                justify="space-between"
-                  <Text fz="sm" fw="bold" c={colors["blue-button"]}>Total Responden</Text>
+                align={{ base: "flex-start", sm: "center" }}
-                  <Text ta="end" fz="h1" fw="bold" c={colors["blue-button"]}>
+              >
-                    {state.findMany.total.toLocaleString("id-ID")}
+                <Text fw="bold" ta={{ base: "center", sm: "left" }}>
+                  Pelayanan Terhadap Publik Desa Darmasaba
+                </Text>
+                <Box mt={{ base: "sm", sm: 0 }}>
+                  <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
+                  <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
+                    {state.findMany.total.toLocaleString('id-ID')}
                   </Text>
                 </Box>
               </Flex>
               <BarChart
-                h={isMobile ? 200 : 300}
+                h={300}
                 data={barChartData}
                 dataKey="month"
-                series={[{ name: "count", color: colors["blue-button"] }]}
+                series={[{ name: 'Responden', color: colors['blue-button'] }]}
+                tickLine="y"
+                xAxisLabel="Bulan"
+                yAxisLabel="Jumlah Responden"
                 withTooltip
+                tooltipAnimationDuration={200}
               />
             </Stack>
           </Paper>
-          <Box py="xl">
+          <Box py={"xl"}>
-            <SimpleGrid cols={{ base: 1, sm: 2, xl: 3 }} spacing="lg">
+            <SimpleGrid
+              cols={{
+                base: 1,
+                md: 1,
+                lg: 1,
+                xl: 3
+              }}
+            >
               {/* Chart Jenis Kelamin */}
               <Paper bg={colors['white-1']} p="md" radius="md">
                 <Stack>
@@ -457,17 +475,28 @@ function Kepuasan() {
                       Belum ada data untuk ditampilkan dalam grafik
                     </Text>
                   ) : (
-                    <Paper p="md" radius="md">
+                    <Paper p="md" radius="md" withBorder>
-                      <Stack>
+                      <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Center>
+                        <Box style={{ position: 'relative', width: '100%' }}>
-                          <PieChart
+                          <Center>
-                            size={isMobile ? 150 : 200}
+                            <PieChart
-                            withLabels
+                              withLabels
-                            data={donutDataJenisKelamin}
+                              withTooltip
-                            withTooltip
+                              labelsType="percent"
-                          />
+                              size={200}
-                        </Center>
+                              data={donutDataJenisKelamin}
-                      </Stack>
+                            />
+                          </Center>
+                        </Box>
+                        <Stack gap="sm" mt="md">
+                          {donutDataJenisKelamin.map((entry) => (
+                            <Flex key={entry.name} gap="md" align="center">
+                              <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                              <Text size="sm">{entry.name}: {entry.value}</Text>
+                            </Flex>
+                          ))}
+                        </Stack>
+                      </Box>
                     </Paper>
                   )}
                 </Stack>
@@ -482,18 +511,35 @@ function Kepuasan() {
                       Belum ada data untuk ditampilkan dalam grafik
                     </Text>
                   ) : (
-                    <Paper p="md" radius="md">
+                    <Paper p="md" radius="md" withBorder>
-                      <Stack>
+                      <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Center>
+                        <Box style={{ position: 'relative', width: '100%' }}>
-                          <PieChart
+                          <Center>
-                            size={isMobile ? 150 : 200}
+                            <PieChart
-                            withLabels
+                              withTooltip
-                            labelsPosition="outside"
+                              tooltipAnimationDuration={200}
-                            withLabelsLine
+                              withLabels
-                            data={donutDataRating}
+                              labelsPosition="outside"
-                          />
+                              labelsType="percent"
-                        </Center>
+                              withLabelsLine
-                      </Stack>
+                              size={200}
+                              data={donutDataRating}
+                            />
+                          </Center>
+                        </Box>
+                        <Box mt="md" style={{ width: '100%' }}>
+                          <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                            {donutDataRating.map((entry) => (
+                              <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
+                                <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
+                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  {entry.name}: {entry.value}
+                                </Text>
+                              </Flex>
+                            ))}
+                          </SimpleGrid>
+                        </Box>
+                      </Box>
                     </Paper>
                   )}
                 </Stack>
@@ -508,18 +554,35 @@ function Kepuasan() {
                       Belum ada data untuk ditampilkan dalam grafik
                     </Text>
                   ) : (
-                    <Paper p="md" radius="md">
+                    <Paper p="md" radius="md" withBorder>
-                      <Stack>
+                      <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-                        <Center>
+                        <Box style={{ position: 'relative', width: '100%' }}>
-                          <PieChart
+                          <Center>
-                            size={isMobile ? 150 : 200}
+                            <PieChart
-                            withLabels
+                              withTooltip
-                            labelsPosition="outside"
+                              tooltipAnimationDuration={200}
-                            withLabelsLine
+                              withLabels
-                            data={donutDataKelompokUmur}
+                              labelsPosition="outside"
-                          />
+                              labelsType="percent"
-                        </Center>
+                              withLabelsLine
-                      </Stack>
+                              size={190}
+                              data={donutDataKelompokUmur}
+                            />
+                          </Center>
+                        </Box>
+                        <Box mt="md" style={{ width: '100%' }}>
+                          <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                            {donutDataKelompokUmur.map((entry) => (
+                              <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
+                                <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
+                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  {entry.name}: {entry.value}
+                                </Text>
+                              </Flex>
+                            ))}
+                          </SimpleGrid>
+                        </Box>
+                      </Box>
                     </Paper>
                   )}
                 </Stack>
@@ -542,7 +605,7 @@ function Kepuasan() {
               }}
             />
             <TextInput
-              label="Tanggal"
+              label="Tanggal Pengisian"
               type="date"
               placeholder="masukkan tanggal"
               defaultValue={state.create.form.tanggal}

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/jenis_infromasi/jenisInformasiSelector.tsx

@@ -32,7 +32,7 @@ export default function JenisInformasiSelector({ onChange }: {
   return (
     <Group>
       <Select
-        placeholder='pilih jenis informasi'
+        placeholder='Pilih jenis informasi'
         label='Jenis Informasi'
         data={data.map((item) => ({
           value: item.id,

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/memperoleh_informasi/memperolehInfromasi.tsx

@@ -28,7 +28,7 @@ function MemperolehInformasi({ onChange }: {
   return (
     <Group>
       <Select
-        placeholder='pilih cara memperoleh informasi'
+        placeholder='Pilih cara memperoleh informasi'
         label={"Cara Memperoleh Informasi"}
         data={data.map((item) => ({
           value: item.id,

src/app/darmasaba/(pages)/ppid/permohonan-informasi-publik/salinan_informasi/salinanInformasi.tsx

@@ -26,7 +26,7 @@ function MemperolehSalinan({ onChange }: {
   return (
     <Group>
       <Select
-        placeholder='pilih cara memperoleh salinan informasi'
+        placeholder='Pilih cara memperoleh salinan informasi'
         label={'Cara Memperoleh Salinan Informasi'}
         data={data.map((item) => ({
           value: item.id,

src/app/darmasaba/(pages)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -178,7 +178,7 @@ function Page() {
 
                   <TextInput
                     label="Alamat Email"
-                    placeholder="contoh: nama@email.com"
+                    placeholder="Contoh: nama@email.com"
                     radius="md"
                     size="md"
                     type="email"
@@ -190,7 +190,7 @@ function Page() {
 
                   <TextInput
                     label="Nomor Telepon"
-                    placeholder="contoh: 0812-3456-7890"
+                    placeholder="Contoh: 0812-3456-7890"
                     radius="md"
                     size="md"
                     withAsterisk

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

@@ -51,31 +51,37 @@ function Page() {
           <Box key={item.id} px={{ base: "md", md: 100 }}>
             <Paper p="xl" bg={colors['white-trans-1']} radius="lg" shadow="xl">
               <Box px={{ base: "md", md: 100 }}>
-                <Flex align="center" gap={40} justify="center">
+                <Center>
-                  <Image loading='lazy' src="/darmasaba-icon.png" h={{ base: 70, md: 120 }} alt="Logo Desa" />
+                  <Image loading='lazy' src="/darmasaba-icon.png" h={{ base: 70, md: 120 }} w={{ base: 70, md: 120 }} alt="Logo Desa" />
-                  <Text fz={{ base: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw="bold">
+                </Center>
-                    Pejabat Pengelola Informasi Publik
+                <Text ta="center" fz={{ base: "1.2rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw="bold">
-                  </Text>
+                  Pejabat Pengelola Informasi dan Dokumentasi
-                </Flex>
+                </Text>
               </Box>
               <Divider my="lg" />
 
               <Box px={{ base: 0, md: 50 }} pb={40}>
                 <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl">
                   <Box px={{ base: 0, md: 50 }}>
-                    <Paper bg={colors['white-trans-1']} radius="lg" shadow="sm">
+                    <Paper bg={colors['white-trans-1']} radius="xl" shadow="md" withBorder>
-                      <Stack gap="md">
+                      <Stack gap={0}>
-                        <Center>
+                        <Image
-                          <Image
+                          pt={{ base: 0, md: 100 }}
-                            loading='lazy'
+                          px="lg"
-                            src={item.image?.link ? `${item.image.link}?t=${Date.now()}` : "/perbekel.png"}
+                          src={item.image?.link ? `${item.image.link}?t=${Date.now()}` : "/perbekel.png"}
-                            w={{ base: 220, md: 330 }}
+                          alt="Foto Pimpinan"
-                            alt="Foto Pimpinan"
+                          radius="lg"
-                            radius="md"
+                          onError={(e) => e.currentTarget.src = "/perbekel.png"}
-                          />
+                          loading="lazy"
-                        </Center>
+                        />
-                        <Paper bg={colors['blue-button']} py={25} radius="lg" className="glass3">
+                        <Paper
-                          <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.5rem", md: "2rem" }}>
+                          bg={colors['blue-button']}
+                          px="lg"
+                          radius="0 0 var(--mantine-radius-xl) var(--mantine-radius-xl)"
+                          className="glass3"
+                          py={{ base: 20, md: 50 }}
+                        >
+                          <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "xl", md: "h2" }}>
                             {item.name}
                           </Text>
                         </Paper>

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

@@ -3,6 +3,7 @@
 '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'
 import {
   Box,
@@ -18,25 +19,23 @@ import {
   Text,
   TextInput,
   Title,
-  Tooltip,
+  Transition
-  Transition,
 } from '@mantine/core'
 import {
+  IconArrowsMaximize,
+  IconArrowsMinimize,
   IconRefresh,
   IconSearch,
   IconUsers,
   IconZoomIn,
   IconZoomOut,
-  IconArrowsMaximize,
-  IconArrowsMinimize,
 } from '@tabler/icons-react'
+import { debounce } from 'lodash'
+import { useTransitionRouter } from 'next-view-transitions'
 import { OrganizationChart } from 'primereact/organizationchart'
 import { useEffect, useRef, useState } from 'react'
 import { useProxy } from 'valtio/utils'
 import BackButton from '../../desa/layanan/_com/BackButto'
-import { useTransitionRouter } from 'next-view-transitions'
-import ScrollToTopButton from '@/app/darmasaba/_com/scrollToTopButton'
-import { debounce } from 'lodash'
 
 export default function Page() {
   return (
@@ -233,21 +232,42 @@ function StrukturOrganisasiPPID() {
   return (
     <Stack align="center" mt="xl">
       {/* 🔍 Search + Zoom + Fullscreen controls */}
-      <Group mb="md" justify="center" gap="sm">
+      <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)}
         />
+
         <Button variant="light" size="sm" onClick={handleZoomOut}>
           <IconZoomOut size={16} />
         </Button>
-        <Button variant="light" size="sm" onClick={resetZoom}>
+
-          100%
+        {/* 🔍 Tambahkan indikator zoom di sini */}
-        </Button>
+        {/* Floating Zoom Indicator */}
+        <Box
+          bg="#C3D0E8"
+          c="blue"
+          px={9}
+          py={8}
+          style={{
+            fontSize: 14,
+            fontWeight: 600,
+            borderRadius: '5px',
+          }}
+        >
+          {Math.round(scale * 100)}%
+        </Box>
+
+
         <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"
@@ -260,6 +280,7 @@ function StrukturOrganisasiPPID() {
         </Button>
       </Group>
 
+
       {/* Chart Container */}
       <Box
         ref={chartContainerRef}
@@ -324,7 +345,6 @@ function nodeTemplate(node: any, router: ReturnType<typeof useTransitionRouter>)
           <Text size="xs" c="dimmed" mt={8} lineClamp={3}>
             {description || 'Belum ada deskripsi.'}
           </Text>
-          <Tooltip label="Lihat Detail" withArrow position="bottom">
             <Button
               variant="light"
               size="xs"
@@ -336,7 +356,6 @@ function nodeTemplate(node: any, router: ReturnType<typeof useTransitionRouter>)
             >
               Lihat Detail
             </Button>
-          </Tooltip>
         </Card>
       )}
     </Transition>

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

@@ -54,12 +54,11 @@ function Page() {
                       ta="center"
                       fz={{ base: 28, md: 36 }}
                       fw={800}
-                      variant="gradient"
+                      c={colors['blue-button']}
-                      gradient={{ from: colors['blue-button'], to: 'cyan', deg: 45 }}
                     >
                       Moto PPID Desa Darmasaba
                     </Text>
-                    <Text ta="center" fz={{ base: 16, md: 20 }} mt="xs" c="dimmed">
+                    <Text ta="center" fz={{ base: 16, md: 20 }} mt="xs">
                       Memberikan informasi yang cepat, mudah, tepat, dan transparan
                     </Text>
                   </Box>
@@ -67,7 +66,8 @@ function Page() {
                   <Divider my="sm" labelPosition="center" label={<IconSparkles size={18} />} />
 
                   <Box>
-                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={700} mb="sm">
+                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={800}
+                      c={colors['blue-button']} mb="sm">
                       Visi PPID
                     </Text>
                     <Text
@@ -82,13 +82,13 @@ function Page() {
                   <Divider my="sm" />
 
                   <Box>
-                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={700} mb="sm">
+                    <Text ta="center" fz={{ base: 24, md: 30 }} fw={800}
+                      c={colors['blue-button']} mb="sm">
                       Misi PPID
                     </Text>
                     <Text
                       fz={{ base: 'md', md: 'lg' }}
                       lh={1.7}
-                      ta="center"
                       dangerouslySetInnerHTML={{ __html: item.misi }}
                       style={{wordBreak: "break-word", whiteSpace: "normal"}}
                     />

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

@@ -2,11 +2,11 @@
 'use client';
 import penghargaanState from "@/app/admin/(dashboard)/_state/desa/penghargaan";
 import colors from "@/con/colors";
-import { Carousel, CarouselSlide } from "@mantine/carousel";
+import { Carousel } from "@mantine/carousel";
-import { Box, Button, Container, Group, Paper, Stack, Text, useMantineTheme, Skeleton } from "@mantine/core";
+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 { IconAward, IconArrowRight } from "@tabler/icons-react";
 import { useTransitionRouter } from "next-view-transitions";
 import { useEffect, useRef } from "react";
 import { useProxy } from "valtio/utils";
@@ -18,7 +18,8 @@ export default function Page() {
       <Box px={{ base: "md", md: 100 }}>
         <BackButton />
       </Box>
-      <Container w={{ base: "100%", md: "60%" }}>
+      <Container w={{ base: "100%", md: "90%", lg: "60%" }}>
+
         <Stack align="center" gap="sm">
           <Group gap="xs">
             <IconAward size={40} color={colors["blue-button"]} />
@@ -37,11 +38,10 @@ export default function Page() {
 }
 
 function Slider() {
-  const height = 500;
-  const width = 1200;
   const theme = useMantineTheme();
   const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
-  const autoplay = useRef(Autoplay({ delay: 3000 }));
+  const tablet = useMediaQuery(`(max-width: ${theme.breakpoints.md})`);
+  const autoplay = useRef(Autoplay({ delay: 3000, stopOnInteraction: false }));
   const state = useProxy(penghargaanState);
   const router = useTransitionRouter();
 
@@ -54,7 +54,7 @@ function Slider() {
 
   if (loading) {
     return (
-      <Group justify="center" py="xl">
+      <Group justify="center" py="xl" gap="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" />
@@ -74,31 +74,49 @@ function Slider() {
   }
 
   const slides = data.map((item) => (
-    <CarouselSlide key={item.id}>
+    <Carousel.Slide key={item.id}>
       <Paper
-        h="100%"
         radius="lg"
         shadow="md"
         pos="relative"
         style={{
+          height: "100%",
           backgroundImage: `url(${item.image?.link})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
+          transition: "transform 0.3s ease, box-shadow 0.3s ease",
+        }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = "translateY(-4px)";
+          e.currentTarget.style.boxShadow = "0 8px 20px rgba(0,0,0,0.2)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = "translateY(0)";
+          e.currentTarget.style.boxShadow = "none";
         }}
       >
         <Box
           pos="absolute"
           inset={0}
-          bg="linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3))"
+          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="xl" fw={700} ta="center" c="white">
+          <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)" }}
+          >
             {item.name}
           </Text>
           <Group justify="center">
             <Button
-              onClick={() => router.push(`/darmasaba/penghargaan/${item.id}`)}
+              onClick={() =>
+                router.push(`/darmasaba/penghargaan/${item.id}`)
+              }
               size="md"
               radius="xl"
               rightSection={<IconArrowRight size={18} />}
@@ -110,24 +128,83 @@ function Slider() {
           </Group>
         </Stack>
       </Paper>
-    </CarouselSlide>
+    </Carousel.Slide>
   ));
 
   return (
-    <Carousel
+    <Box 
-      py="xl"
+      pos="relative" 
-      plugins={[autoplay.current]}
+      w="100%" 
-      onMouseEnter={autoplay.current.stop}
+      mx="auto" 
-      onMouseLeave={autoplay.current.reset}
+      px={{ base: "md", sm: "xl", md: "2rem", lg: "3rem" }}
-      w={{ base: "100%", sm: "90%", md: "80%", lg: width }}
+      style={{ 
-      h={height}
+        maxWidth: 1300,
-      slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
+      }}
-      slideGap="md"
-      loop
-      align="start"
-      slidesToScroll={mobile ? 1 : 2}
     >
-      {slides}
+      <Carousel
-    </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/_com/Footer.tsx

@@ -1,6 +1,8 @@
 'use client'
 import { ActionIcon, Anchor, Box, Button, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTiktok, IconBrandYoutube } from '@tabler/icons-react';
+import { useRef } from 'react';
+import { toast } from 'react-toastify';
 
 const sosialMedia = [
   {
@@ -60,6 +62,39 @@ const tautanPenting = [
 ]
 
 function Footer() {
+
+  const emailRef = useRef<HTMLInputElement>(null)
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const email = emailRef.current?.value.trim();
+    if (!email) return toast.error('Email wajib diisi!');
+
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(email)) return toast.error('Format email tidak valid!');
+
+    try {
+      const res = await fetch('/api/subscribe', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ email }),
+      });
+
+      const data = await res.json();
+
+      if (res.ok && data.success) {
+        toast.success('Berhasil! Cek email Anda untuk konfirmasi.');
+        emailRef.current!.value = '';
+      } else {
+        toast.error(data.message || 'Gagal berlangganan.');
+      }
+    } catch (err) {
+      console.error(err);
+      toast.error('Gagal menghubungi server. Coba lagi nanti.');
+    }
+  };
+
+
   return (
     <Stack bg="linear-gradient(180deg, #1C6EA4, #124170)" c="white">
       <Box w="100%" p="xl">
@@ -166,8 +201,9 @@ function Footer() {
                     w="70%"
                     placeholder="Masukkan email Anda"
                     rightSection={<IconAt size={16} />}
+                    ref={emailRef} // ini aja cukup
                   />
-                  <Button variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} radius="md">Daftar</Button>
+                  <Button onClick={handleSubmit} variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} radius="md">Daftar</Button>
                 </Group>
               </Stack>
             </Box>

src/app/darmasaba/_com/NavBarSearch.tsx

@@ -7,17 +7,20 @@ import GlobalSearch from "./globalSearch";
 export function NavbarSearch() {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
+  const isNavigatingRef = useRef(false);
 
   // Close when clicking outside
   useEffect(() => {
     function handleClickOutside(event: MouseEvent) {
       const target = event.target as HTMLElement;
-      // Only close if clicking outside both the search input and results
+      
-      if (
+      // Jangan close jika klik di search result item (biar handleSelect yang urus)
-        containerRef.current && 
+      if (target.closest('.search-result-item')) {
-        !containerRef.current.contains(target) &&
+        return;
-        !target.closest('.search-result-item') // Add a class to your search result items
+      }
-      ) {
+      
+      // Close jika klik di luar container
+      if (containerRef.current && !containerRef.current.contains(target)) {
         setIsOpen(false);
         stateNav.clear();
       }
@@ -29,6 +32,13 @@ export function NavbarSearch() {
     };
   }, []);
 
+  // Reset navigation flag saat component unmount atau route change
+  useEffect(() => {
+    return () => {
+      isNavigatingRef.current = false;
+    };
+  }, []);
+
   return (
     <Box
       ref={containerRef}

src/app/darmasaba/_com/Navbar.tsx

@@ -5,7 +5,7 @@ import stateNav from "@/state/state-nav";
 import { ActionIcon, Box, Burger, Group, Image, Paper, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconSquareArrowRight } from "@tabler/icons-react";
 import { motion } from "framer-motion";
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useSnapshot } from "valtio";
 import { MenuItem } from "../../../../types/menu-item";
 import { NavbarMainMenu } from "./NavbarMainMenu";
@@ -19,14 +19,18 @@ export function Navbar() {
       <Paper
         radius="0"
         className="glass2"
-        w="100%"
+        w="100vw"
         pos="fixed"
         top={0}
         style={{ zIndex: 100 }}
       >
-        <NavbarMainMenu listNavbar={navbarListMenu} />
+        {/* Desktop navbar (muncul mulai 992px ke atas) */}
+        <Box visibleFrom="md">
+          <NavbarMainMenu listNavbar={navbarListMenu} />
+        </Box>
 
-        <Box hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
+        {/* Mobile navbar (muncul di bawah 992px, termasuk iPad Mini) */}
+        <Box hiddenFrom="md" bg={colors.grey[2]} px="md" py="sm">
           <Group justify="space-between" wrap="nowrap">
             <ActionIcon
               variant="transparent"
@@ -37,11 +41,22 @@ export function Navbar() {
                 stateNav.mobileOpen = false;
               }}
             >
-              <Tooltip label="Go to homepage" position="bottom" withArrow>
+              <Tooltip label="Kembali ke Beranda" position="bottom" withArrow>
-                <Image src="/darmasaba-icon.png" alt="Village Logo" width={48} height={48} loading="lazy"/>
+                <Image
+                  src="/darmasaba-icon.png"
+                  alt="Village Logo"
+                  width={48}
+                  height={48}
+                  loading="lazy"
+                />
               </Tooltip>
             </ActionIcon>
-            <Tooltip label={mobileOpen ? "Close menu" : "Open menu"} position="bottom" withArrow>
+
+            <Tooltip
+              label={mobileOpen ? "Close menu" : "Open menu"}
+              position="bottom"
+              withArrow
+            >
               <Burger
                 opened={mobileOpen}
                 color={colors["blue-button"]}
@@ -50,12 +65,14 @@ export function Navbar() {
               />
             </Tooltip>
           </Group>
+
           {mobileOpen && (
             <Paper
               component={motion.div}
-              initial={{ x: '100%' }}
+              bg="white"
+              initial={{ x: "100%" }}
               animate={{ x: 0 }}
-              exit={{ x: '100%' }}
+              exit={{ x: "100%" }}
               transition={{ duration: 0.2 }}
               pos="absolute"
               left={0}
@@ -63,12 +80,14 @@ export function Navbar() {
               top="100%"
               m={0}
               radius={0}
+              shadow="md"
             >
               <NavbarMobile listNavbar={navbarListMenu} />
             </Paper>
           )}
         </Box>
       </Paper>
+
       {(item || isSearch) && <Box className="glass" />}
     </Box>
   );
@@ -76,40 +95,105 @@ export function Navbar() {
 
 function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
   const router = useRouter();
+  const pathname = usePathname(); // 👈 untuk cek path aktif
+
+  // fungsi bantu: cek apakah path sekarang sama dengan menu / sub-menu
+  const isActive = (href?: string) => href && pathname.startsWith(href);
+
   return (
-    <ScrollArea.Autosize mah="calc(100vh - 80px)" offsetScrollbars>
+    <ScrollArea.Autosize
-      <Stack p="md" gap="xs">
+      mah="calc(100dvh - 80px)"
-        {listNavbar.map((item, k) => (
+      type="auto"
-          <Box key={k}>
+      offsetScrollbars
-            <Group
+    >
-              justify="space-between"
+      <Stack p="sm" gap="xs">
-              align="center"
+        {listNavbar.map((item, k) => {
-              p="xs"
+          const active = isActive(item.href);
-              onClick={() => {
+          return (
-                if (item.href) {
+            <Box key={k}>
-                  router.push(item.href);
+              <Paper
-                  stateNav.mobileOpen = false;
+                shadow={active ? "sm" : "xs"}
-                }
+                radius="md"
-              }}
+                p="sm"
-              style={{
+                withBorder
-                cursor: item.href ? "pointer" : "default",
+                bg={active ? "blue.0" : "gray.0"}
-                opacity: item.href ? 1 : 0.8
+                onClick={() => {
-              }}
+                  if (item.href) {
-            >
+                    router.push(item.href);
-              <Text c="dark.9" fw={600} fz="md">
+                    stateNav.mobileOpen = false;
-                {item.name}
+                  }
-              </Text>
+                }}
-              <IconSquareArrowRight size={18} />
+                style={{
-            </Group>
+                  cursor: item.href ? "pointer" : "default",
-            {item.children && (
+                  transition: "background 0.15s ease",
-              <Box pl="md">
+                  borderLeft: active ? "4px solid #1e66f5" : "4px solid transparent",
-                <NavbarMobile listNavbar={item.children} />
+                }}
-              </Box>
+              >
-            )}
+                <Group justify="space-between" align="center" wrap="nowrap">
-          </Box>
+                  <Text
-        ))}
+                    fw={active ? 700 : 600}
+                    fz="md"
+                    c={active ? "blue.7" : "dark.9"}
+                  >
+                    {item.name}
+                  </Text>
+                  {item.href && (
+                    <IconSquareArrowRight
+                      size={18}
+                      color={active ? "#1e66f5" : "inherit"}
+                    />
+                  )}
+                </Group>
+              </Paper>
+
+              {/* Submenu */}
+              {item.children && (
+                <Box pl="md" mt={4}>
+                  {item.children.map((child, j) => {
+                    const childActive = isActive(child.href);
+                    return (
+                      <Group
+                        key={j}
+                        justify="space-between"
+                        align="center"
+                        p="xs"
+                        onClick={() => {
+                          if (child.href) {
+                            router.push(child.href);
+                            stateNav.mobileOpen = false;
+                          }
+                        }}
+                        style={{
+                          cursor: child.href ? "pointer" : "default",
+                          opacity: child.href ? 1 : 0.8,
+                          borderRadius: "0.5rem",
+                          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 ? "blue.7" : "dark.8"}
+                        >
+                          {child.name}
+                        </Text>
+                        <IconSquareArrowRight
+                          size={14}
+                          color={childActive ? "#1e66f5" : "inherit"}
+                        />
+                      </Group>
+                    );
+                  })}
+                </Box>
+              )}
+            </Box>
+          );
+        })}
       </Stack>
     </ScrollArea.Autosize>
   );
 }
 
+

src/app/darmasaba/_com/NavbarMainMenu.tsx

@@ -26,7 +26,7 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
     <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
       <Container pos="relative" w={{ base: '100%', md: '80%' }} fluid>
         <Flex align="center" justify="space-between" wrap={{ base: "wrap", md: "nowrap" }}>
-          <Tooltip label="Go to Homepage" position="bottom" withArrow>
+          <Tooltip label="Kembali ke Beranda" position="bottom" withArrow>
             <ActionIcon
               radius="xl"
               variant="transparent"
@@ -50,12 +50,12 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
             <MenuItemCom 
             key={k} 
             item={item}
-            isActive={pathname === item.href || 
+            isActive={item.href && pathname.startsWith(item.href) || 
-              (item.children?.some(child => child.href === pathname))}
+              (item.children?.some(child => child.href && pathname.startsWith(child.href)))}
             />
           ))}
 
-          <Tooltip label="Search content" position="bottom" withArrow>
+          <Tooltip label="Cari Konten" position="bottom" withArrow>
             <ActionIcon
               variant="transparent"
               c={isSearch ? 'gray' : colors["blue-button"]}
@@ -71,7 +71,7 @@ export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
 
           {/* hanya tampil kalau role = admin */}
           {stateAuth.role === "admin" && (
-            <Tooltip label="My Profile" position="bottom" withArrow>
+            <Tooltip label="Profil Saya" position="bottom" withArrow>
               <ActionIcon
                 onClick={() => {
                   next.push("/admin/landing-page/profile/program-inovasi")

src/app/darmasaba/_com/NavbarSubMenu.tsx

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

src/app/darmasaba/_com/globalSearch.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
+
 import searchState, { debouncedFetch } from '@/app/api/[[...slugs]]/_lib/search/searchState';
 import { Box, Center, Loader, Popover, Text, TextInput } from '@mantine/core';
 import { IconX } from '@tabler/icons-react';
@@ -10,36 +11,85 @@ import getDetailUrl from './searchUrl';
 export default function GlobalSearch() {
   const snap = useSnapshot(searchState);
   const [opened, setOpened] = useState(false);
+  const [isNavigating, setIsNavigating] = useState(false);
 
-  // buka popover saat ada query
+  // Buka popover saat ada query
   useEffect(() => {
     setOpened(!!snap.query);
   }, [snap.query]);
 
-  // infinite scroll
+  // Infinite scroll handler
   useEffect(() => {
     const handleScroll = () => {
-      const bottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 200;
+      const nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 200;
-      if (bottom && !snap.loading) searchState.next();
+      if (nearBottom && !snap.loading) searchState.next();
     };
     window.addEventListener('scroll', handleScroll);
     return () => window.removeEventListener('scroll', handleScroll);
   }, [snap.loading]);
 
   const handleSelect = async (e: React.MouseEvent, item: any) => {
-    e.stopPropagation();
     e.preventDefault();
+    e.stopPropagation();
+  
+    if (isNavigating) return;
+    setIsNavigating(true);
+  
+    try {
+      // 🔥 pastikan objek udah “dikeluarkan” dari Proxy valtio
+      const rawItem = JSON.parse(JSON.stringify(item));
+  
+      // 🔥 pastikan type-nya string murni
+      const type = String(rawItem.type || '').trim().toLowerCase();
+  
+      // 🔥 panggil getDetailUrl pakai type yang fix
+      let url = getDetailUrl({ ...rawItem, type });
+  
+      // kalau hasil undefined atau default, fallback ke link eksternal
+      if (!url || url === '/darmasaba') {
+        if (rawItem.link && rawItem.link.startsWith('http')) {
+          url = rawItem.link;
+        }
+      }
+  
+      if (!url) {
+        console.warn('URL tidak ditemukan untuk item:', rawItem);
+        setIsNavigating(false);
+        return;
+      }
+  
+      console.log('Navigating to:', url);
+  
+      // tutup popover dulu
+      setOpened(false);
+      searchState.query = '';
+      searchState.results = [];
+      searchState.loading = false;
+  
+      // kasih delay biar UI nutup dulu
+      await new Promise((r) => setTimeout(r, 100));
+  
+      // navigasi
+      if (url.startsWith('http')) {
+        window.location.href = url;
+      } else {
+        window.location.href = url;
+      }
+  
+    } catch (err) {
+      console.error('Error saat navigasi:', err);
+      setIsNavigating(false);
+    }
+  };
+  
 
-    const url = getDetailUrl(item);
+  const clearSearch = () => {
-    if (!url) return;
+    searchState.query = '';
-
+    searchState.results = [];
-    // Immediately close the search dropdown
+    searchState.page = 1;
+    searchState.nextPage = null;
     setOpened(false);
-    searchState.results = [];  // Clear results immediately
+    setIsNavigating(false);
-    searchState.loading = false;
-
-    // Use window.location for navigation to ensure full page reload
-    window.location.href = url;
   };
 
   return (
@@ -47,13 +97,7 @@ export default function GlobalSearch() {
       <Popover
         opened={opened && !!snap.query}
         onChange={(isOpen) => {
-          if (!isOpen) {
+          if (!isOpen) clearSearch();
-            // Clear search state when popover is closed
-            searchState.query = '';
-            searchState.results = [];
-            searchState.page = 1;
-            searchState.nextPage = null;
-          }
           setOpened(isOpen);
         }}
         width="target"
@@ -61,10 +105,14 @@ export default function GlobalSearch() {
         shadow="md"
         withinPortal
         radius="md"
-        zIndex={1000}  // Add this line to ensure it appears above other elements
+        zIndex={2000}
+        closeOnClickOutside={true}
+        closeOnEscape={true}
         styles={{
           dropdown: {
-            zIndex: 1000,  // Add this to ensure the dropdown appears above other elements
+            zIndex: 2000,
+            borderRadius: 12,
+            overflow: 'hidden',
           },
         }}
       >
@@ -83,13 +131,7 @@ export default function GlobalSearch() {
                 <IconX
                   size={16}
                   style={{ cursor: 'pointer' }}
-                  onClick={() => {
+                  onClick={clearSearch}
-                    searchState.query = '';
-                    searchState.results = [];
-                    searchState.page = 1;
-                    searchState.nextPage = null;
-                    setOpened(false);
-                  }}
                 />
               ) : undefined
             }
@@ -101,34 +143,32 @@ export default function GlobalSearch() {
           style={{
             maxHeight: 350,
             overflowY: 'auto',
-            borderRadius: 12,
+            backgroundColor: '#fff',
-            zIndex: 1000, // Add this line to ensure dropdown stays above other elements
+            border: '1px solid #eee',
-            position: 'relative', // Add this to contain child elements
           }}
         >
-          {snap.results.length > 0 ? (
+          {[...snap.results].length > 0 ? (
-            snap.results.map((item, i) => (
+            [...snap.results].map((item: any, i: number) => (
               <Box
                 key={i}
                 p="sm"
-                className="search-result-item"  // Add this class
+                className="search-result-item" // Add class untuk prevent close
                 style={{
-                  borderBottom: '1px solid #eee',
+                  borderBottom: '1px solid #f1f1f1',
-                  cursor: 'pointer',
+                  cursor: isNavigating ? 'wait' : 'pointer',
+                  background: 'white',
                   transition: 'background 0.2s',
-                  position: 'relative', // Add this
+                  opacity: isNavigating ? 0.6 : 1,
-                  zIndex: 1, // Add this to ensure proper stacking context
-                  backgroundColor: 'white', // Ensure background is set
                 }}
-                onMouseEnter={(e) => (e.currentTarget.style.background = '#f7f7f7')}
+                onMouseEnter={(e) => !isNavigating && (e.currentTarget.style.background = '#f9f9f9')}
-                onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+                onMouseLeave={(e) => (e.currentTarget.style.background = 'white')}
-                onClick={(e) => handleSelect(e, item)}  // Pass the event here
+                onClick={(e) => handleSelect(e, item)}
               >
-                <Text size="sm" fw={500}>
+                <Text size="sm" fw={500} lineClamp={1}>
-                  {item.judul || item.namaPasar || item.nama || item.name}
+                  {item.name ?? item.nama ?? item.namaPasar ?? item.judul ?? '(Tanpa nama)'}
                 </Text>
-                <Text size="xs" c="dimmed">
+                <Text size="xs" c="dimmed" lineClamp={1}>
-                  dari modul: {item.type}
+                  dari modul: {item.type || '-'}
                 </Text>
               </Box>
             ))
@@ -141,4 +181,4 @@ export default function GlobalSearch() {
       </Popover>
     </Box>
   );
-}
+}

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

@@ -34,13 +34,13 @@ function Apbdes() {
   const data = (state.findMany.data || []).slice(0, 3)
 
   return (
-    <Stack p="lg" gap="4rem" bg={colors.Bg}>
+    <Stack p="sm" gap="xl" bg={colors.Bg}>
       <Box>
         <Stack gap="sm">
-          <Text ta={"center"} fz={{ base: '2.4rem', sm: '4rem' }} fw="bold" lh={1.2}>
+          <Text c={colors["blue-button"]} ta={"center"} fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>
             {textHeading.title}
           </Text>
-          <Text ta={"center"} fz={{ base: '1rem', sm: '1.3rem' }} c="dimmed">
+          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
             {textHeading.des}
           </Text>
         </Stack>
@@ -117,7 +117,7 @@ function Apbdes() {
         )}
       </SimpleGrid>
 
-      <Group pb={80} justify="center">
+      <Group justify="center" pb={10}>
         <Button
           component={Link}
           href="/darmasaba/apbdes"

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

@@ -30,9 +30,9 @@ function DesaAntiKorupsi() {
   const data = (state.desaAntikorupsi.findMany.data || []).slice(0, 6);
   return (
     <Stack gap={"0"} bg={colors.Bg} p={"sm"}>
-      <Container w={{ base: "100%", md: "80%" }} p={"xl"} >
+      <Container w={{ base: "100%", md: "80%" }} p={"md"} >
         <Center>
-          <Text fw={"bold"} fz={{ base: "1.8rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>
+          <Text fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>Desa Anti Korupsi</Text>
         </Center>
         <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan.</Text>
         <Center py={20}>

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

@@ -23,7 +23,7 @@ function Kepuasan() {
   const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
   const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
   const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
-  const [barChartData, setBarChartData] = useState<Array<{ month: string; count: number }>>([]);
+  const [barChartData, setBarChartData] = useState<Array<{ month: string; Responden: number }>>([]);
   const [opened, { open, close }] = useDisclosure(false)
 
   const resetForm = () => {
@@ -121,18 +121,18 @@ function Kepuasan() {
 
       // Convert map to array and sort by date
       const barData = Array.from(monthYearMap.entries())
-        .map(([key, count]) => {
+        .map(([key, Responden]) => {
           const [year, month] = key.split('-');
           const monthName = new Date(Number(year), Number(month) - 1, 1)
             .toLocaleString('id-ID', { month: 'long' });
           return {
             month: `${monthName} ${year}`,
-            count,
+            Responden,
             sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
           };
         })
         .sort((a, b) => a.sortKey - b.sortKey)
-        .map(({ month, count }) => ({ month, count }));
+        .map(({ month, Responden }) => ({ month, Responden }));
 
       setBarChartData(barData);
     }
@@ -140,7 +140,7 @@ function Kepuasan() {
 
   if ((loading && !data) || !data) {
     return (
-      <Stack py={10} px="xl">
+      <Stack py={10} px="sm">
         <Skeleton height={300} mb="md" />
         <SimpleGrid cols={{ base: 1, md: 3 }}>
           <Skeleton height={300} />
@@ -154,11 +154,17 @@ function Kepuasan() {
   if (data.length === 0) {
     return (
       <Stack p="sm">
-        <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
+        <Container w={{ base: "100%", md: "80%" }} p={"sm"}>
           <Center>
-            <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+            <Text
+              ta="center"
+              fz={{ base: '2rem', md: '2.8rem' }}
+              c={colors['blue-button']}
+              fw={800}
+              style={{ letterSpacing: '-0.5px' }}
+            >Indeks Kepuasan Masyarakat</Text>
           </Center>
-          <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+          <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
           <Center mt={10}>
             <Button
               radius={"lg"}
@@ -168,7 +174,7 @@ function Kepuasan() {
             >Ajukan Responden</Button>
           </Center>
         </Container>
-        <Box px={"xl"}>
+        <Box px={"sm"}>
           <Paper p={"lg"} bg={colors.Bg}>
             <Paper p={"lg"}>
               <Stack gap={"xs"}>
@@ -185,7 +191,7 @@ function Kepuasan() {
                   h={window.innerWidth < 480 ? 200 : 300}
                   data={barChartData}
                   dataKey="month"
-                  series={[{ name: 'count', color: colors['blue-button'] }]}
+                  series={[{ name: 'Responden', color: colors['blue-button'] }]}
                   tickLine="y"
                   xAxisLabel="Bulan"
                   yAxisLabel="Jumlah Responden"
@@ -416,16 +422,22 @@ function Kepuasan() {
   }
   return (
     <Stack p={"sm"}>
-     <Container size="lg" px="md">
+      <Container size="lg" px="sm">
         <Center>
-          <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+          <Text
+            ta="center"
+            fz={{ base: '2rem', md: '2.8rem' }}
+            c={colors['blue-button']}
+            fw={800}
+            style={{ letterSpacing: '-0.5px' }}
+          >Indeks Kepuasan Masyarakat</Text>
         </Center>
         <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
         <Center mt={10}>
           <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
         </Center>
       </Container>
-      <Box px={"xl"}>
+      <Box px={"md"}>
         <Paper p={"lg"} bg={colors.Bg}>
           <Paper p={"lg"}>
             <Stack gap={"xs"}>
@@ -448,7 +460,7 @@ function Kepuasan() {
                 h={300}
                 data={barChartData}
                 dataKey="month"
-                series={[{ name: 'count', color: colors['blue-button'] }]}
+                series={[{ name: 'Responden', color: colors['blue-button'] }]}
                 tickLine="y"
                 xAxisLabel="Bulan"
                 yAxisLabel="Jumlah Responden"
@@ -605,7 +617,7 @@ function Kepuasan() {
               }}
             />
             <TextInput
-              label="Tanggal"
+              label="Tanggal Pengisian"
               type="date"
               placeholder="masukkan tanggal"
               defaultValue={state.create.form.tanggal}

src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx

@@ -29,42 +29,42 @@ function ModuleItem({ data }: { data: ProgramInovasiItem }) {
 
   return (
     <motion.div whileHover={{ scale: 1.03 }}>
-        <Paper
+      <Paper
-          onClick={() => router.push(`/darmasaba/program-inovasi/${data.id}`)}
+        onClick={() => router.push(`/darmasaba/program-inovasi/${data.id}`)}
-          p="lg"
+        p="lg"
-          radius="xl"
+        radius="xl"
-          shadow="sm"
+        shadow="sm"
-          role="button"
+        role="button"
-          tabIndex={0}
+        tabIndex={0}
-          className="cursor-pointer transition-all"
+        className="cursor-pointer transition-all"
-          bg={isDark ? "dark.6" : "white"}
+        bg={isDark ? "dark.6" : "white"}
-        >
+      >
-          <Center h={160}>
+        <Center h={160}>
-            {data.image?.link ? (
+          {data.image?.link ? (
-              <Image
+            <Image
-                src={data.image.link}
+              src={data.image.link}
-                alt={data.name}
+              alt={data.name}
-                radius="md"
+              radius="md"
-                fit="cover"
+              fit="contain"
-                h={140}
+              h={140}
-                w="100%"
+              w="100%"
-                loading="lazy"
+              style={{ objectPosition: "center" }}
-              />
+            />
-            ) : (
+          ) : (
-              <Stack align="center" gap="xs">
+            <Stack align="center" gap="xs">
-                <IconPhotoOff size={38} stroke={1.5} />
+              <IconPhotoOff size={38} stroke={1.5} />
-                <Text size="sm" c="dimmed">
+              <Text size="sm" c="dimmed">
-                  Belum ada gambar
+                Belum ada gambar
-                </Text>
+              </Text>
-              </Stack>
+            </Stack>
-            )}
+          )}
-          </Center>
+        </Center>
-          <Box mt="md">
+        <Box mt="md">
-            <Text fw={600} ta="center" size="md">
+          <Text fw={600} ta="center" size="md">
-              {data.name}
+            {data.name}
-            </Text>
+          </Text>
-          </Box>
+        </Box>
-        </Paper>
+      </Paper>
     </motion.div>
   );
 }
@@ -110,11 +110,11 @@ function ModuleView() {
         viewport: { paddingRight: 8 }, // kasih jarak biar scroll nggak dempet
       }}
     >
-    <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mt="lg">
+      <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg" mt="lg">
-      {listImageState.findMany.data?.map((item) => (
+        {listImageState.findMany.data?.map((item) => (
-        <ModuleItem key={item.id} data={item} />
+          <ModuleItem key={item.id} data={item} />
-      ))}
+        ))}
-    </SimpleGrid>
+      </SimpleGrid>
     </ScrollArea>
   );
 }

src/app/darmasaba/_com/main-page/landing-page/ProfileView.tsx

@@ -30,20 +30,41 @@ export default function ProfileView({ data }: ProfileViewProps) {
       justify="end"
       align="end"
       pos="relative"
-      w={{ base: '100%', md: '40%' }}
+      w={{
-      px="xl"
+        base: '100%',    // mobile: full width
+        xs: '100%',      // small mobile
+        sm: '85%',       // tablet: 85%
+        md: '60%',       // laptop: 60%
+        lg: '55%',       // laptop large: 55%
+        xl: '50%'        // extra large (4K): 50%
+      }}
+      px={{ base: 'md', sm: 'lg', md: 'xl', xl: '2xl' }}
+      h={{ base: 'auto', sm: '500px', md: '600px', lg: '650px', xl: '700px' }}
     >
       {data.image?.link ? (
-        <Image
+        <Box
-          src={data.image.link}
+          pos="relative"
-          alt={data.name || 'Foto profil'}
+          w="100%"
-          fit="contain"
+          h="100%"
-          radius="lg"
-          loading="lazy"
           style={{
-            objectPosition: 'bottom center',
+            display: 'flex',
+            alignItems: 'flex-end',
+            justifyContent: 'center',
           }}
-        />
+        >
+          <Image
+            src={data.image.link}
+            alt={data.name || 'Foto profil'}
+            fit="contain"
+            radius="lg"
+            loading="lazy"
+            w="100%"
+            h="100%"
+            style={{
+              objectPosition: 'center bottom',
+            }}
+          />
+        </Box>
       ) : (
         <Stack align="center" gap="xs" w="100%" py="xl">
           <IconUserCircle size={96} stroke={1.5} />
@@ -53,36 +74,47 @@ export default function ProfileView({ data }: ProfileViewProps) {
         </Stack>
       )}
 
-      {/* Box nama dan jabatan - sedikit overlap dengan gambar */}
+      {/* Box nama dan jabatan - responsive positioning */}
       <Box
         pos="absolute"
-        bottom={-20} // bikin naik sedikit ke gambar
+        bottom={{ base: -30, sm: -25, md: -20 }}
         right={0}
-        w="100%"
+        w={{ base: '95%', sm: '100%' }}
-        p={{ base: 'xs', md: 'md' }}
+        px={{ base: 'xs', sm: 'sm', md: 'md' }}
-        style={{ pointerEvents: 'none' }} // biar ga ganggu klik di gambar
+        style={{ pointerEvents: 'none' }}
       >
         <Card
-          px="lg"
+          px={{ base: 'md', sm: 'lg' }}
-          py="sm"
+          py={{ base: 'xs', sm: 'sm' }}
           radius="lg"
           withBorder
           style={{
             boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
             backdropFilter: 'blur(6px)',
             pointerEvents: 'auto',
+            backgroundColor: 'rgba(255, 255, 255, 0.95)',
           }}
         >
           <Tooltip label="Jabatan Resmi" withArrow>
-            <Text fz="sm" c="dimmed">
+            <Text
+              fz={{ base: 'xs', sm: 'sm' }}
+              c="dimmed"
+              lineClamp={1}
+            >
               {data.position || 'Tidak ada jabatan'}
             </Text>
           </Tooltip>
-          <Text c={colors['blue-button']} fw={700} fz="xl" mt={4}>
+          <Text
+            c={colors['blue-button']}
+            fw={700}
+            fz={{ base: 'lg', sm: 'xl' }}
+            mt={4}
+            lineClamp={2}
+          >
             {data.name}
           </Text>
         </Card>
       </Box>
     </Stack>
   );
-}
+}

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

@@ -1,26 +1,27 @@
 "use client";
 import colors from "@/con/colors";
-import { Prisma } from "@prisma/client";
 import {
+  Badge,
   Box,
   Card,
-  Skeleton,
+  Center,
   Flex,
   Grid,
   GridCol,
+  Group,
   Image,
   Paper,
+  Skeleton,
   Stack,
   Text,
-  Center,
   Tooltip,
-  Badge,
 } from "@mantine/core";
+import { Prisma } from "@prisma/client";
 import { IconCalendarTime, IconInfoCircle } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import ModuleView from "./ModuleView";
-import SosmedView from "./SosmedView";
 import ProfileView from "./ProfileView";
+import SosmedView from "./SosmedView";
 
 const getDayOfWeek = () => {
   const days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
@@ -120,23 +121,21 @@ function LandingPage() {
   }, []);
 
   return (
-    <Stack bg={colors.Bg} p="md" gap="xl">
+    <Stack bg={colors.Bg} p="md" gap="lg">
       <Flex gap="lg" wrap={{ base: "wrap", md: "nowrap" }}>
         <Stack w={{ base: "100%", md: "65%" }} gap="lg">
           <Card radius="xl" bg={colors.grey[1]} p="lg" shadow="xl">
             <Stack gap="xl">
               <Flex gap="md" wrap="wrap">
+                <Group>
+                  <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
+                    <Image loading="lazy" src="/darmasaba-icon.png" alt="Logo Darmasaba" fit="contain" />
+                  </Box>
+                  <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
+                    <Image loading="lazy" src="/pudak-icon.png" alt="Logo Pudak" fit="contain" />
+                  </Box>
+                </Group>
                 <Grid w="100%">
-                  <Grid.Col span={{ base: 3, sm: 2 }}>
-                    <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
-                      <Image loading="lazy" src="/darmasaba-icon.png" alt="Logo Darmasaba" fit="contain" />
-                    </Box>
-                  </Grid.Col>
-                  <Grid.Col span={{ base: 9, sm: 10 }}>
-                    <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
-                      <Image loading="lazy" src="/pudak-icon.png" alt="Logo Pudak" fit="contain" />
-                    </Box>
-                  </Grid.Col>
                   <Grid.Col span={12}>
                     <Paper
                       bg={colors["blue-button"]}
@@ -199,7 +198,7 @@ function LandingPage() {
               )}
 
               <Text ta="center" c={colors.trans.dark[2]}>
-                Bagikan ide, kritik, atau saran Anda untuk mendukung pembangunan desa. 
+                Bagikan ide, kritik, atau saran Anda untuk mendukung pembangunan desa.
                 Semua lebih mudah dengan fitur interaktif yang kami sediakan.
               </Text>
             </Stack>

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

@@ -30,17 +30,13 @@ const textHeading = {
 function Layanan() {
 
  return (
-   <Stack pos={"relative"} bg={colors.grey[1]} gap={"42"} py={"xl"}>
+   <Stack pos={"relative"} bg={colors.grey[1]} gap={"xl"} py={"md"}>
-     <Container w={{ base: "100%", md: "50%" }} p={"xl"}>
+     <Container w={{ base: "100%", md: "80%" }} p={"md"} >
        <Stack align="center" gap={"0"}>
-         <Text fz={"3.4rem"} fw={"bold"}>
+       <Text fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>
            {textHeading.title}
          </Text>
-         <Text
+         <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
-           style={{
-             textAlign: "center",
-           }}
-         >
            {textHeading.des}
          </Text>
          <Box p={"md"}>

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

@@ -6,6 +6,7 @@ import {
   BackgroundImage,
   Box,
   Button,
+  Container,
   Divider,
   Group,
   Loader,
@@ -48,15 +49,15 @@ function Potensi() {
   const data = (state.findMany.data || []).slice(0, 4);
 
   return (
-    <Stack p="sm" gap="4rem">
+    <Stack p="sm" gap="xl">
-      <Box>
+      <Container w={{ base: "100%", md: "80%" }} p={"md"} >
-        <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }} fw={700} c={colors["blue-button"]}>
+       <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "1.8rem", md: "3.4rem" }}>
           {textHeading.title}
         </Text>
-        <Text ta={"center"} fz={{ base: "1.4rem", md: "1.6rem" }} c="black">
+        <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
           {textHeading.des}
         </Text>
-      </Box>
+      </Container>
 
       {loading ? (
         <Stack align="center" justify="center" h={300}>

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

@@ -35,7 +35,7 @@ function Prestasi() {
         <Stack align="center" gap="sm">
           <Group gap="xs">
             <IconTrophy size={36} color={colors["blue-button"]} />
-            <Text ta="center" fz={{ base: "2rem", md: "3.4rem" }} fw={700}>
+            <Text c={colors["blue-button"]} ta="center" fz={{ base: "2rem", md: "3.4rem" }} fw={700}>
               Prestasi Desa
             </Text>
           </Group>
@@ -55,7 +55,7 @@ function Prestasi() {
         </Stack>
       </Container>
 
-      <Box py={50}>
+      <Box py="lg">
         {loading ? (
           <Center mih={200}>
             <Loader color={colors["blue-button"]} size="xl" />

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

@@ -5,6 +5,7 @@ import { useMediaQuery } from "@mantine/hooks"
 import { Prisma } from "@prisma/client"
 import Link from "next/link"
 import { IconMoodSad } from "@tabler/icons-react"
+import colors from "@/con/colors"
 
 export default function SDGS() {
   const theme = useMantineTheme()
@@ -41,20 +42,16 @@ export default function SDGS() {
             order={1}
             fz={{ base: "2.4rem", md: "3.6rem" }}
             fw={900}
-            style={{
+            c={colors["blue-button"]}
-              background: "linear-gradient(90deg, #1A5F7A, #159895)",
-              WebkitBackgroundClip: "text",
-              WebkitTextFillColor: "transparent",
-            }}
           >
             SDGs Desa
           </Title>
         </Center>
-        <Text fz={{ base: "1rem", md: "1.2rem" }} ta="center" c="dimmed" mt="md" maw={820} mx="auto">
+        <Text ta={"center"} fz={{ base: "1rem", md: "1.3rem" }}>
           SDGs Desa merupakan langkah nyata untuk mewujudkan desa yang maju, inklusif, dan berkelanjutan melalui 17 tujuan pembangunan dari pengentasan kemiskinan, pendidikan, kesehatan, kesetaraan gender, hingga pelestarian lingkungan.
         </Text>
 
-        <Box py={50}>
+        <Box py="lg">
           <Paper
             p={{ base: "md", md: "xl" }}
             radius="2xl"
@@ -156,7 +153,7 @@ export default function SDGS() {
               href="/darmasaba/sdgs-desa"
               radius="xl"
               size="lg"
-              mt={40}
+              mt="md"
               variant="gradient"
               gradient={{ from: "#26667F", to: "#124170" }}
               style={{ boxShadow: "0 6px 14px rgba(18,65,112,0.25)"}}

src/app/darmasaba/_com/searchUrl.tsx

@@ -1,91 +1,92 @@
 const getDetailUrl = (item: { type?: string; id: string | number; [key: string]: unknown }) => {
   const { type, id, kategori } = item;
-  const typeUrlMap: Record<string, string> = {
+  const map: Record<string, (id: string | number, kategori?: string) => string> = {
-    programinovasi: `/darmasaba/program-inovasi/${id}`,
+    programinovasi: (id) => `/darmasaba/program-inovasi/${id}`,
-    desaantikorupsi: '/darmasaba/desa-anti-korupsi',
+    desaantikorupsi: () => '/darmasaba/desa-anti-korupsi',
-    sdgsdesa: '/darmasaba/sdgs-desa',
+    sdgsdesa: () => '/darmasaba/sdgs-desa',
-    apbdes: '/darmasaba/apbdes',
+    apbdes: () => '/darmasaba/apbdes',
-    prestasidesa: '/darmasaba/prestasi-desa',
+    prestasidesa: () => '/darmasaba/prestasi-desa',
-    pejabatdesa: '/darmasaba/profile/pejabat-desa',
+    pejabatdesa: () => '/darmasaba/ppid/profile-ppid',
-    strukturppid: '/darmasaba/ppid/struktur-ppid',
+    strukturppid: () => '/darmasaba/ppid/struktur-ppid',
-    visimisippid: '/darmasaba/ppid/visi-misi',
+    visimisippid: () => '/darmasaba/ppid/visi-misi',
-    dasarhukumppid: '/darmasaba/ppid/dasar-hukum',
+    dasarhukumppid: () => '/darmasaba/ppid/dasar-hukum',
-    profileppid: '/darmasaba/ppid/profile',
+    profileppid: () => '/darmasaba/ppid/profile',
-    daftarinformasipublik: '/darmasaba/ppid/daftar-informasi-publik',
+    daftarinformasipublik: () => '/darmasaba/ppid/daftar-informasi-publik',
-    perbekeldarmasaba: '/darmasaba/desa/profile',
+    perbekeldarmasaba: () => '/darmasaba/desa/profile',
-    berita: `/darmasaba/desa/berita/${kategori}/${id}`,
+    berita: (id, kategori) => `/darmasaba/desa/berita/${kategori}/${id}`,
-    pengumuman: `/darmasaba/desa/pengumuman/${kategori}/${id}`,
+    pengumuman: (id, kategori) => `/darmasaba/desa/pengumuman/${kategori}/${id}`,
-    sejarahdesa: '/darmasaba/desa/profile',
+    sejarahdesa: () => '/darmasaba/desa/profile',
-    visimisidesa: '/darmasaba/desa/profile',
+    visimisidesa: () => '/darmasaba/desa/profile',
-    lambangdesa: '/darmasaba/desa/profile',
+    lambangdesa: () => '/darmasaba/desa/profile',
-    maskotdesa: '/darmasaba/desa/profile',
+    maskotdesa: () => '/darmasaba/desa/profile',
-    profilperbekel: '/darmasaba/desa/profile',
+    profilperbekel: () => '/darmasaba/desa/profile',
-    potensi: '/darmasaba/desa/potensi-desa',
+    potensi: () => '/darmasaba/desa/potensi-desa',
-    galleryFoto: '/darmasaba/desa/gallery/foto',
+    galleryFoto: () => '/darmasaba/desa/gallery/foto',
-    galleryVideo: '/darmasaba/desa/gallery/video',
+    galleryVideo: () => '/darmasaba/desa/gallery/video',
-    pelayananSuratKeterangan: '/darmasaba/desa/layanan',
+    pelayananSuratKeterangan: () => '/darmasaba/desa/layanan',
-    pelayananPerizinanBerusaha: '/darmasaba/desa/layanan',
+    pelayananPerizinanBerusaha: () => '/darmasaba/desa/layanan',
-    pelayananTelunjukSaktiDesa: '/darmasaba/desa/layanan',
+    pelayananTelunjukSaktiDesa: () => '/darmasaba/desa/layanan',
-    pelayananPendudukNonPermanent: '/darmasaba/desa/layanan',
+    pelayananPendudukNonPermanent: () => '/darmasaba/desa/layanan',
-    penghargaan: '/darmasaba/desa/penghargaan',
+    penghargaan: () => '/darmasaba/desa/penghargaan',
-    posyandu: '/darmasaba/kesehatan/posyandu',
+    posyandu: (id) => `/darmasaba/kesehatan/posyandu/${id}`,
-    fasilitasKesehatan: '/darmasaba/kesehatan/data-kesehatan-warga',
+    fasilitasKesehatan: () => '/darmasaba/kesehatan/data-kesehatan-warga',
-    jadwalKegiatan: '/darmasaba/kesehatan/data-kesehatan-warga',
+    jadwalKegiatan: () => '/darmasaba/kesehatan/data-kesehatan-warga',
-    artikelKesehatan: '/darmasaba/kesehatan/data-kesehatan-warga',
+    artikelKesehatan: () => '/darmasaba/kesehatan/data-kesehatan-warga',
-    puskesmas: '/darmasaba/kesehatan/puskesmas',
+    puskesmas: () => '/darmasaba/kesehatan/puskesmas',
-    programKesehatan: '/darmasaba/kesehatan/program-kesehatan',
+    programKesehatan: () => '/darmasaba/kesehatan/program-kesehatan',
-    penangananDarurat: '/darmasaba/kesehatan/penanganan-darurat',
+    penangananDarurat: () => '/darmasaba/kesehatan/penanganan-darurat',
-    kontakDarurat: '/darmasaba/kesehatan/kontak-darurat',
+    kontakDarurat: () => '/darmasaba/kesehatan/kontak-darurat',
-    infoWabahPenyakit: '/darmasaba/kesehatan/info-wabah-penyakit',
+    infoWabahPenyakit: () => '/darmasaba/kesehatan/info-wabah-penyakit',
-    keamananLingkungan: '/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal',
+    keamananLingkungan: () => '/darmasaba/keamanan/keamanan-lingkungan-pecalang-patwal',
-    polsekTerdekat: '/darmasaba/keamanan/polsek-terdekat',
+    polsekTerdekat: () => '/darmasaba/keamanan/polsek-terdekat',
-    kontakDaruratKeamanan: '/darmasaba/keamanan/kontak-darurat',
+    kontakDaruratKeamanan: () => '/darmasaba/keamanan/kontak-darurat',
-    pencegahanKriminalitas: '/darmasaba/keamanan/pencegahan-kriminalitas',
+    pencegahanKriminalitas: () => '/darmasaba/keamanan/pencegahan-kriminalitas',
-    laporanPublik: '/darmasaba/keamanan/laporan-publik',
+    laporanPublik: () => '/darmasaba/keamanan/laporan-publik',
-    tipsKeamanan: '/darmasaba/keamanan/tips-keamanan',
+    tipsKeamanan: () => '/darmasaba/keamanan/tips-keamanan',
-    pasarDesa: '/darmasaba/ekonomi/pasar-desa',
+    pasarDesa: () => '/darmasaba/ekonomi/pasar-desa',
-    lowonganKerjaLokal: '/darmasaba/ekonomi/lowongan-kerja-lokal',
+    lowonganKerjaLokal: () => '/darmasaba/ekonomi/lowongan-kerja-lokal',
-    strukturOrganisasi: '/darmasaba/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa',
+    strukturOrganisasi: () => '/darmasaba/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa',
-    jumlahPendudukUsiaKerjaYangMenganggurUsia: '/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur',
+    jumlahPendudukUsiaKerjaYangMenganggurUsia: () => '/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur',
-    jumlahPendudukUsiaKerjaYangMenganggurPendidikan: '/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur',
+    jumlahPendudukUsiaKerjaYangMenganggurPendidikan: () => '/darmasaba/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur',
-    jumlahPendudukMiskin: '/darmasaba/ekonomi/jumlah-penduduk-miskin',
+    jumlahPendudukMiskin: () => '/darmasaba/ekonomi/jumlah-penduduk-miskin',
-    programKemiskinan: '/darmasaba/ekonomi/program-kemiskinan',
+    programKemiskinan: () => '/darmasaba/ekonomi/program-kemiskinan',
-    sektorUnggulanDesa: '/darmasaba/ekonomi/sektor-unggulan-desa',
+    sektorUnggulanDesa: () => '/darmasaba/ekonomi/sektor-unggulan-desa',
-    demografiPekerjaan: '/darmasaba/ekonomi/demografi-pekerjaan',
+    demografiPekerjaan: () => '/darmasaba/ekonomi/demografi-pekerjaan',
-    desaDigital: '/darmasaba/inovasi/desa-digital-smart-village',
+    desaDigital: () => '/darmasaba/inovasi/desa-digital-smart-village',
-    programKreatif: '/darmasaba/inovasi/program-kreatif-desa',
+    programKreatif: () => '/darmasaba/inovasi/program-kreatif-desa',
-    kolaborasiInovasi: '/darmasaba/inovasi/kolaborasi-inovasi',
+    kolaborasiInovasi: () => '/darmasaba/inovasi/kolaborasi-inovasi',
-    mitraKolaborasi: '/darmasaba/inovasi/kolaborasi-inovasi',
+    mitraKolaborasi: () => '/darmasaba/inovasi/kolaborasi-inovasi',
-    infoTekno: '/darmasaba/inovasi/info-teknologi-tepat-guna',
+    infoTekno: () => '/darmasaba/inovasi/info-teknologi-tepat-guna',
-    pengelolaanSampah: '/darmasaba/lingkungan/pengelolaan-sampah-bank-sampah',
+    pengelolaanSampah: () => '/darmasaba/lingkungan/pengelolaan-sampah-bank-sampah',
-    keteranganBankSampahTerdekat: '/darmasaba/lingkungan/pengelolaan-sampah-bank-sampah',
+    keteranganBankSampahTerdekat: () => '/darmasaba/lingkungan/pengelolaan-sampah-bank-sampah',
-    programPenghijauan: '/darmasaba/lingkungan/program-penghijauan',
+    programPenghijauan: () => '/darmasaba/lingkungan/program-penghijauan',
-    dataLingkunganDesa: '/darmasaba/lingkungan/data-lingkungan-desa',
+    dataLingkunganDesa: () => '/darmasaba/lingkungan/data-lingkungan-desa',
-    gotongRoyong: '/darmasaba/lingkungan/gotong-royong',
+    gotongRoyong: (id, kategori) => `/darmasaba/lingkungan/gotong-royong/${kategori}/${id}`,
-    tujuanEdukasiLingkungan: '/darmasaba/lingkungan/edukasi-lingkungan',
+    tujuanEdukasiLingkungan: () => '/darmasaba/lingkungan/edukasi-lingkungan',
-    materiEdukasiLingkungan: '/darmasaba/lingkungan/edukasi-lingkungan',
+    materiEdukasiLingkungan: () => '/darmasaba/lingkungan/edukasi-lingkungan',
-    contohEdukasiLingkungan: '/darmasaba/lingkungan/edukasi-lingkungan',
+    contohEdukasiLingkungan: () => '/darmasaba/lingkungan/edukasi-lingkungan',
-    filosofiTriHita: '/darmasaba/lingkungan/konservasi-adat-bali',
+    filosofiTriHita: () => '/darmasaba/lingkungan/konservasi-adat-bali',
-    bentukKonservasiBerdasarkanAdat: '/darmasaba/lingkungan/konservasi-adat-bali',
+    bentukKonservasiBerdasarkanAdat: () => '/darmasaba/lingkungan/konservasi-adat-bali',
-    nilaiKonservasiAdat: '/darmasaba/lingkungan/konservasi-adat-bali',
+    nilaiKonservasiAdat: () => '/darmasaba/lingkungan/konservasi-adat-bali',
-    jenjangPendidikan: '/darmasaba/pendidikan/info-sekolah/semua',
+    jenjangPendidikan: () => '/darmasaba/pendidikan/info-sekolah/semua',
-    lembaga: '/darmasaba/pendidikan/info-sekolah/semua/lembaga',
+    lembaga: () => '/darmasaba/pendidikan/info-sekolah/semua/lembaga',
-    siswa: '/darmasaba/pendidikan/info-sekolah/semua/siswa',
+    siswa: () => '/darmasaba/pendidikan/info-sekolah/semua/siswa',
-    pengajar: '/darmasaba/pendidikan/info-sekolah/semua/pengajar',
+    pengajar: () => '/darmasaba/pendidikan/info-sekolah/semua/pengajar',
-    keunggulanProgram: '/darmasaba/pendidikan/beasiswa-desa',
+    keunggulanProgram: () => '/darmasaba/pendidikan/beasiswa-desa',
-    tujuanProgram: '/darmasaba/pendidikan/program-pendidikan-anak',
+    tujuanProgram: () => '/darmasaba/pendidikan/program-pendidikan-anak',
-    programUnggulan: '/darmasaba/pendidikan/program-pendidikan-anak',
+    programUnggulan: () => '/darmasaba/pendidikan/program-pendidikan-anak',
-    lokasiJadwalBimbinganBelajarDesa: '/darmasaba/pendidikan/bimbingan-belajar-desa',
+    lokasiJadwalBimbinganBelajarDesa: () => '/darmasaba/pendidikan/bimbingan-belajar-desa',
-    fasilitasBimbinganBelajarDesa: '/darmasaba/pendidikan/bimbingan-belajar-desa',
+    fasilitasBimbinganBelajarDesa: () => '/darmasaba/pendidikan/bimbingan-belajar-desa',
-    tujuanPendidikanNonFormal: '/darmasaba/pendidikan/pendidikan-non-formal',
+    tujuanPendidikanNonFormal: () => '/darmasaba/pendidikan/pendidikan-non-formal',
-    tempatKegiatan: '/darmasaba/pendidikan/pendidikan-non-formal',
+    tempatKegiatan: () => '/darmasaba/pendidikan/pendidikan-non-formal',
-    jenisProgramYangDiselenggarakan: '/darmasaba/pendidikan/pendidikan-non-formal',
+    jenisProgramYangDiselenggarakan: () => '/darmasaba/pendidikan/pendidikan-non-formal',
-    dataPerpustakaan: '/darmasaba/pendidikan/perpustakaan-digital/semua',
+    dataPerpustakaan: () => '/darmasaba/pendidikan/perpustakaan-digital/semua',
-    dataPendidikan: '/darmasaba/pendidikan/data-pendidikan',
+    dataPendidikan: () => '/darmasaba/pendidikan/data-pendidikan',
     
   };
 
-  return typeUrlMap[type || ''] || '/darmasaba';
+  if (type && map[type]) return map[type](id, kategori as string | undefined);
+  return '/darmasaba';
 };
 
 export default getDetailUrl;

src/app/darmasaba/page.tsx

@@ -17,7 +17,10 @@ import ScrollToTopButton from "./_com/scrollToTopButton";
 export default function Page() {
   return (
     <Box>
-      <Stack bg={colors.grey[1]} gap={"4rem"}>
+      <Stack 
+      bg={colors.grey[1]} 
+      gap={"1.5rem"}
+      >
         <LandingPage />
         <Penghargaan />
         <Layanan />

src/con/colors.ts

@@ -1,6 +1,14 @@
 const colors = {
     "orange": "#FCAE00",
     "blue-button": "#0A4E78",
+    "blue-button-1": "#E5F2FA",
+    "blue-button-2": "#B8DAEF",
+    "blue-button-3": "#8AC1E3",
+    "blue-button-4": "#5DA9D8",
+    "blue-button-5": "#2F91CC",
+    "blue-button-6": "#083F61",
+    "blue-button-7": "#062F49",
+    "blue-button-8": "#041F32",
     "blue-button-trans": "#628EC6",
     "white-1": "#FBFBFC",
     "white-trans-1": "rgba(255, 255, 255, 0.5)",