Membuat database menu desa: Berita & Pengummuman

Dashboard Admin
Rabu 16 April 2025
2025-04-22 21:48:01 +08:00 · 2025-04-21 17:49:13 +08:00 · 2025-04-17 10:11:12 +08:00
115 changed files with 3680 additions and 180 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -20,23 +20,36 @@
    "@elysiajs/swagger": "^1.2.0",
    "@mantine/carousel": "^7.16.2",
    "@mantine/charts": "^7.17.1",
-    "@mantine/core": "^7.16.2",
+    "@mantine/core": "^7.17.4",
+    "@mantine/dates": "^7.17.4",
    "@mantine/dropzone": "^7.17.0",
-    "@mantine/hooks": "^7.16.2",
+    "@mantine/hooks": "^7.17.4",
+    "@mantine/tiptap": "^7.17.4",
    "@paljs/types": "^8.1.0",
    "@prisma/client": "^6.3.1",
    "@tabler/icons-react": "^3.30.0",
+    "@tiptap/extension-highlight": "^2.11.7",
+    "@tiptap/extension-link": "^2.11.7",
+    "@tiptap/extension-subscript": "^2.11.7",
+    "@tiptap/extension-superscript": "^2.11.7",
+    "@tiptap/extension-text-align": "^2.11.7",
+    "@tiptap/extension-underline": "^2.11.7",
+    "@tiptap/pm": "^2.11.7",
+    "@tiptap/react": "^2.11.7",
+    "@tiptap/starter-kit": "^2.11.7",
    "@types/bun": "^1.2.2",
-    "@types/lodash": "^4.17.15",
+    "@types/lodash": "^4.17.16",
    "add": "^2.0.6",
    "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",
@@ -47,10 +60,12 @@
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-simple-toasts": "^6.1.0",
+    "react-toastify": "^11.0.5",
    "readdirp": "^4.1.1",
    "recharts": "2",
    "swr": "^2.3.2",
-    "valtio": "^2.1.3"
+    "valtio": "^2.1.3",
+    "zod": "^3.24.3"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
--- a/prisma/data/category-pengumuman.json
+++ b/prisma/data/category-pengumuman.json
@@ -0,0 +1,8 @@
+[
+  { "name": "Sosial & Kesehatan" },
+  { "name": "Ekonomi & UMKM" },
+  { "name": "Pendidikan & Kepemudaan" },
+  { "name": "Lingkungan & Bencana" },
+  { "name": "Adat & Budaya" },
+  { "name": "Digitalisasi Desa" }
+]
--- a/prisma/data/katagory-berita.json
+++ b/prisma/data/katagory-berita.json
@@ -0,0 +1,9 @@
+[
+  { "name": "Semua" },
+  { "name": "Pemerintahan" },
+  { "name": "Pembangunan" },
+  { "name": "Ekonomi" },
+  { "name": "Sosial" },
+  { "name": "Budaya" },
+  { "name": "Teknologi" }
+]
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -17,3 +17,81 @@ model Potensi {
  name String @unique
 }

