Membuat database menu desa: Berita & Pengummuman

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",
@@ -13,28 +13,43 @@
     "seed": "bun run prisma/seed.ts"
   },
   "dependencies": {
+    "@cubejs-client/core": "^0.31.0",
     "@elysiajs/cors": "^1.2.0",
     "@elysiajs/eden": "^1.2.0",
     "@elysiajs/stream": "^1.1.0",
     "@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",
@@ -45,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",
@@ -60,6 +77,7 @@
     "postcss": "^8.5.1",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "typescript": "^5"
+    "typescript": "^5",
+    "parcel": "^2.6.2"
   }
 }

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" }
+]

prisma/data/katagory-berita.json

@@ -0,0 +1,9 @@
+[
+  { "name": "Semua" },
+  { "name": "Pemerintahan" },
+  { "name": "Pembangunan" },
+  { "name": "Ekonomi" },
+  { "name": "Sosial" },
+  { "name": "Budaya" },
+  { "name": "Teknologi" }
+]

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

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()

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;

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

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

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;

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,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;

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/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;

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

src/app/admin/page.tsx

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

src/app/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
+

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
+

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,
+  };
+}

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;

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;

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

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,
+    },
+  };
+}

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,
+    };
+}

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;  

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

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 {

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

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'FESTIVAL SENI BUDAYA KAB. BADUNG',
+    image: "/api/img/tari-3.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'LATIHAN TARI REJANG GIRI PUTRI',
+    image: "/api/img/tari-3.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Budaya() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/budaya-1.jpg"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 610 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Budaya</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  FESTIVAL SENI BUDAYA KAB. BADUNG
+                </Text>
+                <Text size="md" lineClamp={3}>
+                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">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    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">Budaya</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  PELATIHAN TARI WALI
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    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">Budaya</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  LATIHAN TARI REJANG GIRI PUTRI
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt=""
+                    fit="cover"
+                    h={282}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Budaya</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Budaya;

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

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023',
+    image: "/api/img/ekonomi-sampingan-3.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    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: 'ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI ',
+    image: "/api/img/ekonomi-sampingan-2.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Ekonomi() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/ekonomi-utama.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 660 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Ekonomi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                PROGRAM KETAHANAN PANGAN PEMERINTAH DESA DARMASABA TAHUN 2023
+                </Text>
+                <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">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    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">Ekonomi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  Sinergitas Pemkab Badung-TNI Wujudkan Kedaulatan Pangan di Subak Aban Darmasaba 
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    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">Ekonomi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                  ANTUSIASME WARGA DARMASABA MELAKUKAN PEMBUKAAN REKENING BANK BPD BALI
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Ekonomi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Ekonomi;

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

@@ -0,0 +1,187 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN',
+    image: "/api/img/pembangunan-1.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL',
+    image: "/api/img/pembangunan-3.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN',
+    image: "/api/img/pembangunan-1.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+]
+function Pembangunan() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, xl: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/pembangunan-1.jpg"
+                    alt="PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 615 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Pembangunan</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                PEMBANGUNAN TROTOARISASI JALAN LINGKUNGAN BR. GULINGAN
+                </Text>
+                <Text size="md" lineClamp={3}>
+                Sudah tertata rapi dan bersih niki Semeton Darmasaba! Sekarang pejalan kaki di seputaran jalan lingkungan Br. Gulingan bisa aman dan nyaman nie!!!
+
+Pemdes Darmasaba dalam rangka memenuhi kebutuhan masyarakat khususnya warga Br. Gulingan yang memerlukan trotoarisasi guna memperlancar saluran air dan memberikan kenyamanan ketika berjalan, kini sudah menyelesaikan pembangunan trotoarisasi jalan lingkungan Br. Gulingan. Pembangunan tersebut menggunakan APBDes Darmasaba T. A. 2023 dengan realisasi sebesar Rp357.011.299,00 dari pagu yang disiapkan sebesar Rp439.066.327,00. Pembangunan trotoar tersebut melibatkan pekerja lokal dan dibantu oleh warga Br. Gulingan.
+                </Text>
+                <Group>
+                  <Group gap="xs">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, xl: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pembangunan-2.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={300}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  PEMBANGUNAN GOT JALAN LINGKUNGAN BR. TAMAN
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pembangunan-3.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={250}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  PEMBANGUNAN BALE GAMBELAN SETRA AGENG DESA ADAT TEGAL
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={200}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Pembangunan;

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

@@ -0,0 +1,185 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA',
+    image: "/api/img/berita-pemerintahan.jpg",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/pemrintahan-5.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA',
+    image: "/api/img/berita-pemerintahan.jpg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Pemerintahan() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, xl: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-pemerintahan.jpg"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 615 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Pemerintahan</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                PEMBERIAN HASIL PANEN JAGUNG PROGRAM KETAHANAN PANGAN DESA KEPADA ANAK YATIM, PIATU DAN YATIM-PIATU DESA DARMASABA
+                </Text>
+                <Text size="md" lineClamp={3}>
+                Pada hari Selasa, 19 November 2024, Desa Darmasaba memberikan hasil panen jagung sebagai bagian dari kegiatan Ketahanan Pangan Desa kepada anak-anak yatim, piatu, dan yatim-piatu yang berusia 0-18 Tahun. Hasil panen ini diserahkan langsung oleh I. B. Surya Prabhawa Manuaba, S.H., M.H., NL.P selaku Perbekel Darmasaba, didampingi Ketua BPD dan LPM Desa Darmasaba, serta seluruh perangkat dan staf desa. Melalui kegiatan ini, kami berharap dapat memberikan manfaat langsung bagi mereka yang membutuhkan, serta memperkuat rasa kebersamaan dan kepedulian dalam membangun ketahanan pangan di Desa Darmasaba.
+                </Text>
+                <Group>
+                  <Group gap="xs">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, xl: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/beritapemerintahan-2.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={300}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pemerintahan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  Evaluasi dan Verifikasi APBDes Darmasaba T.A. 2025
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pemerintahan-3.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={250}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pemerintahan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    JAKSA GARDA DESA (JAGA DESA) T.A. 2025
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={200}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pemerintahan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Pemerintahan;

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

@@ -0,0 +1,188 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    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: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
+    tanggal: "Kamis, 13 Januari 2025",
+    kategori: "Teknologi"
+  },
+]
+function Semua() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, xl: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-1.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 610 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Teknologi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                </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>
+                <Group>
+                  <Group gap="xs">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, xl: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/pembangunan-2.jpg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Pembangunan</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, xl: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={{ base: 180, xl: 250 }}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">{v.kategori}</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Semua;

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

