Dashboard Admin

Yang Sudah dikerjakan:
- Feature Desa :
- Pengumuman :
- Pada bagian kategori pengumuman sudah dibuatkan konten sesuai dengan kategorinya.
- Pada bagian pengumuman penting juga sudah dibuatkan kontennya
- Gallery:
- Sudah dibuatkan kontennya sesuai dengan tabnya

package.json

@@ -21,6 +21,7 @@
     "@mantine/carousel": "^7.16.2",
     "@mantine/charts": "^7.17.1",
     "@mantine/core": "^7.16.2",
+    "@mantine/dates": "^7.17.4",
     "@mantine/dropzone": "^7.17.0",
     "@mantine/hooks": "^7.16.2",
     "@paljs/types": "^8.1.0",
@@ -32,11 +33,13 @@
     "animate.css": "^4.1.1",
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
+    "dayjs": "^1.11.13",
     "elysia": "^1.2.12",
     "embla-carousel-autoplay": "^8.5.2",
     "embla-carousel-react": "^7.1.0",
     "framer-motion": "^12.4.1",
     "get-port": "^7.1.0",
+    "jotai": "^2.12.3",
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
     "nanoid": "^5.1.0",

prisma/schema.prisma

@@ -17,3 +17,8 @@ model Potensi {
   name String @unique
 }
 
+model LandingPage_Layanan {
+  id   String @id @default(cuid())
+  deksripsi String 
+}
+

prisma/seed.ts

@@ -33,6 +33,22 @@ import prisma from '@/lib/prisma';
     }
 
     console.log("potensi success ...")
