Dashboard Admin

package.json

@@ -39,6 +39,7 @@
     "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 />
+    <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)/kesehatan/data-kesehatan-warga/(tambahan)/artikel-kesehatan/page.tsx

@@ -1,11 +1,277 @@
-import React from 'react';
+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 (
-    <div>
-      Page
-    </div>
+    <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)/jadwal-kegiatan/page.tsx

@@ -1,11 +1,233 @@
-import React from 'react';
+'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 (
-    <div>
-      Page
-    </div>
+    <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

@@ -146,7 +146,7 @@ function Page() {
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
                       <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'}>
+                        <Text c={colors['blue-button']} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
                       </Anchor>
@@ -167,7 +167,7 @@ function Page() {
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
                       <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'}>
+                        <Text c={colors['blue-button']} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
                       </Anchor>
@@ -188,7 +188,7 @@ function Page() {
                         Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
                       </Text>
                       <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
-                        <Text c={'black'} fz={'h4'}>
+                        <Text c={colors['blue-button']} fz={'h4'}>
                           Detail Lengkap {'>>'}
                         </Text>
                       </Anchor>
@@ -215,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>
@@ -235,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>
@@ -260,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>
@@ -279,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>