@@ -0,0 +1,204 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025',
+    image: "/api/img/sosial-4.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Sosialisasi Pengelolaan Sampah di SD No. 3 Darmasaba dalam Kolaborasi Mahasiswa KKN-PMM I Universitas Warmadewa di Desa Darmasaba',
+    image: "/api/img/sosial-2.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Sosial() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/sosial-1.jpeg"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 635 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Sosial</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025
+                </Text>
+                <Text size="md" lineClamp={3}>
+                AKSI BERSIH DESA MEMPERINGATI HARI PEDULI SAMPAH NASIONAL 2025 ♻️  
+Dalam semangat Hari Peduli Sampah Nasional (HPSN) 2025, Aksi Bersih Desa sukses digelar di Lombok Utara serta beberapa wilayah lain, termasuk Kabupaten Badung yang berpusat di TPS 3R Pudak Mesari, Desa Darmasaba. ?✨  
+
+Kegiatan ini melibatkan berbagai pihak seperti Pusdal LH BN - KLH, DKLH Provinsi Bali, DLHK Kab. Badung, Pemdes Darmasaba, BPD, LPM, TPS 3R Pudak Mesari, Lembaga Kemasyarakatan Desa, serta masyarakat Darmasaba.  
+
+Selain aksi bersih, Desa Darmasaba juga meluncurkan Pemuda Peduli Lingkungan sebagai garda terdepan dalam gerakan sadar lingkungan! 
+
+Mengapa ini penting?  
+- Pengelolaan sampah harus dimulai dari sumbernya melalui pemilahan, pemanfaatan, hingga penyelesaian residu.  
+- Inovasi &quot;Galah Melah&quot; & &quot;BARES&quot; menjadi contoh nyata dalam menciptakan lingkungan yang bersih & berkelanjutan.  
+- Darmasaba terpilih sebagai 1 dari 8 desa se-Indonesia untuk peringatan HPSN 2025, sebuah kebanggaan sekaligus tanggung jawab bersama! ✨  
+
+&quot;Kami berharap aksi ini bukan sekadar seremoni, tetapi menjadi budaya masyarakat dalam memilah dan mengelola sampah dari sumbernya.&quot; - Ibu Cokorda Istri Muter Handayani, Plt. Kabid Wilayah Bali, Pusat Pengendalian LH Bali & Nusra.  
+
+&quot;Ke depan, kami menargetkan setiap desa di Badung memiliki komunitas Pemuda Peduli Lingkungan agar pengelolaan sampah lebih optimal dan berkelanjutan.&quot; - Bapak Ida Bagus Gede Arjana, Plt. Kadis DLHK Kab. Badung.  
+
+&quot;Darmasaba menjadi contoh desa aktif dalam pengelolaan sampah. Kami berharap inovasi ini menginspirasi desa lain.&quot; - Ida Bagus Surya Prabhawa Manuaba, Perbekel Darmasaba.  
+
+Mari bersama wujudkan lingkungan yang lebih bersih, sehat, dan lestari!  
+Jaga Bumi, Pilah Sampah dari Sekarang! ♻️
+                </Text>
+                <Group>
+                  <Group gap="xs">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/sosial-2.jpeg"
+                    alt="Darmasaba Smart Village"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  Sosialisasi Pengelolaan Sampah di SD No. 3 Darmasaba dalam Kolaborasi Mahasiswa KKN-PMM I Universitas Warmadewa di Desa Darmasaba
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Sosial;

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