+
+    // for (const lpl of ) {
+    //     await prisma.landingPage_Layanan.upsert({
+    //         where: {
+    //             id: lpl.id
+    //         },
+    //         update: {
+    //             deksripsi: lpl.deksripsi
+    //         },
+    //         create: {
+    //             deksripsi: lpl.deksripsi
+    //         }
+    //     })
+    // }
+
+    // console.log("landing page success ...")
 })().then(() => prisma.$disconnect()).catch((e) => {
     console.error(e)
     prisma.$disconnect()

src/app/admin/(dashboard)/desa/berita/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Berita
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/gallery/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Gallery
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/layanan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Layanan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/penghargaan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Penghargaan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/pengumuman/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Pengumuman
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/potensi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Potensi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/desa/profile/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Profile
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      PADesa-pendapatan-asli-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      demografi-pekerjaan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      jumlah-penduduk-miskin-2024-2025
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      jumlah-penduduk-usia-kerja-yang-menganggur
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      jumlah-pengangguran-2024-2025
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     lowongan-kerja-lokal
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      pasar-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-kemiskinan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      sektor-unggulan-desa
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      struktur-organisasi-dan-sk-pengurus-bumdesa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      ajukan-ide-inovatif
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      desa-digital-smart-village
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      info-teknologi-tepat-guna
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      kolaborasi-inovasi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      layanan-online-desa
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-kreatif-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      keamanan-lingkungan-pecalang-patwal
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      kontak-darurat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     laporan-publik
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      pencegahan-kriminalitas
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      polsek-terdekat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      tips-keamanan
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Data Kesehatan Warga
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Wabah Penyakit
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Kontak Darurat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Penanganan Darurat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Posyandu
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Program Kesehatan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Puskesmas
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/apbdes/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      APBDes
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Desa Anti Korupsi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Indeks Kepuasan MAsyarakat
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/layanan/_comp_textLengh.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Text } from '@mantine/core';
+
+function CompTextLengh({input, maxLength}: {input: string, maxLength: number}) {
+  return (
+    <div>
+      <Text fz={"xs"}>{input.length}/{maxLength}</Text>
+    </div>
+  );
+}
+
+export default CompTextLengh;

src/app/admin/(dashboard)/landing-page/layanan/gs_maxLength.ts

@@ -0,0 +1 @@
+export const maxLength = 2000

src/app/admin/(dashboard)/landing-page/layanan/page.tsx

@@ -0,0 +1,31 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Stack, Text, Textarea, Title } from '@mantine/core';
+import { useState } from 'react';
+import CompTextLengh from './_comp_textLengh';
+import { maxLength } from './gs_maxLength';
+
+function Page(
+) {
+  const [value, setValue] = useState("")
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={2}>Layanan</Title>
+        <Textarea
+          label={<Text>Deskripsi</Text>}
+          placeholder='tambah deskripsi'
+          maxLength={maxLength}
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+        />
+       <CompTextLengh input={value} maxLength={maxLength}/>
+        <Group>
+          <Button bg={colors['blue-button']} fz={'md'}>Submit</Button>
+        </Group>
+      </Stack>
+    </Box>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/penghargaan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Penghargaan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/potensi/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Potensi
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/prestasi-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Prestasi Desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/profile/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Profile
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      SDGS Desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      data-lingkungan-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      edukasi-lingkungan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      gotong-royong
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     konservasi-adat-bali
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      pengelolaan-sampah-bank-sampah
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-penghijauan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      beasiswa-desa
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      bimbingan-belajar-desa
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      data-pendidikan
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      info-sekolah-paud
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+     pendidikan-non-formal
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+    perpustakaan-digital
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      program-pendidikan-anak
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      daftar-informasi-publik-desa-darmasaba
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      dasar-hukum
+    </div>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      ikm-desa-darmasaba
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      permohonan-informasi-publik
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      permohonan-keberatan-informasi-publik
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/profile-ppid/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      profile-ppid
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/struktur-ppid/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      struktur-ppid
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      visi-misi-ppid
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/_com/list_PageAdmin.tsx

@@ -0,0 +1,396 @@
+export const navBar = [
+  {
+    id: "Landing Page",
+    name: "Landing Page",
+    path: "",
+    children: [
+      {
+        id: "Landing_Page_1",
+        name: "Profile",
+        path: "/admin/landing-page/profile"
+      },
+      {
+        id: "Landing_Page_2",
+        name: "Penghargaan",
+        path: "/admin/landing-page/penghargaan"
+      },
+      {
+        id: "Landing_Page_3",
+        name: "Layanan",
+        path: "/admin/landing-page/layanan"
+      },
+      {
+        id: "Landing_Page_4",
+        name: "Potensi",
+        path: "/admin/landing-page/potensi"
+      },
+      {
+        id: "Landing_Page_5",
+        name: "Desa Anti Korupsi",
+        path: "/admin/landing-page/desa-anti-korupsi"
+      },
+      {
+        id: "Landing_Page_6",
+        name: "Indeks Kepuasan Masyarakat",
+        path: "/admin/landing-page/indeks-kepuasan-masyarakat"
+      },
+      {
+        id: "Landing_Page_7",
+        name: "SDGs Desa",
+        path: "/admin/landing-page/sdgs-desa"
+      },
+      {
+        id: "Landing_Page_8",
+        name: "APBDes",
+        path: "/admin/landing-page/apbdes"
+      },
+      {
+        id: "Landing_Page_9",
+        name: "Prestasi Desa",
+        path: "/admin/landing-page/prestasi-desa"
+      }
+    ]
+  },
+  {
+    id: "PPID",
+    name: "PPID",
+    path: "",
+    children: [
+      {
+        id: "PPID_1",
+        name: "Profile PPID",
+        path: "/admin/ppid/profile-ppid"
+      },
+      {
+        id: "PPID_2",
+        name: "Struktur PPID",
+        path: "/admin/ppid/struktur-ppid"
+      },
+      {
+        id: "PPID_3",
+        name: "Visi Misi PPID",
+        path: "/admin/ppid/visi-misi-ppid"
+      },
+      {
+        id: "PPID_4",
+        name: "Dasar Hukum",
+        path: "/admin/ppid/dasar-hukum"
+      },
+      {
+        id: "PPID_5",
+        name: "Permohonan Informasi Publik",
+        path: "/admin/ppid/permohonan-informasi-publik"
+      },
+      {
+        id: "PPID_6",
+        name: "Permohonan Keberatan Informasi Publik",
+        path: "/admin/ppid/permohonan-keberatan-informasi-publik"
+      },
+      {
+        id: "PPID_7",
+        name: "Daftar Informasi Publik Desa Darmasaba",
+        path: "/admin/ppid/daftar-informasi-publik-desa-darmasaba"
+      },
+      {
+        id: "PPID_8",
+        name: "IKM Desa Darmasaba",
+        path: "/admin/ppid/ikm-desa-darmasaba"
+      },
+
+    ]
+  },
+
+  {
+    id: "Desa",
+    name: "Desa",
+    path: "",
+    children: [
+      {
+        id: "Desa_1",
+        name: "Profile",
+        path: "/admin/desa/profile"
+      },
+      {
+        id: "Desa_2",
+        name: "Potensi",
+        path: "/admin/desa/potensi"
+      },
+      {
+        id: "Desa_3",
+        name: "Berita",
+        path: "/admin/desa/berita"
+      },
+      {
+        id: "Desa_4",
+        name: "Pengumuman",
+        path: "/admin/desa/pengumuman"
+      },
+      {
+        id: "Desa_5",
+        name: "Gallery",
+        path: "/admin/desa/gallery"
+      },
+      {
+        id: "Desa_6",
+        name: "Layanan",
+        path: "/admin/desa/layanan"
+      },
+      {
+        id: "Desa_7",
+        name: "Penghargaan",
+        path: "/admin/desa/penghargaan"
+      }
+
+    ]
+  },
+  {
+    id: "Kesehatan",
+    name: "Kesehatan",
+    path: "",
+    children: [
+      {
+        id: "Kesehatan_1",
+        name: "Posyandu",
+        path: "/admin/kesehatan/posyandu"
+      },
+      {
+        id: "Kesehatan_2",
+        name: "Data Kesehatan Warga",
+        path: "/admin/kesehatan/data-kesehatan-warga"
+      },
+      {
+        id: "Kesehatan_3",
+        name: "Puskesmas",
+        path: "/admin/kesehatan/puskesmas"
+      },
+      {
+        id: "Kesehatan_4",
+        name: "Program Kesehatan",
+        path: "/admin/kesehatan/program-kesehatan"
+      },
+      {
+        id: "Kesehatan_5",
+        name: "Penanganan Darurat",
+        path: "/admin/kesehatan/penanganan-darurat"
+      },
+      {
+        id: "Kesehatan_6",
+        name: "Kontak Darurat",
+        path: "/admin/kesehatan/kontak-darurat"
+      },
+      {
+        id: "Kesehatan_7",
+        name: "Info Wabah/Penyakit",
+        path: "/admin/kesehatan/info-wabah-penyakit"
+      }
+    ]
+  },
+  {
+    id: "Keamanan",
+    name: "Keamanan",
+    path: "",
+    children: [
+      {
+        id: "Keamanan_1",
+        name: "Keamanan Lingkungan (Pecalang/Patwal)",
+        path: "/admin/keamanan/keamanan-lingkungan-pecalang-patwal"
+      },
+      {
+        id: "Keamanan_2",
+        name: "Polsek Terdekat",
+        path: "/admin/keamanan/polsek-terdekat"
+      },
+      {
+        id: "Keamanan_3",
+        name: "Kontak Darurat",
+        path: "/admin/keamanan/kontak-darurat"
+      },
+      {
+        id: "Keamanan_4",
+        name: "Pencegahan Kriminalitas",
+        path: "/admin/keamanan/pencegahan-kriminalitas"
+      },
+      {
+        id: "Keamanan_5",
+        name: "Laporan Publik",
+        path: "/admin/keamanan/laporan-publik"
+      },
+      {
+        id: "Keamanan_6",
+        name: "Tips Keamanan",
+        path: "/admin/keamanan/tips-keamanan"
+      }
+    ]
+  },
+  {
+    id: "Ekonomi",
+    name: "Ekonomi",
+    path: "",
+    children: [
+      {
+        id: "Ekonomi_1",
+        name: "Pasar Desa",
+        path: "/admin/ekonomi/pasar-desa"
+      },
+      {
+        id: "Ekonomi_2",
+        name: "Lowongan Kerja Lokal",
+        path: "/admin/ekonomi/lowongan-kerja-lokal"
+      },
+      {
+        id: "Ekonomi_3",
+        name: "Struktur Organisasi dan SK Pengurus BUMDesa",
+        path: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa"
+      },
+      {
+        id: "Ekonomi_4",
+        name: "PADesa (Pendapatan Asli Desa)",
+        path: "/admin/ekonomi/PADesa-pendapatan-asli-desa"
+      },
+      {
+        id: "Ekonomi_5",
+        name: "Jumlah Pengangguran 2024-2025",
+        path: "/admin/ekonomi/jumlah-pengangguran-2024-2025"
+      },
+      {
+        id: "Ekonomi_6",
+        name: "Jumlah penduduk usia kerja yang menganggur",
+        path: "/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur"
+      },
+      {
+        id: "Ekonomi_7",
+        name: "Jumlah Penduduk Miskin 2024-2025",
+        path: "/admin/ekonomi/jumlah-penduduk-miskin-2024-2025"
+      },
+      {
+        id: "Ekonomi_8",
+        name: "Program Kemiskinan",
+        path: "/admin/ekonomi/program-kemiskinan"
+      },
+      {
+        id: "Ekonomi_9",
+        name: "Sektor Unggulan Desa",
+        path: "/admin/ekonomi/sektor-unggulan-desa"
+      },
+      {
+        id: "Ekonomi_10",
+        name: "Demografi Pekerjaan",
+        path: "/admin/ekonomi/demografi-pekerjaan"
+      }
+    ]
+  }, {
+    id: "Inovasi",
+    name: "Inovasi",
+    path: "",
+    children: [
+      {
+        id: "Inovasi_1",
+        name: "Desa Digital/Smart Village",
+        path: "/admin/inovasi/desa-digital-smart-village"
+      },
+      {
+        id: "Inovasi_2",
+        name: "Layanan Online Desa",
+        path: "/admin/inovasi/layanan-online-desa"
+      },
+      {
+        id: "Inovasi_3",
+        name: "Program Kreatif Desa",
+        path: "/admin/inovasi/program-kreatif-desa"
+      },
+      {
+        id: "Inovasi_4",
+        name: "Kolaborasi Inovasi",
+        path: "/admin/inovasi/kolaborasi-inovasi"
+      },
+      {
+        id: "Inovasi_5",
+        name: "Info Teknologi Tepat Guna",
+        path: "/admin/inovasi/info-teknologi-tepat-guna"
+      },
+      {
+        id: "Inovasi_6",
+        name: "Ajukan Ide Inovatif",
+        path: "/admin/inovasi/ajukan-ide-inovatif"
+      }
+
+    ]
+  }, {
+    id: "Lingkungan",
+    name: "Lingkungan",
+    path: "",
+    children: [
+      {
+        id: "Lingkungan_1",
+        name: "Pengelolaan Sampah (Bank Sampah)",
+        path: "/admin/lingkungan/pengelolaan-sampah-bank-sampah"
+      },
+      {
+        id: "Lingkungan_2",
+        name: "Program Penghijauan",
+        path: "/admin/lingkungan/program-penghijauan"
+      },
+      {
+        id: "Lingkungan_3",
+        name: "Data Lingkungan Desa",
+        path: "/admin/lingkungan/data-lingkungan-desa"
+      },
+      {
+        id: "Lingkungan_4",
+        name: "Gotong Royong",
+        path: "/admin/lingkungan/gotong-royong"
+      },
+      {
+        id: "Lingkungan_5",
+        name: "Edukasi Lingkungan",
+        path: "/admin/lingkungan/edukasi-lingkungan"
+      },
+      {
+        id: "Lingkungan_6",
+        name: "Konservasi Adat Bali",
+        path: "/admin/lingkungan/konservasi-adat-bali"
+      }
+    ]
+  }, {
+    id: "Pendidikan",
+    name: "Pendidikan",
+    path: "",
+    children: [
+      {
+        id: "Pendidikan_1",
+        name: "Info Sekolah & PAUD",
+        path: "/admin/pendidikan/info-sekolah-paud"
+      },
+      {
+        id: "Pendidikan_2",
+        name: "Beasiswa Desa",
+        path: "/admin/pendidikan/beasiswa-desa"
+      },
+      {
+        id: "Pendidikan_3",
+        name: "Program Pendidikan Anak",
+        path: "/admin/pendidikan/program-pendidikan-anak"
+      },
+      {
+        id: "Pendidikan_4",
+        name: "Bimbingan Belajar Desa",
+        path: "/admin/pendidikan/bimbingan-belajar-desa"
+      },
+      {
+        id: "Pendidikan_5",
+        name: "Pendidikan Non Formal",
+        path: "/admin/pendidikan/pendidikan-non-formal"
+      },
+      {
+        id: "Pendidikan_6",
+        name: "Perpustakaan Digital",
+        path: "/admin/pendidikan/perpustakaan-digital"
+      },
+      {
+        id: "Pendidikan_7",
+        name: "Data Pendidikan",
+        path: "/admin/pendidikan/data-pendidikan"
+      }
+    ]
+  }
+]

src/app/admin/images/layout.tsx

@@ -0,0 +1,13 @@
+import { Stack } from "@mantine/core";
+import AdminNav from "../_com/AdminNav";
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <Stack gap={0}>
+      <AdminNav />
+      {children}
+    </Stack>
+  );
+}
+
+export default Layout;

src/app/admin/layout.tsx

@@ -1,11 +1,67 @@
-import { Stack } from "@mantine/core";
-import AdminNav from "./_com/AdminNav";
+'use client'
+import colors from "@/con/colors";
+import { ActionIcon, AppShell, AppShellHeader, AppShellMain, AppShellNavbar, Burger, Group, Image, NavLink, ScrollArea, Stack, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import Link from "next/link";
+import { useState } from "react";
+import { navBar } from "./_com/list_PageAdmin";
+
+
 
 export default function Layout({ children }: { children: React.ReactNode }) {
+  const [opened, { toggle }] = useDisclosure();
+  const [active, setActive] = useState(navBar[0]?.id || 0);
+  const isClient = typeof window !== 'undefined';
   return (
-    <Stack gap={0}>
-      <AdminNav />
-      {children}
+    <Stack h={"100%"}>
+      <AppShell
+        header={{ height: 60 }}
+        navbar={{
+          width: 300, breakpoint: 'sm', collapsed: { mobile: !opened }
+        }}
+        padding={'md'}
+      >
+        <AppShellHeader bg={colors["white-trans-1"]}>
+          <Group px={10} align="center">
+            <Burger opened={opened} onClick={toggle} hiddenFrom="sm" size={'sm'} />
+            <ActionIcon w={50} h={50}  variant="transparent" component={Link} href="/admin">
+            <Image py={5} src={'/assets/images/darmasaba-icon.png'} alt="" width={50} height={50} />
+            </ActionIcon>
+            <Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>Dashboard Admin</Text>
+          </Group>
+        </AppShellHeader>
+        <AppShellNavbar
+          c={colors["blue-button"]}
+          component={ScrollArea}
+        >
+          {navBar.map((v,k) => {
+            return (
+              <NavLink
+                c={colors["blue-button"]}
+                key={k}
+                active={isClient && k === active}
+                onClick={() => setActive(k)}
+                label={<Text>{v.name}</Text>}
+              >
+                {v.children.map((child) => {
+                  return (
+                    <NavLink
+                      href={child.path}
+                      key={child.id}
+                      active={isClient && Number(child.id) === active}
+                      onClick={() => setActive(Number(child.id))}
+                      label={<Text>{child.name}</Text>}
+                    />
+                  )
+                })}
+              </NavLink>
+            )
+          })}
+        </AppShellNavbar>
+        <AppShellMain bg={colors.Bg}>
+          {children}
+        </AppShellMain>
+      </AppShell>
     </Stack>
   );
-}
+}

