Dashboard Admin

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>
+    )
+}