@@ -0,0 +1,186 @@
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import React from 'react';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
+    image: "/api/img/teknologi-3.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'DARMASABA DIGITAL PROJECT IS COMING!',
+    image: "/api/img/teknologi-1.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'DARMASABA MENUJU DESA DIGITAL',
+    image: "/api/img/teknologi-2.png",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Teknologi() {
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-1.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 660 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Teknologi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                </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>
+                <Group>
+                  <Group gap="xs">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/teknologi-1.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>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                  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">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    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">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={1}>
+                    DARMASABA MENUJU DESA DIGITAL
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}
+
+export default Teknologi;

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

@@ -0,0 +1,102 @@
+import colors from '@/con/colors';
+import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+import Budaya from './(tabs)/budaya';
+import Ekonomi from './(tabs)/ekonomi';
+import Pemerintahan from './(tabs)/pemerintahan';
+import Semua from './(tabs)/semua';
+import Sosial from './(tabs)/sosial';
+import Teknologi from './(tabs)/teknologi';
+import Pembangunan from './(tabs)/pembangunan';
+
+
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Portal Berita Darmasaba
+          </Text>
+          <Text ta="center" px="md">
+            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Tabs color={colors['blue-button']} variant="pills" defaultValue="semua">
+        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
+          <Grid>
+            <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
+              <TabsList>
+                <TabsTab value="semua">
+                  Semua
+                </TabsTab>
+                <TabsTab value="pemerintahan">
+                  Pemerintahan
+                </TabsTab>
+                <TabsTab value="pembangunan" >
+                  Pembangunan
+                </TabsTab>
+                <TabsTab value="ekonomi" >
+                  Ekonomi
+                </TabsTab>
+                <TabsTab value="sosial" >
+                  Sosial
+                </TabsTab>
+                <TabsTab value="budaya" >
+                  Budaya
+                </TabsTab>
+                <TabsTab value="teknologi" >
+                  Teknologi
+                </TabsTab>
+              </TabsList>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
+              <TextInput
+                w={{ base: "100%", md: "100%" }}
+                radius="lg"
+                placeholder="Cari Berita"
+                leftSection={<IconSearch size={18} />}
+              />
+            </GridCol>
+          </Grid>
+        </Box>
+
+        <TabsPanel value='semua'>
+          <Semua />
+        </TabsPanel>
+        <TabsPanel value='pemerintahan'>
+          <Pemerintahan />
+        </TabsPanel>
+        <TabsPanel value="pembangunan" >
+          <Pembangunan />
+        </TabsPanel>
+        <TabsPanel value="ekonomi" >
+          <Ekonomi />
+        </TabsPanel>
+        <TabsPanel value="sosial" >
+          <Sosial />
+        </TabsPanel>
+        <TabsPanel value="budaya" >
+          <Budaya />
+        </TabsPanel>
+        <TabsPanel value="teknologi" >
+          <Teknologi />
+        </TabsPanel>
+
+      </Tabs>
+
+
+
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/desa/berita/page.txt