+model LandingPage_Layanan {
+  id        String @id @default(cuid())
+  deksripsi String
+}
+
+// ========================================= APPMENU ========================================= //
+model AppMenu {
+  id           String         @id @default(cuid())
+  name         String         @unique
+  link         String
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime       @default(now())
+  isActive     Boolean        @default(true)
+  AppMenuChild AppMenuChild[]
+}
+
+// ========================================= APPMENUCHILD ========================================= //
+model AppMenuChild {
+  id        String   @id @default(cuid())
+  name      String   @unique
+  link      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+  AppMenu   AppMenu? @relation(fields: [appMenuId], references: [id])
+  appMenuId String?
+}
+
+// ========================================= BERITA ========================================= //
+model Berita {
+  id               String          @id @default(cuid())
+  judul            String
+  deskripsi        String
+  image            String
+  content          String          @db.Text
+  createdAt        DateTime        @default(now())
+  updatedAt        DateTime        @updatedAt
+  deletedAt        DateTime        @default(now())
+  isActive         Boolean         @default(true)
+  KatagoryBerita   KatagoryBerita? @relation(fields: [katagoryBeritaId], references: [id])
+  katagoryBeritaId String?
+}
+
+model KatagoryBerita {
+  id        String   @id @default(cuid())
+  name      String   @unique
+  beritas   Berita[]
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= PENGUMUMAN ========================================= //
+model Pengumuman {
+  id                   String              @id @default(cuid())
+  judul                String
+  deskripsi            String
+  content              String              @db.Text
+  createdAt            DateTime            @default(now())
+  updatedAt            DateTime            @updatedAt
+  deletedAt            DateTime            @default(now())
+  isActive             Boolean             @default(true)
+  CategoryPengumuman   CategoryPengumuman? @relation(fields: [categoryPengumumanId], references: [id])
+  categoryPengumumanId String?
+}
+
+model CategoryPengumuman {
+  id          String       @id @default(cuid())
+  name        String       @unique
+  pengumumans Pengumuman[]
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  deletedAt   DateTime     @default(now())
+  isActive    Boolean      @default(true)
+}
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,7 +1,9 @@
 import layanan from './data/list-layanan.json'
 import potensi from './data/list-potensi.json'
+import katagoryBerita from './data/katagory-berita.json'
+import categoryPengumuman from './data/category-pengumuman.json'
 import prisma from '@/lib/prisma';
-; (async () => {
+(async () => {
    for (const l of layanan) {
        await prisma.layanan.upsert({
            where: {
@@ -33,6 +35,38 @@ import prisma from '@/lib/prisma';
    }

    console.log("potensi success ...")
+
+    for (const k of katagoryBerita) {
+        await prisma.katagoryBerita.upsert({
+            where: {
+                name: k.name
+            },
+            update: {
+                name: k.name
+            },
+            create: {
+                name: k.name
+            }
+        })
+    }
+
+    console.log("katagory berita success ...")
+
+    for (const c of categoryPengumuman) {
+        await prisma.categoryPengumuman.upsert({
+            where: {
+                name: c.name
+            },
+            update: {
+                name: c.name
+            },
+            create: {
+                name: c.name
+            }
+        })
+    }
+
+    console.log("category pengumuman success ...")
 })().then(() => prisma.$disconnect()).catch((e) => {
    console.error(e)
    prisma.$disconnect()
--- a/src/app/admin/(dashboard)/_state/berita.ts
+++ b/src/app/admin/(dashboard)/_state/berita.ts
@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  image: z.string().url().min(3, "Image minimal 3 karakter"),
+  content: z.string().min(3, "Content minimal 3 karakter"),
+  katagoryBeritaId: z.string().nonempty(),
+});
+
+const category = proxy({
+  findMany: {
+    data: null as
+      | null
+      | Prisma.KatagoryBeritaGetPayload<{ omit: { isActive: true } }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.berita.category["find-many"].get();
+      if (res.status === 200) {
+        category.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+});
+
+type BeritaForm = Prisma.BeritaGetPayload<{
+  select: {
+    judul: true;
+    deskripsi: true;
+    image: true;
+    content: true;
+    katagoryBeritaId: true;
+  };
+}>;
+
+const berita = proxy({
+  create: {
+    form: {} as BeritaForm,
+    loading: false,
+    async create() {
+      berita.create.form.image =
+        "https://www.shutterstock.com/image-vector/lower-news-live-streaming-breaking-600nw-2535984111.jpg";
+      const cek = templateForm.safeParse(berita.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        berita.create.loading = true;
+        const res = await ApiFetch.api.desa.berita["create"].post(
+          berita.create.form
+        );
+        if (res.status === 200) {
+          berita.findMany.load();
+          return toast.success("succes create");
+        }
+
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        berita.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.BeritaGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.berita["find-many"].get();
+      console.log(res)
+      if (res.status === 200) {
+        berita.findMany.data = (res.data?.data as any) ?? [];
+      }
+    },
+  },
+});
+
+const stateDashboardBerita = proxy({
+  category,
+  berita,
+});
+
+export default stateDashboardBerita;
--- a/src/app/admin/(dashboard)/_state/pengumuman.ts
+++ b/src/app/admin/(dashboard)/_state/pengumuman.ts
@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch"
+import { Prisma } from "@prisma/client"
+import { toast } from "react-toastify"
+import { proxy } from "valtio"
+import { z } from "zod"
+
+const templateFormPengumuman = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+    content: z.string().min(3, "Content minimal 3 karakter"),
+    categoryPengumumanId: z.string().nonempty(),
+})
+
+const category = proxy ({
+    findMany: {
+        data: null as
+          | null
+          | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
+          async load() {
+            const res = await ApiFetch.api.desa.pengumuman.category["find-many"].get();
+            if (res.status === 200) {
+                category.findMany.data = res.data?.data as any ?? [];
+            }
+          }
+    }
+})
+
+type PengumumanForm = Prisma.PengumumanGetPayload<{
+    select: {
+        judul: true;
+        deskripsi: true;
+        content: true;
+        categoryPengumumanId: true;
+    }
+}>
+const pengumuman = proxy({
+create: {
+    form: {} as PengumumanForm,
+    loading: false,
+    async create() {
+       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
+       if (!cek.success) {
+        const err = `[${cek.error.issues
+        .map((v) => `${v.path.join(".")}`)
+        .join("\n")}] required`;
+        return toast.error(err);
+       }
+       try {
+        pengumuman.create.loading = true;
+        const res = await ApiFetch.api.desa.pengumuman["create"].post(pengumuman.create.form)
+        if (res.status === 200) {
+            pengumuman.findMany.load();
+            return toast.success("success create");
+        }
+        console.log(res)
+        return toast.error("failed create");
+       } catch (error) {
+        console.log((error as Error).message);
+       } finally{
+        pengumuman.create.loading = false;
+       }
+    }
+},
+findMany: {
+    data: null as
+    | Prisma.PengumumanGetPayload<{omit: {isActive: true}}>[]
+    | null,
+    async load () {
+        const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
+        console.log(res)
+        if (res.status === 200) {
+            pengumuman.findMany.data = res.data?.data ?? [];
+        }
+    }
+}
+})
+
+const stateDesaPengumuman = proxy({
+    category,
+    pengumuman
+})
+export default stateDesaPengumuman
--- a/src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/_com/BeritaEditor.tsx
@@ -0,0 +1,85 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { Button, Stack } from '@mantine/core';
+
+const content =
+  '<h2 style="text-align: center;">Welcome to Mantine rich text editor</h2><p><code>RichTextEditor</code> component focuses on usability and is designed to be as simple as possible to bring a familiar editing experience to regular users. <code>RichTextEditor</code> is based on <a href="https://tiptap.dev/" rel="noopener noreferrer" target="_blank">Tiptap.dev</a> and supports all of its features:</p><ul><li>General text formatting: <strong>bold</strong>, <em>italic</em>, <u>underline</u>, <s>strike-through</s> </li><li>Headings (h1-h6)</li><li>Sub and super scripts (<sup>&lt;sup /&gt;</sup> and <sub>&lt;sub /&gt;</sub> tags)</li><li>Ordered and bullet lists</li><li>Text align&nbsp;</li><li>And all <a href="https://tiptap.dev/extensions" target="_blank" rel="noopener noreferrer">other extensions</a></li></ul>';
+
+export function BeritaEditor({ onSubmit }: { onSubmit: (val: string) => void }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    content,
+  });
+
+  return (
+    <Stack>
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      <Button onClick={() => {
+        if (!editor) return
+        onSubmit(editor?.getHTML())
+      }}>Submit</Button>
+    </Stack>
+  );
+}
--- a/src/app/admin/(dashboard)/desa/berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/page.tsx
@@ -0,0 +1,88 @@
+'use client'
+import { Center, Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { IconImageInPicture } from '@tabler/icons-react';
+import { useProxy } from 'valtio/utils';
+import stateDashboardBerita from '../../_state/berita';
+import { BeritaEditor } from './_com/BeritaEditor';
+
+function Page() {
+  return (
+    <Stack>
+      <SimpleGrid cols={2}>
+        <BeritaList />
+        <BeritaCreate />
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+function BeritaList() {
+  const beritaState = useProxy(stateDashboardBerita)
+  useShallowEffect(() => {
+    beritaState.berita.findMany.load()
+  }, [])
+
+  if (!beritaState.berita.findMany.data) return <Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+  return <Stack>
+    <Text>News List</Text>
+    {beritaState.berita.findMany.data?.map((item) => (
+      <Text key={item.id}>{item.judul}</Text>
+    ))}
+  </Stack>
+}
+
+function BeritaCreate() {
+  const beritaState = useProxy(stateDashboardBerita)
+  return <Stack gap={"md"}>
+    <Text>Create Some News</Text>
+    <SelectCategory onChange={(val) => {
+      beritaState.berita.create.form.katagoryBeritaId = val.id
+    }} />
+    <TextInput onChange={(val) => {
+      beritaState.berita.create.form.judul = val.target.value
+    }} label={"Judul"} placeholder='masukkan judul' />
+    <TextInput onChange={(val) => {
+      beritaState.berita.create.form.deskripsi = val.target.value
+    }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
+    <Center w={200} h={200} bg={"gray"}>
+      <IconImageInPicture />
+    </Center>
+    <BeritaEditor onSubmit={(val) => {
+
+      beritaState.berita.create.form.content = val
+      beritaState.berita.create.create()
+    }} />
+  </Stack>
+}
+
+function SelectCategory({ onChange }: {
+  onChange: (value: Prisma.KatagoryBeritaGetPayload<{
+    select: {
+      name: true,
+      id: true
+    }
+  }>) => void
+}) {
+  const beritaState = useProxy(stateDashboardBerita)
+  useShallowEffect(() => {
+    beritaState.category.findMany.load()
+  }, [])
+
+  if (!beritaState.category.findMany.data) return <Skeleton h={40} />
+  return <Group>
+    <Select placeholder='pilih katagori' label={"select katagori"} data={beritaState.category.findMany.data.map((item) => ({
+      value: item.id,
+      label: item.name
+    }))} onChange={(v) => {
+      const data = beritaState.category.findMany.data?.find((item) => item.id === v)
+      if (!data) return
+      onChange(data)
+    }} />
+  </Group>
+}
+
+export default Page;
--- a/src/app/admin/(dashboard)/desa/gallery/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/desa/layanan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/desa/penghargaan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/page.tsx
@@ -0,0 +1,89 @@
+'use client'
+import { Group, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDesaPengumuman from '../../_state/pengumuman';
+import { useShallowEffect } from '@mantine/hooks';
+import { Prisma } from '@prisma/client';
+import { BeritaEditor } from '../berita/_com/BeritaEditor';
+
+function Page() {
+  return (
+    <Stack>
+      <SimpleGrid cols={{
+        base: 1, md: 2
+      }}>
+        <PengumumanList />
+        <PengumumanCreate />
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+function PengumumanList() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  useShallowEffect(() => {
+    pengumumanState.pengumuman.findMany.load()
+  }, [])
+
+  if (!pengumumanState.pengumuman.findMany.data) return <Stack>
+    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
+  </Stack>
+  return <Stack>
+    <Text>Announcement List</Text>
+    {pengumumanState.pengumuman.findMany.data?.map((item) => (
+      <Text key={item.id}>{item.judul}</Text>
+    ))}
+  </Stack>;
+}
+
+function PengumumanCreate() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+
+
+  return <Stack gap={"md"}>
+    <Text>Create Some Announcement</Text>
+    <SelectCategory onChange={(val) => {
+      pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id
+    }} />
+    <TextInput onChange={(val) => {
+      pengumumanState.pengumuman.create.form.judul = val.target.value
+    }} label={"Judul"} placeholder='masukkan judul' />
+    <TextInput onChange={(val) => {
+      pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+    }} label={"Deskripsi"} placeholder='masukkan deskripsi' />
+    <BeritaEditor onSubmit={(val) => {
+      pengumumanState.pengumuman.create.form.content = val
+      pengumumanState.pengumuman.create.create()
+    }} />
+  </Stack>
+}
+
+function SelectCategory({ onChange }: {
+  onChange: (value: Prisma.CategoryPengumumanGetPayload<{
+    select: {
+      name: true,
+      id: true
+    }
+  }>) => void
+}) {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  useShallowEffect(() => {
+    pengumumanState.category.findMany.load()
+  }, [])
+
+  if (!pengumumanState.category.findMany.data) return <Skeleton h={40} />
+  return <Group>
+    {/* {JSON.stringify(pengumumanState.category.findMany.data)} */}
+    <Select placeholder='pilih kategori' label={"select katagori"} data={pengumumanState.category.findMany.data.map((item) => ({
+      value: item.id,
+      label: item.name
+    }))} onChange={(v) => {
+      const data = pengumumanState.category.findMany.data?.find((item) => item.id === v)
+      if (!data) return
+      onChange(data)
+    }}
+    />
+  </Group>
+}
+export default Page;
--- a/src/app/admin/(dashboard)/desa/potensi/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/desa/profile/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin-2024-2025/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran-2024-2025/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/keamanan/kontak-darurat/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/keamanan/laporan-publik/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/keamanan/tips-keamanan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/posyandu/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/layanan/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/layanan/page.tsx
@@ -0,0 +1,23 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Stack, Text, Textarea, Title } from '@mantine/core';
+
+function Page() {
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Title order={2}>Layanan</Title>
+        <Textarea
+          label={<Text>Deskripsi</Text>}
+          placeholder='tambah deskripsi'
+        />
+        <Group>
+          <Button
+            bg={colors['blue-button']} fz={'md'}>Submit</Button>
+        </Group>
+      </Stack>
+    </Box>
+  );
+}
+
+export default Page;
--- a/src/app/admin/(dashboard)/landing-page/penghargaan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/potensi/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/prestasi-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/profile/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/sdgs-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/beasiswa-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/data-pendidikan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/profile-ppid/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/struktur-ppid/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx
+++ b/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;
--- a/src/app/admin/_com/list_PageAdmin.tsx
+++ b/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"
+      }
+    ]
+  }
+]
--- a/src/app/admin/images/layout.tsx
+++ b/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;
--- a/src/app/admin/layout.tsx
+++ b/src/app/admin/layout.tsx
@@ -1,11 +1,87 @@
-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, Text } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import _ from 'lodash';
+import Link from "next/link";
+import { useSelectedLayoutSegments } from "next/navigation";
+import { navBar } from "./_com/list_PageAdmin";

 export default function Layout({ children }: { children: React.ReactNode }) {
+  const [opened, { toggle }] = useDisclosure();
+  const [desktopOpened, { toggle: toggleDesktop }] =
+    useDisclosure(true);
+
+
+  const segments = useSelectedLayoutSegments()
  return (
-    <Stack gap={0}>
-      <AdminNav />
-      {children}
-    </Stack>
+    <AppShell
+      suppressHydrationWarning
+      header={{ height: 60 }}
+      navbar={{
+        width: 300, breakpoint: 'sm', collapsed: { mobile: !opened, desktop: !desktopOpened }
+      }}
+      padding={'md'}
+    >
+      <AppShellHeader bg={colors["white-trans-1"]}>
+        <Group px={10} align="center">
+          {!desktopOpened && <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronRight /></ActionIcon>}
+          <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}
+      >
+        <AppShell.Section h={100} bg={"gray.1"}>
+          <Text c={colors["blue-button"]}>Heder Navbar</Text>
+        </AppShell.Section>
+        <AppShell.Section >
+          {navBar.map((v, k) => {
+            return (
+              <NavLink
+                c={_.lowerCase(v.name) == segments[1] ? colors["blue-button"] : "grey"}
+                key={k}
+                defaultOpened={_.lowerCase(v.name) == segments[1]}
+                // onClick={() => setActive(k)}
+                label={<Text
+                  style={{ fontWeight: _.lowerCase(v.name) == segments[1] ? "bold" : "normal" }}
+                >{v.name}</Text>}
+              >
+                {v.children.map((child, key) => {
+                  return (
+                    <NavLink
+                      c={_.lowerCase(child.name) == _.lowerCase(segments[2]) ? colors["blue-button"] : "grey"}
+                      key={key}
+                      href={child.path}
+                      // active={isClient && Number(child.id) === active}
+                      // onClick={() => setActive(Number(child.id))}
+                      label={<Text
+                        style={{ fontWeight: _.lowerCase(child.name) == _.lowerCase(segments[2]) ? "bold" : "normal" }}
+                      >{child.name}</Text>}
+                    />
+                  )
+                })}
+              </NavLink>
+            )
+          })}
+        </AppShell.Section>
+
+        <AppShell.Section>
+          <Group justify="end">
+            <ActionIcon variant="light" onClick={toggleDesktop}><IconChevronLeft /></ActionIcon>
+          </Group>
+        </AppShell.Section>
+      </AppShellNavbar>
+      <AppShellMain bg={colors.Bg}>
+        {children}
+      </AppShellMain>
+    </AppShell>
  );
-}
+}
--- a/src/app/admin/page.tsx
+++ b/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>
+    )
+}
--- a/src/app/api/[[...slugs]]/_lib/desa/berita/category.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/berita/category.ts
@@ -0,0 +1,9 @@
+import prisma from "@/lib/prisma";
+
+ async function katagoryBeritaFindMany() {
+  const data = await prisma.katagoryBerita.findMany();
+  return { data };
+}
+
+export default katagoryBeritaFindMany
+
--- a/src/app/api/[[...slugs]]/_lib/desa/berita/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/berita/create.ts
@@ -0,0 +1,39 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.BeritaGetPayload<{
+  select: {
+    judul: true;
+    deskripsi: true;
+    image: true;
+    content: true;
+    katagoryBeritaId: true;
+  };
+}>;
+async function beritaCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+//   console.log(body)
+
+  await prisma.berita.create({
+  data: {
+      content: body.content,
+      deskripsi: body.deskripsi,
+      image: body.image,
+      judul: body.judul,
+      katagoryBeritaId: body.katagoryBeritaId,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Success create berita",
+    data: {
+      ...body,
+    },
+  };
+}
+
+export default beritaCreate
+
--- a/src/app/api/[[...slugs]]/_lib/desa/berita/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/berita/find-many.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma";
+
+export default async function beritaFindMany() {
+  const res = await prisma.berita.findMany();
+  return {
+    data: res,
+  };
+}
--- a/src/app/api/[[...slugs]]/_lib/desa/berita/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/berita/index.ts
@@ -0,0 +1,19 @@
+import Elysia, { t } from "elysia";
+import katagoryBeritaFindMany from "./category";
+import beritaFindMany from "./find-many";
+import beritaCreate from "./create";
+
+const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
+  .get("/category/find-many", katagoryBeritaFindMany)
+  .get("/find-many", beritaFindMany)
+  .post("/create", beritaCreate, {
+    body: t.Object({
+      judul: t.String(),
+      deskripsi: t.String(),
+      image: t.String(),
+      content: t.String(),
+      katagoryBeritaId: t.Union([t.String(), t.Null()]),
+    }),
+  });
+
+export default Berita;
--- a/src/app/api/[[...slugs]]/_lib/desa/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/index.ts
@@ -0,0 +1,9 @@
+import Elysia from "elysia";
+import Berita from "./berita";
+import Pengumuman from "./pengumuman";
+
+const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
+  .use(Berita)
+  .use(Pengumuman)
+
+export default Desa;
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/category.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/category.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma";
+
+async function pengumumanCategoryFindMany() {
+  const data = await prisma.categoryPengumuman.findMany();
+  return { data };
+}
+
+export default pengumumanCategoryFindMany
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/create.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/create.ts
@@ -0,0 +1,43 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.PengumumanGetPayload<{
+  select: {
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
+}>;
+
+export async function pengumumanCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  try {
+    await prisma.pengumuman.create({
+      data: {
+        content: body.content,
+        deskripsi: body.deskripsi,
+        judul: body.judul,
+        categoryPengumumanId: body.categoryPengumumanId,
+      },
+    });
+  } catch (error) {
+    console.error(error);
+    console.error(body)
+    return {
+      success: false,
+      message: "Failed create pengumuman",
+      error: error,
+    };
+  }
+
+  return {
+    success: true,
+    message: "Success create pengumuman",
+    data: {
+      ...body,
+    },
+  };
+}
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts
@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma";
+
+export default async function pengumumanFindMany() {
+    const res = await prisma.pengumuman.findMany();
+    return {
+        data: res,
+    };
+}
--- a/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts
+++ b/src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts
@@ -0,0 +1,19 @@
+import Elysia from "elysia";
+import { pengumumanCreate } from "./create";
+import pengumumanFindMany from "./find-many";
+import { t } from "elysia";
+import pengumumanCategoryFindMany from "./category";
+
+const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"] })
+  .get("/category/find-many", pengumumanCategoryFindMany)
+  .get("/find-many", pengumumanFindMany)
+  .post("/create", pengumumanCreate, {
+    body: t.Object({
+      judul: t.String(),
+      deskripsi: t.String(),
+      content: t.String(),
+      categoryPengumumanId: t.Union([t.String(), t.Null()]),
+    }),
+  });
+
+export default Pengumuman;  
--- a/src/app/api/[[...slugs]]/_lib/landing_page/layanan.ts
+++ b/src/app/api/[[...slugs]]/_lib/landing_page/layanan.ts
@@ -0,0 +1,36 @@
+import { MODEL_LANDING_PAGE_LAYANAN } from "@/app/admin/(dashboard)/landing-page/layanan/lib/interface";
+import prisma from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function layanan_landingpage({req} : {req: MODEL_LANDING_PAGE_LAYANAN}) {
+  try {
+    const data = await prisma.landingPage_Layanan.create({
+        data: {
+            id: req.id,
+            deksripsi: req.deskripsi    
+        },
+        select: {
+            id: true,
+            deksripsi: true
+        }
+    })
+    return NextResponse.json(
+        {
+          success: true,
+          message: "Success get collaboration",
+          data: data,
+        },
+        { status: 200 }
+      );
+  } catch (error) {
+    console.error("Error create layanan", error);
+    return NextResponse.json(
+      {
+        success: false,
+        message: "Error create layanan",
+        reason: (error as Error).message,
+      },
+      { status: 500 }
+    );
+  }
+}
--- a/src/app/api/[[...slugs]]/route.ts
+++ b/src/app/api/[[...slugs]]/route.ts
@@ -2,16 +2,17 @@ import prisma from "@/lib/prisma";
 import cors, { HTTPMethod } from "@elysiajs/cors";
 import swagger from "@elysiajs/swagger";
 import { Elysia, t } from "elysia";
-import getPotensi from "./_lib/get-potensi";
-import img from "./_lib/img";
 import fs from "fs/promises";
 import path from "path";
-import uplImg from "./_lib/upl-img";
+import getPotensi from "./_lib/get-potensi";
+import img from "./_lib/img";
+import imgDel from "./_lib/img-del";
 import imgs from "./_lib/imgs";
 import uplCsv from "./_lib/upl-csv";
-import imgDel from "./_lib/img-del";
-import { uplImgSingle } from "./_lib/upl-img-single";
 import { uplCsvSingle } from "./_lib/upl-csv-single";
+import uplImg from "./_lib/upl-img";
+import { uplImgSingle } from "./_lib/upl-img-single";
+import Desa from "./_lib/desa";
 const ROOT = process.cwd();

 if (!process.env.WIBU_UPLOAD_DIR)
@@ -46,6 +47,7 @@ async function layanan() {
 const ApiServer = new Elysia()
  .use(swagger({ path: "/api/docs" }))
  .use(cors(corsConfig))
+  .use(Desa)
  .onError(({ code }) => {
    if (code === "NOT_FOUND") {
      return {
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/budaya.tsx
+++ b/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}>
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/ekonomi.tsx
+++ b/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}>
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/pembangunan.tsx
+++ b/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}>
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/pemerintahan.tsx
+++ b/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}>
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/semua.tsx
+++ b/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}>
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/sosial.tsx
+++ b/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}>
--- a/src/app/darmasaba/(pages)/desa/berita/(tabs)/teknologi.tsx
+++ b/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">
--- a/src/app/darmasaba/(pages)/desa/galery/(tabs)/video.tsx
+++ b/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>
  );
 }
--- a/src/app/darmasaba/(pages)/desa/galery/page.tsx
+++ b/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>
--- a/src/app/darmasaba/(pages)/desa/layanan/page.tsx
+++ b/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>
--- a/Show More
+++ b/Show More