API & UI Admin Menu Desa, Submenu Pengumuman

src/app/admin/(dashboard)/_state/desa/berita.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -58,6 +59,8 @@ const berita = proxy({
     },
   },
 
+  // State untuk berita utama (hanya 1)
+
   findMany: {
     data: null as
       | Prisma.BeritaGetPayload<{
@@ -70,38 +73,43 @@ const berita = proxy({
     page: 1,
     totalPages: 1,
     loading: false,
-  
-    async load(page = 1, limit = 10) {
-      berita.findMany.loading = true;
+    search: "",
+   load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      berita.findMany.loading = true; // ✅ Akses langsung via nama path
       berita.findMany.page = page;
-      try {
-        const res = await ApiFetch.api.desa.berita["find-many"].get({
-          query: {
-            page,
-            limit,
-          },
-        });
+      berita.findMany.search = search;
   
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+    
+        const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
+    
         if (res.status === 200 && res.data?.success) {
           berita.findMany.data = res.data.data ?? [];
           berita.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          berita.findMany.data = [];
+          berita.findMany.totalPages = 1;
         }
       } catch (err) {
         console.error("Gagal fetch berita paginated:", err);
+        berita.findMany.data = [];
+        berita.findMany.totalPages = 1;
       } finally {
         berita.findMany.loading = false;
       }
     },
   },
-  
+
   findUnique: {
-    data: null as
-      | Prisma.BeritaGetPayload<{
-          include: {
-            image: true;
-            kategoriBerita: true;
-          };
-        }> | null,
+    data: null as Prisma.BeritaGetPayload<{
+      include: {
+        image: true;
+        kategoriBerita: true;
+      };
+    }> | null,
     async load(id: string) {
       try {
         const res = await fetch(`/api/desa/berita/${id}`);
@@ -109,11 +117,11 @@ const berita = proxy({
           const data = await res.json();
           berita.findUnique.data = data.data ?? null;
         } else {
-          console.error('Failed to fetch berita:', res.statusText);
+          console.error("Failed to fetch berita:", res.statusText);
           berita.findUnique.data = null;
         }
       } catch (error) {
-        console.error('Error fetching berita:', error);
+        console.error("Error fetching berita:", error);
         berita.findUnique.data = null;
       }
     },
@@ -127,14 +135,14 @@ const berita = proxy({
         berita.delete.loading = true;
 
         const response = await fetch(`/api/desa/berita/delete/${id}`, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
         });
-        
+
         const result = await response.json();
-        
+
         if (response.ok && result?.success) {
           toast.success(result.message || "Berita berhasil dihapus");
           await berita.findMany.load(); // refresh list
@@ -159,21 +167,21 @@ const berita = proxy({
         toast.warn("ID tidak valid");
         return null;
       }
-      
+
       try {
         const response = await fetch(`/api/desa/berita/${id}`, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
         });
-        
+
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
-        
+
         const result = await response.json();
-        
+
         if (result?.success) {
           const data = result.data;
           this.id = data.id;
@@ -190,7 +198,9 @@ const berita = proxy({
         }
       } catch (error) {
         console.error("Error loading berita:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
         return null;
       }
     },
@@ -204,14 +214,14 @@ const berita = proxy({
         toast.error(err);
         return false;
       }
-    
+
       try {
         berita.edit.loading = true;
-        
+
         const response = await fetch(`/api/desa/berita/${this.id}`, {
-          method: 'PUT',
+          method: "PUT",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({
             judul: this.form.judul,
@@ -221,14 +231,16 @@ const berita = proxy({
             imageId: this.form.imageId,
           }),
         });
-        
+
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
-          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
         }
-        
+
         const result = await response.json();
-    
+
         if (result.success) {
           toast.success("Berhasil update berita");
           await berita.findMany.load(); // refresh list
@@ -238,7 +250,11 @@ const berita = proxy({
         }
       } catch (error) {
         console.error("Error updating berita:", error);
-        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update berita");
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update berita"
+        );
         return false;
       } finally {
         berita.edit.loading = false;
@@ -258,21 +274,22 @@ const berita = proxy({
       };
     }> | null,
     loading: false,
-    async load() {
+    // findFirst.load()
+    async load(kategori?: string) {
       this.loading = true;
       try {
-        const res = await ApiFetch.api.desa.berita["find-first"].get();
+        const res = await ApiFetch.api.desa.berita["find-first"].get({
+          query: kategori ? { kategori } : {},
+        });
+
         if (res.status === 200 && res.data?.success) {
-          // Add type assertion to ensure type safety
-          berita.findFirst.data = res.data.data as Prisma.BeritaGetPayload<{
-            include: {
-              image: true;
-              kategoriBerita: true;
-            };
-          }> | null;
+          this.data = res.data.data || null;
+        } else {
+          this.data = null;
         }
       } catch (err) {
         console.error("Gagal fetch berita terbaru:", err);
+        this.data = null;
       } finally {
         this.loading = false;
       }
@@ -286,7 +303,7 @@ const berita = proxy({
       };
     }>[],
     loading: false,
-  
+
     async load() {
       try {
         this.loading = true;
@@ -300,7 +317,7 @@ const berita = proxy({
         this.loading = false;
       }
     },
-  }
+  },
 });
 
 //=============== Kategori Berita ===============
@@ -328,10 +345,9 @@ const kategoriBerita = proxy({
 
       try {
         kategoriBerita.create.loading = true;
-        const res =
-          await ApiFetch.api.desa.kategoriberita[
-            "create"
-          ].post(kategoriBerita.create.form);
+        const res = await ApiFetch.api.desa.kategoriberita["create"].post(
+          kategoriBerita.create.form
+        );
         if (res.status === 200) {
           kategoriBerita.findMany.load();
           return toast.success("Data Kategori Berita Berhasil Dibuat");
@@ -354,10 +370,7 @@ const kategoriBerita = proxy({
     }>[],
     loading: false,
     async load() {
-      const res =
-        await ApiFetch.api.desa.kategoriberita[
-          "findMany"
-        ].get();
+      const res = await ApiFetch.api.desa.kategoriberita["findMany"].get();
       if (res.status === 200) {
         kategoriBerita.findMany.data = res.data?.data ?? [];
       }
@@ -372,9 +385,7 @@ const kategoriBerita = proxy({
     loading: false,
     async load(id: string) {
       try {
-        const res = await fetch(
-          `/api/desa/kategoriberita/${id}`
-        );
+        const res = await fetch(`/api/desa/kategoriberita/${id}`);
         if (res.ok) {
           const data = await res.json();
           kategoriBerita.findUnique.data = data.data ?? null;
@@ -396,15 +407,12 @@ const kategoriBerita = proxy({
       try {
         kategoriBerita.delete.loading = true;
 
-        const response = await fetch(
-          `/api/desa/kategoriberita/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/desa/kategoriberita/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
         const result = await response.json();
 
@@ -414,7 +422,9 @@ const kategoriBerita = proxy({
           );
           await kategoriBerita.findMany.load(); // refresh list
         } else {
-          toast.error(result?.message || "Gagal menghapus Data Kategori Berita");
+          toast.error(
+            result?.message || "Gagal menghapus Data Kategori Berita"
+          );
         }
       } catch (error) {
         console.error("Gagal delete:", error);
@@ -435,15 +445,12 @@ const kategoriBerita = proxy({
       }
 
       try {
-        const response = await fetch(
-          `/api/desa/kategoriberita/${id}`,
-          {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/desa/kategoriberita/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -481,18 +488,15 @@ const kategoriBerita = proxy({
       try {
         kategoriBerita.update.loading = true;
 
-        const response = await fetch(
-          `/api/desa/kategoriberita/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-            }),
-          }
-        );
+        const response = await fetch(`/api/desa/kategoriberita/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+          }),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -508,7 +512,9 @@ const kategoriBerita = proxy({
           await kategoriBerita.findMany.load(); // refresh list
           return true;
         } else {
-          throw new Error(result.message || "Gagal update data kategori berita");
+          throw new Error(
+            result.message || "Gagal update data kategori berita"
+          );
         }
       } catch (error) {
         console.error("Error updating data kategori berita:", error);
@@ -529,7 +535,6 @@ const kategoriBerita = proxy({
   },
 });
 
-
 // 5. State global
 const stateDashboardBerita = proxy({
   kategoriBerita,

src/app/admin/(dashboard)/_state/desa/pengumuman.ts

@@ -1,10 +1,222 @@
-/* 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 templateKategoriPengumuman = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultKategoriPengumuman = {
+  name: "",
+};
+
+const category = proxy({
+  create: {
+    form: { ...defaultKategoriPengumuman },
+    loading: false,
+    async create() {
+      const cek = templateKategoriPengumuman.safeParse(category.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        category.create.loading = true;
+        const res = await ApiFetch.api.desa.kategoripengumuman["create"].post(
+          category.create.form
+        );
+        if (res.status === 200) {
+          category.findMany.load();
+          return toast.success("Data Kategori Pengumuman Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        category.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.CategoryPengumumanGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.desa.kategoripengumuman["findMany"].get();
+      if (res.status === 200) {
+        category.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.CategoryPengumumanGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/kategoripengumuman/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          category.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          category.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        category.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        category.delete.loading = true;
+
+        const response = await fetch(`/api/desa/kategoripengumuman/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Kategori Pengumuman berhasil dihapus"
+          );
+          await category.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus Data Kategori Pengumuman"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Kategori Pengumuman");
+      } finally {
+        category.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKategoriPengumuman },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/kategoripengumuman/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori berita:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKategoriPengumuman.safeParse(category.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        category.update.loading = true;
+
+        const response = await fetch(`/api/desa/kategoripengumuman/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kategori pengumuman");
+          await category.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update data kategori pengumuman"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating data kategori pengumuman:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kategori pengumuman"
+        );
+        return false;
+      } finally {
+        category.update.loading = false;
+      }
+    },
+    reset() {
+      category.update.id = "";
+      category.update.form = { ...defaultKategoriPengumuman };
+    },
+  },
+});
+
 const templateFormPengumuman = z.object({
   judul: z.string().min(3, "Judul minimal 3 karakter"),
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
@@ -12,22 +224,6 @@ const templateFormPengumuman = z.object({
   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;

src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx

@@ -89,7 +89,7 @@ function DetailBerita() {
                   <Button
                     onClick={() => {
                       if (beritaState.berita.findUnique.data) {
-                        router.push(`/admin/desa/berita/${beritaState.berita.findUnique.data.id}/edit`);
+                        router.push(`/admin/desa/berita/list-berita/${beritaState.berita.findUnique.data.id}/edit`);
                       }
                     }}
                     disabled={!beritaState.berita.findUnique.data}

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

@@ -39,22 +39,16 @@ function ListBerita({ search }: { search: string }) {
   } = beritaState.berita.findMany;
 
 
-  // Fetch pertama kali
+  // Fetch data when page or search changes
   useShallowEffect(() => {
-    load(page, 10); // awal page = 1
-  }, [page]);
-
-  const filteredData = (data || []).filter((item) => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.kategoriBerita?.name.toLowerCase().includes(keyword)
-    );
-  });
+    load(page, 10, search);
+  }, [page, search]);
 
   if (loading || !data) {
     return <Skeleton h={500} />;
   }
+  
+  const filteredData = data || [];
 
   return (
     <Box py={10}>

src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "List Pengumuman",
+            value: "listpengumuman",
+            href: "/admin/desa/pengumuman/list-pengumuman"
+        },
+        {
+            label: "Kategori Pengumuman",
+            value: "kategoripengumuman",
+            href: "/admin/desa/pengumuman/kategori-pengumuman"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Pengumuman</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsLayanan;

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditKategoriPengumuman() {
+  const editState = useProxy(stateDesaPengumuman.category)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+      name: editState.update.form.name || '',
+    });
+
+  useEffect(() => {
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              name: data.name || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori Pengumuman:", error);
+          toast.error("Gagal memuat data kategori Pengumuman");
+        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          name: formData.name,
+        };
+        await editState.update.update();
+        toast.success('Kategori Pengumuman berhasil diperbarui!');
+        router.push('/admin/desa/pengumuman/kategori-pengumuman');
+      } catch (error) {
+        console.error('Error updating kategori Pengumuman:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
+      }
+    };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Kategori Pengumuman</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Pengumuman</Text>}
+            placeholder="masukkan nama kategori Pengumuman"
+          />
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriPengumuman;

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

@@ -0,0 +1,55 @@
+'use client'
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateKategoriPengumuman() {
+  const createState = useProxy(stateDesaPengumuman.category)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.form = {
+      name: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create();
+    resetForm();
+    router.push("/admin/desa/pengumuman/kategori-pengumuman")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Pengumuman</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Pengumuman</Text>}
+            placeholder='Masukkan nama kategori Pengumuman'
+            value={createState.create.form.name}
+            onChange={(val) => {
+              createState.create.form.name = val.target.value;
+            }}
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKategoriPengumuman;

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

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
+
+
+function KategoriPengumuman() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Pengumuman'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriPengumuman search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriPengumuman({ search }: { search: string }) {
+  const listDataState = useProxy(stateDesaPengumuman.category)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    listDataState.findMany.load()
+  }, [])
+
+  const handleDelete = () => {
+    if (selectedId) {
+      listDataState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      listDataState.findMany.load()
+    }
+  }
+
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listDataState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Kategori Pengumuman'
+          href='/admin/desa/pengumuman/kategori-pengumuman/create'
+        />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/desa/pengumuman/kategori-pengumuman/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus kategori Pengumuman ini?'
+      />
+    </Box>
+  )
+}
+
+export default KategoriPengumuman;

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import LayoutTabs from './_com/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  );
+}
+
+export default Layout;

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

@@ -1,4 +1,6 @@
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
@@ -6,8 +8,7 @@ import { Prisma } from '@prisma/client';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import CreateEditor from '../../../_com/createEditor';
-import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
 
 function CreatePengumuman() {
   const pengumumanState = useProxy(stateDesaPengumuman)

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

@@ -5,10 +5,10 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../_com/header';
-import stateDesaPengumuman from '../../_state/desa/pengumuman';
-import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import { useState } from 'react';
+import HeaderSearch from '../../../_com/header';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
 
 
 function Pengumuman() {
@@ -16,7 +16,7 @@ function Pengumuman() {
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
+        title='List Pengumuman'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
         value={search}
@@ -113,7 +113,7 @@ function ListPengumuman({ search }: { search: string }) {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
+        text='Apakah anda yakin ingin menghapus pengumuman ini?'
       />
     </Box>
   )

src/app/admin/_com/list_PageAdmin.tsx

@@ -108,7 +108,7 @@ export const navBar = [
       {
         id: "Desa_4",
         name: "Pengumuman",
-        path: "/admin/desa/pengumuman"
+        path: "/admin/desa/pengumuman/list-pengumuman"
       },
       {
         id: "Desa_5",

src/app/api/[[...slugs]]/_lib/desa/berita/find-many.ts

@@ -1,44 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 async function beritaFindMany(context: Context) {
+  // Ambil parameter dari query
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const kategori = (context.query.kategori as string) || ''; // 🔥 Parameter kategori baru
   const skip = (page - 1) * limit;
 
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan kategori (jika ada)
+  if (kategori) {
+    where.kategoriBerita = {
+      name: {
+        equals: kategori,
+        mode: 'insensitive' // Tidak case-sensitive
+      }
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+      { content: { contains: search, mode: 'insensitive' } },
+      { kategoriBerita: { name: { contains: search, mode: 'insensitive' } } }
+    ];
+  }
+
   try {
+    // Ambil data dan total count secara paralel
     const [data, total] = await Promise.all([
       prisma.berita.findMany({
-        where: { isActive: true },
+        where,
         include: {
           image: true,
           kategoriBerita: true,
         },
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { createdAt: 'desc' },
       }),
-      prisma.berita.count({
-        where: { isActive: true }
-      })
+      prisma.berita.count({ where }),
     ]);
 
     return {
       success: true,
-      message: "Success fetch berita with pagination",
+      message: "Berhasil ambil berita dengan pagination",
       data,
       page,
-      totalPages: Math.ceil(total / limit),
+      limit,
       total,
+      totalPages: Math.ceil(total / limit),
     };
   } catch (e) {
-    console.error("Find many paginated error:", e);
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message: "Failed fetch berita with pagination",
+      message: "Gagal mengambil data berita",
     };
   }
 }
 
-export default beritaFindMany;
+export default beritaFindMany;

src/app/api/[[...slugs]]/_lib/desa/berita/findFirst.ts

@@ -1,30 +1,41 @@
-import prisma from '@/lib/prisma';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// find-first.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function beritaFindFirst(context: Context) {
+  const kategori = (context.query.kategori as string) || '';
+
+  const where: any = { isActive: true };
+
+  if (kategori) {
+    where.kategoriBerita = {
+      name: { equals: kategori, mode: 'insensitive' }
+    };
+  }
 
-export default async function beritaFindFirst() {
   try {
-    const result = await prisma.berita.findFirst({
-      where: {
-        isActive: true, // opsional kalau kamu punya field ini
-      },
-      orderBy: {
-        createdAt: 'desc', // ambil yang paling terbaru
-      },
+    const data = await prisma.berita.findFirst({
+      where,
       include: {
         image: true,
         kategoriBerita: true,
-      }
+      },
+      orderBy: { createdAt: 'desc' },
     });
 
     return {
       success: true,
-      message: 'Berhasil ambil berita terbaru',
-      data: result,
+      message: "Berhasil ambil berita terbaru",
+      data,
     };
-  } catch (error) {
-    console.error('[findFirstBerita] Error:', error);
+  } catch (e) {
+    console.error("Error di findFirst:", e);
     return {
       success: false,
-      message: 'Gagal ambil berita terbaru',
+      message: "Gagal ambil berita terbaru",
     };
   }
 }
+
+export default beritaFindFirst;

src/app/api/[[...slugs]]/_lib/desa/berita/findManyUI.ts

@@ -0,0 +1,14 @@
+import prisma from "@/lib/prisma";
+
+export default async function findManyUI() {
+  const data = await prisma.berita.findMany({
+    include: {
+      image: true,
+      kategoriBerita: true,
+    },
+  });
+  return {
+    success: true,
+    data,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/berita/index.ts

@@ -9,6 +9,7 @@ import findRecentBerita from "./findRecent";
 
 const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
   .get("/find-many", beritaFindMany)
+  .get("/find-many-ui", beritaFindMany)
   .get("/:id", async (context) => {
       const response = await findBeritaById(new Request(context.request));
       return response;

src/app/api/[[...slugs]]/_lib/desa/index.ts

@@ -9,6 +9,7 @@ import LayananDesa from "./layanan";
 import Penghargaan from "./penghargaan";
 import KategoriPotensi from "./potensi/kategori-potensi";
 import KategoriBerita from "./berita/kategori-berita";
+import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
 
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -22,5 +23,6 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(Penghargaan)
   .use(KategoriPotensi)
   .use(KategoriBerita)
+  .use(KategoriPengumuman)
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts

@@ -1,16 +1,13 @@
-import Elysia from "elysia";
+import Elysia, { t } from "elysia";
 import { pengumumanCreate } from "./create";
-import pengumumanFindMany from "./find-many";
-import { t } from "elysia";
-import pengumumanCategoryFindMany from "./category";
 import pengumumanDelete from "./del";
 import pengumumanFindById from "./find-by-id";
-import pengumumanUpdate from "./updt";
+import pengumumanFindMany from "./find-many";
 import pengumumanFindFirst from "./findFirst";
 import pengumumanFindRecent from "./findRecent";
+import pengumumanUpdate from "./updt";
 
 const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"] })
-  .get("/category/find-many", pengumumanCategoryFindMany)
   .get("/find-many", pengumumanFindMany)
   .get("/:id", pengumumanFindById)
   .delete("/delete/:id", pengumumanDelete)

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    name: string;
+}
+
+export default async function kategoriPengumumanCreate(context: Context) {
+    const body = (await context.body) as FormCreate;
+
+    try {
+        const result = await prisma.categoryPengumuman.create({
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil membuat kategori pengumuman",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error creating kategori pengumuman:", error);
+        throw new Error("Gagal membuat kategori pengumuman: " + (error as Error).message);
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/del.ts

@@ -0,0 +1,16 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function kategoriPengumumanDelete(context: Context) {
+    const id = context.params.id as string;
+
+    await prisma.categoryPengumuman.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        success: true,
+        message: "Success delete kategori pengumuman",
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/findMany.ts

@@ -0,0 +1,8 @@
+import prisma from "@/lib/prisma";
+
+async function kategoriPengumumanFindMany() {
+  const data = await prisma.categoryPengumuman.findMany();
+  return { data };
+}
+
+export default kategoriPengumumanFindMany

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function kategoriPengumumanFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.categoryPengumuman.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get kategori pengumuman",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/index.ts

@@ -0,0 +1,33 @@
+import Elysia, { t } from "elysia";
+import kategoriPengumumanCreate from "./create";
+import kategoriPengumumanDelete from "./del";
+import kategoriPengumumanFindMany from "./findMany";
+import kategoriPengumumanFindUnique from "./findUnique";
+import kategoriPengumumanUpdate from "./updt";
+
+const KategoriPengumuman = new Elysia({
+    prefix: "/kategoripengumuman",
+    tags: ["Desa / Pengumuman / Kategori Pengumuman"],
+})
+
+ .post("/create", kategoriPengumumanCreate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+
+  .get("/findMany", kategoriPengumumanFindMany)
+  .get("/:id", async (context) => {
+    const response = await kategoriPengumumanFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", kategoriPengumumanUpdate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+  .delete("/del/:id", kategoriPengumumanDelete);
+
+export default KategoriPengumuman;

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/updt.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    name: string;
+}
+
+export default async function kategoriPengumumanUpdate(context: Context) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.categoryPengumuman.update({
+            where: { id },
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil mengupdate kategori pengumuman",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating kategori pengumuman:", error);
+        throw new Error("Gagal mengupdate kategori pengumuman: " + (error as Error).message);
+    }
+}

src/app/darmasaba/(pages)/desa/berita/[kategori]/Content.tsx

@@ -0,0 +1,168 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import {
+  Badge,
+  Box,
+  Button,
+  Card,
+  Center,
+  Container,
+  Divider,
+  Grid,
+  GridCol,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
+import { useTransitionRouter } from 'next-view-transitions';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+export default function Content({ kategori }: { kategori: string }) {
+  const router = useTransitionRouter();
+  const [page, setPage] = useState(1);
+
+  const state = useProxy(stateDashboardBerita.berita);
+  const featuredState = useProxy(stateDashboardBerita.berita.findFirst);
+
+  const featured = featuredState.data;
+  const paginatedNews = state.findMany.data || [];
+  const totalPages = state.findMany.totalPages || 1;
+
+  // Load data
+  useEffect(() => {
+    stateDashboardBerita.berita.findFirst.load(kategori);
+  }, [kategori]);
+
+  useEffect(() => {
+    state.findMany.load(page, 3, '', kategori);
+  }, [page, kategori]);
+
+  return (
+    <Box py={20}>
+      <Container size="xl" px={{ base: 'md', md: 'xl' }}>
+        {/* === Berita Utama === */}
+        {featuredState.loading ? (
+          <Center><Skeleton h={400} /></Center>
+        ) : featured ? (
+          <Box mb={50}>
+            <Text fz="h2" fw={700} mb="md">Berita Utama</Text>
+            <Paper shadow="md" radius="md" withBorder>
+              <Grid gutter={0}>
+                <GridCol span={{ base: 12, md: 6 }}>
+                  <Image
+                    src={featured.image?.link}
+                    alt={featured.judul || 'Berita Utama'}
+                    height={400}
+                    fit="cover"
+                    radius="md"
+                    style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
+                  />
+                </GridCol>
+                <GridCol span={{ base: 12, md: 6 }} p="xl">
+                  <Stack h="100%" justify="space-between">
+                    <div>
+                      <Badge color="blue" variant="light" mb="md">
+                        {featured.kategoriBerita?.name || kategori}
+                      </Badge>
+                      <Title order={2} mb="md">{featured.judul}</Title>
+                      <Text color="dimmed" lineClamp={3} mb="md">{featured.deskripsi}</Text>
+                    </div>
+                    <Group justify="apart" mt="auto">
+                      <Group gap="xs">
+                        <IconCalendar size={18} />
+                        <Text size="sm">
+                          {new Date(featured.createdAt).toLocaleDateString('id-ID', {
+                            day: 'numeric',
+                            month: 'long',
+                            year: 'numeric',
+                          })}
+                        </Text>
+                      </Group>
+                      <Button
+                        variant="light"
+                        rightSection={<IconArrowRight size={16} />}
+                        onClick={() => router.push(`/darmasaba/desa/berita/${kategori}/${featured.id}`)}
+                      >
+                        Baca Selengkapnya
+                      </Button>
+                    </Group>
+                  </Stack>
+                </GridCol>
+              </Grid>
+            </Paper>
+          </Box>
+        ) : null}
+
+        {/* === Daftar Berita === */}
+        <Box mt={50}>
+          <Title order={2} mb="md">Daftar Berita</Title>
+          <Divider mb="xl" />
+
+          {state.findMany.loading ? (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
+              {Array(3).fill(0).map((_, i) => (
+                <Skeleton key={i} h={300} radius="md" />
+              ))}
+            </SimpleGrid>
+          ) : paginatedNews.length === 0 ? (
+            <Text c="dimmed" ta="center">Belum ada berita di kategori &quot;{kategori}&quot;.</Text>
+          ) : (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
+              {paginatedNews.map((item) => (
+                <Card
+                  key={item.id}
+                  shadow="sm"
+                  p="lg"
+                  radius="md"
+                  withBorder
+                  onClick={() => router.push(`/desa/berita/${item.id}`)}
+                  style={{ cursor: 'pointer' }}
+                >
+                  <Card.Section>
+                    <Image src={item.image?.link} height={200} alt={item.judul} fit="cover" />
+                  </Card.Section>
+                  <Badge color="blue" variant="light" mt="md">
+                    {item.kategoriBerita?.name || kategori}
+                  </Badge>
+                  <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
+                  <Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
+                  <Group justify="apart" mt="md" gap="xs">
+                    <Text size="xs" color="dimmed">
+                      {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric',
+                      })}
+                    </Text>
+                    <Badge color="gray" variant="outline">Baca Selengkapnya</Badge>
+                  </Group>
+                </Card>
+              ))}
+            </SimpleGrid>
+          )}
+
+          {/* Pagination */}
+          <Center mt="xl">
+            <Pagination
+              total={totalPages}
+              value={page}
+              onChange={(newPage) => setPage(newPage)}
+              siblings={1}
+              boundaries={1}
+              withEdges
+            />
+          </Center>
+        </Box>
+      </Container>
+    </Box>
+  );
+}

src/app/darmasaba/(pages)/desa/berita/[kategori]/[id]/page.tsx

@@ -0,0 +1,78 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import colors from '@/con/colors';
+import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../layanan/_com/BackButto';
+
+
+
+function Page() {
+  const params = useParams<{ id: string }>();
+  const id = Array.isArray(params.id) ? params.id[0] : params.id;
+  const state = useProxy(stateDashboardBerita.berita)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const loadData = async () => {
+      if (!id) return;
+      try {
+        setLoading(true);
+        await state.findUnique.load(id);
+      } catch (error) {
+        console.error('Error loading data:', error);
+      } finally {
+        setLoading(false);
+      }
+    }
+    loadData()
+  }, [id])
+
+  if (loading) {
+    return (
+      <Center>
+        <Skeleton height={500} />
+      </Center>
+    );
+  }
+
+  if (!state.findUnique.data) {
+    return (
+      <Center>
+        <Text>Data tidak ditemukan</Text>
+      </Center>
+    );
+  }
+
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
+      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
+      <Container w={{ base: "100%", md: "50%" }} >
+        <Box pb={20}>
+          <Text ta={"center"} fz={"2.4rem"} c={colors["blue-button"]} fw={"bold"}>
+            {state.findUnique.data?.judul}
+          </Text>
+          <Text
+            ta={"center"}
+            fw={"bold"}
+            fz={"1.5rem"}
+          >
+            Informasi dan Pelayanan Administrasi Digital
+          </Text>
+        </Box>
+        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} />
+      </Container>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={"xs"}>
+          <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.content || '' }} />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,13 @@
+// src/app/darmasaba/(pages)/desa/berita/[kategori]/page.tsx
+import { Suspense } from "react";
+import Content from "./Content";
+
+export default async function Page({ params }: { params: Promise<{ kategori: string }> }) {
+  const { kategori } = await params;
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Content kategori={kategori} />
+    </Suspense>
+  );
+}

src/app/darmasaba/(pages)/desa/berita/_lib/layoutTabs.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsPanel, TabsTab, Text, TextInput } from '@mantine/core';
+import { Box, Container, Grid, GridCol, Stack, Tabs, TabsList, TabsTab, Text, TextInput } from '@mantine/core';
 import { IconSearch } from '@tabler/icons-react';
-import { usePathname, useRouter } from 'next/navigation';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 import BackButton from '../../layanan/_com/BackButto';
 
@@ -15,15 +14,66 @@ type HeaderSearchProps = {
   children?: React.ReactNode;
 };
 
-function LayoutTabsBerita({ 
-  children, 
+function LayoutTabsBerita({
+  children,
   placeholder = "pencarian",
-  searchIcon = <IconSearch size={20} />,
-  value,
-  onChange }: HeaderSearchProps) {
+  searchIcon = <IconSearch size={20} />
+}: HeaderSearchProps) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  
+  // Get active tab from URL path
+  const activeTab = pathname.split('/').pop() || 'semua';
+  
+  // Get initial search value from URL
+  const initialSearch = searchParams.get('search') || '';
+  const [searchValue, setSearchValue] = useState(initialSearch);
+  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
+  
+  // Update active tab state when pathname changes
+  const [activeTabState, setActiveTabState] = useState(activeTab);
+  useEffect(() => {
+    setActiveTabState(activeTab);
+  }, [activeTab]);
 
-  const router = useRouter()
-  const pathname = usePathname()
+  // Clean up timeouts on unmount
+  useEffect(() => {
+    return () => {
+      if (searchTimeout !== null) {
+        clearTimeout(searchTimeout);
+      }
+    };
+  }, [searchTimeout]);
+
+  // Handle search input change with debounce
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setSearchValue(value);
+    
+    // Clear previous timeout
+    if (searchTimeout !== null) {
+      clearTimeout(searchTimeout);
+    }
+    
+    // Set new timeout
+    const newTimeout = window.setTimeout(() => {
+      const params = new URLSearchParams(searchParams.toString());
+      
+      if (value) {
+        params.set('search', value);
+      } else {
+        params.delete('search');
+      }
+      
+      // Only update URL if the search value has actually changed
+      if (params.toString() !== searchParams.toString()) {
+        router.push(`/darmasaba/desa/berita/${activeTab}?${params.toString()}`);
+      }
+    }, 500); // 500ms debounce delay
+    
+    setSearchTimeout(newTimeout);
+  };
   const tabs = [
     {
       label: "Semua",
@@ -62,70 +112,68 @@ function LayoutTabsBerita({
     },
 
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
-
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    if (!value) return;
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      const params = new URLSearchParams(searchParams.toString());
+      router.push(`/darmasaba/desa/berita/${value}${params.toString() ? `?${params.toString()}` : ''}`);
     }
-    setActiveTab(value)
-  }
-
-  useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
-    if (match) {
-      setActiveTab(match.value)
-    }
-  }, [pathname])
+  };
 
   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 color={colors['blue-button']} variant="pills" defaultValue="semua" value={activeTab} onChange={handleTabChange}>
-        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']} >
+      {/* 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
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTabState}
+        onChange={handleTabChange}
+      >
+        <Box px={{ base: "md", md: 100 }} py="md" bg={colors['BG-trans']}>
           <Grid>
             <GridCol span={{ base: 12, md: 9, lg: 8, xl: 9 }}>
               <TabsList>
-                {tabs.map((e, i) => (
-                  <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                {tabs.map((tab, index) => (
+                  <TabsTab
+                    key={index}
+                    value={tab.value}
+                    onClick={() => router.push(tab.href)}
+                  >
+                    {tab.label}
+                  </TabsTab>
                 ))}
               </TabsList>
             </GridCol>
             <GridCol span={{ base: 12, md: 3, lg: 4, xl: 3 }}>
-                <TextInput
-                  radius="lg"
-                  placeholder={placeholder}
-                  leftSection={searchIcon}
-                  w="100%"
-                  value={value}
-                  onChange={onChange}
-                />
+              <TextInput
+                radius="lg"
+                placeholder={placeholder}
+                leftSection={searchIcon}
+                w="100%"
+                value={searchValue}
+                onChange={handleSearchChange}
+              />
             </GridCol>
           </Grid>
         </Box>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
-          </TabsPanel>
-        ))}
+
+        {children}
       </Tabs>
-      {children}
     </Stack>
   );
 }

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

@@ -1,185 +0,0 @@
-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/ekonomi/page.tsx

@@ -1,185 +0,0 @@
-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/layout.tsx

@@ -1,12 +1,12 @@
-import React from 'react';
-import LayoutTabsBerita from './_lib/layoutTabs';
+// app/desa/berita/BeritaLayoutClient.tsx
+'use client'
+import dynamic from 'next/dynamic';
 
-function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <LayoutTabsBerita>
-      {children}
-    </LayoutTabsBerita>
-  );
-}
+const LayoutTabsBerita = dynamic(
+  () => import('./_lib/layoutTabs'),
+  { ssr: false }
+);
 
-export default Layout;
+export default function BeritaLayoutClient({ children }: { children: React.ReactNode }) {
+  return <LayoutTabsBerita>{children}</LayoutTabsBerita>;
+}

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

@@ -1,187 +0,0 @@
-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/pemerintahan/page.tsx

@@ -1,185 +0,0 @@
-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/semua/page.tsx

@@ -1,183 +1,177 @@
-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';
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import { Badge, Box, Button, Card, Center, Container, Divider, Flex, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
+import { useTransitionRouter } from 'next-view-transitions';
+import { useSearchParams } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
-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() {
+  const searchParams = useSearchParams();
+  const router = useTransitionRouter();
+
+  // Parameter URL
+  const search = searchParams.get('search') || '';
+  const currentPage = parseInt(searchParams.get('page') || '1');
+  const [page, setPage] = useState(currentPage);
+
+  // Gunakan proxy untuk state
+  const state = useProxy(stateDashboardBerita.berita);
+  const featured = useProxy(stateDashboardBerita.berita.findFirst); // ✅ Berita utama
+  const loadingGrid = state.findMany.loading;
+  const loadingFeatured = featured.loading;
+
+  // Load berita utama (hanya sekali)
+  useEffect(() => {
+    if (!featured.data && !loadingFeatured) {
+      stateDashboardBerita.berita.findFirst.load();
+    }
+  }, [featured.data, loadingFeatured]);
+
+  // Load berita terbaru (untuk grid) saat page/search berubah
+  useEffect(() => {
+    const limit = 3; // Sesuaikan dengan tampilan grid
+    state.findMany.load(page, limit, search);
+  }, [page, search]);
+
+  // Update URL saat page berubah
+  useEffect(() => {
+    const url = new URLSearchParams();
+    if (search) url.set('search', search);
+    if (page > 1) url.set('page', page.toString());
+    router.replace(`?${url.toString()}`);
+  }, [search, page, router]);
+
+  const featuredData = featured.data;
+  const paginatedNews = state.findMany.data || [];
+  const totalPages = state.findMany.totalPages || 1;
+
   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>
+        {/* === Berita Utama (Tetap) === */}
+        {loadingFeatured ? (
+          <Center><Skeleton h={400} /></Center>
+        ) : featuredData ? (
+          <Box mb={50}>
+            <Text fz="h2" fw={700} mb="md">Berita Utama</Text>
+            <Paper shadow="md" radius="md" withBorder>
+              <Grid gutter={0}>
+                <GridCol span={{ base: 12, md: 6 }}>
                   <Image
-                    src="/api/img/berita-1.png"
-                    alt="Darmasaba Smart Village"
-                    radius="md"
+                    src={featuredData.image?.link || '/images/placeholder.jpg'}
+                    alt={featuredData.judul || 'Berita Utama'}
+                    height={400}
                     fit="cover"
-                    h={{ base: 450, md: 610 }}
+                    radius="md"
+                    style={{ borderBottomRightRadius: 0, borderTopRightRadius: 0 }}
                   />
-                </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>
+                </GridCol>
+                <GridCol span={{ base: 12, md: 6 }} p="xl">
+                  <Stack h="100%" justify="space-between">
+                    <div>
+                      <Badge color="blue" variant="light" mb="md">
+                        {featuredData.kategoriBerita?.name || 'Berita'}
+                      </Badge>
+                      <Title order={2} mb="md">{featuredData.judul}</Title>
+                      <Text color="dimmed" lineClamp={3} mb="md">
+                        {featuredData.deskripsi}
+                      </Text>
+                    </div>
+                    <Group justify="apart" mt="auto">
+                      <Group gap="xs">
+                        <IconCalendar size={18} />
+                        <Text size="sm">
+                          {new Date(featuredData.createdAt).toLocaleDateString('id-ID', {
+                            day: 'numeric',
+                            month: 'long',
+                            year: 'numeric'
+                          })}
+                        </Text>
+                      </Group>
+                      <Button
+                        variant="light"
+                        rightSection={<IconArrowRight size={16} />}
+                        onClick={() => router.push(`/desa/berita/${featuredData.id}`)}
+                      >
+                        Baca Selengkapnya
+                      </Button>
+                    </Group>
+                  </Stack>
+                </GridCol>
+              </Grid>
             </Paper>
-          </GridCol>
+          </Box>
+        ) : null}
 
-          {/* 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 Terbaru (Berubah Saat Pagination) === */}
+        <Box mt={50}>
+          <Title order={2} mb="md">Berita Terbaru</Title>
+          <Divider mb="xl" />
 
-              {/* 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} />
+          {loadingGrid ? (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
+              {Array(3).fill(0).map((_, i) => (
+                <Skeleton key={i} h={300} radius="md" />
+              ))}
+            </SimpleGrid>
+          ) : paginatedNews.length === 0 ? (
+            <Text c="dimmed" ta="center">Tidak ada berita ditemukan.</Text>
+          ) : (
+            <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl" verticalSpacing="xl">
+              {paginatedNews.map((item) => (
+                <Card
+                  key={item.id}
+                  shadow="sm"
+                  p="lg"
+                  radius="md"
+                  withBorder
+                >
+                  <Card.Section>
+                    <Image
+                      src={item.image?.link || '/images/placeholder-small.jpg'}
+                      height={200}
+                      alt={item.judul}
+                      fit="cover"
+                    />
+                  </Card.Section>
+
+                  <Badge color="blue" variant="light" mt="md">
+                    {item.kategoriBerita?.name || 'Berita'}
+                  </Badge>
+
+                  <Text fw={600} size="lg" mt="sm" lineClamp={2}>{item.judul}</Text>
+
+                  <Text size="sm" color="dimmed" lineClamp={3} mt="xs">{item.deskripsi}</Text>
+
+                  <Flex align="center" justify="apart" mt="md" gap="xs">
+                    <Text size="xs" color="dimmed">
+                      {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                        day: 'numeric',
+                        month: 'short',
+                        year: 'numeric'
+                      })}
+                    </Text>
+                    
+                    <Button p="xs" variant="light" rightSection={<IconArrowRight size={16} />} onClick={() => router.push(`/desa/berita/${item.id}`)}>Baca Selengkapnya</Button>
+                  </Flex>
+                </Card>
+              ))}
+            </SimpleGrid>
+          )}
+
+          {/* Pagination hanya untuk berita terbaru */}
+          <Center mt="xl">
+            <Pagination
+              total={totalPages}
+              value={page}
+              onChange={setPage}
+              siblings={1}
+              boundaries={1}
+              withEdges
+            />
           </Center>
         </Box>
       </Container>
@@ -185,4 +179,4 @@ function Semua() {
   );
 }
 
-export default Semua;
+export default Semua;

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

@@ -1,204 +0,0 @@
-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/teknologi/page.tsx

@@ -1,186 +0,0 @@
-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/potensi/(detail)/bumdes-pudak-mesari/page.tsx

@@ -1,54 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Bumdes Pudak Mesari
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/ack.png" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Badan Usaha Milik Desa (BUMDes) Pudak Mesari adalah lembaga ekonomi desa yang berperan penting dalam pengembangan potensi dan kesejahteraan masyarakat Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung, Bali. BUMDes ini berfungsi sebagai motor penggerak perekonomian desa melalui berbagai unit usaha yang dikelola secara profesional.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran BUMDes Pudak Mesari:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Usaha Mikro dan Kecil:</Text>BUMDes Pudak Mesari menyediakan layanan bagi pelaku usaha mikro dan kecil di desa, seperti penyediaan konsumsi dan snack kotak untuk berbagai acara.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengelolaan Sampah Berbasis Masyarakat:</Text>Melalui kolaborasi dengan komunitas pemuda peduli lingkungan, BUMDes Pudak Mesari aktif dalam pengelolaan sampah berbasis masyarakat.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peningkatan Kapasitas dan Transparansi:</Text>Untuk memastikan pengelolaan yang akuntabel, BUMDes Pudak Mesari rutin mengadakan rapat koordinasi dan pendampingan penyusunan laporan pertanggungjawaban.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Kolaborasi Internasional:</Text>Desa Darmasaba, melalui BUMDes Pudak Mesari, menerima kunjungan dari tim Osaki Jepang untuk memperkuat pengelolaan sampah dan lingkungan.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Dengan berbagai inisiatif tersebut, BUMDes Pudak Mesari menunjukkan perannya sebagai pilar utama dalam pengembangan ekonomi dan kesejahteraan masyarakat Desa Darmasaba, sekaligus menjaga kelestarian lingkungan melalui program-program inovatif dan kolaboratif.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/dam-tanah-putih/page.tsx

@@ -1,71 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Dam Tanah Putih
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/damtanahputih.jpeg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki Dam Tanah Putih sebagai salah satu potensi desa yang bernilai strategis. Selain berfungsi sebagai infrastruktur pengairan, dam ini juga memiliki potensi untuk dikembangkan sebagai destinasi wisata alam, edukasi, dan rekreasi bagi masyarakat lokal maupun wisatawan.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran Dam Tanah Putih:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Fungsi Utama Sebagai Sumber Pengairan</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dam Tanah Putih memiliki peran penting dalam sistem irigasi yang menopang sektor pertanian di Darmasaba. Air dari dam ini digunakan untuk:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Mengairi sawah dan ladang : Menjamin ketersediaan air bagi petani sepanjang tahun.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Menjaga keseimbangan ekosistem : Menjadi habitat bagi ikan air tawar dan berbagai biota air.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Menampung air hujan : Membantu mengurangi risiko banjir dan kekeringan.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Potensi Wisata Alam dan Rekreasi</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dengan pemandangan alam yang asri dan suasana yang sejuk, Dam Tanah Putih memiliki potensi besar untuk dikembangkan sebagai tempat wisata alam. Beberapa kegiatan yang bisa dikembangkan di area ini antara lain:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Trekking dan jogging di sekitar dam : Menikmati udara segar dan pemandangan indah.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Berkemah dan piknik : Cocok untuk keluarga dan komunitas yang ingin menikmati alam.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Wisata air : Seperti pemancingan atau wisata perahu kecil yang dapat menarik wisatawan.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Spot fotografi alam : Keindahan dam dan sekitarnya menjadi latar yang menarik bagi para fotografer.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Potensi Ekonomi dan UMKM Lokal</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dengan pengembangan dam sebagai destinasi wisata, masyarakat sekitar dapat memanfaatkan peluang usaha seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Warung makan dan jajanan tradisional : Menyediakan makanan khas Bali bagi wisatawan.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Jasa penyewaan alat rekreasi : Seperti pancing atau perahu kecil.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Produk kerajinan tangan dan suvenir : Oleh-oleh khas Darmasaba yang menarik bagi pengunjung.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Konservasi dan Edukasi Lingkungan</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dam Tanah Putih juga bisa menjadi tempat edukasi lingkungan dengan konsep konservasi, di mana pengunjung bisa belajar tentang:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pengelolaan sumber daya air yang berkelanjutan.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Keanekaragaman hayati di sekitar dam.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pentingnya ekosistem perairan bagi pertanian dan kehidupan masyarakat.</Text>
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Dengan berbagai fungsi dan keindahannya, Dam Tanah Putih memiliki potensi besar untuk dikembangkan sebagai destinasi wisata alam, rekreasi, serta edukasi lingkungan. Dengan pengelolaan yang baik dan dukungan dari masyarakat serta pemerintah desa, dam ini dapat menjadi aset penting bagi Darmasaba, baik dari sisi ekonomi maupun kelestarian lingkungan.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/genteng/page.tsx

@@ -1,69 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Genteng
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/genteng.jpeg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi besar dalam industri genteng yang dikelola oleh Usaha Mikro, Kecil, dan Menengah (UMKM). Sebagai desa yang masih mempertahankan nilai-nilai tradisional dalam pembangunan, industri genteng di Darmasaba berperan penting dalam penyediaan bahan bangunan berkualitas bagi masyarakat lokal maupun luar daerah.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran UMKM Genteng:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Genteng Tradisional Berkualitas Tinggi</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>UMKM di Darmasaba memproduksi genteng dari bahan baku pilihan seperti tanah liat berkualitas, yang menghasilkan genteng dengan daya tahan tinggi, kuat, dan cocok untuk iklim tropis. Beberapa jenis genteng yang dihasilkan meliputi:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Genteng Tanah Liat : Kuat, tahan lama, dan memiliki estetika khas tradisional.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Genteng Beton : Cocok untuk bangunan modern dengan ketahanan lebih tinggi.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Genteng Keramik : Memberikan tampilan elegan dan daya serap air yang lebih rendah.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peluang Ekonomi dan Pemberdayaan Masyarakat:</Text>Industri genteng di Darmasaba memberikan peluang kerja bagi masyarakat setempat, terutama dalam bidang produksi, distribusi, hingga pemasaran. UMKM genteng juga mendukung keberlanjutan ekonomi desa dengan meningkatkan pendapatan warga serta mengurangi angka pengangguran.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Inovasi dan Pengembangan Teknologi</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Beberapa pengrajin genteng di Darmasaba telah mulai mengadopsi teknologi modern dalam proses produksi, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Penggunaan cetakan dan oven pembakaran efisien untuk meningkatkan kualitas dan kapasitas produksi.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Teknik pelapisan anti bocor dan anti lumut untuk membuat genteng lebih tahan lama.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Desain genteng inovatif yang lebih ringan dan mudah dipasang.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pemasaran dan Ekspansi Pasar</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dengan meningkatnya pembangunan perumahan dan proyek konstruksi di Bali, permintaan akan genteng berkualitas terus bertambah. UMKM genteng Darmasaba dapat memperluas pasarnya dengan:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Menjalin kerja sama dengan kontraktor dan pengembang properti.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Mempromosikan produk melalui media sosial dan marketplace online.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Menyediakan layanan custom sesuai kebutuhan pelanggan.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Keberlanjutan dan Ramah Lingkungan:</Text>Industri genteng di Darmasaba berpotensi dikembangkan secara lebih ramah lingkungan dengan menerapkan metode produksi yang mengurangi limbah dan emisi. Pemanfaatan energi alternatif serta daur ulang bahan limbah dapat membantu menciptakan industri yang lebih berkelanjutan.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          UMKM genteng di Desa Darmasaba memiliki potensi besar untuk terus berkembang sebagai sektor industri unggulan. Dengan inovasi, pemasaran yang lebih luas, serta dukungan dari pemerintah dan masyarakat, industri ini dapat meningkatkan kesejahteraan warga dan memperkuat perekonomian desa.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/gumuh-sari-water-park/page.tsx

@@ -1,57 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Gumuh Sari Waterpark
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/waterpark.png" alt='' w={"100%"} h={400} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Gumuh Sari Waterpark, terletak di Jl. Tegal Gumuh No. 9, Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung, Bali, adalah destinasi rekreasi yang menawarkan berbagai fasilitas untuk pengunjung dari segala usia. Taman rekreasi ini tidak hanya menyediakan wahana air yang menyenangkan, tetapi juga fasilitas olahraga dan kuliner, menjadikannya tempat ideal untuk rekreasi keluarga dan komunitas.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi Desa melalui Gumuh Sari Waterpark:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Pariwisata Lokal:</Text> Dengan adanya destinasi seperti Gumuh Sari Waterpark, Desa Darmasaba dapat menarik lebih banyak wisatawan lokal maupun mancanegara. Kehadiran pengunjung ini berpotensi meningkatkan pendapatan desa dan membuka peluang usaha baru bagi masyarakat setempat.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peningkatan Ekonomi Masyarakat:</Text>Fasilitas seperti restoran dan pusat olahraga di dalam kompleks waterpark memberikan peluang bagi warga lokal untuk terlibat dalam sektor jasa dan perdagangan. Hal ini dapat menciptakan lapangan pekerjaan dan mendukung pertumbuhan ekonomi desa.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Fasilitas Olahraga dan Kesehatan:</Text>Dengan adanya pusat futsal dan gym, Gumuh Sari Waterpark mendorong masyarakat untuk berpartisipasi dalam kegiatan olahraga, yang dapat meningkatkan kesehatan dan kesejahteraan warga.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pemberdayaan Komunitas Melalui Event dan Acara:</Text>Waterpark ini sering menjadi tuan rumah berbagai acara komunitas, seperti pesta busa dan bola, yang dapat mempererat hubungan antarwarga dan menciptakan lingkungan yang harmonis.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peningkatan Infrastruktur dan Aksesibilitas:</Text>Dengan meningkatnya jumlah pengunjung, infrastruktur desa seperti jalan, transportasi, dan layanan umum lainnya akan berkembang untuk memenuhi kebutuhan tersebut, yang pada gilirannya meningkatkan kualitas hidup masyarakat setempat.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Melalui pengelolaan dan pengembangan yang tepat, Gumuh Sari Waterpark dapat menjadi motor penggerak bagi kemajuan Desa Darmasaba, meningkatkan kesejahteraan masyarakat, dan menjadikan desa ini sebagai destinasi wisata yang dikenal luas.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/ikm-berbasis-pengolahan-pangan/page.tsx

@@ -1,63 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-    return (
-        <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-            <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-            <Container w={{ base: "100%", md: "50%" }} >
-                <Box pb={20}>
-                    <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-                        IKM Berbasis Pengolahan Pangan
-                    </Text>
-                    <Text
-                        ta={"center"}
-                        fw={"bold"}
-                        fz={"1.4rem"}
-                    >
-                        Informasi dan Pelayanan Administrasi Digital
-                    </Text>
-                </Box>
-                <Image src="/api/img/ikm.png" alt='' w={"100%"} />
-            </Container>
-            <Box px={{ base: "md", md: 100 }}>
-                <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                    Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi besar dalam Industri Kecil dan Menengah (IKM) berbasis pengolahan pangan. Dengan sumber daya alam yang melimpah dan warisan kuliner khas Bali, Darmasaba dapat mengembangkan sektor ini untuk meningkatkan kesejahteraan masyarakat dan menciptakan lapangan kerja baru.
-                </Text>
-                <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                    Potensi dan Peran IKM Berbasis Pengolahan Pangan:
-                </Text>
-                <List py={20} type='ordered'>
-                    <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                        <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Produk Unggulan Pengolahan Pangan</Text>
-                        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Beberapa produk olahan pangan yang potensial dikembangkan di Darmasaba meliputi:</Text>
-                        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Keripik dan Snack Tradisional : Seperti keripik pisang, keripik singkong, dan rengginang.</Text>
-                        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Sambal Khas Bali : Seperti sambal matah dan sambal embe yang banyak diminati pasar lokal dan nasional.</Text>
-                        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Minuman Herbal dan Jamu : Berbasis rempah seperti kunyit asam, beras kencur, dan wedang jahe.</Text>
-                        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Olahan Makanan Berbasis Kelapa : Seperti virgin coconut oil (VCO), serundeng, dan gula aren.</Text>
-                        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Kue Tradisional Bali : Seperti jaje laklak, jaje uli, dan klepon yang dapat dikemas secara modern.</Text>
-                    </ListItem>
-                    <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                        <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peluang Ekonomi dan Pemberdayaan UMKM:</Text>IKM berbasis pengolahan pangan dapat membuka peluang bagi masyarakat, terutama ibu rumah tangga dan pemuda desa, untuk berwirausaha. Dengan dukungan modal dan pelatihan dari pemerintah desa atau BUMDes Pudak Mesari, usaha kecil ini dapat berkembang menjadi industri yang lebih besar.
-                    </ListItem>
-                    <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                        <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Digitalisasi dan Pemasaran Online:</Text>Darmasaba dapat mengembangkan kawasan sentra IKM sebagai pusat produksi, pelatihan, dan pemasaran produk olahan pangan. Dengan adanya fasilitas ini, para pelaku usaha dapat lebih mudah berkolaborasi, meningkatkan kualitas produk, serta mendapatkan akses ke permodalan dan distribusi yang lebih luas.
-                    </ListItem>
-                    <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                        <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Kawasan Sentra IKM:</Text>Dengan berkembangnya sektor kuliner, banyak pelaku UMKM di Darmasaba mulai merintis usaha makanan, baik dalam bentuk warung makan, katering, hingga produksi makanan ringan seperti keripik, sambal, dan minuman tradisional. Potensi ini dapat terus dikembangkan dengan dukungan pemerintah desa dan promosi melalui media sosial.
-                    </ListItem>
-                    <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                        <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Sinergi dengan Pariwisata dan Agrowisata:</Text>Dengan berkembangnya sektor wisata di Darmasaba, produk olahan pangan dapat dijadikan suvenir khas desa. Pengunjung dapat membeli oleh-oleh seperti sambal kemasan, jajanan khas, atau minuman herbal sebagai bagian dari pengalaman wisata mereka.
-                    </ListItem>
-                </List>
-                <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-                    IKM berbasis pengolahan pangan memiliki potensi besar untuk menjadi sektor unggulan di Desa Darmasaba. Dengan inovasi, dukungan teknologi, serta pemasaran yang baik, produk-produk lokal dapat bersaing di pasar yang lebih luas, meningkatkan kesejahteraan masyarakat, dan menjadikan Darmasaba sebagai pusat industri pangan kreatif di Kabupaten Badung.
-                </Text>
-            </Box>
-        </Stack>
-    );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/jogging-track-tegeh-aban-karang-gadon-dan-munduk-uma-desa/page.tsx

@@ -1,65 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Jogging Track Tegeh Aban, Karang Gadon dan Munduk Uma Desa
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/jogging.jpg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi wisata olahraga dan rekreasi melalui Jogging Track Tegeh Aban, Karang Gadon, dan Munduk Uma Desa. Jalur jogging ini tidak hanya menjadi fasilitas olahraga bagi warga, tetapi juga berpotensi dikembangkan sebagai destinasi wisata sehat berbasis alam yang menarik bagi wisatawan lokal maupun luar daerah.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran Jogging Track Tegeh Aban, Karang Gadon dan Munduk Uma Desa:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Keindahan Alam dan Udara Segar:</Text>Jogging track yang membentang di Tegeh Aban, Karang Gadon, dan Munduk Uma Desa menawarkan pemandangan alam yang asri dengan udara segar khas pedesaan. Jalur ini melewati area persawahan hijau, perkebunan, serta hutan kecil yang memberikan pengalaman jogging yang lebih menyenangkan dan menenangkan.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Fasilitas Olahraga dan Rekreasi </Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Selain untuk jogging, jalur ini juga cocok digunakan untuk:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Bersepeda santai : Jalur yang nyaman untuk pecinta sepeda.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Trekking ringan : Cocok bagi wisatawan yang ingin menikmati suasana pedesaan.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Meditasi dan Yoga : Area yang tenang dan alami, ideal untuk relaksasi.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Destinasi Wisata Sehat dan Edukasi:</Text>Jogging track ini berpotensi dikembangkan sebagai wisata sehat berbasis alam, di mana pengunjung bisa menikmati udara segar sambil berolahraga. Selain itu, jalur ini dapat dijadikan sebagai rute edukasi lingkungan, mengenalkan keanekaragaman hayati, pertanian, serta kehidupan masyarakat desa.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Potensi Ekonomi bagi Masyarakat </Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dengan meningkatnya jumlah pengunjung, masyarakat sekitar dapat memanfaatkan peluang usaha seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Warung sehat dan kuliner lokal : Menyediakan makanan dan minuman sehat bagi para pengunjung.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Jasa penyewaan sepeda : Menarik bagi wisatawan yang ingin berkeliling lebih jauh.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pemandu wisata lokal : Memberikan pengalaman lebih bagi wisatawan yang ingin mengenal sejarah dan budaya desa.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Berkelanjutan:</Text>Agar semakin menarik, jogging track ini bisa dilengkapi dengan fasilitas tambahan seperti tempat istirahat, spot foto alami, papan informasi tentang flora dan fauna, serta area taman bunga untuk mempercantik jalur jogging.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Jogging Track Tegeh Aban, Karang Gadon, dan Munduk Uma Desa memiliki potensi besar sebagai destinasi wisata sehat dan olahraga berbasis alam. Dengan pengelolaan yang baik serta dukungan dari pemerintah desa dan masyarakat, jalur ini bisa menjadi ikon baru Desa Darmasaba yang menarik bagi wisatawan serta meningkatkan perekonomian warga setempat.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/kawasan-kuliner/page.tsx

@@ -1,62 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} px={{ base: "md", md: 0 }} gap={"22"} >
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Kawasan Kuliner
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/warungumkm.jpg" alt='' w={"100%"} h={400} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, Bali, memiliki potensi besar dalam sektor kuliner. Sebagai desa yang strategis dan terus berkembang, Darmasaba mulai dikenal sebagai destinasi kuliner yang menawarkan beragam makanan khas Bali hingga makanan modern yang menarik minat wisatawan dan masyarakat lokal.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi Desa melalui Kawasan Kuliner:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Ragam Kuliner Khas Bali</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Darmasaba memiliki banyak warung dan rumah makan yang menyajikan hidangan khas Bali yang otentik, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Babi Guling : Salah satu kuliner favorit di Bali yang banyak ditemukan di Darmasaba.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Ayam Betutu : Hidangan ayam berbumbu khas yang dimasak dengan teknik khas Bali.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Lawar : Campuran daging dan sayuran berbumbu khas Bali.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Sate Lilit : Sate khas Bali yang terbuat dari daging cincang yang dibalut pada batang serai.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Wisata Kuliner Modern & Cafe Kekinian:</Text>Selain makanan tradisional, Darmasaba juga mulai berkembang dengan hadirnya cafe dan resto kekinian yang menyajikan menu modern seperti kopi spesial, burger, pizza, dan aneka dessert yang digemari anak muda. Keberadaan tempat-tempat ini menjadikan Darmasaba sebagai pilihan destinasi kuliner bagi wisatawan maupun warga sekitar.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pasar Kuliner Malam:</Text>Salah satu daya tarik Darmasaba adalah pusat kuliner malam yang menghadirkan aneka makanan kaki lima seperti nasi jinggo, tipat cantok, bakso, dan berbagai jajanan khas Bali. Suasana yang ramai dan harga yang terjangkau membuat pasar kuliner ini menjadi tempat favorit bagi masyarakat lokal.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Potensi Ekonomi & UMKM Kuliner:</Text>Dengan berkembangnya sektor kuliner, banyak pelaku UMKM di Darmasaba mulai merintis usaha makanan, baik dalam bentuk warung makan, katering, hingga produksi makanan ringan seperti keripik, sambal, dan minuman tradisional. Potensi ini dapat terus dikembangkan dengan dukungan pemerintah desa dan promosi melalui media sosial.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Kawasan Kuliner Berbasis Pariwisata:</Text>Untuk menarik lebih banyak pengunjung, Darmasaba berpotensi mengembangkan kawasan kuliner berbasis wisata yang menggabungkan pengalaman makan dengan konsep alam terbuka, pertunjukan seni, dan edukasi kuliner khas Bali. Hal ini dapat menjadi daya tarik tambahan bagi wisatawan yang ingin merasakan pengalaman kuliner yang lebih autentik.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Dengan kekayaan kuliner yang dimiliki, Desa Darmasaba berpotensi menjadi kawasan kuliner unggulan di Kabupaten Badung. Dukungan dari masyarakat, pemerintah desa, serta promosi yang lebih luas dapat menjadikan Darmasaba sebagai destinasi kuliner yang semakin dikenal dan berkembang.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/pemotongan-daging/page.tsx

@@ -1,77 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Pemotongan Daging
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/potong-daging.png" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi besar dalam sektor pemotongan daging. Kegiatan ini tidak hanya berperan dalam memenuhi kebutuhan konsumsi lokal, tetapi juga mendukung sektor kuliner, usaha mikro, dan distribusi daging ke berbagai wilayah di Bali.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran Pemotongan Daging:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pemotongan Daging sebagai Sumber Ekonomi</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Usaha pemotongan daging di Darmasaba menjadi salah satu sektor ekonomi yang berkembang pesat, terutama untuk memenuhi permintaan dari:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Warung makan dan rumah tangga : Daging segar untuk kebutuhan harian masyarakat.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Restoran dan usaha kuliner : Banyak digunakan dalam masakan khas Bali, seperti babi guling, sate lilit, dan lawar.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pasar tradisional dan distributor daging : Suplai daging ke pasar di wilayah sekitar.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Jenis Daging yang Diproduksi</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Kuliner khas desa ini memiliki potensi besar untuk dikembangkan sebagai bisnis UMKM, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Daging babi : Salah satu produk utama yang digunakan untuk kuliner khas Bali seperti babi guling.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Daging sapi : Untuk kebutuhan rumah tangga, usaha kuliner, hingga upacara adat.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Daging ayam : Bahan dasar berbagai makanan seperti ayam betutu dan sate lilit.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Potensi Distribusi dan Pasar yang Luas</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Pemotongan daging di Darmasaba tidak hanya memenuhi kebutuhan desa, tetapi juga didistribusikan ke berbagai daerah di Bali, termasuk:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pasar tradisional di Badung dan Denpasar.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Rumah makan, katering, dan warung lokal.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - UMKM yang bergerak di bidang pengolahan daging seperti abon, bakso, dan dendeng.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peluang Pengolahan dan Inovasi Produk</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Untuk meningkatkan nilai jual, usaha pemotongan daging di Darmasaba dapat dikembangkan dengan inovasi pengolahan seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Daging olahan siap masak : Seperti sosis, bakso, dan abon yang lebih praktis untuk konsumen.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Produk daging asap atau dendeng : Memiliki daya tahan lebih lama dan nilai jual lebih tinggi.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Paket daging beku : Mempermudah distribusi ke restoran dan pelanggan yang membutuhkan penyimpanan lebih lama.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Dukungan dan Pengembangan Usaha</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Agar usaha pemotongan daging di Darmasaba semakin berkembang, diperlukan:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Peningkatan standar kebersihan dan keamanan pangan : Dengan penerapan Good Handling Practices (GHP).</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pemasaran digital dan kemitraan dengan UMKM : Untuk memperluas jangkauan pasar.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pengolahan limbah yang ramah lingkungan : Agar tidak mencemari lingkungan sekitar.</Text>
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Pemotongan daging di Desa Darmasaba memiliki potensi besar sebagai sektor ekonomi utama, dengan permintaan pasar yang tinggi serta peluang inovasi dalam pengolahan produk daging. Dengan pengelolaan yang baik, usaha ini dapat berkembang menjadi industri yang lebih modern, higienis, dan berkelanjutan.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/pertanian/page.tsx

@@ -1,62 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Pertanian
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/pertanian.jpg" alt='' w={"100%"} h={400} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, Bali, memiliki potensi pertanian yang besar sebagai bagian dari warisan agraris yang telah diwariskan secara turun-temurun. Dengan kondisi tanah yang subur serta sistem irigasi tradisional subak, pertanian di Darmasaba memainkan peran penting dalam ekonomi dan keberlanjutan lingkungan desa.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi Desa melalui Pertanian:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Potensi dan Komoditas Unggulan</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Pertanian di Desa Darmasaba mengandalkan berbagai jenis tanaman yang memiliki nilai ekonomi tinggi, di antaranya:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Padi : Sebagai salah satu desa yang masih mempertahankan sistem subak, Darmasaba menjadi bagian dari lumbung pangan di Bali.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Sayur-mayur : Beberapa jenis sayuran seperti kangkung, bayam, cabai, dan tomat banyak dibudidayakan oleh petani lokal.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Buah-buahan tropis : Termasuk pisang, mangga, dan kelapa, yang menjadi sumber pendapatan tambahan bagi petani.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Tanaman obat dan rempah : Seperti jahe, kunyit, dan lengkuas, yang memiliki permintaan tinggi baik untuk kebutuhan rumah tangga maupun industri herbal.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Sistem Irigasi Tradisional Subak:</Text>Sebagai bagian dari warisan budaya Bali, sistem irigasi subak masih diterapkan di Darmasaba. Sistem ini memungkinkan distribusi air yang adil di antara lahan pertanian dan membantu menjaga keberlanjutan produksi pangan desa.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Pertanian Organik:</Text>Dengan meningkatnya kesadaran akan pentingnya produk sehat dan ramah lingkungan, beberapa petani di Darmasaba mulai beralih ke metode pertanian organik. Hal ini membuka peluang bagi desa untuk mengembangkan produk-produk pertanian yang memiliki nilai jual lebih tinggi.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Agrowisata sebagai Sumber Pendapatan Baru:</Text>Potensi pertanian Darmasaba juga dapat dikembangkan menjadi agrowisata, di mana wisatawan dapat merasakan pengalaman langsung dalam bertani, mengikuti workshop bercocok tanam, serta menikmati hasil pertanian segar. Hal ini dapat menarik wisatawan lokal maupun mancanegara, meningkatkan perekonomian desa.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pemberdayaan Petani dan UMKM Berbasis Pertanian:</Text>Dengan adanya BUMDes Pudak Mesari dan dukungan dari pemerintah setempat, petani di Darmasaba dapat diberikan pelatihan dan akses pasar yang lebih luas. Produk pertanian dapat diolah menjadi berbagai produk turunan seperti keripik pisang, sambal khas desa, hingga minuman herbal yang dapat dipasarkan ke luar daerah.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Dengan berbagai potensi yang dimiliki, pertanian di Desa Darmasaba dapat terus berkembang melalui inovasi dan pemanfaatan teknologi pertanian modern. Dukungan dari masyarakat, pemerintah, dan lembaga terkait sangat penting untuk menjaga keberlanjutan sektor pertanian dan meningkatkan kesejahteraan petani di desa ini.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/peternakan-ikan-lele/page.tsx

@@ -1,69 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Peternakan Ikan Lele
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/peternakanlele.jpg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi besar dalam sektor peternakan lele. Dengan kondisi lingkungan yang mendukung serta meningkatnya permintaan ikan lele di pasaran, budidaya ikan lele dapat menjadi salah satu sektor ekonomi unggulan yang mampu meningkatkan kesejahteraan masyarakat desa.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran Peternakan Ikan Lele:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Kondisi Lingkungan yang Mendukung</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Darmasaba memiliki sumber air yang cukup serta iklim yang cocok untuk budidaya ikan lele. Kolam-kolam budidaya dapat dibuat dengan berbagai sistem, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Kolam Terpal : Mudah dibuat dan lebih efisien dalam perawatan.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Kolam Beton : Lebih tahan lama dan cocok untuk produksi skala besar.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Sistem Bioflok : Teknologi modern yang dapat meningkatkan kepadatan ikan dan mengurangi limbah.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Permintaan Pasar yang Tinggi:</Text>Lele merupakan salah satu jenis ikan yang memiliki permintaan tinggi di Bali, baik untuk konsumsi rumah tangga, warung makan, hingga restoran. Produk olahan seperti lele goreng, pecel lele, dan abon lele semakin diminati, membuka peluang besar bagi peternak lele di Darmasaba.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Inovasi dan Pengembangan Teknologi</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Beberapa pengrajin genteng di Darmasaba telah mulai mengadopsi teknologi modern dalam proses produksi, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Penggunaan cetakan dan oven pembakaran efisien untuk meningkatkan kualitas dan kapasitas produksi.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Teknik pelapisan anti bocor dan anti lumut untuk membuat genteng lebih tahan lama.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Desain genteng inovatif yang lebih ringan dan mudah dipasang.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pemasaran dan Ekspansi Pasar</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Dengan meningkatnya pembangunan perumahan dan proyek konstruksi di Bali, permintaan akan genteng berkualitas terus bertambah. UMKM genteng Darmasaba dapat memperluas pasarnya dengan:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Menjalin kerja sama dengan kontraktor dan pengembang properti.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Mempromosikan produk melalui media sosial dan marketplace online.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Menyediakan layanan custom sesuai kebutuhan pelanggan.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Keberlanjutan dan Ramah Lingkungan:</Text>Industri genteng di Darmasaba berpotensi dikembangkan secara lebih ramah lingkungan dengan menerapkan metode produksi yang mengurangi limbah dan emisi. Pemanfaatan energi alternatif serta daur ulang bahan limbah dapat membantu menciptakan industri yang lebih berkelanjutan.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          UMKM genteng di Desa Darmasaba memiliki potensi besar untuk terus berkembang sebagai sektor industri unggulan. Dengan inovasi, pemasaran yang lebih luas, serta dukungan dari pemerintah dan masyarakat, industri ini dapat meningkatkan kesejahteraan warga dan memperkuat perekonomian desa.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/taman-beji-cengana/page.tsx

@@ -1,57 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            Taman Beji Cengana
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/taman-beji.jpg" alt='' w={"100%"} h={400} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Taman Beji Cengana, terletak di Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung, Bali, adalah situs suci yang memiliki nilai spiritual dan sejarah yang tinggi. Tempat ini dikenal sebagai lokasi untuk ritual pembersihan diri (melukat) dan peribadatan oleh umat Hindu Bali. Keberadaan mata air suci (Tirta Klebutan) di Taman Beji Cengana dipercaya memberikan berkah dan penyucian bagi mereka yang datang untuk berdoa dan melakukan ritual.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi Desa melalui Taman Beji Cengana:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Pariwisata Spiritual:</Text> Taman Beji Cengana memiliki potensi besar sebagai destinasi wisata spiritual. Wisatawan yang mencari pengalaman spiritual dan ketenangan batin dapat tertarik untuk mengunjungi tempat ini, mengikuti ritual melukat, dan merasakan suasana sakral yang ditawarkan.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pelestarian Budaya dan Tradisi:</Text>Dengan mempromosikan Taman Beji Cengana sebagai pusat kegiatan budaya dan ritual tradisional, desa dapat memastikan bahwa warisan budaya dan tradisi lokal tetap lestari.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pendidikan dan Penelitian:</Text>Taman Beji Cengana dapat dijadikan sebagai pusat pendidikan dan penelitian bagi akademisi, peneliti, dan pelajar yang tertarik mempelajari budaya, agama, dan sejarah Bali.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Ekonomi Kreatif:</Text>Dengan meningkatnya jumlah pengunjung ke Taman Beji Cengana, peluang bagi pengembangan ekonomi kreatif juga terbuka lebar. Masyarakat lokal dapat mengembangkan produk kerajinan tangan, kuliner khas, dan suvenir yang mencerminkan budaya dan tradisi desa.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Konservasi Lingkungan:</Text>Sebagai situs suci dengan mata air alami, Taman Beji Cengana memiliki peran penting dalam konservasi lingkungan. Upaya menjaga kebersihan dan kelestarian mata air serta lingkungan sekitarnya dapat menjadi contoh praktik konservasi yang baik.
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Dengan memanfaatkan potensi yang dimiliki Taman Beji Cengana, Desa Darmasaba dapat mengembangkan sektor pariwisata, budaya, pendidikan, ekonomi, dan lingkungan secara berkelanjutan, yang pada gilirannya akan meningkatkan kesejahteraan masyarakat dan pelestarian warisan budaya.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/tps3r-pudak-mesari/page.tsx

@@ -1,51 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Box, Container, Text, Image, ListItem, List } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            TPS3R Pudak Mesari
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/tps.png" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          TPS3R Pudak Mesari adalah Tempat Pengolahan Sampah dengan konsep Reduce, Reuse, dan Recycle (TPS3R) yang berlokasi di Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung, Bali. Fasilitas ini berperan penting dalam pengelolaan sampah berbasis masyarakat, dengan tujuan mengurangi volume sampah yang masuk ke Tempat Pembuangan Akhir (TPA) dan meningkatkan kesadaran warga tentang pentingnya pengelolaan sampah yang berkelanjutan.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi Desa melalui TPS3R Pudak Mesari:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Peningkatan Kesehatan Lingkungan:</Text> Dengan pengelolaan sampah yang efektif, desa dapat menjaga kebersihan lingkungan, mengurangi risiko penyakit, dan menciptakan suasana yang lebih nyaman bagi warga.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pemberdayaan Ekonomi Masyarakat:</Text> TPS3R membuka peluang usaha bagi warga melalui pemilahan dan pengolahan sampah, seperti produksi kompos dari sampah organik dan kerajinan tangan dari sampah anorganik yang dapat meningkatkan pendapatan masyarakat.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Edukasi dan Kesadaran Lingkungan:</Text> Fasilitas ini dapat menjadi pusat edukasi bagi masyarakat tentang pentingnya pengelolaan sampah, mendorong partisipasi aktif dalam menjaga kelestarian lingkungan.
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Pengembangan Pariwisata Berkelanjutan:</Text> Dengan lingkungan yang bersih dan asri, Desa Darmasaba memiliki potensi untuk menarik wisatawan yang tertarik pada ekowisata dan budaya lokal, sehingga meningkatkan perekonomian desa.
-          </ListItem>
-        </List>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/darmasaba/(pages)/desa/potensi/(detail)/umkm/page.tsx

@@ -1,70 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Container, Box, List, ListItem, Text, Image } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../../layanan/_com/BackButto';
-
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            UMKM
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src="/api/img/umkm.jpeg" alt='' w={"100%"} />
-      </Container>
-      <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Desa Darmasaba, yang terletak di Kecamatan Abiansemal, Kabupaten Badung, memiliki potensi besar dalam sektor Usaha Mikro, Kecil, dan Menengah (UMKM). Keberadaan UMKM di desa ini tidak hanya menjadi motor penggerak ekonomi lokal, tetapi juga mendukung pelestarian budaya dan kearifan lokal melalui berbagai produk unggulan.
-        </Text>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          Potensi dan Peran UMKM:
-        </Text>
-        <List py={20} type='ordered'>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Kerajinan Tangan dan Produk Lokal</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Darmasaba memiliki banyak pengrajin yang menghasilkan produk unik dengan nilai seni tinggi, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Genteng dan bahan bangunan tradisional : Genteng khas Darmasaba yang berkualitas tinggi.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Kerajinan anyaman dan ukiran : Produk berbasis rotan dan kayu yang banyak diminati pasar lokal dan internasional.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pakaian adat dan kain tradisional : Mendukung pelestarian budaya Bali.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Industri Kuliner Khas Darmasaba</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Kuliner khas desa ini memiliki potensi besar untuk dikembangkan sebagai bisnis UMKM, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Babi Guling : Salah satu kuliner favorit yang banyak diminati wisatawan.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Jajanan tradisional Bali : Seperti laklak, jaja uli, dan klepon yang masih dibuat dengan cara tradisional.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Olahan ikan lele : Seperti abon lele, lele asap, dan pecel lele yang memiliki pasar luas.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>UMKM Berbasis Pengolahan Pangan</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Beberapa UMKM di Darmasaba mengolah hasil pertanian dan peternakan menjadi produk bernilai tambah, seperti:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Keripik singkong dan pisang : Camilan sehat berbasis bahan lokal.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Olahan kelapa : Seperti minyak kelapa murni dan gula aren.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Produk herbal dan jamu : Menggunakan bahan-bahan alami dari tanaman lokal.</Text>
-          </ListItem>
-          <ListItem fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-            <Text fz={{ base: "sm", md: "lg" }} fw={"bold"}>Dukungan dan Pengembangan UMKM</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>Agar UMKM di Darmasaba semakin berkembang, perlu adanya:</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pelatihan dan pendampingan usaha : Untuk meningkatkan kualitas produk dan manajemen usaha.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Pemasaran digital : Menggunakan media sosial dan e-commerce untuk menjangkau pasar lebih luas.</Text>
-            <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}> - Kerja sama dengan BUMDes Pudak Mesari : Untuk membantu akses modal dan pengelolaan bisnis yang lebih profesional.</Text>
-          </ListItem>
-        </List>
-        <Text fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          UMKM di Desa Darmasaba memiliki potensi besar dalam berbagai sektor, mulai dari kerajinan tangan, kuliner, hingga wisata berbasis masyarakat. Dengan inovasi, pemasaran yang lebih luas, dan dukungan dari pemerintah desa serta masyarakat, UMKM Darmasaba dapat berkembang pesat dan menjadi tulang punggung perekonomian desa.
-        </Text>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Page;

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

@@ -60,7 +60,7 @@ function Page() {
                     <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
                       {data?.filter(item => item.kategori?.nama.toLowerCase() === 'wisata' ).length || 0}
                     </Text>
-                    <Text ta={"center"} fz={"sm"} c={"white"}>Destinasi Wisata</Text>
+                    <Text ta={"center"} fz={"sm"} c={"white"}>Wisata</Text>
                   </Box>
                 </Flex>
               </Paper>

src/app/darmasaba/(tambahan)/penghargaan/[id]/page.tsx

@@ -68,7 +68,7 @@ function Page() {
       <Box px={{ base: "md", md: 100 }}>
         <Text
           pb={20}
-          ta={"center"}
+          ta={"justify"}
           fw={"bold"}
           dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsi || '' }}
         />