@@ -0,0 +1,232 @@
+{backup}
+import colors from '@/con/colors';
+import { Box, Center, Container, Divider, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { IconCalendar, IconSearch, IconUser } from '@tabler/icons-react';
+import BackButton from '../layanan/_com/BackButto';
+
+const dataBeritaTerbaru = [
+  {
+    id: 1,
+    judul: 'Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik',
+    image: "/api/img/berita-1.png",
+    tanggal: "Selasa, 11 Januari 2025",
+  },
+  {
+    id: 2,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+  {
+    id: 3,
+    judul: 'Tim Voli Darmasaba Raih Juara Turnamen Desa',
+    image: "/api/img/prestasi-voli.jpeg",
+    tanggal: "Kamis, 13 Januari 2025",
+  },
+]
+function Page() {
+  return (
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+      {/* Header */}
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container size="lg" px="md">
+        <Stack align="center" gap="0" >
+          <Text fz={{ base: "2rem", md: "3.4rem" }} c={colors["blue-button"]} fw="bold" ta="center">
+            Portal Berita Darmasaba
+          </Text>
+          <Text ta="center" px="md">
+            Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba
+          </Text>
+        </Stack>
+      </Container>
+
+      {/* Tabs Menu */}
+      <Box px={{ base: "md", md: "xl" }} py="md" bg={colors['BG-trans']} >
+        <Grid align="center" justify="space-between">
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Group gap="md" wrap="wrap">
+              <Paper bg={colors['blue-button']} radius="xl" py={5} px={20}>
+                <Text c={colors['white-1']} size="sm">
+                  Semua
+                </Text>
+              </Paper>
+              {['Pemerintahan', 'Pembangunan', 'Ekonomi', 'Sosial', 'Budaya', 'Teknologi'].map((kategori) => (
+                <Paper key={kategori} bg={colors['blue-button-trans']} radius="xl" py={5} px={20}>
+                  <Text size="sm">
+                    {kategori}
+                  </Text>
+                </Paper>
+              ))}
+            </Group>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 4 }}>
+            <TextInput
+              radius="lg"
+              placeholder="Cari Berita"
+              leftSection={<IconSearch size={18} />}
+              w="100%"
+            />
+          </GridCol>
+        </Grid>
+      </Box>
+
+      {/* Konten Berita */}
+      <Container size="xl" px={{ base: "md", md: "xl" }}>
+        <Grid gutter={{ base: "md", md: "xl" }} pb={70}>
+          {/* Berita Utama */}
+          <GridCol span={{ base: 12, md: 8 }}>
+            <Paper p="md" shadow="sm" radius="md">
+              <Stack gap="md">
+                <Box>
+                  <Image
+                    src="/api/img/berita-1.png"
+                    alt="Darmasaba Smart Village"
+                    radius="md"
+                    fit="cover"
+                    h={{ base: 450, md: 660 }}
+                  />
+                </Box>
+                <Group>
+                  <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                    <Text size="sm">Teknologi</Text>
+                  </Paper>
+                </Group>
+                <Text fz={{ base: "xl", md: "2xl" }} fw="bold" lineClamp={2}>
+                  Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                </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>
+                <Group>
+                  <Group gap="xs">
+                    <IconCalendar size={18} />
+                    <Text size="sm">Selasa, 11 Januari 2025</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconUser size={18} />
+                    <Text size="sm">Admin Desa</Text>
+                  </Group>
+                </Group>
+              </Stack>
+            </Paper>
+          </GridCol>
+
+          {/* Berita Sampingan */}
+          <GridCol span={{ base: 12, md: 4 }}>
+            <Stack gap="md">
+              {/* Berita Sampingan 1 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Darmasaba Luncurkan Aplikasi Smart Village untuk Pelayanan Publik
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+
+              {/* Berita Sampingan 2 */}
+              <Paper p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src="/api/img/prestasi-voli.jpeg"
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Sosial</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    Tim Voli Darmasaba Raih Juara Turnamen Desa
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">Selasa, 11 Januari 2025</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            </Stack>
+          </GridCol>
+        </Grid>
+        <Box pb={30}>
+          <Text fz={"h1"} fw={"bold"}>Berita Terbaru</Text>
+          <Divider color={colors["blue-button"]} />
+        </Box>
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          {dataBeritaTerbaru.map((v, k) => {
+            return (
+              <Paper key={k} p="md" shadow="sm" radius="md">
+                <Stack gap="sm">
+                  <Image
+                    radius="md"
+                    src={v.image}
+                    alt="Prestasi Voli"
+                    fit="cover"
+                    h={180}
+                  />
+                  <Group>
+                    <Paper px={10} py={5} radius="xl" bg={colors['BG-trans']}>
+                      <Text size="sm">Teknologi</Text>
+                    </Paper>
+                  </Group>
+                  <Text fz="lg" fw="bold" lineClamp={2}>
+                    {v.judul}
+                  </Text>
+                  <Group>
+                    <Group gap="xs">
+                      <IconCalendar size={18} />
+                      <Text size="sm">{v.tanggal}</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconUser size={18} />
+                      <Text size="sm">Admin Desa</Text>
+                    </Group>
+                  </Group>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+        <Box py={"xl"}>
+          <Center>
+            <Pagination total={10} />
+          </Center>
+        </Box>
+      </Container>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,64 @@
+import colors from '@/con/colors';
+import { SimpleGrid, Box, Paper, Center, Stack, Image, Text } from '@mantine/core';
+import React from 'react';
+
+const data = [
+  {
+    id: 1,
+    image: "/api/img/galeri-1.png",
+    title: "Pendapatan",
+    tanggal: "3 Mar 2025",
+    judul: "Pemasangan Wifi Gratis Di Publik Desa",
+
+  },
+  {
+    id: 2,
+    image: "/api/img/galeri-2.png",
+    title: "Belanja",
+    tanggal: "4 Mar 2025",
+    judul: "Panen raya Desa Darmasaba",
+  },
+  {
+    id: 3,
+    image: "/api/img/galeri-3.png",
+    title: "Pembiayaan",
+    tanggal: "5 Mar 2025",
+    judul: "Kegiatan Pembangunan Pelinggih",
+  }
+]
+function Foto() {
+  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>
+    </Box>
+  );
+}
+
+export default Foto;