src/app/admin/page.tsx

@@ -1,9 +1,9 @@
-import { Container, Stack } from "@mantine/core";
+import { Text } from "@mantine/core";
 
 export default function Page() {
-  return (
-    <Stack h={"100%"}>
-      <Container>admin</Container>
-    </Stack>
-  );
-}
+    return(
+      <Text>
+        Test
+      </Text>
+    )
+}

src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx

@@ -6,20 +6,20 @@ import React from 'react';
 const dataBeritaTerbaru = [
   {
     id: 1,
-    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
-    image: "/api/img/berita-1.png",
+    judul: 'FESTIVAL SENI BUDAYA KAB. BADUNG',
+    image: "/api/img/tari-3.jpg",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
     id: 2,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
     tanggal: "Kamis, 13 Januari 2025",
   },
 ]
@@ -34,23 +34,23 @@ function Budaya() {
               <Stack gap="md">
                 <Box>
                   <Image
-                    src="/api/img/berita-1.png"
+                    src="/api/img/budaya-1.jpg"
                     alt="Darmasaba Smart Village"
                     radius="md"
                     fit="cover"
-                    h={{ base: 450, md: 660 }}
+                    h={{ base: 450, md: 610 }}
                   />
                 </Box>
                 <Group>
                   <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                    <Text size="sm">Teknologi</Text>
+                    <Text size="sm">Budaya</Text>
                   </Paper>
                 </Group>
                 <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
-                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  FESTIVAL SENI BUDAYA KAB. BADUNG
                 </Text>
                 <Text size="md" lineClamp={3}>
-                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                Semeton Darmasaba yang suka menikmati seni seperti baleganjur, gong kebyar, tari, dan lainnya. Nih! ada acara keren di Puspem Badung tepatnya di Balai Budaya Giri Nata Mandala yaitu Festival Seni Budaya dari tanggal 1 November 2023 s.d. 16 November 2023.
                 </Text>
                 <Group>
                   <Group gap="xs">
@@ -74,18 +74,18 @@ function Budaya() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/tari-3.jpg"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Budaya</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  PELATIHAN TARI WALI
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -105,18 +105,18 @@ function Budaya() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/tari-3.jpg"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Sosial</Text>
+                      <Text size="sm">Budaya</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  LATIHAN TARI REJANG GIRI PUTRI
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -145,13 +145,13 @@ function Budaya() {
                   <Image
                     radius="md"
                     src={v.image}
-                    alt="Prestasi Voli"
+                    alt=""
                     fit="cover"
-                    h={180}
+                    h={282}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Budaya</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>

src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx

@@ -6,20 +6,20 @@ import React from 'react';
 const dataBeritaTerbaru = [
   {
     id: 1,
-    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
-    image: "/api/img/berita-1.png",
+    judul: 'PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023',
+    image: "/api/img/ekonomi-sampingan-3.png",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
     id: 2,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba',
+    image: "/api/img/ekonomi-sampingan.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI ',
+    image: "/api/img/ekonomi-sampingan-2.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
 ]
@@ -34,7 +34,7 @@ function Ekonomi() {
               <Stack gap="md">
                 <Box>
                   <Image
-                    src="/api/img/berita-1.png"
+                    src="/api/img/ekonomi-utama.png"
                     alt="Darmasaba Smart Village"
                     radius="md"
                     fit="cover"
@@ -43,14 +43,14 @@ function Ekonomi() {
                 </Box>
                 <Group>
                   <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                    <Text size="sm">Teknologi</Text>
+                    <Text size="sm">Ekonomi</Text>
                   </Paper>
                 </Group>
                 <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
-                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023
                 </Text>
-                <Text size="md" lineClamp={3}>
-                  Desa Darmasaba mengambil langkah maju dalam transformasi digital dengan meluncurkan aplikasi Smart Village yang memudahkan warga dalam mengakses layanan publik secara online.
+                <Text size="md" lineClamp={2}>
+                Pemerintah Desa Darmasaba melalui kegiatan ketahanan pangan ini menjalankan dua kategori yaitu pertanian dan peternakan untuk kategori pertanian telah membuahkan hasil panen pertama pada hari Kamis, 24 Agustus 2023 melakukan panen bawang merah di lokasi ketahanan pangan Br. Taman, Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung. Adapun varietas bawang yang dipanen adalah Bawang Bali Karet (Batu Ijo) pada lahan seluas kurang lebih 7 are.
                 </Text>
                 <Group>
                   <Group gap="xs">
@@ -74,18 +74,18 @@ function Ekonomi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/ekonomi-sampingan.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Ekonomi</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba 
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -105,18 +105,18 @@ function Ekonomi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/ekonomi-sampingan-2.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Sosial</Text>
+                      <Text size="sm">Ekonomi</Text>
                     </Paper>
                   </Group>
-                  <Text fz="lg" fw="bold" lineClamp={2}>
-                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                  ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -151,7 +151,7 @@ function Ekonomi() {
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Ekonomi</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>

src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx

@@ -6,21 +6,21 @@ import React from 'react';
 const dataBeritaTerbaru = [
   {
     id: 1,
-    judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
+    judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
     image: "/api/img/pembangunan-1.jpg",
-    tanggal: "Selasa, 11 Januari 2025",
+    tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 2,
-    judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
-    image: "/api/img/pembangunan-2.jpg",
+    judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
+    image: "/api/img/pembangunan-3.jpg",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
-    image: "/api/img/pembangunan-3.jpg",
-    tanggal: "Kamis, 13 Januari 2025",
+    judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
+    image: "/api/img/pembangunan-1.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
   },
 ]
 function Pembangunan() {
@@ -153,7 +153,7 @@ Pemdes Darmasaba dalam rangka memenuhi kebutuhan masyarakat khususnya warga Br.
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Pembangunan</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>

src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx

@@ -13,7 +13,7 @@ const dataBeritaTerbaru = [
   {
     id: 2,
     judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/pemerintahan-3.jpg",
+    image: "/api/img/pemrintahan-5.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
@@ -151,7 +151,7 @@ function Pemerintahan() {
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Pemerintahan</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>

src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx

@@ -9,18 +9,21 @@ const dataBeritaTerbaru = [
     judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
     image: "/api/img/berita-1.png",
     tanggal: "Selasa, 11 Januari 2025",
+    kategori: "Teknologi"
   },
   {
     id: 2,
     judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
     image: "/api/img/prestasi-voli.jpeg",
     tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Sosial"
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
     tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Teknologi"
   },
 ]
 function Semua() {
@@ -67,7 +70,7 @@ function Semua() {
           </GridCol>
 
           {/* Berita Sampingan */}
-          <GridCol span={{ base: 12,  xl: 4 }}>
+          <GridCol span={{ base: 12, xl: 4 }}>
             <Stack gap="md">
               {/* Berita Sampingan 1 */}
               <Paper p="md" shadow="sm" radius="md">
@@ -147,11 +150,11 @@ function Semua() {
                     src={v.image}
                     alt="Prestasi Voli"
                     fit="cover"
-                    h={180}
+                    h={{ base: 180, xl: 250 }}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">{v.kategori}</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>

src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx

@@ -7,7 +7,7 @@ const dataBeritaTerbaru = [
   {
     id: 1,
     judul: 'AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025',
-    image: "/api/img/sosial-1.jpeg",
+    image: "/api/img/sosial-4.png",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
@@ -170,7 +170,7 @@ Jaga Bumi, Pilah Sampah dari Sekarang! ♻️
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Teknologi</Text>
+                      <Text size="sm">Sosial</Text>
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>

src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx

@@ -7,19 +7,19 @@ const dataBeritaTerbaru = [
   {
     id: 1,
     judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
-    image: "/api/img/berita-1.png",
+    image: "/api/img/teknologi-3.png",
     tanggal: "Selasa, 11 Januari 2025",
   },
   {
     id: 2,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
   {
     id: 3,
-    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
-    image: "/api/img/prestasi-voli.jpeg",
+    judul: 'DARMASABA MENUJU DESA DIGITAL',
+    image: "/api/img/teknologi-2.png",
     tanggal: "Kamis, 13 Januari 2025",
   },
 ]
@@ -74,7 +74,7 @@ function Teknologi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/teknologi-1.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
@@ -85,7 +85,8 @@ function Teknologi() {
                     </Paper>
                   </Group>
                   <Text fz="lg" fw="bold" lineClamp={2}>
-                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  DARMASABA DIGITAL PROJECT IS COMING! Desa Darmasaba nggak pernah berhenti berinovasi! ?
+                  Kali ini, kami siap menghadirkan gebrakan baru yang akan mempermudah sistem kerja di lingkungan
                   </Text>
                   <Group>
                     <Group gap="xs">
@@ -105,18 +106,18 @@ function Teknologi() {
                 <Stack gap="sm">
                   <Image
                     radius="md"
-                    src="/api/img/prestasi-voli.jpeg"
+                    src="/api/img/teknologi-2.png"
                     alt="Prestasi Voli"
                     fit="cover"
                     h={180}
                   />
                   <Group>
                     <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
-                      <Text size="sm">Sosial</Text>
+                      <Text size="sm">Teknologi</Text>
                     </Paper>
                   </Group>
-                  <Text fz="lg" fw="bold" lineClamp={2}>
-                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                    DARMASABA MENUJU DESA DIGITAL
                   </Text>
                   <Group>
                     <Group gap="xs">

src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx

@@ -1,62 +1,62 @@
 import colors from '@/con/colors';
-import { SimpleGrid, Box, Paper, Center, Stack, Image, Text } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 
 const data = [
   {
     id: 1,
-    image: "/api/img/galeri-1.png",
-    title: "Pendapatan",
+    video: "https://www.youtube.com/embed/J2uZcZlvL7g?si=3pWy0ho77dW0E2Gt",
     tanggal: "3 Mar 2025",
-    judul: "Pemasangan Wifi Gratis Di Publik Desa",
+    judul: "MENERIMA KUNJUNGAN STUDI TIRU DARI PEMERINTAH DESA TUA SULAWESI SELATAN",
 
   },
   {
     id: 2,
-    image: "/api/img/galeri-2.png",
-    title: "Belanja",
+    video: "https://www.youtube.com/embed/GX4sqS5zAzw?si=rulOAa2Ylbs4_R82",
     tanggal: "4 Mar 2025",
-    judul: "Panen raya Desa Darmasaba",
+    judul: "Sosialisasi Pengelolaan Sampah di SD NO 3 Desa Darmasaba",
   },
   {
     id: 3,
-    image: "/api/img/galeri-3.png",
-    title: "Pembiayaan",
+    video: "https://www.youtube.com/embed/HCY4H6ODmeA?si=0epW8PAtd6Jum90k",
     tanggal: "5 Mar 2025",
-    judul: "Kegiatan Pembangunan Pelinggih",
+    judul: "Posyandu dan Senam Lansia Banjar Gulingan",
   }
 ]
 function Video() {
   return (
     <Box pt={20}>
       <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3,
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                  <Box>
-                    <Center>
-                      <Image src={v.image} alt='' />
-                    </Center>
-                  </Box>
-                  <Box>
-                    <Stack gap={"sm"} py={10}>
-                      <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
-                      <Text fw={"bold"} fz={{ base: "sm", md: "sm" }}>{v.judul}</Text>
-                      <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Fusce sagittis nec arcu ac ornare. Praesent a porttitor
-                        felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
-                    </Stack>
-                  </Box>
-                </Paper>
-              </Box>
-            )
-          })}
-        </SimpleGrid>
+        cols={{
+          base: 1,
+          md: 3,
+        }}>
+        {data.map((v, k) => {
+          return (
+            <Box key={k}>
+              <Paper mb={50} p={"md"} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Box>
+                  <Center>
+                    <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
+                      <iframe style={{ borderRadius: "16px" }} width="100%"
+                        height="100%"
+                        src={v.video} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+                    </Box>
+                  </Center>
+                </Box>
+                <Box>
+                  <Stack gap={"sm"} py={10}>
+                    <Text fz={{ base: "sm", md: "sm" }}>{v.tanggal}</Text>
+                    <Text fw={"bold"} fz={{ base: "sm", md: "sm" }} lineClamp={1}>{v.judul}</Text>
+                    <Text ta={"justify"} fz={{ base: "sm", md: "sm" }}>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                      Fusce sagittis nec arcu ac ornare. Praesent a porttitor
+                      felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
+                  </Stack>
+                </Box>
+              </Paper>
+            </Box>
+          )
+        })}
+      </SimpleGrid>
     </Box>
   );
 }

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

@@ -22,7 +22,7 @@ function Page() {
       </Container>
       <Box px={{ base: "md", md: 100 }}>
         <Tabs color={colors['blue-button']} defaultValue="foto">
-          <Grid>
+          <Grid align='center'>
             <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
               <Group>
                 <TabsList>

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

@@ -81,7 +81,7 @@ export default function Page() {
     const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
     const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
     return (
-        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"42"}>
+        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
             <Box px={{ base: 'md', md: 100 }}>
                 <BackButton />
             </Box>

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/adat-&-budaya/page.tsx

@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 2,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 3,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 4,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+  {
+    id: 5,
+    judul: 'Sosialisasi Perarem Konservasi Adat di Darmasaba',
+    tanggal: 'Jumat, 26 April 2025',
+    jam: '16:00 WITA',
+    lokasi: 'Wantilan Adat Desa',
+    deskripsi: 'Para krama diundang hadir dalam sosialisasi perarem (aturan adat) baru yang berkaitan dengan konservasi lingkungan berbasis budaya, termasuk larangan alih fungsi lahan pekarangan suci.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Adat & Budaya
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman adat & budaya di Desa Darmasaba.
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/digitalisasi-desa/page.tsx

@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 2,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 3,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+  {
+    id: 5,
+    judul: 'Pelatihan Dasar Komputer untuk Lansia dan Ibu Rumah Tangga',
+    tanggal: 'Selasa, 30 April 2025',
+    jam: '09:00 WITA',
+    lokasi: 'Perpustakaan Desa',
+    deskripsi: 'Belajar dari nol: cara menyalakan komputer, menulis di Word, membuat email, dan dasar penggunaan HP Android untuk komunikasi dan akses layanan desa online. Terbuka untuk 20 peserta.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Digitalisasi Desa
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman digitalisasi desa
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/ekonomi-&-umkm/page.tsx

@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 2,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 3,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 4,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+  {
+    id: 5,
+    judul: 'Pelatihan Digital Marketing untuk UMKM Desa',
+    tanggal: 'Rabu, 23 April 2025',
+    jam: '13:00 WITA',
+    lokasi: 'Aula Kantor Desa',
+    deskripsi: 'Para pelaku UMKM diundang untuk mengikuti pelatihan dasar digital marketing: mulai dari membuat akun bisnis, copywriting produk, hingga promosi melalui media sosial. Peserta akan mendapat sertifikat dan materi pelatihan.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Ekonomi & UMKM
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman ekonomi & umkm
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/lingkungan-&-bencana/page.tsx

@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 2,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 3,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 4,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+  {
+    id: 5,
+    judul: 'Gotong Royong Bersih Sungai dan Drainase',
+    tanggal: 'Minggu, 21 April 2025',
+    jam: '06:30 WITA',
+    lokasi: 'Titik Kumpul: Poskamling RW 02',
+    deskripsi: 'Seluruh warga RW 02 diimbau ikut serta dalam kegiatan bersih-bersih aliran sungai dan saluran air untuk mencegah banjir saat musim hujan. Disediakan alat kebersihan dan konsumsi ringan.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Lingkungan & Bencana
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman lingkungan & bencana
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/pendidikan-&-kepemudaan/page.tsx

@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 2,
+    judul: 'Lomba Video Pendek Hari Lingkungan',
+    tanggal: 'Deadline: 28 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Online Submission',
+    deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
+  },
+  {
+    id: 3,
+    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 4,
+    judul: 'Lomba Video Pendek Hari Lingkungan',
+    tanggal: 'Deadline: 28 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Online Submission',
+    deskripsi: 'Karang Taruna Desa mengadakan lomba video pendek bertema "Lingkunganku, Tanggung Jawabku". Pemenang akan diumumkan saat acara Hari Desa Hijau. Total hadiah Rp1.000.000.'
+  },
+  {
+    id: 5,
+    judul: 'Pendaftaran Bimbingan Belajar Gratis untuk Pelajar',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Pendidikan & Kepemudaan
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman pendidikan & kepemudaan
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(kategori)/sosial-&-kesehatan/page.tsx

@@ -0,0 +1,96 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Paper, Group } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+import { IconCalendar, IconClock, IconMapPin } from '@tabler/icons-react';
+
+const dataPengumuman = [
+  {
+    id: 1,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 2,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 3,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 4,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+  {
+    id: 5,
+    judul: 'Pemeriksaan Kesehatan Gratis Untuk Warga Desa',
+    tanggal: 'Sabtu, 20 April 2025',
+    jam: '08:00 WITA',
+    lokasi: 'Balai Banjar Desa Darmasaba',
+    deskripsi: 'Dalam rangka meningkatkan kesadaran kesehatan, Pemerintah Desa Darmasaba bekerja sama dengan Puskesmas Abiansemal akan mengadakan pemeriksaan kesehatan gratis meliputi cek tekanan darah, kolesterol, gula darah, dan konsultasi gizi.'
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Pengumuman Sosial & Kesehatan
+          </Text>
+          <Text ta="center" px="md" pb={10}>
+            Informasi dan pengumuman resmi terkait pengumuman sosial & kesehatan
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        {dataPengumuman.map((v, k) => {
+          return (
+            <Paper mb={10} key={k} withBorder p="lg" radius="md" shadow="md" bg={colors["white-1"]}>
+              <Text fz={'h3'}>{v.judul}</Text>
+              <Group style={{ color: 'black' }} pb={20}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">{v.tanggal}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">{v.jam}</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconMapPin size={18} />
+                  <Text size="sm">{v.lokasi}</Text>
+                </Group>
+              </Group>
+              <Text ta={'justify'}>
+                {v.deskripsi}
+              </Text>
+            </Paper>
+          )
+        })}
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(penting)/jadwal-rapat/page.tsx

@@ -0,0 +1,65 @@
+import colors from '@/con/colors';
+import { Calendar } from '@mantine/dates';
+import { Stack, Box, Container, Text, Grid, Paper, GridCol, Center, SimpleGrid } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+            Jadwal Rapat
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }} >
+            <Paper bg={colors['white-1']} p={'md'}>
+              <Center>
+                <Calendar size='xl' />
+              </Center>
+            </Paper>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }} >
+            <Paper bg={colors['white-1']} p={'md'}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  xl: 3,
+              }}
+              >
+                <Box>
+                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Hari Ini</Text>
+                  <Text fz={'lg'} >Senin, 13 Februari 2023</Text>
+                  <Text fz={'lg'} >09:00 - 12:00</Text>
+                  <Text fz={'lg'} >12:00 - 15:00</Text>
+                </Box>
+                <Box>
+                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Besok</Text>
+                  <Text fz={'lg'} >Selasa, 14 Februari 2023</Text>
+                  <Text fz={'lg'} >09:00 - 12:00</Text>
+                  <Text fz={'lg'} >12:00 - 15:00</Text>
+                </Box>
+                <Box>
+                  <Text fz={'lg'} fw={'bold'} c={colors['blue-button']}>Minggu Depan</Text>
+                  <Text fz={'lg'} >Senin, 20 Februari 2023</Text>
+                  <Text fz={'lg'} >09:00 - 12:00</Text>
+                  <Text fz={'lg'} >12:00 - 15:00</Text>
+                </Box>
+              </SimpleGrid>
+            </Paper>
+          </GridCol>
+        </Grid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/pengumuman/(penting)/pendaftaran-umkm/page.tsx

@@ -0,0 +1,49 @@
+import colors from '@/con/colors';
+import { Stack, Box, Container, Text, Image, Grid, GridCol, Paper, TextInput, Center, Button } from '@mantine/core';
+import React from 'react';
+import BackButton from '../../../layanan/_com/BackButto';
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md" >
+        <Stack gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" >
+            Pendaftaran UMKM
+          </Text>
+        </Stack>
+      </Container>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 6, lg: 7, xl: 8 }}>
+            <Center>
+              <Image src={'/api/img/market.png'} w={{ base: 300, md: 500, lg: 530, xl: 550 }} alt='' />
+            </Center>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 6, lg: 5, xl: 4 }}>
+            <Paper bg={colors['white-1']} p={'md'} h={'500'}>
+              <Text ta={'center'} fz={{ base: "1.5rem", md: "2rem" }} c={colors["blue-button"]} fw="bold" >
+                Pendaftaran UMKM
+              </Text>
+              <Stack pt={20}>
+                <TextInput placeholder='Nama Lengkap' />
+                <TextInput placeholder='Alamat' />
+                <TextInput placeholder='No. Telepon' />
+                <TextInput placeholder='Email' />
+                <TextInput placeholder='Nama UMKM' />
+                <Button bg={colors['blue-button']} fullWidth>Daftar Sekarang</Button>
+              </Stack>
+            </Paper>
+
+          </GridCol>
+        </Grid>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -1,9 +1,61 @@
 import colors from '@/con/colors';
-import { Stack, Box, Container, Text, TextInput, SimpleGrid, Notification, Flex, Anchor, Paper } from '@mantine/core';
-import React from 'react';
+import { Anchor, Box, Container, Flex, Group, Notification, Paper, SimpleGrid, Stack, Text, TextInput, UnstyledButton } from '@mantine/core';
+import { IconCalendar, IconClock, IconSearch } from '@tabler/icons-react';
 import BackButton from '../layanan/_com/BackButto';
-import { IconSearch } from '@tabler/icons-react';
+import Link from 'next/link';
 
+const dataKategori = [
+  {
+    id: 1,
+    kategori: 'Sosial & Kesehatan',
+    jumlah: 5,
+    link: '/darmasaba/desa/pengumuman/sosial-&-kesehatan'
+  },
+  {
+    id: 2,
+    kategori: 'Ekonomi & UMKM',
+    jumlah: 7,
+    link: '/darmasaba/desa/pengumuman/ekonomi-&-umkm'
+  },
+  {
+    id: 3,
+    kategori: 'Pendidikan & Kepemudaan',
+    jumlah: 9,
+    link: '/darmasaba/desa/pengumuman/pendidikan-&-kepemudaan'
+  },
+  {
+    id: 4,
+    kategori: 'Lingkungan & Bencana',
+    jumlah: 6,
+    link: '/darmasaba/desa/pengumuman/lingkungan-&-bencana'
+  },
+  {
+    id: 5,
+    kategori: 'Adat & Budaya',
+    jumlah: 8,
+    link: '/darmasaba/desa/pengumuman/adat-&-budaya'
+  },
+  {
+    id: 6,
+    kategori: 'Digitalisasi Desa',
+    jumlah: 6,
+    link: '/darmasaba/desa/pengumuman/digitalisasi-desa'
+  },
+]
+const dataPenting = [
+  {
+    id: 1,
+    judul: 'Jadwal Rapat',
+    jumlah: 5,
+    link: '/darmasaba/desa/pengumuman/jadwal-rapat'
+  },
+  {
+    id: 2,
+    judul: 'Pendaftaran UMKM',
+    jumlah: 7,
+    link: '/darmasaba/desa/pengumuman/pendaftaran-umkm'
+  }
+]
 function Page() {
   return (
     <Stack pos="relative" bg={colors.Bg} py="xl" gap="md">
@@ -41,32 +93,36 @@ function Page() {
               <Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
             </Stack>
             <Flex pt={20} gap={"md"} justify={"space-between"}>
-              <Text fz={"xs"} c={"black"}>1 Februari 2025</Text>
-              <Text fz={"xs"} c={"black"}>09:00 WITA</Text>
+              <Group style={{ color: 'black' }}>
+                <Group gap="xs">
+                  <IconCalendar size={18} />
+                  <Text size="sm">Kamis, 13 Januari 2025</Text>
+                </Group>
+                <Group gap="xs">
+                  <IconClock size={18} />
+                  <Text size="sm">09:00 WITA</Text>
+                </Group>
+              </Group>
               <Anchor>
-                <Text fz={"xs"}>Baca Selengkapnya</Text>
+                <Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
               </Anchor>
             </Flex>
           </Notification>
           <Paper p={"md"}>
             <Stack gap={"xs"}>
               <Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Kategori</Text>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Pengumuman</Text>
-                <Text fz={"md"} c={"black"}>5</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Kegiatan</Text>
-                <Text fz={"md"} c={"black"}>10</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Informasi</Text>
-                <Text fz={"md"} c={"black"}>12</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Layanan</Text>
-                <Text fz={"md"} c={"black"}>6</Text>
-              </Flex>
+              {dataKategori.map((v, k) => {
+                return (
+                  <UnstyledButton component={Link} href={v.link} key={k}>
+                    <Paper bg={colors["BG-trans"]} p={5}>
+                      <Group px={3} justify={"space-between"}>
+                        <Text fz={"md"} c={"black"}>{v.kategori}</Text>
+                        <Text fz={"md"} c={"black"}>{v.jumlah}</Text>
+                      </Group>
+                    </Paper>
+                  </UnstyledButton>
+                )
+              })}
             </Stack>
           </Paper>
           <Notification color='yellow' styles={{ title: { fontWeight: "bold" } }} withCloseButton={false} title="Informasi">
@@ -74,25 +130,36 @@ function Page() {
               <Text fz={"sm"} fw={"bold"} c={"black"}>LELANG PEMASANGAN CCTV DESA DARMASABA</Text>
               <Text ta={"justify"} fz={"sm"} c={"black"}>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sagittis nec arcu ac ornare. Praesent a porttitor felis. Proin varius ex nisl, in hendrerit odio tristique vel. </Text>
             </Stack>
-            <Flex pt={20} gap={"md"} justify={"space-between"}>
-              <Text fz={"xs"} c={"black"}>2 Februari 2025</Text>
-              <Text fz={"xs"} c={"black"}>10:00 WITA</Text>
+            <Flex pt={20} gap={"md"} justify={"space-between"}><Group style={{ color: 'black' }}>
+              <Group gap="xs">
+                <IconCalendar size={18} />
+                <Text size="sm">Kamis, 2 Februari 2025</Text>
+              </Group>
+              <Group gap="xs">
+                <IconClock size={18} />
+                <Text size="sm">10:00 WITA</Text>
+              </Group>
+            </Group>
               <Anchor>
-                <Text fz={"xs"}>Baca Selengkapnya</Text>
+                <Text fs={'unset'} c={colors["blue-button"]} fz={"sm"}>Baca Selengkapnya</Text>
               </Anchor>
             </Flex>
           </Notification>
           <Paper p={"md"}>
             <Stack gap={"xs"}>
               <Text fw={"bold"} fz={"lg"} c={colors['blue-button']}>Pengumuman Penting</Text>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Jadwal Rapat</Text>
-                <Text fz={"md"} c={"black"}>5</Text>
-              </Flex>
-              <Flex justify={"space-between"}>
-                <Text fz={"md"} c={"black"}>Pendaftaran UMKM</Text>
-                <Text fz={"md"} c={"black"}>10</Text>
-              </Flex>
+              {dataPenting.map((v, k) => {
+                return (
+                  <UnstyledButton component={Link} href={v.link} key={k}>
+                    <Paper bg={colors["BG-trans"]} p={5}>
+                      <Group px={3} justify={"space-between"}>
+                        <Text fz={"md"} c={"black"}>{v.judul}</Text>
+                        <Text fz={"md"} c={"black"}>{v.jumlah}</Text>
+                      </Group>
+                    </Paper>
+                  </UnstyledButton>
+                )
+              })}
             </Stack>
           </Paper>
         </SimpleGrid>

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

@@ -0,0 +1,277 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Center, Divider, Flex, Group, Image, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+
+const dataMitos = [
+  {
+    id: 1,
+    mitos: 'Daun pepaya dan daun jambu biji bisa menyembuhkan DBD',
+    fakta: 'Belum ada bukti ilmiah yang kuat. Namun dapat dikonsumsi sebagai pendamping terapi medis',
+  },
+  {
+    id: 2,
+    mitos: 'DBD hanya menyerang anak-anak',
+    fakta: 'DBD dapat menyerang siapa saja terlepas dari usia',
+  },
+  {
+    id: 3,
+    mitos: 'Nyamuk DBD hanya aktif pada malam hari',
+    fakta: 'Nyamuk Aedes aegypti aktif pada pagi dan sore hari',
+  },
+  {
+    id: 4,
+    mitos: 'Sekali terkena DBD, tidak akan terkena lagi',
+    fakta: 'Seseorang bisa terkena DBD hingga 4 kali karena terdapat 4 serotipe virus dengue',
+  },
+]
+function Page() {
+  const rows = dataMitos.map((element) => (
+    <TableTr key={element.mitos}>
+      <TableTd fz={'h4'}>{element.mitos}</TableTd>
+      <TableTd fz={'h4'}>{element.fakta}</TableTd>
+    </TableTr>
+  ));
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10}>
+            <Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
+              <Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
+                Detail Lengkap Fasilitas Kesehatan
+              </Text>
+            </Box>
+            <Box p={'md'} >
+              <Stack gap={'xs'}>
+                <Center bg={'#DEE3E3FF'}>
+                  <Image
+                    w={'100%'}
+                    src={'/api/img/dbd.png'}
+                    alt='' />
+                </Center>
+                <Flex gap={'xs'}>
+                  <Box>
+                    <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
+                      12 Februari 2025
+                    </Text>
+                  </Box>
+                  <Divider size="1" orientation="vertical" />
+                  <Box>
+                    <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
+                      Dinas Kesehatan
+                    </Text>
+                  </Box>
+                  <Divider size="1" orientation="vertical" />
+                  <Box>
+                    <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
+                      Kategori: Kesehatan Masyarakat
+                    </Text>
+                  </Box>
+                </Flex>
+                {/* Pendahuluan */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Pendahuluan
+                </Text>
+                <Divider />
+                <Text pb={10} fz={'h4'} ta={'justify'}>
+                  Demam Berdarah Dengue (DBD) adalah penyakit yang disebabkan oleh virus dengue yang ditularkan melalui gigitan nyamuk Aedes aegypti. Selama musim hujan, risiko penyebaran DBD meningkat karena genangan air menjadi tempat berkembang biaknya nyamuk. Artikel ini akan membahas cara efektif untuk mencegah dan menangani DBD di musim hujan.
+                </Text>
+                {/* Kenali Gejala DBD */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Kenali Gejala DBD
+                </Text>
+                <Divider />
+                <Text fz={'h4'}>
+                  Gejala awal DBD seringkali mirip dengan flu biasa, namun ada beberapa tanda khas yang perlu diwaspadai:
+                </Text>
+                <List pb={10}>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Demam tinggi mendadak <Text span fz={'h4'}>(38-40°C) yang berlangsung 2-7 hari</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Nyeri pada sendi, otot, dan tulang <Text span fz={'h4'}>yang sangat mengganggu</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Ruam kemerahan <Text span fz={'h4'}>pada kulit yang muncul 3-4 hari setelah demam</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Nyeri di belakang mata <Text span fz={'h4'}>yang bertambah parah saat menggerakkan mata</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Pendarahan <Text span fz={'h4'}>seperti mimisan, gusi berdarah, atau lebam pada kulit</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Penurunan jumlah trombosit <Text span fz={'h4'}>dalam pemeriksaan darah</Text>
+                    </Text>
+                  </ListItem>
+                </List>
+                {/* Cara Mencegah DBD */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Cara Mencegah DBD
+                </Text>
+                <Divider />
+                <List pb={10} type='ordered'>
+                  <ListItem >
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      3M Plus:
+                    </Text>
+                    <List pb={5}>
+                      <ListItem>
+                        <Text pb={10} fz={'h4'} fw={"bold"}>
+                          Menguras <Text span fz={'h4'}>tempat penampungan air minimal seminggu sekali</Text>
+                        </Text>
+                      </ListItem>
+                      <ListItem>
+                        <Text pb={10} fz={'h4'} fw={"bold"}>
+                          Menutup <Text span fz={'h4'}>rapat tempat penampungan air</Text>
+                        </Text>
+                      </ListItem>
+                      <ListItem>
+                        <Text pb={10} fz={'h4'} fw={"bold"}>
+                          Mengubur <Text span fz={'h4'}>atau mendaur ulang barang bekas yang dapat menampung air</Text>
+                        </Text>
+                      </ListItem>
+                      <ListItem>
+                        <Text pb={10} fz={'h4'} fw={"bold"}>
+                          Plus: <Text span fz={'h4'}>menanam tanaman pengusir nyamuk, memelihara ikan pemakan jentik, dan menggunakan kelambu saat tidur</Text>
+                        </Text>
+                      </ListItem>
+                    </List>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Penggunaan repellent atau lotion anti nyamuk <Text span fz={'h4'}>terutama pada pagi dan sore hari saat nyamuk DBD aktif</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Pemasangan kawat kasa <Text span fz={'h4'}>pada ventilasi rumah</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Fogging atau pengasapan <Text span fz={'h4'}>pada area dengan kasus DBD tinggi (dilakukan oleh petugas kesehatan)</Text>
+                    </Text>
+                  </ListItem>
+                  <ListItem>
+                    <Text pb={10} fz={'h4'} fw={"bold"}>
+                      Bubuk abate <Text span fz={'h4'}>yang ditaburkan pada penampungan air yang sulit dikuras</Text>
+                    </Text>
+                  </ListItem>
+                </List>
+                {/* Pertolongan Pertama Pada Penderita DBD */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Pertolongan Pertama Pada Penderita DBD
+                </Text>
+                <Divider />
+                <List pb={10} type='ordered'>
+                  <ListItem fz={'h4'}>
+                    Berikan banyak cairan untuk mencegah dehidrasi
+                  </ListItem>
+                  <ListItem fz={'h4'}>
+                    Kompres hangat untuk menurunkan demam (hindari kompres dingin)
+                  </ListItem>
+                  <ListItem fz={'h4'}>
+                    Istirahat yang cukup dan pemberian paracetamol untuk meredakan demam (hindari obat aspirin dan ibuprofen)
+                  </ListItem>
+                  <ListItem fz={'h4'}>
+                    Pantau gejala penurunan trombosit seperti bintik merah pada kulit
+                  </ListItem>
+                  <ListItem fz={'h4'}>
+                    Segera bawa ke fasilitas kesehatan jika demam tidak turun setelah 2 hari
+                  </ListItem>
+                </List>
+                {/* Mitos dan Fakta tentang DBD */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Mitos dan Fakta tentang DBD
+                </Text>
+                <Divider />
+                <Table pb={10} highlightOnHover withTableBorder withColumnBorders>
+                  <TableThead>
+                    <TableTr>
+                      <TableTh fz={'h4'}>Mitos</TableTh>
+                      <TableTh fz={'h4'}>Fakta</TableTh>
+                    </TableTr>
+                  </TableThead>
+                  <TableTbody>{rows}</TableTbody>
+                </Table>
+                {/* Kapan Harus ke Dokter */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Kapan Harus ke Dokter?
+                </Text>
+                <Divider />
+                <Text fz={'h4'}>
+                  Segera bawa penderita ke fasilitas kesehatan jika mengalami:
+                </Text>
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Demam tinggi yang tidak turun setelah 2 hari</ListItem>
+                  <ListItem fz={'h4'}>Muntah terus-menerus</ListItem>
+                  <ListItem fz={'h4'}>Nyeri perut yang hebat</ListItem>
+                  <ListItem fz={'h4'}>Perdarahan dari hidung atau gusi</ListItem>
+                  <ListItem fz={'h4'}>Bintik merah pada kulit (petekie)</ListItem>
+                  <ListItem fz={'h4'}>Sulit bernapas</ListItem>
+                  <ListItem fz={'h4'}>Gelisah atau letargi</ListItem>
+                  <ListItem fz={'h4'}>Penurunan kesadaran</ListItem>
+                </List>
+                {/* Kasus DBD di Wilayah Abiansemal */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Kasus DBD di Wilayah Abiansemal
+                </Text>
+                <Divider />
+
+                <Paper p={'lg'} bg={colors['blue-button-trans']}>
+                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Informasi Lebih Lanjut</Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Hotline DBD : <Text span fz={'h4'}>(0361) 123456</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    WhatsApp Center : <Text span fz={'h4'}>081234567890</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Email : <Text span fz={'h4'}>
+                      p2p@dinkes.badungkab.go.id</Text>
+                  </Text>
+                </Paper>
+                {/* Referensi */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Referensi
+                </Text>
+                <Divider />
+                <List pb={10} type='ordered'>
+                  <ListItem fz={'h4'}>Kementerian Kesehatan RI. (2024). Pedoman Pencegahan dan Pengendalian DBD.</ListItem>
+                  <ListItem fz={'h4'}>World Health Organization. (2024). Dengue Guidelines for Diagnosis, Treatment, Prevention and Control.</ListItem>
+                  <ListItem fz={'h4'}>Dinas Kesehatan Kabupaten Badung. (2025). Laporan Surveilans DBD Triwulan I 2025.</ListItem>
+                </List>
+                <Group>
+                  <Button fz={'lg'} bg={colors['blue-button']}>
+                  Download Infografis Pencegahan DBD (PDF)
+                  </Button>
+                  <Button fz={'lg'} bg={'green'}>
+                    Bagikan Artikel Ini
+                  </Button>
+                </Group>
+              </Stack>
+            </Box>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+
+export default Page;

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

@@ -0,0 +1,194 @@
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { Box, Button, Divider, Group, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+
+const dataDokter = [
+  {
+    id: 1,
+    nama: 'dr. Adi Putra',
+    spesilisasi: 'Dokter Umum',
+    jadwal: 'Senin-Jumat, 08:00-12:00'
+  },
+  {
+    id: 2,
+    nama: 'drg. Ratna Dewi',
+    spesilisasi: 'Dokter Gigi',
+    jadwal: 'Senin, Rabu, Jumat 08:00-14:00'
+  },
+  {
+    id: 3,
+    nama: 'Bidan Komang',
+    spesilisasi: 'Kebidanan',
+    jadwal: 'Setiap hari, 08:00-16:00'
+  },
+]
+const dataBiaya = [
+  {
+    id: 1,
+    layanan: 'Poli Umum',
+    tarif: '15.000',
+  },
+  {
+    id: 2,
+    layanan: 'Poli Gigi',
+    tarif: '20.000',
+  },
+  {
+    id: 3,
+    layanan: 'Imunisasi Dasar',
+    tarif: 'Gratis',
+  },
+  {
+    id: 4,
+    layanan: 'Konsultasi KB',
+    tarif: 'Gratis',
+  },
+]
+
+function Page() {
+  const rows = dataDokter.map((element) => (
+    <TableTr key={element.nama}>
+      <TableTd fz={'h4'}>{element.nama}</TableTd>
+      <TableTd fz={'h4'}>{element.spesilisasi}</TableTd>
+      <TableTd fz={'h4'}>{element.jadwal}</TableTd>
+    </TableTr>
+  ));
+
+  const rows2 = dataBiaya.map((element2) => (
+    <TableTr key={element2.layanan}>
+      <TableTd fz={'h4'}>{element2.layanan}</TableTd>
+      <TableTd fz={'h4'}>{element2.tarif}</TableTd>
+    </TableTr>
+  ));
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10}>
+            <Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
+              <Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
+                Detail Lengkap Fasilitas Kesehatan
+              </Text>
+            </Box>
+            <Box p={'md'} >
+              <Stack gap={'xs'}>
+                {/* Informasi Umum */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Informasi Umum
+                </Text>
+                <Divider />
+                <Text fz={'h4'} fw={"bold"}>
+                  Nama Fasilitas : <Text span fz={'h4'}>UPTD Puskesmas Abiansemal III</Text>
+                </Text>
+                <Text fz={'h4'} fw={"bold"}>
+                  Alamat : <Text span fz={'h4'}>Jl. Ratna, Sibang Kaja</Text>
+                </Text>
+                <Text pb={10} fz={'h4'} fw={"bold"}>
+                  Jam Operasional: : <Text span fz={'h4'}>08:00-16:00 WITA (Senin-Sabtu)</Text>
+                </Text>
+                {/* Layanan Unggulan */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Layanan Unggulan
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Poli Umum</ListItem>
+                  <ListItem fz={'h4'}>Poli Gigi</ListItem>
+                  <ListItem fz={'h4'}>Imunisasi</ListItem>
+                  <ListItem fz={'h4'}>Ibu/KB</ListItem>
+                  <ListItem fz={'h4'}>Laboratorium Dasar</ListItem>
+                  <ListItem fz={'h4'}>Farmasi</ListItem>
+                  <ListItem fz={'h4'}>Konsultasi Gizi</ListItem>
+                </List>
+                {/* Tenaga Medis */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Dokter & Tenaga Medis
+                </Text>
+                <Divider />
+                <Table pb={10} highlightOnHover withTableBorder withColumnBorders>
+                  <TableThead>
+                    <TableTr>
+                      <TableTh fz={'h4'}>Nama</TableTh>
+                      <TableTh fz={'h4'}>Spesialisasi</TableTh>
+                      <TableTh fz={'h4'}>Jadwal</TableTh>
+                    </TableTr>
+                  </TableThead>
+                  <TableTbody>{rows}</TableTbody>
+                </Table>
+                {/* Fasilitas Pendukung */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Fasilitas Pendukung
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Apotek dengan ketersediaan obat lengkap</ListItem>
+                  <ListItem fz={'h4'}>Ruang tunggu ber-AC</ListItem>
+                  <ListItem fz={'h4'}>Area bermain anak</ListItem>
+                  <ListItem fz={'h4'}>Ambulans 24 jam</ListItem>
+                  <ListItem fz={'h4'}>Toilet khusus disabilitas</ListItem>
+                  <ListItem fz={'h4'}>Tempat parkir luas</ListItem>
+                </List>
+                {/* Dokter */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Dokter & Tenaga Medis
+                </Text>
+                <Divider />
+                <Table highlightOnHover withTableBorder withColumnBorders>
+                  <TableThead>
+                    <TableTr>
+                      <TableTh fz={'h4'}>Layanan</TableTh>
+                      <TableTh fz={'h4'}>Tarif</TableTh>
+                    </TableTr>
+                  </TableThead>
+                  <TableTbody>{rows2}</TableTbody>
+                </Table>
+                <Text fz={'h6'} pb={10} fw={"bold"}>
+                  * Gratis dengan BPJS Kesehatan
+                </Text>
+                {/* Prosedur Pendaftaran */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Prosedur Pendaftaran
+                </Text>
+                <Divider />
+                <List type='ordered' pb={10} >
+                  <ListItem fz={'h4'}>Pendaftaran dibuka pukul 07:30 WITA</ListItem>
+                  <ListItem fz={'h4'}>Bawa KTP dan Kartu BPJS (jika ada)</ListItem>
+                  <ListItem fz={'h4'}>Ambil nomor antrian di loket pendaftaran</ListItem>
+                  <ListItem fz={'h4'}>Pengunjung baru wajib mengisi formulir pendaftaran</ListItem>
+                  <ListItem fz={'h4'}>Pendaftaran online tersedia melalui aplikasi S-Sehat</ListItem>
+                </List>
+                <Paper p={'lg'} bg={colors['blue-button-trans']}>
+                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Kontak Darurat</Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Telepon : <Text span fz={'h4'}>(0361) 123456</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    WhatsApp : <Text span fz={'h4'}>081234567890</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Email : <Text span fz={'h4'}>puskesmasabiansemal3@gmail.com</Text>
+                  </Text>
+                </Paper>
+                <Paper p={'lg'} w={{ base: "100%", md: "100%" }}>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.272172359321!2d115.21836257533302!3d-8.569807186941553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23e9d99b9395f%3A0xb002795fdcb33b30!2sUPTD%20Puskesmas%20Abiansemal%20III!5e0!3m2!1sid!2sid!4v1744792682341!5m2!1sid!2sid" width="600" height="450" style={{ border: 2, width: "100%", borderRadius: 10 }} loading="lazy"></iframe>
+                </Paper>
+                <Group>
+                  <Button fz={'lg'} bg={colors['blue-button']}>
+                    Download Brosur Layanan (PDF)
+                  </Button>
+                </Group>
+              </Stack>
+            </Box>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+
+export default Page;

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

@@ -0,0 +1,233 @@
+'use client'
+import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, CheckIcon, Combobox, ComboboxChevron, ComboboxOption, ComboboxOptions, ComboboxTarget, Divider, Group, InputBase, InputPlaceholder, List, ListItem, Paper, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
+import { DateInput } from '@mantine/dates';
+import { IconCalendar } from '@tabler/icons-react';
+import { useState } from 'react';
+
+const layanan = [
+  'Penimbangan',
+  'Imunisasi',
+  'Vitamin A',
+  'Konsultasi Gizi',
+  'Pemeriksaan Kesehatan'
+];
+function Page() {
+  const combobox = useCombobox({
+    onDropdownClose: () => combobox.resetSelectedOption(),
+    onDropdownOpen: (eventSource) => {
+      if (eventSource === 'keyboard') {
+        combobox.selectActiveOption();
+      } else {
+        combobox.updateSelectedOptionIndex('active');
+      }
+    },
+  });
+
+  const [value, setValue] = useState<string | null>('');
+
+  const options = layanan.map((item) => (
+    <ComboboxOption value={item} key={item} active={item === value}>
+      <Group gap="xs">
+        {item === value && <CheckIcon size={12} />}
+        <span>{item}</span>
+      </Group>
+    </ComboboxOption>
+  ));
+  const [dateInputOpened, setDateInputOpened] = useState(false);
+
+  const pickerControl = (
+    <ActionIcon onClick={() => setDateInputOpened(true)} variant="subtle" color="gray">
+      <IconCalendar size={18} />
+    </ActionIcon>
+  );
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={'lg'}>
+          <Paper radius={10}>
+            <Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
+              <Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
+                Detail & Pendaftaran Kegiatan
+              </Text>
+            </Box>
+            <Box p={'md'} >
+              <Stack gap={'xs'}>
+                {/* Informasi Kegiatan */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Informasi Kegiatan
+                </Text>
+                <Divider />
+                <Text fz={'h4'} fw={"bold"}>
+                  Nama Kegiatan : <Text span fz={'h4'}>Posyandu Balita</Text>
+                </Text>
+                <Text fz={'h4'} fw={"bold"}>
+                  Tanggal : <Text span fz={'h4'}>21 Februari 2025</Text>
+                </Text>
+                <Text fz={'h4'} fw={"bold"}>
+                  Waktu : <Text span fz={'h4'}>08:00-12:00 WITA</Text>
+                </Text>
+                <Text pb={10} fz={'h4'} fw={"bold"}>
+                  Lokasi : <Text span fz={'h4'}>Banjar Gulingan</Text>
+                </Text>
+                {/* Deskripsi Kegiatan */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Deskripsi Kegiatan
+                </Text>
+                <Divider />
+                <Text pb={10} ta={'justify'} fz={'h4'}>
+                  Posyandu balita adalah program kesehatan rutin untuk memantau tumbuh kembang balita. Kegiatan ini meliputi penimbangan berat badan, pengukuran tinggi badan, pemeriksaan kesehatan dasar, imunisasi, dan konsultasi gizi.
+                </Text>
+                {/* Layanan Yang Tersedia */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Layanan Yang Tersedia
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Penimbangan berat badan</ListItem>
+                  <ListItem fz={'h4'}>Pengukuran tinggi badan</ListItem>
+                  <ListItem fz={'h4'}>Imunisasi rutin</ListItem>
+                  <ListItem fz={'h4'}>Pemberian vitamin A</ListItem>
+                  <ListItem fz={'h4'}>Konsultasi pertumbuhan dan gizi</ListItem>
+                  <ListItem fz={'h4'}>Pemeriksaan kesehatan dasar</ListItem>
+                </List>
+                {/* Syarat dan Ketentuan */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Syarat dan Ketentuan
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>Balita berusia 0-5 tahun</ListItem>
+                  <ListItem fz={'h4'}>Membawa KMS (Kartu Menuju Sehat)</ListItem>
+                  <ListItem fz={'h4'}>Membawa buku KIA (Kesehatan Ibu dan Anak)</ListItem>
+                  <ListItem fz={'h4'}>Orang tua/wali wajib mendampingi</ListItem>
+                  <ListItem fz={'h4'}>Balita dalam kondisi sehat (tidak demam)</ListItem>
+                </List>
+                {/* Dokumen yang Perlu Dibawa */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Dokumen yang Perlu Dibawa
+                </Text>
+                <Divider />
+                <List pb={10}>
+                  <ListItem fz={'h4'}>KMS (Kartu Menuju Sehat)</ListItem>
+                  <ListItem fz={'h4'}>Buku KIA (Kesehatan Ibu dan Anak)</ListItem>
+                  <ListItem fz={'h4'}>KTP orang tua/wali</ListItem>
+                  <ListItem fz={'h4'}>Kartu Keluarga</ListItem>
+                  <ListItem fz={'h4'}>Kartu BPJS (jika ada)</ListItem>
+                </List>
+                {/* Pendaftaran */}
+                <Text fz={'h4'} fw={"bold"}>
+                  Pendaftaran
+                </Text>
+                <Divider />
+                <Stack gap={'xs'} pb={20}>
+                  <TextInput
+                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    label="Nama Balita"
+                    placeholder='Masukkan nama balita'
+                  />
+                  <DateInput
+                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
+                    placeholder='dd/mm/yyyy'
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    label="Tanggal Lahir"
+                    popoverProps={{ opened: dateInputOpened, onChange: setDateInputOpened }}
+                    rightSection={pickerControl}
+                  />
+                  <TextInput
+                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    label="Nama Orang Tua / Wali"
+                    placeholder='Masukkan nama orang tua / wali'
+                  />
+                  <TextInput
+                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    label="No. Telepon"
+                    placeholder='Masukkan no. telepon'
+                  />
+                  <TextInput
+                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    label="Alamat"
+                    placeholder='Masukkan alamat lengkap'
+                  />
+                  {/* Layanan */}
+                  <Text fz={'16px'} fw={"bold"}>
+                    Layananan Yang Dibutuhkan
+                  </Text>
+                  <Box
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                  >
+                    <Combobox
+                      store={combobox}
+                      resetSelectionOnOptionHover
+                      withinPortal={false}
+                      onOptionSubmit={(val) => {
+                        setValue(val);
+                        combobox.updateSelectedOptionIndex('active');
+                      }}
+                    >
+                      <ComboboxTarget targetType="button">
+                        <InputBase
+                          component="button"
+                          type="button"
+                          pointer
+                          rightSection={<ComboboxChevron />}
+                          rightSectionPointerEvents="none"
+                          onClick={() => combobox.toggleDropdown()}
+                        >
+                          {value || <InputPlaceholder>Layanan</InputPlaceholder>}
+                        </InputBase>
+                      </ComboboxTarget>
+
+                      <Combobox.Dropdown>
+                        <ComboboxOptions>{options}</ComboboxOptions>
+                      </Combobox.Dropdown>
+                    </Combobox>
+                  </Box>
+                  <Textarea
+                    pb={10}
+                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }} w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    label="Catatan Khusus (Opsional)"
+                    placeholder='Masukkan catatan jika ada'
+                  />
+                  <Button
+                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                    fz={'md'} bg={colors['blue-button']}>
+                    Daftar Sekarang
+                  </Button>
+                </Stack>
+                <Paper p={'lg'} bg={colors['blue-button-trans']}>
+                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Informasi Kontak</Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Penanggung Jawab : <Text span fz={'h4'}>Bidan Komang Ayu</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Telepon : <Text span fz={'h4'}>081234567890</Text>
+                  </Text>
+                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
+                    Email : <Text span fz={'h4'}>puskesmasabiansemal3@gmail.com</Text>
+                  </Text>
+                </Paper>
+                <Group>
+                  <Button fz={'lg'} bg={'green'}>
+                    Download Jadwal Posyandu 2025 (PDF)
+                  </Button>
+                </Group>
+              </Stack>
+            </Box>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+
+export default Page;

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

@@ -3,6 +3,7 @@ import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor,
 import React from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { BarChart } from '@mantine/charts';
+import Link from 'next/link';
 
 
 const dataKematian = [
@@ -144,8 +145,8 @@ function Page() {
                       <Text fz={'h4'}>
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'}>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
                       </Anchor>
@@ -165,8 +166,8 @@ function Page() {
                       <Text fz={'h4'}>
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'}>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
                       </Anchor>
@@ -186,8 +187,8 @@ function Page() {
                       <Text fz={'h4'}>
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'}>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
                       </Anchor>
@@ -214,7 +215,7 @@ function Page() {
                       <Text fz={'h4'}>
                         Banjar Gulingan
                       </Text>
-                      <Anchor c={colors['blue-button']} variant='transparent'>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan'} c={colors['blue-button']} variant='transparent'>
                         <Text c={colors['blue-button']} fz={'h4'} >
                           Detail & Pendaftaran
                         </Text>
@@ -234,7 +235,7 @@ function Page() {
                       <Text fz={'h4'}>
                       Puskesmas Abiansemal III
                       </Text>
-                      <Anchor c={colors['blue-button']} variant='transparent'>
+                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan'} c={colors['blue-button']} variant='transparent'>
                         <Text c={colors['blue-button']} fz={'h4'} >
                           Detail & Pendaftaran
                         </Text>
@@ -259,8 +260,8 @@ function Page() {
                       <Text fz={'h4'} pb={10}>
                       Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'} >
+                      <Anchor c={'black'} component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan'} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'} >
                           Baca Selengkapnya {'>>'}
                         </Text>
                       </Anchor>
@@ -278,8 +279,8 @@ function Page() {
                       <Text fz={'h4'} pb={10}>
                       Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
                       </Text>
-                      <Anchor c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'} >
+                      <Anchor c={'black'} href={'/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan'} variant='transparent'>
+                        <Text c={colors['blue-button']} fz={'h4'} >
                           Baca Selengkapnya {'>>'}
                         </Text>
                       </Anchor>

src/app/layout.tsx

@@ -8,6 +8,7 @@ import 'react-simple-toasts/dist/style.css';
 import 'react-simple-toasts/dist/theme/dark.css';
 import "./globals.css";
 import '@mantine/charts/styles.css';
+import '@mantine/dates/styles.css';