Sinkronisasi UI & API Admin - User Submenu Info Sekolah

src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts

@@ -269,7 +269,7 @@ const keteranganSampah = proxy({
       try {
         keteranganSampah.create.loading = true;
         const res =
-          await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
+          await ApiFetch.api.lingkungan.keteranganbankterdekat[
             "create"
           ].post(keteranganSampah.create.form);
         if (res.status === 200) {
@@ -291,14 +291,47 @@ const keteranganSampah = proxy({
           omit: { isActive: true };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        keteranganSampah.findMany.data = res.data?.data ?? [];
-      }
-    },
+      page: 1,
+      totalPages: 1,
+      total: 0,
+      loading: false,
+      search: "",
+      load: async (page = 1, limit = 10, search = "") => {
+        // Change to arrow function
+        keteranganSampah.findMany.loading = true; // Use the full path to access the property
+        keteranganSampah.findMany.page = page;
+        keteranganSampah.findMany.search = search;
+        try {
+          const query: any = { page, limit };
+          if (search) query.search = search;
+          const res = await ApiFetch.api.lingkungan.keteranganbankterdekat[
+            "find-many"
+          ].get({
+            query,
+          });
+  
+          if (res.status === 200 && res.data?.success) {
+            keteranganSampah.findMany.data = res.data.data || [];
+            keteranganSampah.findMany.total = res.data.total || 0;
+            keteranganSampah.findMany.totalPages = res.data.totalPages || 1;
+          } else {
+            console.error(
+              "Failed to load keterangan bank sampah terdekat:",
+              res.data?.message
+            );
+            keteranganSampah.findMany.data = [];
+            keteranganSampah.findMany.total = 0;
+            keteranganSampah.findMany.totalPages = 1;
+          }
+        } catch (error) {
+          console.error("Error loading keterangan bank sampah terdekat:", error);
+          keteranganSampah.findMany.data = [];
+          keteranganSampah.findMany.total = 0;
+          keteranganSampah.findMany.totalPages = 1;
+        } finally {
+          keteranganSampah.findMany.loading = false;
+        }
+      },
   },
   findUnique: {
       data: null as Prisma.KeteranganBankSampahTerdekatGetPayload<{
@@ -306,7 +339,7 @@ const keteranganSampah = proxy({
       }> | null,
       async load(id: string) {
         try {
-          const res = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`);
+          const res = await fetch(`/api/lingkungan/keteranganbankterdekat/${id}`);
           if (res.ok) {
             const data = await res.json();
             keteranganSampah.findUnique.data = data.data ?? null;
@@ -328,7 +361,7 @@ const keteranganSampah = proxy({
           try {
             keteranganSampah.delete.loading = true;
     
-            const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/del/${id}`, {
+            const response = await fetch(`/api/lingkungan/keteranganbankterdekat/del/${id}`, {
               method: "DELETE",
               headers: {
                 "Content-Type": "application/json",
@@ -363,7 +396,7 @@ const keteranganSampah = proxy({
             }
       
             try {
-              const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`, {
+              const response = await fetch(`/api/lingkungan/keteranganbankterdekat/${id}`, {
                 method: "GET",
                 headers: {
                   "Content-Type": "application/json",
@@ -408,7 +441,7 @@ const keteranganSampah = proxy({
             try {
               keteranganSampah.edit.loading = true;
               const response = await fetch(
-                `/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${this.id}`,
+                `/api/lingkungan/keteranganbankterdekat/${this.id}`,
                 {
                   method: "PUT",
                   headers: {

src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts

@@ -1,9 +1,12 @@
+/* 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";
 
+// ========================================= BEASISWA PENDAFTAR ========================================= //
+
 const templateBeasiswaPendaftar = z.object({
   namaLengkap: z.string().min(1, "Nama harus diisi"),
   nik: z.string().min(1, "NIK harus diisi"),
@@ -76,13 +79,34 @@ const beasiswaPendaftar = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar[
-        "findMany"
-      ].get();
-      if (res.status === 200) {
-        beasiswaPendaftar.findMany.data = res.data?.data ?? [];
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      beasiswaPendaftar.findMany.loading = true; // ✅ Akses langsung via nama path
+      beasiswaPendaftar.findMany.page = page;
+      beasiswaPendaftar.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          beasiswaPendaftar.findMany.data = res.data.data ?? [];
+          beasiswaPendaftar.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          beasiswaPendaftar.findMany.data = [];
+          beasiswaPendaftar.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch beasiswa pendaftar paginated:", err);
+        beasiswaPendaftar.findMany.data = [];
+        beasiswaPendaftar.findMany.totalPages = 1;
+      } finally {
+        beasiswaPendaftar.findMany.loading = false;
       }
     },
   },
@@ -275,8 +299,260 @@ const beasiswaPendaftar = proxy({
   },
 });
 
+// ========================================= KEUNGGULAN PROGRAM ========================================= //
+const templateKeunggulanProgram = z.object({
+judul: z.string().min(1, "Judul harus diisi"),
+deskripsi: z.string().min(1, "Deskripsi harus diisi"),
+});
+
+const defaultKeunggulanProgram = {
+judul: "",
+deskripsi: "",
+};
+
+const keunggulanProgram = proxy({
+  create: {
+    form: { ...defaultKeunggulanProgram },
+    loading: false,
+    async create() {
+      const cek = templateKeunggulanProgram.safeParse(
+        keunggulanProgram.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        keunggulanProgram.create.loading = true;
+        const res = await ApiFetch.api.pendidikan.beasiswa.keunggulanprogram[
+          "create"
+        ].post(keunggulanProgram.create.form);
+        if (res.status === 200) {
+          keunggulanProgram.findMany.load();
+          return toast.success("Data Berhasil Dibuat, Silahkan Menunggu Konfirmasi dari Admin di WhatsApp");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        keunggulanProgram.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.KeunggulanProgramGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      keunggulanProgram.findMany.loading = true; // ✅ Akses langsung via nama path
+      keunggulanProgram.findMany.page = page;
+      keunggulanProgram.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.beasiswa.keunggulanprogram["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          keunggulanProgram.findMany.data = res.data.data ?? [];
+          keunggulanProgram.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          keunggulanProgram.findMany.data = [];
+          keunggulanProgram.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch keunggulan program paginated:", err);
+        keunggulanProgram.findMany.data = [];
+        keunggulanProgram.findMany.totalPages = 1;
+      } finally {
+        keunggulanProgram.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KeunggulanProgramGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          keunggulanProgram.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          keunggulanProgram.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        keunggulanProgram.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        keunggulanProgram.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Keunggulan Program berhasil dihapus");
+          await keunggulanProgram.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus keunggulan program");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus keunggulan program");
+      } finally {
+        keunggulanProgram.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKeunggulanProgram },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/${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 = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading keunggulan program:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKeunggulanProgram.safeParse(
+        keunggulanProgram.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        keunggulanProgram.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              judul: this.form.judul,
+              deskripsi: this.form.deskripsi,
+            }),
+          }
+        );
+
+        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 keunggulan program");
+          await keunggulanProgram.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update keunggulan program");
+        }
+      } catch (error) {
+        console.error("Error updating keunggulan program:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update keunggulan program"
+        );
+        return false;
+      } finally {
+        keunggulanProgram.update.loading = false;
+      }
+    },
+    reset() {
+      keunggulanProgram.update.id = "";
+      keunggulanProgram.update.form = { ...defaultKeunggulanProgram };
+    },
+  },
+});
+
+
 const beasiswaDesaState = proxy({
   beasiswaPendaftar,
+  keunggulanProgram
 });
 
 export default beasiswaDesaState;

src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts

@@ -343,33 +343,40 @@ const lembagaPendidikan = proxy({
     total: 0,
     loading: false,
     search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      lembagaPendidikan.findMany.loading = true; // Use the full path to access the property
+    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
+      lembagaPendidikan.findMany.loading = true;
       lembagaPendidikan.findMany.page = page;
       lembagaPendidikan.findMany.search = search;
+      
       try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        const res =
-          await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
-            "find-many"
-          ].get({
-            query,
-          });
+        const query: any = { 
+          page, 
+          limit, 
+          ...(search && { search }),
+          ...(jenjangPendidikan && { jenjangPendidikanId: jenjangPendidikan })
+        };
+        
+        console.log('Fetching lembaga with query:', query);
+        
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan["find-many"].get({ query });
+        
+        console.log('API Response:', res);
 
         if (res.status === 200 && res.data?.success) {
-          lembagaPendidikan.findMany.data = res.data.data || [];
-          lembagaPendidikan.findMany.total = res.data.total || 0;
-          lembagaPendidikan.findMany.totalPages = res.data.totalPages || 1;
+          lembagaPendidikan.findMany.data = Array.isArray(res.data.data) ? res.data.data : [];
+          lembagaPendidikan.findMany.total = typeof res.data.total === 'number' ? res.data.total : 0;
+          lembagaPendidikan.findMany.totalPages = typeof res.data.totalPages === 'number' ? res.data.totalPages : 1;
+          console.log('Successfully loaded lembaga data:', {
+            count: lembagaPendidikan.findMany.data.length,
+            total: lembagaPendidikan.findMany.total,
+            totalPages: lembagaPendidikan.findMany.totalPages
+          });
         } else {
           console.error(
             "Failed to load lembaga pendidikan:",
-            res.data?.message
+            res.data?.message || 'No error message provided'
           );
-          lembagaPendidikan.findMany.data = [];
-          lembagaPendidikan.findMany.total = 0;
-          lembagaPendidikan.findMany.totalPages = 1;
+          throw new Error(res.data?.message || 'Failed to load lembaga pendidikan');
         }
       } catch (error) {
         console.error("Error loading lembaga pendidikan:", error);
@@ -621,7 +628,11 @@ const siswa = proxy({
     data: null as Array<
       Prisma.SiswaGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true;
+            };
+          };
         };
       }>
     > | null,
@@ -630,14 +641,16 @@ const siswa = proxy({
     total: 0,
     loading: false,
     search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      siswa.findMany.loading = true; // Use the full path to access the property
+    jenjangPendidikan: "",
+    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
+      siswa.findMany.loading = true;
       siswa.findMany.page = page;
       siswa.findMany.search = search;
+      siswa.findMany.jenjangPendidikan = jenjangPendidikan;
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
+        if (jenjangPendidikan) query.jenjangPendidikanName = jenjangPendidikan;
         const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
           "find-many"
         ].get({
@@ -894,7 +907,11 @@ const pengajar = proxy({
     data: null as Array<
       Prisma.PengajarGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true
+            }
+          }
         };
       }>
     > | null,
@@ -903,14 +920,17 @@ const pengajar = proxy({
     total: 0,
     loading: false,
     search: "",
-    load: async (page = 1, limit = 10, search = "") => {
+    jenjangPendidikan: "",
+    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
       // Change to arrow function
       pengajar.findMany.loading = true; // Use the full path to access the property
       pengajar.findMany.page = page;
       pengajar.findMany.search = search;
+      pengajar.findMany.jenjangPendidikan = jenjangPendidikan;
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
+        if (jenjangPendidikan) query.jenjangPendidikanId = jenjangPendidikan;
         const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
           "find-many"
         ].get({

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.tsx

@@ -1,60 +1,101 @@
 /* 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';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconList, IconCategory } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
+    const router = useRouter();
+    const pathname = usePathname();
+
     const tabs = [
         {
             label: "List Desa Anti Korupsi",
             value: "listDesaAntiKorupsi",
-            href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi"
+            href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi",
+            icon: <IconList size={18} stroke={1.8} />,
+            tooltip: "Kelola daftar program desa anti korupsi",
         },
         {
             label: "Kategori Desa Anti Korupsi",
             value: "kategoriDesaAntiKorupsi",
-            href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi"
+            href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi",
+            icon: <IconCategory size={18} stroke={1.8} />,
+            tooltip: "Kelola kategori desa anti korupsi",
         },
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname);
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
+        const tab = tabs.find(t => t.value === value);
         if (tab) {
-            router.push(tab.href)
+            router.push(tab.href);
         }
         setActiveTab(value)
     }
 
     useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
+        const match = tabs.find(tab => tab.href === pathname);
         if (match) {
-            setActiveTab(match.value)
+            setActiveTab(match.value);
         }
-    }, [pathname])
+    }, [pathname]);
 
     return (
-        <Stack>
-            <Title order={3}>Desa Anti Korupsi</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>
+        <Stack gap="lg">
+            <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+                Desa Anti Korupsi
+            </Title>
+            <Tabs
+                variant="pills"
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow>
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        {children}
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }

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

@@ -2,14 +2,14 @@
 'use client'
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } 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 EditKategoriDesaAntiKorupsi() {
+export default function EditKategoriDesaAntiKorupsi() {
   const router = useRouter();
   const params = useParams();
   const id = params?.id as string;
@@ -18,16 +18,17 @@ function EditKategoriDesaAntiKorupsi() {
   const [formData, setFormData] = useState({
     name: "",
   });
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    const loadKategorikegiatan = async () => {
+    const loadKategori = async () => {
       if (!id) return;
-
+      setIsLoading(true);
+      
       try {
         const data = await stateKategori.edit.load(id);
 
         if (data) {
-          // pastikan id-nya masuk ke state edit
           stateKategori.edit.id = id;
           setFormData({
             name: data.name || '',
@@ -36,63 +37,88 @@ function EditKategoriDesaAntiKorupsi() {
       } catch (error) {
         console.error("Error loading kategori desa anti korupsi:", error);
         toast.error("Gagal memuat data kategori desa anti korupsi");
+      } finally {
+        setIsLoading(false);
       }
     };
 
-    loadKategorikegiatan();
+    loadKategori();
   }, [id]);
 
   const handleSubmit = async () => {
-    try {
-      if (!formData.name.trim()) {
-        toast.error('Nama kategori desa anti korupsi tidak boleh kosong');
-        return;
-      }
+    if (!formData.name.trim()) {
+      return toast.error('Nama kategori tidak boleh kosong');
+    }
 
+    try {
+      setIsLoading(true);
       stateKategori.edit.form = {
         name: formData.name.trim(),
       };
 
-      // Safety check tambahan: pastikan ID tidak kosong
       if (!stateKategori.edit.id) {
-        stateKategori.edit.id = id; // fallback
+        stateKategori.edit.id = id;
       }
 
-      const success = await stateKategori.edit.update();
-
-      if (success) {
-        router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
-      }
+      await stateKategori.edit.update();
+      toast.success('Kategori berhasil diperbarui');
+      router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
     } catch (error) {
       console.error("Error updating kategori desa anti korupsi:", error);
-      // toast akan ditampilkan dari fungsi update
+      toast.error(error instanceof Error ? error.message : 'Gagal memperbarui kategori');
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kategori Desa Anti Korupsi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Kategori Desa Anti Korupsi</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Kategori"
+            placeholder="Masukkan nama kategori"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
-            placeholder='Masukkan nama kategori desa anti korupsi'
+            required
+            disabled={isLoading}
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={isLoading}
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
-
-export default EditKategoriDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 import korupsiState from '../../../../_state/landing-page/desa-anti-korupsi';
 
-function CreateKategoriDesaAntiKorupsi() {
+export default function CreateKategoriDesaAntiKorupsi() {
   const router = useRouter();
-  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
 
   useEffect(() => {
     stateKategori.findMany.load();
@@ -20,42 +20,64 @@ function CreateKategoriDesaAntiKorupsi() {
     stateKategori.create.form = {
       name: "",
     };
-  }
+  };
 
   const handleSubmit = async () => {
+    if (!stateKategori.create.form.name) {
+      return alert('Nama kategori harus diisi');
+    }
+    
     await stateKategori.create.create();
     resetForm();
-    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi")
-  }
+    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
+  };
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Desa Anti Korupsi
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Kategori Desa Anti Korupsi</Title>
-            <TextInput
-              value={stateKategori.create.form.name}
-              onChange={(val) => {
-                stateKategori.create.form.name = val.target.value;
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Kategori"
+            placeholder="Masukkan nama kategori"
+            value={stateKategori.create.form.name || ''}
+            onChange={(e) => (stateKategori.create.form.name = e.target.value)}
+            required
+          />
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
-              placeholder='Masukkan nama kategori desa anti korupsi'
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }
-
-export default CreateKategoriDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
 
@@ -56,74 +55,84 @@ function ListKategoriKegiatan({ search }: { search: string }) {
 
   const filteredData = data || []
 
-  // Handle loading state
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={550} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Kategori Kegiatan'
-            href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Delete</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
-        </Paper>
-      </Box>
-    );
-  }
-
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Kategori Kegiatan'
-          href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
-        />
-        <Box style={{ overflowY: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+      <Paper bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Kategori Kegiatan</Title>
+          <Tooltip label="Tambah Kategori" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh>Nama Kategori</TableTh>
                 <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh>Hapus</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>
-                    <Button color="green" onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button color="red" onClick={() => {
-                      setSelectedId(item.id)
-                      setModalHapus(true)
-                    }}>
-                      <IconX size={20} />
-                    </Button>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Edit" withArrow>
+                        <Button
+                          variant="light"
+                          color="blue"
+                          size="sm"
+                          onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${item.id}`)}
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Hapus" withArrow>
+                        <Button
+                          variant="light"
+                          color="red"
+                          size="sm"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrash size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={2}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data kategori yang ditemukan</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
           </Table>
         </Box>
@@ -133,11 +142,13 @@ function ListKategoriKegiatan({ search }: { search: string }) {
           value={page}
           onChange={(newPage) => {
             load(newPage, 10);
-            window.scrollTo(0, 0);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
       {/* Modal Konfirmasi Hapus */}

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx

@@ -1,18 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
+'use client';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack, IconFile, IconUpload, IconX } 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';
 
 import colors from '@/con/colors';
-
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import ApiFetch from '@/lib/api-fetch';
 import { Dropzone } from '@mantine/dropzone';
-import { toast } from 'react-toastify';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 
 interface FormDesaAntiKorupsi {
@@ -22,18 +20,20 @@ interface FormDesaAntiKorupsi {
   fileId: string;
 }
 
-function EditDesaAntiKorupsi() {
-  const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi)
+export default function EditDesaAntiKorupsi() {
+  const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi);
   const [previewFile, setPreviewFile] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const params = useParams()
-  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false);
+  const params = useParams();
+  const router = useRouter();
+  
   const [formData, setFormData] = useState<FormDesaAntiKorupsi>({
     name: '',
     deskripsi: '',
     kategoriId: '',
     fileId: '',
-  })
+  });
 
   useEffect(() => {
     const loadDesaAntiKorupsi = async () => {
@@ -43,7 +43,6 @@ function EditDesaAntiKorupsi() {
       try {
         const data = await desaAntiKorupsiState.edit.load(id);
         if (data) {
-          // ⬇️ FIX PENTING: tambahkan ini
           desaAntiKorupsiState.edit.id = id;
 
           desaAntiKorupsiState.edit.form = {
@@ -61,169 +60,198 @@ function EditDesaAntiKorupsi() {
           });
 
           if (data?.file?.link) {
-            setPreviewFile(data.file.link)
+            setPreviewFile(data.file.link);
           }
         }
       } catch (error) {
-        console.error("Error loading program penghijauan:", error);
-        toast.error("Gagal memuat data program penghijauan");
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data Desa Anti Korupsi');
       }
-    }
+    };
 
     loadDesaAntiKorupsi();
   }, [params?.id]);
 
-
   const handleSubmit = async () => {
+    if (!formData.name) {
+      return toast.warn('Masukkan judul dokumen');
+    }
+    if (!formData.kategoriId) {
+      return toast.warn('Pilih kategori dokumen');
+    }
 
+    setIsLoading(true);
     try {
       // Update global state with form data
       desaAntiKorupsiState.edit.form = {
         ...desaAntiKorupsiState.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
+        ...formData,
         kategoriId: formData.kategoriId || '',
-        fileId: formData.fileId // Keep existing imageId if not changed
       };
 
-      // Jika ada file baru, upload
+      // Upload new file if exists
       if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const res = await ApiFetch.api.fileStorage.create.post({ 
+          file, 
+          name: file.name 
+        });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
+          throw new Error('Gagal mengunggah dokumen');
         }
-
-        // Update imageId in global state
         desaAntiKorupsiState.edit.form.fileId = uploaded.id;
       }
 
       await desaAntiKorupsiState.edit.update();
-      toast.success("desa anti korupsi berhasil diperbarui!");
-      router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi");
+      toast.success('Data berhasil diperbarui');
+      router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi');
     } catch (error) {
-      console.error("Error updating desa anti korupsi:", error);
-      toast.error("Terjadi kesalahan saat memperbarui desa anti korupsi");
+      console.error('Error updating data:', error);
+      toast.error('Terjadi kesalahan saat memperbarui data');
+    } finally {
+      setIsLoading(false);
     }
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Edit List Desa Anti Korupsi</Text>
-          {desaAntiKorupsiState.findUnique.data ? (
-            <Paper key={desaAntiKorupsiState.findUnique.data.id}>
-              <Stack gap={"xs"}>
-                <TextInput
-                  value={formData.name}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      name: val.target.value
-                    })
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Desa Anti Korupsi
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Judul Dokumen"
+            placeholder="Masukkan judul dokumen"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <Select
+            label="Kategori"
+            placeholder="Pilih kategori"
+            value={formData.kategoriId}
+            onChange={(val) => setFormData({ ...formData, kategoriId: val || '' })}
+            data={
+              korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
+            }
+            required
+            searchable
+            clearable
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Dokumen
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewFile(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format dokumen')}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'application/*': ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'],
+              }}
+              radius="md"
+            >
+              <Group justify="center" gap="xl" mih={180} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconFile size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="lg" inline>
+                    Seret dokumen ke sini atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX)
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewFile && (
+              <Box mt="md">
+                <Text fw="bold" fz="sm" mb={6}>
+                  Pratinjau Dokumen
+                </Text>
+                <Box
+                  style={{
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    height: '500px',
+                    width: '100%',
                   }}
-                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-                  placeholder='Masukkan judul'
-                />
-                <Box>
-                  <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
-                  <EditEditor
-                    value={formData.deskripsi}
-                    onChange={(val) => {
-                      setFormData({
-                        ...formData,
-                        deskripsi: val
-                      })
-                    }}
+                >
+                  <iframe
+                    src={previewFile}
+                    width="100%"
+                    height="100%"
+                    style={{ border: 'none' }}
                   />
                 </Box>
-                <Select
-                  value={formData.kategoriId}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      kategoriId: val ?? ""
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-                  placeholder="Pilih kategori"
-                  data={
-                    korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
-                      value: v.id,
-                      label: v.name,
-                    })) || []
-                  }
-                />
-                <Box>
-                  <Text fz={"md"} fw={"bold"}>File Document</Text>
-                  <Box>
-                    <Dropzone
-                      onDrop={(files) => {
-                        const selectedFile = files[0]; // Ambil file pertama
-                        if (selectedFile) {
-                          setFile(selectedFile);
-                          setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
-                        }
-                      }}
-                      onReject={() => toast.error('File tidak valid.')}
-                      maxSize={5 * 1024 ** 2} // Maks 5MB
-                      accept={{
-                        'application/*': ['.pdf', '.doc', '.docx'],
-                      }}
-                    >
-                      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                        <Dropzone.Accept>
-                          <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                        </Dropzone.Accept>
-                        <Dropzone.Reject>
-                          <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                        </Dropzone.Reject>
-                        <Dropzone.Idle>
-                          <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                        </Dropzone.Idle>
+              </Box>
+            )}
+          </Box>
 
-                        <div>
-                          <Text size="xl" inline>
-                            Drag file ke sini atau klik untuk pilih file
-                          </Text>
-                          <Text size="sm" c="dimmed" inline mt={7}>
-                            Maksimal 5MB dan harus format document
-                          </Text>
-                        </div>
-                      </Group>
-                    </Dropzone>
-                    <Box>
-                      <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                      {previewFile ? (
-                        <iframe
-                          src={previewFile}
-                          width="100%"
-                          height="500px"
-                          style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                        />
-                      ) : (
-                        <Text>Tidak ada dokumen tersedia</Text>
-                      )}
-                    </Box>
-                  </Box>
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          ) : null}
+          <Group justify="right" mt="xl">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={isLoading}
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>
   );
-}
-
-export default EditDesaAntiKorupsi;
+}

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

@@ -2,15 +2,15 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 
-function DetailKegiatanDesa() {
+export default function DetailKegiatanDesa() {
   const detailState = useProxy(korupsiState.desaAntikorupsi)
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
@@ -34,89 +34,122 @@ function DetailKegiatanDesa() {
   if (!detailState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = detailState.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Desa Anti Korupsi</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.kategori?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                  {detailState.findUnique.data?.file?.link ? (
-                    <iframe
-                      src={detailState.findUnique.data.file.link}
-                      width="100%"
-                      height="500px"
-                      style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                    />
-                  ) : (
-                    <Text>Tidak ada dokumen tersedia</Text>
-                  )}
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Desa Anti Korupsi
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="md">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Kategori</Text>
+                <Text fz="md" c="dimmed">{data.kategori?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb="xs">Deskripsi</Text>
+                <Box 
+                  fz="md" 
+                  c="dimmed" 
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  style={{ lineHeight: 1.6 }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb="xs">Dokumen</Text>
+                {data.file?.link ? (
+                  <Box 
+                    style={{
+                      border: '1px solid #e0e0e0',
+                      borderRadius: '8px',
+                      overflow: 'hidden',
+                      height: '500px',
+                      width: '100%'
                     }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
                   >
-                    <IconX size={20} />
-                  </Button>
+                    <iframe
+                      src={data.file.link}
+                      width="100%"
+                      height="100%"
+                      style={{ border: 'none' }}
+                    />
+                  </Box>
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Data" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${detailState.findUnique.data.id}/edit`);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={!detailState.findUnique.data}
-                    color={"green"}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={detailState.delete.loading}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus desa anti korupsi ini?'
+        text="Apakah Anda yakin ingin menghapus data Desa Anti Korupsi ini?"
       />
     </Box>
   );
-}
-
-export default DetailKegiatanDesa;
+}

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx

@@ -1,10 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -13,12 +24,12 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 
-function CreateDesaAntiKorupsi() {
+export default function CreateDesaAntiKorupsi() {
   const router = useRouter();
-  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi)
+  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi);
   const [previewFile, setPreviewFile] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     stateKorupsi.findMany.load();
@@ -27,140 +38,181 @@ function CreateDesaAntiKorupsi() {
 
   const resetForm = () => {
     stateKorupsi.create.form = {
-      name: "",
-      deskripsi: "",
-      kategoriId: "",
-      fileId: "",
+      name: '',
+      deskripsi: '',
+      kategoriId: '',
+      fileId: '',
     };
     setFile(null);
     setPreviewFile(null);
   };
+
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file pdf terlebih dahulu");
+      return toast.warn('Pilih file dokumen terlebih dahulu');
+    }
+    if (!stateKorupsi.create.form.name) {
+      return toast.warn('Masukkan judul dokumen');
+    }
+    if (!stateKorupsi.create.form.kategoriId) {
+      return toast.warn('Pilih kategori dokumen');
     }
 
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    })
+    setIsLoading(true);
+    try {
+      const res = await ApiFetch.api.fileStorage.create.post({
+        file,
+        name: file.name,
+      });
 
-    const uploaded = res.data?.data;
+      const uploaded = res.data?.data;
 
-    if (!uploaded?.id) {
-      return toast.error("Gagal mengupload file");
+      if (!uploaded?.id) {
+        throw new Error('Gagal mengunggah dokumen');
+      }
+
+      stateKorupsi.create.form.fileId = uploaded.id;
+      await stateKorupsi.create.create();
+      
+      toast.success('Data berhasil disimpan');
+      resetForm();
+      router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi');
+    } catch (error) {
+      console.error('Error:', error);
+      toast.error('Terjadi kesalahan saat menyimpan data');
+    } finally {
+      setIsLoading(false);
     }
-
-    stateKorupsi.create.form.fileId = uploaded.id;
-
-    await stateKorupsi.create.create();
-
-    resetForm();
-    router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
-  }
+  };
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Dokumen Desa Anti Korupsi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kegiatan Desa</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <Box>
-            <Text fz={"md"} fw={"bold"}>File Document</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{
-                  'application/*': ['.pdf', '.doc', '.docx'],
-                }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
-
-                  <div>
-                    <Text size="xl" inline>
-                      Drag file ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format document
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                {previewFile ? (
-                  <iframe
-                    src={previewFile}
-                    width="100%"
-                    height="500px"
-                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                  />
-                ) : (
-                  <Text>Tidak ada dokumen tersedia</Text>
-                )}
-              </Box>
-            </Box>
-          </Box>
-          <TextInput
-            value={stateKorupsi.create.form.name}
-            onChange={(val) => {
-              stateKorupsi.create.form.name = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
-          />
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
-            <CreateEditor
-              value={stateKorupsi.create.form.deskripsi}
-              onChange={(val) => {
-                stateKorupsi.create.form.deskripsi = val;
+            <Text fw="bold" fz="sm" mb={6}>
+              Dokumen
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewFile(URL.createObjectURL(selectedFile));
+                }
               }}
+              onReject={() => toast.error('File tidak valid, gunakan format dokumen')}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'application/*': ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'],
+              }}
+              radius="md"
+            >
+              <Group justify="center" gap="xl" mih={180} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconFile size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="lg" inline>
+                    Seret dokumen ke sini atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX)
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewFile && (
+              <Box mt="md" style={{ textAlign: 'center' }}>
+                <iframe
+                  src={previewFile}
+                  width="100%"
+                  height="500px"
+                  style={{
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                    maxWidth: '100%',
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+
+          <TextInput
+            label="Judul Dokumen"
+            placeholder="Masukkan judul dokumen"
+            value={stateKorupsi.create.form.name || ''}
+            onChange={(e) => (stateKorupsi.create.form.name = e.target.value)}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={stateKorupsi.create.form.deskripsi || ''}
+              onChange={(val) => (stateKorupsi.create.form.deskripsi = val)}
             />
           </Box>
+
           <Select
-            value={stateKorupsi.create.form.kategoriId}
-            onChange={(val) => {
-              stateKorupsi.create.form.kategoriId = val ?? "";
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
+            value={stateKorupsi.create.form.kategoriId || ''}
+            onChange={(val) => (stateKorupsi.create.form.kategoriId = val || '')}
             data={
               korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
                 value: v.id,
                 label: v.name,
               })) || []
             }
+            required
+            searchable
+            clearable
           />
 
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          <Group justify="right" mt="xl">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={isLoading}
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
-
-export default CreateDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
 
 function DesaAntiKorupsi() {
@@ -16,7 +15,7 @@ function DesaAntiKorupsi() {
     <Box>
       <HeaderSearch
         title='List Desa Anti Korupsi'
-        placeholder='pencarian'
+        placeholder='Cari nama program atau kategori...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,8 +26,8 @@ function DesaAntiKorupsi() {
 }
 
 function ListDesaAntiKorupsi({ search }: { search: string }) {
-  const listState = useProxy(korupsiState.desaAntikorupsi)
   const router = useRouter();
+  const listState = useProxy(korupsiState.desaAntikorupsi);
 
   const {
     data,
@@ -42,99 +41,96 @@ function ListDesaAntiKorupsi({ search }: { search: string }) {
     load(page, 10, search);
   }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
-  // Handle loading state
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={550} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Desa Anti Korupsi'
-            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Kategori</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
-        </Paper>
-      </Box>
-    );
-  }
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Desa Anti Korupsi'
-            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Desa Anti Korupsi</TableTh>
-                  <TableTh>Deskripsi Desa Anti Korupsi</TableTh>
-                  <TableTh>Kategori Desa Anti Korupsi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Program Desa Anti Korupsi</Title>
+          <Tooltip label="Tambah Program Desa Anti Korupsi" withArrow>
+          <Button
+            leftSection={<IconPlus size={18} />}
+            color="blue"
+            variant="light"
+            onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create')}
+          >
+            Tambah Baru
+          </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Program</TableTh>
+                <TableTh>Kategori</TableTh>
+                <TableTh>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      <Box w={350}>
+                        <Text lineClamp={1} fw={500}>{item.name || '-'}</Text>
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Box w={200}>
-                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </Box>
+                      <Text fz="sm" c="dimmed">
+                        {item.kategori?.name || '-'}
+                      </Text>
                     </TableTd>
-                    <TableTd>{item.kategori?.name}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data program yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
             load(newPage, 10);
-            window.scrollTo(0, 0);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default DesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/profile/_lib/layoutTabs.tsx

@@ -1,67 +1,110 @@
 /* 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';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconBulb, IconUsers, IconBrandFacebook } from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-  const router = useRouter()
-  const pathname = usePathname()
+  const router = useRouter();
+  const pathname = usePathname();
+
   const tabs = [
     {
       label: "Program Inovasi",
       value: "program-inovasi",
-      href: "/admin/landing-page/profile/program-inovasi"
+      href: "/admin/landing-page/profile/program-inovasi",
+      icon: <IconBulb size={18} stroke={1.8} />,
+      tooltip: "Lihat dan kelola program inovasi desa",
     },
     {
       label: "Pejabat Desa",
       value: "pejabat-desa",
-      href: "/admin/landing-page/profile/pejabat-desa"
+      href: "/admin/landing-page/profile/pejabat-desa",
+      icon: <IconUsers size={18} stroke={1.8} />,
+      tooltip: "Kelola data pejabat desa",
     },
     {
       label: "Media Sosial",
       value: "media-sosial",
-      href: "/admin/landing-page/profile/media-sosial"
+      href: "/admin/landing-page/profile/media-sosial",
+      icon: <IconBrandFacebook size={18} stroke={1.8} />,
+      tooltip: "Atur tautan media sosial desa",
     },
   ];
-  const curentTab = tabs.find(tab => tab.href === pathname)
-  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
   const handleTabChange = (value: string | null) => {
-    const tab = tabs.find(t => t.value === value)
+    const tab = tabs.find(t => t.value === value);
     if (tab) {
-      router.push(tab.href)
+      router.push(tab.href);
     }
-    setActiveTab(value)
-  }
+    setActiveTab(value);
+  };
 
   useEffect(() => {
-    const match = tabs.find(tab => tab.href === pathname)
+    const match = tabs.find(tab => tab.href === pathname);
     if (match) {
-      setActiveTab(match.value)
+      setActiveTab(match.value);
     }
-  }, [pathname])
+  }, [pathname]);
 
   return (
-    <Stack>
-      <Title order={3}>Profile</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>
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Profil Desa
+      </Title>
+      <Tabs
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+        radius="lg"
+        keepMounted={false}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+            borderRadius: "1rem",
+            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+          }}
+        >
+          {tabs.map((tab, i) => (
+            <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow>
+              <TabsTab
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  fontWeight: 600,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
           ))}
         </TabsList>
-        {tabs.map((e, i) => (
-          <TabsPanel key={i} value={e.value}>
-            {/* Konten dummy, bisa diganti tergantung routing */}
-            <></>
+
+        {tabs.map((tab, i) => (
+          <TabsPanel
+            key={i}
+            value={tab.value}
+            style={{
+              padding: "1.5rem",
+              background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+              borderRadius: "1rem",
+              boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+            }}
+          >
+            {children}
           </TabsPanel>
         ))}
       </Tabs>
-      {children}
     </Stack>
   );
 }
 
-export default LayoutTabs;
+export default LayoutTabs;

src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/edit/page.tsx

@@ -1,9 +1,20 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,17 +23,17 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditMediaSosial() {
-  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial);
   const router = useRouter();
   const params = useParams();
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    name: stateMediaSosial.update.form.name || "",
-    iconUrl: stateMediaSosial.update.form.iconUrl || "",
-    imageId: stateMediaSosial.update.form.imageId || ""
-  })
+    name: stateMediaSosial.update.form.name || '',
+    iconUrl: stateMediaSosial.update.form.iconUrl || '',
+    imageId: stateMediaSosial.update.form.imageId || '',
+  });
 
   useEffect(() => {
     const id = params?.id as string;
@@ -34,136 +45,147 @@ function EditMediaSosial() {
 
         if (data) {
           setFormData({
-            name: data.name || "",
-            iconUrl: data.iconUrl || "",
-            imageId: data.imageId || "",
+            name: data.name || '',
+            iconUrl: data.iconUrl || '',
+            imageId: data.imageId || '',
           });
-          // Tampilkan preview gambar
-          if (data.image?.link) {
-            setPreviewImage(data.image.link);
-          }
+          if (data.image?.link) setPreviewImage(data.image.link);
         }
       } catch (error) {
-        console.error("Error loading program inovasi:", error);
+        console.error('Error loading media sosial:', error);
         toast.error(
-          error instanceof Error ? error.message : "Gagal mengambil data program inovasi"
+          error instanceof Error ? error.message : 'Gagal mengambil data media sosial'
         );
       }
-    }
+    };
 
     loadMediaSosial();
   }, [params?.id]);
 
   const handleSubmit = async () => {
     try {
-      stateMediaSosial.update.form = {
-        ...stateMediaSosial.update.form,
-        name: formData.name,
-        iconUrl: formData.iconUrl,
-        imageId: formData.imageId ?? "",
-      }
+      stateMediaSosial.update.form = { ...stateMediaSosial.update.form, ...formData };
+
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
 
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
 
-        // Update imageId in global state
         stateMediaSosial.update.form.imageId = uploaded.id;
       }
 
       await stateMediaSosial.update.update();
-      toast.success("Media Sosial berhasil diperbarui!");
-      router.push("/admin/landing-page/profile/media-sosial");
+      toast.success('Media sosial berhasil diperbarui!');
+      router.push('/admin/landing-page/profile/media-sosial');
     } catch (error) {
-      console.error("Error updating media sosial:", error);
-      toast.error("Terjadi kesalahan saat memperbarui media sosial");
+      console.error('Error updating media sosial:', error);
+      toast.error('Terjadi kesalahan saat memperbarui media sosial');
     }
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Media Sosial
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Media Sosial</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Media Sosial
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                />
+              </Box>
+            )}
           </Box>
+
           <TextInput
+            label="Nama Media Sosial / Kontak"
+            placeholder="Masukkan nama media sosial atau kontak"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Media Sosial / Nama Kontak</Text>}
-            placeholder='Masukkan nama media sosial'
+            required
           />
+
           <TextInput
+            label="Link Media Sosial / Nomor Telepon"
+            placeholder="Masukkan link media sosial atau nomor telepon"
             value={formData.iconUrl}
             onChange={(e) => setFormData({ ...formData, iconUrl: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Icon URL / No Telephone</Text>}
-            placeholder='Masukkan icon url'
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/landing-page/profile/media-sosial/[id]/page.tsx

@@ -2,103 +2,132 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function DetailMediaSosial() {
-  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
   const router = useRouter();
 
   useShallowEffect(() => {
-    stateMediaSosial.findUnique.load(params?.id as string)
-  }, [])
+    stateMediaSosial.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      stateMediaSosial.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/profile/media-sosial")
+      stateMediaSosial.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/landing-page/profile/media-sosial");
     }
-  }
+  };
 
   if (!stateMediaSosial.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = stateMediaSosial.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Media Sosial</Text>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Media Sosial
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Media Sosial / Nama Kontak</Text>
-                <Text fz={"lg"}>{stateMediaSosial.findUnique.data?.name}</Text>
+                <Text fz="lg" fw="bold">Nama Media Sosial / Kontak</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Icon URL / No Telephone</Text>
-                <Text fz={"lg"}>{stateMediaSosial.findUnique.data?.iconUrl}</Text>
+                <Text fz="lg" fw="bold">Icon / Nomor Telepon</Text>
+                <Text fz="md" c="dimmed">{data.iconUrl || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Box w={100} h={100}>
-                  <Image src={stateMediaSosial.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.name || 'Gambar Media Sosial'}
+                    w={120}
+                    h={120}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
               </Box>
-              <Box>
-                <Flex gap={"xs"}>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Media Sosial" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (stateMediaSosial.findUnique.data) {
-                        setSelectedId(stateMediaSosial.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={!stateMediaSosial.findUnique.data}
-                    color="red">
-                    <IconX size={20} />
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Media Sosial" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (stateMediaSosial.findUnique.data) {
-                        router.push(`/admin/landing-page/profile/media-sosial/${stateMediaSosial.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!stateMediaSosial.findUnique.data}
-                    color="green">
+                    color="green"
+                    onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus media sosial ini?"
+        text="Apakah Anda yakin ingin menghapus media sosial ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/landing-page/profile/media-sosial/create/page.tsx

@@ -1,8 +1,19 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,9 +22,9 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import profileLandingPageState from '../../../../_state/landing-page/profile';
 
-function CreateMediaSosial() {
+export default function CreateMediaSosial() {
   const router = useRouter();
-  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial)
+  const stateMediaSosial = useProxy(profileLandingPageState.mediaSosial);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
@@ -23,27 +34,28 @@ function CreateMediaSosial() {
 
   const resetForm = () => {
     stateMediaSosial.create.form = {
-      name: "",
-      imageId: "",
-      iconUrl: "",
+      name: '',
+      imageId: '',
+      iconUrl: '',
     };
     setPreviewImage(null);
     setFile(null);
   };
+
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn('Silakan pilih file gambar terlebih dahulu');
     }
 
     const res = await ApiFetch.api.fileStorage.create.post({
       file,
       name: file.name,
-    })
+    });
 
     const uploaded = res.data?.data;
 
     if (!uploaded?.id) {
-      return toast.error("Gagal mengupload file");
+      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
     }
 
     stateMediaSosial.create.form.imageId = uploaded.id;
@@ -51,98 +63,108 @@ function CreateMediaSosial() {
     await stateMediaSosial.create.create();
 
     resetForm();
-    router.push("/admin/landing-page/profile/media-sosial")
-  }
+    router.push('/admin/landing-page/profile/media-sosial');
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Media Sosial
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Media Sosial</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Media Sosial
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
+            )}
           </Box>
+
           <TextInput
+            label="Nama Media Sosial / Kontak"
+            placeholder="Masukkan nama media sosial atau kontak"
             value={stateMediaSosial.create.form.name || ''}
-            onChange={(val) => {
-              stateMediaSosial.create.form.name = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Media Sosial / Nama Kontak</Text>}
-            placeholder='Masukkan nama media sosial / nama kontak'
+            onChange={(e) => (stateMediaSosial.create.form.name = e.target.value)}
+            required
           />
           <TextInput
+            label="Link Media Sosial / Nomor Telepon"
+            placeholder="Masukkan link media sosial atau nomor telepon"
             value={stateMediaSosial.create.form.iconUrl || ''}
-            onChange={(val) => {
-              stateMediaSosial.create.form.iconUrl = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Link Media Sosial / No Telephone</Text>}
-            placeholder='Masukkan link media sosial / no telephone'
+            onChange={(e) => (stateMediaSosial.create.form.iconUrl = e.target.value)}
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
-
-export default CreateMediaSosial;

src/app/admin/(dashboard)/landing-page/profile/media-sosial/page.tsx

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Group, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import profileLandingPageState from '../../../_state/landing-page/profile';
 
 function MediaSosial() {
@@ -16,7 +15,7 @@ function MediaSosial() {
     <Box>
       <HeaderSearch
         title='Media Sosial'
-        placeholder='pencarian'
+        placeholder='Cari nama media sosial atau kontak...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -44,80 +43,77 @@ function ListMediaSosial({ search }: { search: string }) {
 
   const filteredData = data || []
 
-  // Handle loading state
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={550} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Media Sosial'
-            href='/admin/landing-page/profile/media-sosial/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Media Sosial / Nama Kontak</TableTh>
-                  <TableTh>Image</TableTh>
-                  <TableTh>Icon URL / No Telephone</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
-        </Paper>
-      </Box>
-    );
-  }
-
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Media Sosial'
-          href='/admin/landing-page/profile/media-sosial/create'
-        />
-        <Box style={{ overflowY: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+      <Paper bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Media Sosial</Title>
+          <Tooltip label="Tambah Media Sosial" withArrow>
+            <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/landing-page/profile/media-sosial/create')}>
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh>Nama Media Sosial / Nama Kontak</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Icon URL / No Telephone</TableTh>
-                <TableTh>Detail</TableTh>
+                <TableTh>Nama Media Sosial / Kontak</TableTh>
+                <TableTh>Gambar</TableTh>
+                <TableTh>Icon / No. Telepon</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>
-                    <Box w={50} h={50}>
-                      <Image src={item.image?.link} alt={item.name} />
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Box w={250}>
-                      <a style={{color: "black"}} href={item.iconUrl} target="_blank" rel="noopener noreferrer">
-                        <Text truncate fz={'sm'}>{item.iconUrl}</Text>
-                      </a>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${item.id}`)}>
-                      <IconDeviceImac size={20} />
-                    </Button>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={50} h={50} style={{ borderRadius: 8, overflow: 'hidden' }}>
+                        {item.image?.link ? (
+                          <Image src={item.image.link} alt={item.name} fit="cover" />
+                        ) : (
+                          <Box bg={colors['blue-button']} w="100%" h="100%" />
+                        )}
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate fz="sm" color="dimmed">
+                        {item.iconUrl || item.noTelp || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/landing-page/profile/media-sosial/${item.id}`)}
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data media sosial yang cocok</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
           </Table>
         </Box>
@@ -127,11 +123,13 @@ function ListMediaSosial({ search }: { search: string }) {
           value={page}
           onChange={(newPage) => {
             load(newPage, 10);
-            window.scrollTo(0, 0);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/[id]/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Alert, Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
@@ -144,124 +144,134 @@ function EditPejabatDesa() {
   return (
     <Box>
       <Stack gap="xs">
-        <Box>
-          <Button variant="subtle" onClick={handleBack}>
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Pejabat Desa
+          </Title>
+        </Group>
 
-        <Box>
-          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius={10}>
-            <Stack gap="xs">
-              <Title order={3}>Edit Profile Pejabat Desa</Title>
+        <Paper
+          w={{ base: "100%", md: "50%" }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Edit Profile Pejabat Desa</Title>
 
-              {/* Nama Field */}
-              <TextInput
-                label={<Text fw="bold">Nama Perbekel</Text>}
-                placeholder="Masukkan nama perbekel"
-                value={allState.edit.form.name}
-                onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
-                error={!allState.edit.form.name && "Nama wajib diisi"}
-              />
+            {/* Nama Field */}
+            <TextInput
+              label={<Text fw="bold">Nama Perbekel</Text>}
+              placeholder="Masukkan nama perbekel"
+              value={allState.edit.form.name}
+              onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
+              error={!allState.edit.form.name && "Nama wajib diisi"}
+            />
 
-              {/* Posisi Field */}
-              <TextInput
-                label={<Text fw="bold">Posisi</Text>}
-                placeholder="Masukkan posisi"
-                value={allState.edit.form.position}
-                onChange={(e) => handleFieldChange('position', e.currentTarget.value)}
-                error={!allState.edit.form.position && "Posisi wajib diisi"}
-              />
+            {/* Posisi Field */}
+            <TextInput
+              label={<Text fw="bold">Posisi</Text>}
+              placeholder="Masukkan posisi"
+              value={allState.edit.form.position}
+              onChange={(e) => handleFieldChange('position', e.currentTarget.value)}
+              error={!allState.edit.form.position && "Posisi wajib diisi"}
+            />
 
-              {/* File Upload */}
+            {/* File Upload */}
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
               <Box>
-                <Text fz={"md"} fw={"bold"}>Gambar</Text>
-                <Box>
-                  <Dropzone
-                    onDrop={(files) => handleFileChange(files[0])}
-                    onReject={() => toast.error('File tidak valid.')}
-                    maxSize={5 * 1024 ** 2} // Maks 5MB
-                    accept={{ 'image/*': [] }}
-                  >
-                    <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                      <Dropzone.Accept>
-                        <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                      </Dropzone.Accept>
-                      <Dropzone.Reject>
-                        <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                      </Dropzone.Reject>
-                      <Dropzone.Idle>
-                        <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                      </Dropzone.Idle>
+                <Dropzone
+                  onDrop={(files) => handleFileChange(files[0])}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-                      <div>
-                        <Text size="xl" inline>
-                          Drag gambar ke sini atau klik untuk pilih file
-                        </Text>
-                        <Text size="sm" c="dimmed" inline mt={7}>
-                          Maksimal 5MB dan harus format gambar
-                        </Text>
-                      </div>
-                    </Group>
-                  </Dropzone>
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
 
-                  {/* Tampilkan preview kalau ada */}
-                  {previewImage && (
-                    <Box mt="sm">
-                      <Image
-                        src={previewImage}
-                        alt="Preview"
-                        style={{
-                          maxWidth: '100%',
-                          maxHeight: '200px',
-                          objectFit: 'contain',
-                          borderRadius: '8px',
-                          border: '1px solid #ddd',
-                        }}
-                      />
-                    </Box>
-                  )}
-
-                </Box>
-              </Box>
-
-              {/* Preview Gambar */}
-              <Box>
-                <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
-                {previewImage ? (
-                  <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
-                ) : (
-                  <Center w={200} h={200} bg="gray.2">
-                    <Stack align="center" gap="xs">
-                      <IconImageInPicture size={48} color="gray" />
-                      <Text size="sm" c="gray">Tidak ada gambar</Text>
-                    </Stack>
-                  </Center>
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
                 )}
+
               </Box>
+            </Box>
 
-              {/* Submit Button */}
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={handleSubmit}
-                  loading={isSubmitting || allState.edit.loading}
-                  disabled={!allState.edit.form.name}
-                >
-                  {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
-                </Button>
+            {/* Preview Gambar */}
+            <Box>
+              <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
+              {previewImage ? (
+                <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
+              ) : (
+                <Center w={200} h={200} bg="gray.2">
+                  <Stack align="center" gap="xs">
+                    <IconImageInPicture size={48} color="gray" />
+                    <Text size="sm" c="gray">Tidak ada gambar</Text>
+                  </Stack>
+                </Center>
+              )}
+            </Box>
 
-                <Button
-                  variant="outline"
-                  onClick={handleBack}
-                  disabled={isSubmitting || allState.edit.loading}
-                >
-                  Batal
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            {/* Submit Button */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || allState.edit.loading}
+                disabled={!allState.edit.form.name}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={handleBack}
+                disabled={isSubmitting || allState.edit.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

src/app/admin/(dashboard)/landing-page/profile/pejabat-desa/page.tsx

@@ -1,24 +1,26 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 
-
 function Page() {
-  const router = useRouter()
-  const allList = useProxy(profileLandingPageState.pejabatDesa)
+  const router = useRouter();
+  const allList = useProxy(profileLandingPageState.pejabatDesa);
+
   useShallowEffect(() => {
-    allList.findUnique.load("edit") // Assuming "1" is your default ID, adjust as needed
-  }, [])
+    allList.findUnique.load("edit");
+  }, []);
 
   if (!allList.findUnique.data) {
-    return <Stack>
-      <Skeleton radius={10} h={800} />
-    </Stack>
+    return (
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={800} />
+      </Stack>
+    );
   }
 
   const dataArray = Array.isArray(allList.findUnique.data)
@@ -26,79 +28,82 @@ function Page() {
     : [allList.findUnique.data];
 
   return (
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3}>Preview Pejabat Desa</Title>
+            <Title order={3} c={colors['blue-button']}>Preview Pejabat Desa</Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/landing-page/profile/pejabat-desa/${allList.findUnique.data?.id}`)}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Profil Pejabat" withArrow>
+              <Button
+                c="blue"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() => router.push(`/admin/landing-page/profile/pejabat-desa/${allList.findUnique.data?.id}`)}
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
         {dataArray.map((item) => (
-          <Box key={item.id} >
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: "md", md: 100 }}>
-                <Grid>
-                  <GridCol span={{ base: 12, md: 12 }}>
-                    <Center>
-                      <Image src={"/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
-                    </Center>
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 12 }}>
-                    <Text ta={"center"} fz={{ base: "1.2rem", md: "1.8rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
-                  </GridCol>
-                </Grid>
-              </Box>
-              <Divider my={"md"} color={colors['blue-button']} />
-              {/* biodata perbekel */}
-              <Box px={{ base: 0, md: 50 }} pb={30}>
-                <Box pb={20} px={{ base: 0, md: 50 }}>
-                  <Paper bg={colors['BG-trans']} w={{ base: "100%", md: "100%" }}>
-                    <Stack gap={0}>
-                      <Center>
-                        <Image
-                          pt={{ base: 0, md: 90 }}
-                          src={item.image?.link || "/perbekel.png"}
-                          w={{ base: 250, md: 350 }}
-                          alt='Foto Profil PPID'
-                          onError={(e) => {
-                            e.currentTarget.src = "/perbekel.png";
-                          }}
-                        />
-                      </Center>
-                      <Paper
-                        bg={colors['blue-button']}
-                        py={20}
-                        className="glass3"
-                        px={{ base: 10, md: 10 }}
-
-                      >
-                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.2rem", md: "1.6rem" }}>
-                          {item.name}
-                        </Text>
-                      </Paper>
-                    </Stack>
+          <Paper key={item.id} p="xl" bg={colors['BG-trans']} radius="md" shadow="xs">
+            <Box px={{ base: "sm", md: 100 }}>
+              <Grid>
+                <GridCol span={12}>
+                  <Center>
+                    <Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
+                  </Center>
+                </GridCol>
+                <GridCol span={12}>
+                  <Text ta="center" fz={{ base: "1.2rem", md: "1.8rem" }} fw="bold" c={colors['blue-button']}>
+                    Profil Pimpinan Badan Publik Desa Darmasaba
+                  </Text>
+                </GridCol>
+              </Grid>
+            </Box>
+            <Divider my="md" color={colors['blue-button']} />
+            <Box px={{ base: 0, md: 50 }} pb="xl">
+              <Paper bg={colors['BG-trans']} radius="md" shadow="xs" p="lg">
+                <Stack gap={0}>
+                  <Center>
+                    <Image
+                      pt={{ base: 0, md: 60 }}
+                      src={item.image?.link || "/perbekel.png"}
+                      w={{ base: 250, md: 350 }}
+                      alt="Foto Profil Pejabat"
+                      radius="md"
+                      onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
+                    />
+                  </Center>
+                  <Paper
+                    bg={colors['blue-button']}
+                    py="md"
+                    px="sm"
+                    radius="md"
+                    className="glass3"
+                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
+                  >
+                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+                      {item.name}
+                    </Text>
                   </Paper>
-                </Box>
-                <Box pt={10}>
-                  <Box>
-                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Position</Text>
-                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"}>{item.position}</Text>
-                  </Box>
-                </Box>
+                </Stack>
+              </Paper>
+              <Box mt="lg">
+                <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Jabatan</Text>
+                <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" c={colors['blue-button']}>
+                  {item.position}
+                </Text>
               </Box>
-            </Paper>
-          </Box>
+            </Box>
+          </Paper>
         ))}
       </Stack>
     </Paper>
-  )
+  );
 }
 
-
-
-export default Page;
+export default Page;

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/edit/page.tsx

@@ -3,7 +3,18 @@
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -86,92 +97,113 @@ function EditProgramInovasi() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Program Inovasi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Program Inovasi</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Program Inovasi
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                />
+              </Box>
+            )}
           </Box>
           <TextInput
+            label="Nama Program Inovasi"
+            placeholder="Masukkan nama program inovasi"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Produk</Text>}
-            placeholder='Masukkan nama produk'
+            required
           />
+
           <TextInput
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi program inovasi"
             value={formData.description}
             onChange={(e) => setFormData({ ...formData, description: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
-            placeholder='Masukkan deskripsi'
+            required
           />
+
           <TextInput
+            label="Link Program Inovasi"
+            placeholder="Masukkan link program inovasi (opsional)"
             value={formData.link}
             onChange={(e) => setFormData({ ...formData, link: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Link</Text>}
-            placeholder='Masukkan link'
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/[id]/page.tsx

@@ -2,9 +2,9 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import profileLandingPageState from '@/app/admin/(dashboard)/_state/landing-page/profile';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -31,91 +31,116 @@ function DetailProgramInovasi() {
 
   if (!stateProgramInovasi.findUnique.data) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
+      <Stack py={12}>
+        <Skeleton height={520} radius="md" />
       </Stack>
     )
   }
 
+  const data = stateProgramInovasi.findUnique.data
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Program Inovasi</Text>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+    <Box px={{ base: 'md', md: 'xl' }} py="lg">
+      <Button variant="subtle" onClick={() => router.back()} leftSection={<IconArrowBack size={22} color={colors['blue-button']} />}>
+        Kembali
+      </Button>
+
+      <Paper
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Program Inovasi
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Program Inovasi</Text>
-                <Text fz={"lg"}>{stateProgramInovasi.findUnique.data?.name}</Text>
+                <Text fz="lg" fw="bold">Nama Program Inovasi</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text
-                  fz={"lg"}
-                  
-                >{stateProgramInovasi.findUnique.data?.description}</Text>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed" style={{ whiteSpace: 'pre-wrap' }}>{data.description || '-'}</Text>
               </Box>
+
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Link</Text>
-                <a
-                  href={stateProgramInovasi.findUnique.data?.link || "#"}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ 
-                    wordWrap: 'break-word',
-                    whiteSpace: 'pre-wrap',
-                    overflowWrap: 'break-word',
-                    width: '100%'
-                  }}
-                >
-                  {stateProgramInovasi.findUnique.data?.link || "Tidak ada link"}
-                </a>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                <Image src={stateProgramInovasi.findUnique.data?.image?.link} alt="gambar" />
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button
-                    onClick={() => {
-                      if (stateProgramInovasi.findUnique.data) {
-                        setSelectedId(stateProgramInovasi.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                <Text fz="lg" fw="bold">Link</Text>
+                {data.link ? (
+                  <a
+                    href={data.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    style={{
+                      color: colors['blue-button'],
+                      textDecoration: 'underline',
+                      wordBreak: 'break-word',
                     }}
-                    disabled={!stateProgramInovasi.findUnique.data}
-                    color="red">
-                    <IconX size={20} />
+                  >
+                    {data.link}
+                  </a>
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image 
+                    src={data.image.link} 
+                    alt="Gambar Program" 
+                    radius="md"
+                    style={{ maxWidth: '100%', maxHeight: 300, objectFit: 'contain' }}
+                  />
+                ) : (
+                  <Text fz="md" c="dimmed">-</Text>
+                )}
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Program Inovasi" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Program Inovasi" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (stateProgramInovasi.findUnique.data) {
-                        router.push(`/admin/landing-page/profile/program-inovasi/${stateProgramInovasi.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!stateProgramInovasi.findUnique.data}
-                    color="green">
+                    color="green"
+                    onClick={() => router.push(`/admin/landing-page/profile/program-inovasi/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus program inovasi ini?"
+        text="Apakah Anda yakin ingin menghapus program inovasi ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/create/page.tsx

@@ -1,8 +1,20 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -13,7 +25,7 @@ import profileLandingPageState from '../../../../_state/landing-page/profile';
 
 function CreateProgramInovasi() {
   const router = useRouter();
-  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
 
@@ -31,20 +43,21 @@ function CreateProgramInovasi() {
     setPreviewImage(null);
     setFile(null);
   };
+
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn("Silakan pilih file gambar terlebih dahulu");
     }
 
     const res = await ApiFetch.api.fileStorage.create.post({
       file,
       name: file.name,
-    })
+    });
 
     const uploaded = res.data?.data;
 
     if (!uploaded?.id) {
-      return toast.error("Gagal mengupload file");
+      return toast.error("Gagal mengunggah gambar, silakan coba lagi");
     }
 
     stateProgramInovasi.create.form.imageId = uploaded.id;
@@ -55,99 +68,116 @@ function CreateProgramInovasi() {
     router.push("/admin/landing-page/profile/program-inovasi")
   }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Program Inovasi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Program Inovasi</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Program Inovasi
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
+            )}
           </Box>
-          <TextInput
-            value={stateProgramInovasi.create.form.name || ''}
-            onChange={(val) => {
-              stateProgramInovasi.create.form.name = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Program Inovasi</Text>}
-            placeholder='Masukkan nama program inovasi'
-          />
-          <TextInput
-            value={stateProgramInovasi.create.form.description || ''}
-            onChange={(val) => {
-              stateProgramInovasi.create.form.description = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Deskripsi</Text>}
-            placeholder='Masukkan deskripsi'
-          />
 
           <TextInput
-            value={stateProgramInovasi.create.form.link || ''}
-            onChange={(val) => {
-              stateProgramInovasi.create.form.link = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Link</Text>}
-            placeholder='Masukkan link'
+            label="Nama Program Inovasi"
+            placeholder="Masukkan nama program inovasi"
+            value={stateProgramInovasi.create.form.name}
+            onChange={(e) => (stateProgramInovasi.create.form.name = e.target.value)}
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateProgramInovasi.create.form.description || ''}
+              onChange={(htmlContent: string) => {
+                stateProgramInovasi.create.form.description = htmlContent;
+              }}
+            />
+          </Box>
+
+          <TextInput
+            label="Link Program Inovasi"
+            placeholder="Masukkan link program inovasi (opsional)"
+            value={stateProgramInovasi.create.form.link || ''}
+            onChange={(e) => (stateProgramInovasi.create.form.link = e.target.value)}
+          />
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/landing-page/profile/program-inovasi/page.tsx

@@ -1,22 +1,22 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import profileLandingPageState from '../../../_state/landing-page/profile';
 
 function ProgramInovasi() {
   const [search, setSearch] = useState("");
+
   return (
-    <Box>
+    <Box px="md" py="lg">
       <HeaderSearch
-        title='Program Inovasi'
-        placeholder='pencarian'
+        title="Program Inovasi"
+        placeholder="Cari program inovasi..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,107 +27,118 @@ function ProgramInovasi() {
 }
 
 function ListProgramInovasi({ search }: { search: string }) {
-  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi)
+  const stateProgramInovasi = useProxy(profileLandingPageState.programInovasi);
   const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = stateProgramInovasi.findMany;
+  const { data, page, totalPages, loading, load } = stateProgramInovasi.findMany;
 
   useShallowEffect(() => {
     load(page, 10, search);
   }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton height={550} />
+      <Stack py={20}>
+        <Skeleton height={500} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Program Inovasi'
-            href='/admin/landing-page/profile/program-inovasi/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Program</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Link</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
-        </Paper>
-      </Box>
-    );
-  }
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Program Inovasi'
-          href='/admin/landing-page/profile/program-inovasi/create'
-        />
-        <Box style={{ overflowY: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+    <Box py={15}>
+      <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+        <Box mb="md" display="flex"
+          style={{ justifyContent: 'space-between', alignItems: 'center' }}
+        >
+          <Title order={4}>Daftar Program Inovasi</Title>
+          <Tooltip label="Tambah Program Inovasi" withArrow>
+            <Button
+              color="blue"
+              leftSection={<IconPlus size={18} />}
+              variant="light"
+              radius="md"
+              onClick={() => router.push('/admin/landing-page/profile/program-inovasi/create')}
+            >
+              Tambah Program
+            </Button>
+          </Tooltip>
+        </Box>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover striped verticalSpacing="sm">
             <TableThead>
               <TableTr>
                 <TableTh>Nama Program</TableTh>
                 <TableTh>Deskripsi</TableTh>
                 <TableTh>Link</TableTh>
-                <TableTh>Detail</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd w={200}>{item.description}</TableTd>
-                  <TableTd>
-                    <Box w={250}>
-                      <a style={{ color: "black" }} href={item.link} target="_blank" rel="noopener noreferrer">
-                        <Text truncate fz={'sm'}>{item.link}</Text>
-                      </a>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/landing-page/profile/program-inovasi/${item.id}`)}>
-                      <IconDeviceImac size={20} />
-                    </Button>
+              {filteredData.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Belum ada data program inovasi</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              ) : (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Text fz="sm" lineClamp={2}>
+                        {item.description}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ maxWidth: 250 }}>
+                      <Tooltip label="Buka tautan program" position="top" withArrow>
+                        <a
+                          href={item.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          style={{ color: colors['blue-button'], textDecoration: 'underline' }}
+                        >
+                          <Text truncate fz="sm">{item.link}</Text>
+                        </a>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        radius="md"
+                        onClick={() =>
+                          router.push(`/admin/landing-page/profile/program-inovasi/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImac size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
             </TableTbody>
           </Table>
         </Box>
+        {filteredData.length > 0 && (
+          <Center mt="md">
+            <Pagination
+              value={page}
+              onChange={(newPage) => {
+                load(newPage, 10);
+                window.scrollTo({ top: 0, behavior: 'smooth' });
+              }}
+              total={totalPages}
+              color="blue"
+            />
+          </Center>
+        )}
       </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0);
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-        />
-      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/_lib/layoutTabs.tsx

@@ -1,63 +1,93 @@
 /* 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';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconTrash, IconRecycle } from '@tabler/icons-react';
 
 function LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "List Pengelolaan Sampah Bank Sampah",
-            value: "listpengelolaansampahbanksampah",
-            href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah"
-        },
-        {
-            label: "Keterangan Bank Sampah Terdekat",
-            value: "keteranganbanksampahterdekat",
-            href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat"
-        },
-        
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+  const router = useRouter();
+  const pathname = usePathname();
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
+  const tabs = [
+    {
+      label: "List Pengelolaan Sampah Bank Sampah",
+      value: "listpengelolaansampahbanksampah",
+      href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah",
+      icon: <IconTrash size={18} stroke={1.8} />,
+      tooltip: "Kelola data pengelolaan sampah bank sampah",
+    },
+    {
+      label: "Keterangan Bank Sampah Terdekat",
+      value: "keteranganbanksampahterdekat",
+      href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat",
+      icon: <IconRecycle size={18} stroke={1.8} />,
+      tooltip: "Kelola data bank sampah terdekat",
+    },
+  ];
+
+  const currentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(currentTab?.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])
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) {
+      setActiveTab(match.value);
+    }
+  }, [pathname]);
 
-    return (
-        <Stack>
-            <Title order={3}>Layanan Online Desa</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>
-    );
+  return (
+    <Stack gap="md">
+      <Title order={3} mb="sm">Pengelolaan Sampah Bank Sampah</Title>
+      <Tabs 
+        value={activeTab} 
+        onChange={handleTabChange}
+        variant="pills"
+        radius="md"
+      >
+        <TabsList>
+          {tabs.map((tab) => (
+            <Tooltip
+              key={tab.value}
+              label={tab.tooltip}
+              position="top"
+              withArrow
+              transitionProps={{ transition: 'pop', duration: 300 }}
+            >
+              <TabsTab 
+                value={tab.value}
+                leftSection={tab.icon}
+                style={{
+                  padding: '10px 20px',
+                  height: 'auto',
+                  minHeight: 44,
+                }}
+              >
+                {tab.label}
+              </TabsTab>
+            </Tooltip>
+          ))}
+        </TabsList>
+        <TabsPanel 
+          value={activeTab || ''} 
+          pt="lg"
+          style={{
+            minHeight: '60vh',
+          }}
+        >
+          {children}
+        </TabsPanel>
+      </Tabs>
+    </Stack>
+  );
 }
 
 export default LayoutTabsPengelolaanSampahBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/edit/page.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useParams, useRouter } from 'next/navigation';
@@ -64,63 +64,97 @@ function EditKeteranganBankSampahTerdekat() {
 
   const handleSubmit = async () => {
     try {
+      if (!formData.name.trim()) {
+        return toast.error('Nama bank sampah harus diisi');
+      }
+      if (!formData.alamat.trim()) {
+        return toast.error('Alamat harus diisi');
+      }
+      if (!formData.namaTempatMaps.trim()) {
+        return toast.error('Nama tempat di Maps harus diisi');
+      }
+      if (!markerPosition) {
+        return toast.error('Silakan pilih lokasi di peta');
+      }
+
       keteranganState.edit.form = {
         ...keteranganState.edit.form,
         name: formData.name.trim(),
         alamat: formData.alamat.trim(),
         namaTempatMaps: formData.namaTempatMaps.trim(),
-        lat: formData.lat,
-        lng: formData.lng,
-      }
+        lat: markerPosition.lat,
+        lng: markerPosition.lng,
+      };
+      
       await keteranganState.edit.update();
+      toast.success('Data bank sampah berhasil diperbarui');
       keteranganState.findUnique.data = null;
       router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat");
     } catch (error) {
       console.error("Error updating pengelolaan sampah:", error);
-      toast.error("Gagal memuat data pengelolaan sampah");
+      toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data bank sampah');
     }
   }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Bank Sampah Terdekat
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Keterangan Bank Sampah Terdekat</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Bank Sampah"
+            placeholder="Masukkan nama bank sampah"
             value={formData.name}
-            onChange={(val) => setFormData({ ...formData, name: val.target.value })}
-            label={<Text fw="bold" fz="sm">Nama Bank Sampah Terdekat</Text>}
-            placeholder='Masukkan nama Bank Sampah Terdekat'
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
           />
 
           <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat lengkap"
             value={formData.alamat}
-            onChange={(val) => setFormData({ ...formData, alamat: val.target.value })}
-            label={<Text fw="bold" fz="sm">Alamat</Text>}
-            placeholder='Masukkan alamat Bank Sampah'
+            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+            required
           />
 
           <TextInput
+            label="Nama Tempat di Maps"
+            placeholder="Masukkan nama tempat yang terdaftar di Google Maps"
             value={formData.namaTempatMaps}
-            onChange={(val) => setFormData({ ...formData, namaTempatMaps: val.target.value })}
-            label={<Text fw="bold" fz="sm">Nama Tempat Maps</Text>}
-            placeholder='Masukkan nama tempat maps Bank Sampah'
+            onChange={(e) => setFormData({ ...formData, namaTempatMaps: e.target.value })}
+            required
           />
 
           <Box>
-            <Text fw="bold" fz="sm">Pilih Lokasi di Peta</Text>
-            <Box style={{ height: 300, width: '100%' }}>
+            <Text fw="bold" fz="sm" mb={6}>
+              Pilih Lokasi di Peta
+            </Text>
+            <Text fz="xs" c="dimmed" mb={4}>
+              Klik pada peta untuk menandai lokasi
+            </Text>
+            <Box style={{ height: 300, width: '100%', borderRadius: '8px', overflow: 'hidden' }}>
               <LeafletMapEdit
                 key={markerPosition?.lat ?? 'default'}
                 initialPosition={markerPosition || { lat: -8.65, lng: 115.2 }}
                 onChange={(pos) => {
                   setMarkerPosition(pos);
-                  setFormData((prev) => ({
+                  setFormData(prev => ({
                     ...prev,
                     lat: pos.lat,
                     lng: pos.lng,
@@ -128,9 +162,26 @@ function EditKeteranganBankSampahTerdekat() {
                 }}
               />
             </Box>
+            {markerPosition && (
+              <Text fz="xs" mt={4} c="green">
+                Lokasi dipilih: {markerPosition.lat.toFixed(6)}, {markerPosition.lng.toFixed(6)}
+              </Text>
+            )}
           </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/[id]/page.tsx

@@ -3,132 +3,148 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { Anchor, Box, Button, Flex, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { IconArrowLeft, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
-
-import dynamic from 'next/dynamic'
+import dynamic from 'next/dynamic';
 
 const LeafletMap = dynamic(() => import('@/app/admin/(dashboard)/_com/leafletMapCreate'), {
   ssr: false
-})
-
+});
 
 function DetailKeteranganBankSampahTerdekat() {
   const router = useRouter();
-  const keteranganState = useProxy(pengelolaanSampahState.keteranganSampah)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [modalHapus, setModalHapus] = useState(false)
-  const params = useParams()
+  const keteranganState = useProxy(pengelolaanSampahState.keteranganSampah);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [modalHapus, setModalHapus] = useState(false);
+  const params = useParams();
 
   useEffect(() => {
-    keteranganState.findUnique.load(params?.id as string)
-  }, [])
+    keteranganState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      keteranganState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat")
+      keteranganState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat");
     }
-  }
+  };
 
   if (!keteranganState.findUnique.data) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
+      <Stack p="md">
+        <Skeleton h={500} radius="md" />
       </Stack>
-    )
+    );
   }
+
   return (
     <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+      <Box mb="md">
+        <Button
+          variant="light"
+          leftSection={<IconArrowLeft size={20} />}
+          onClick={() => router.back()}
+          radius="xl"
+          color="blue"
+        >
+          Kembali
         </Button>
       </Box>
 
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Keterangan Bank Sampah Terdekat</Text>
+      <Paper
+        w={{ base: "100%", md: "60%" }}
+        p="xl"
+        radius="lg"
+        withBorder
+        shadow="md"
+        style={{ background: colors['white-1'] }}
+      >
+        <Stack gap="lg">
+          <Title order={2} c="dark">
+            Detail Bank Sampah Terdekat
+          </Title>
 
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+          <Paper p="lg" radius="md" withBorder >
+            <Stack gap="md">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Bank Sampah Terdekat</Text>
-                <Text fz={"lg"}>{keteranganState.findUnique.data?.name}</Text>
+                <Text fz="sm" c="dimmed">Nama Bank Sampah</Text>
+                <Text fz="lg" fw={600}>{keteranganState.findUnique.data?.name}</Text>
               </Box>
 
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Alamat</Text>
-                <Text fz={"lg"}>{keteranganState.findUnique.data?.alamat}</Text>
+                <Text fz="sm" c="dimmed">Alamat</Text>
+                <Text fz="lg">{keteranganState.findUnique.data?.alamat}</Text>
               </Box>
 
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Tempat Maps</Text>
-                <Text fz={"lg"}>{keteranganState.findUnique.data?.namaTempatMaps}</Text>
+                <Text fz="sm" c="dimmed">Nama Tempat di Maps</Text>
+                <Text fz="lg">{keteranganState.findUnique.data?.namaTempatMaps}</Text>
               </Box>
 
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Peta Lokasi</Text>
+                <Text fz="sm" c="dimmed" mb={6}>Peta Lokasi</Text>
                 {keteranganState.findUnique.data?.lat && keteranganState.findUnique.data?.lng ? (
-                  <Box
-                    style={{
-                      height: "300px",
-                    }}
-                  >
+                  <Box style={{ height: "300px", borderRadius: "12px", overflow: "hidden" }}>
                     <LeafletMap
                       defaultCenter={{ lat: keteranganState.findUnique.data.lat, lng: keteranganState.findUnique.data.lng }}
                       readOnly
                     />
                   </Box>
                 ) : (
-                  <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                  <Text c="dimmed" fz="sm">Belum ada koordinat</Text>
                 )}
               </Box>
 
-
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Link Petunjuk Arah</Text>
+                <Text fz="sm" c="dimmed" mb={6}>Petunjuk Arah</Text>
                 {keteranganState.findUnique.data?.lat && keteranganState.findUnique.data?.lng ? (
-                  <a
+                  <Anchor
                     href={`https://www.google.com/maps/dir/?api=1&destination=${keteranganState.findUnique.data.lat},${keteranganState.findUnique.data.lng}`}
                     target="_blank"
                     rel="noopener noreferrer"
-                    style={{ color: 'black', textDecoration: 'underline' }}
+                    underline="always"
+                    c="blue"
                   >
-                    Buka Petunjuk Arah di Google Maps
-                  </a>
+                    Buka di Google Maps
+                  </Anchor>
                 ) : (
-                  <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                  <Text c="dimmed" fz="sm">Belum ada koordinat</Text>
                 )}
               </Box>
 
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button
-                    onClick={() => {
-                      if (keteranganState.findUnique.data) {
-                        setSelectedId(keteranganState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={!keteranganState.findUnique.data}
-                    color="red"
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${keteranganState.findUnique.data?.id}/edit`)}
-                    color="green"
-                  >
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Box>
+              <Flex gap="sm" mt="md">
+                <Button
+                  onClick={() => {
+                    if (keteranganState.findUnique.data) {
+                      setSelectedId(keteranganState.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={!keteranganState.findUnique.data}
+                  leftSection={<IconTrash size={18} />}
+                  color="red"
+                  radius="md"
+                  variant='light'
+                >
+                  Hapus
+                </Button>
+                <Button
+                  onClick={() =>
+                    router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${keteranganState.findUnique.data?.id}/edit`)
+                  }
+                  leftSection={<IconEdit size={18} />}
+                  color="green"
+                  radius="md"
+                  variant='light'
+                >
+                  Edit
+                </Button>
+              </Flex>
             </Stack>
           </Paper>
         </Stack>
@@ -138,10 +154,9 @@ function DetailKeteranganBankSampahTerdekat() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus keterangan bank sampah terdekat ini?"
+        text="Apakah Anda yakin ingin menghapus data bank sampah ini?"
       />
     </Box>
-
   );
 }
 

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create/page.tsx

@@ -1,9 +1,10 @@
-'use client'
+'use client';
 
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
+import { toast } from 'react-toastify';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -28,58 +29,107 @@ function CreateKeteranganBankSampahTerdekat() {
     setMarkerPosition(null)
   }
   const handleSubmit = async () => {
-    if (markerPosition) {
-      keteranganState.create.form.lat = markerPosition.lat
-      keteranganState.create.form.lng = markerPosition.lng
+    try {
+      if (!keteranganState.create.form.name) {
+        return toast.error('Nama bank sampah harus diisi');
+      }
+      
+      if (markerPosition) {
+        keteranganState.create.form.lat = markerPosition.lat;
+        keteranganState.create.form.lng = markerPosition.lng;
+      } else {
+        return toast.error('Silakan pilih lokasi di peta');
+      }
+      
+      await keteranganState.create.create();
+      toast.success('Data bank sampah berhasil ditambahkan');
+      resetForm();
+      router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat");
+    } catch (error) {
+      console.error('Error creating bank sampah:', error);
+      toast.error('Gagal menambahkan data bank sampah');
     }
-    await keteranganState.create.create()
-    resetForm()
-    router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat")
   }
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Bank Sampah Terdekat
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Keterangan Bank Sampah Terdekat</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Bank Sampah"
+            placeholder="Masukkan nama bank sampah"
             value={keteranganState.create.form.name}
-            onChange={(val) => keteranganState.create.form.name = val.target.value}
-            label={<Text fw="bold" fz="sm">Nama Bank Sampah Terdekat</Text>}
-            placeholder='Masukkan nama Bank Sampah Terdekat'
+            onChange={(e) => (keteranganState.create.form.name = e.target.value)}
+            required
           />
 
           <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat lengkap"
             value={keteranganState.create.form.alamat}
-            onChange={(val) => keteranganState.create.form.alamat = val.target.value}
-            label={<Text fw="bold" fz="sm">Alamat</Text>}
-            placeholder='Masukkan alamat Bank Sampah'
+            onChange={(e) => (keteranganState.create.form.alamat = e.target.value)}
+            required
           />
 
           <TextInput
+            label="Nama Tempat di Maps"
+            placeholder="Masukkan nama tempat yang terdaftar di Google Maps"
             value={keteranganState.create.form.namaTempatMaps}
-            onChange={(val) => keteranganState.create.form.namaTempatMaps = val.target.value}
-            label={<Text fw="bold" fz="sm">Nama Tempat Maps</Text>}
-            placeholder='Masukkan nama tempat maps Bank Sampah'
+            onChange={(e) => (keteranganState.create.form.namaTempatMaps = e.target.value)}
+            required
           />
 
           <Box>
-            <Text fw="bold" fz="sm">Pilih Lokasi di Peta</Text>
-            <Box style={{ height: 300, width: '100%' }}>
+            <Text fw="bold" fz="sm" mb={6}>
+              Pilih Lokasi di Peta
+            </Text>
+            <Text fz="xs" c="dimmed" mb={4}>
+              Klik pada peta untuk menandai lokasi
+            </Text>
+            <Box style={{ height: 300, width: '100%', borderRadius: '8px', overflow: 'hidden' }}>
               <LeafletMap
                 onSelect={(pos) => setMarkerPosition(pos)}
                 defaultCenter={{ lat: -8.65, lng: 115.2 }}
               />
             </Box>
+            {markerPosition && (
+              <Text fz="xs" mt={4} c="green">
+                Lokasi dipilih: {markerPosition.lat.toFixed(6)}, {markerPosition.lng.toFixed(6)}
+              </Text>
+            )}
           </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/page.tsx

@@ -1,14 +1,12 @@
-/* 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 } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import pengelolaanSampahState from '../../../_state/lingkungan/pengelolaan-sampah';
 
 function KeteranganBankSampahTerdekat() {
@@ -17,71 +15,124 @@ function KeteranganBankSampahTerdekat() {
     <Box>
       <HeaderSearch
         title='Keterangan Bank Sampah Terdekat'
-        placeholder='pencarian'
+        placeholder='Cari nama bank sampah...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKeteranganBankSampahTerdekat search={search}/>
+      <ListKeteranganBankSampahTerdekat search={search} />
     </Box>
   );
 }
 
 function ListKeteranganBankSampahTerdekat({ search }: { search: string }) {
-  const keteranganState = useProxy(pengelolaanSampahState.keteranganSampah)
+  const keteranganState = useProxy(pengelolaanSampahState.keteranganSampah);
   const router = useRouter();
 
-  useEffect(() => {
-    keteranganState.findMany.load()
-  }, [])
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = keteranganState.findMany;
 
-  const filteredData = (keteranganState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.alamat.toLowerCase().includes(keyword) || 
-      item.namaTempatMaps.toLowerCase().includes(keyword)
-    );
-  });
+  useShallowEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
 
-  if (!keteranganState.findMany.data) {
+  const filteredData = data || [];
+
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Keterangan Bank Sampah Terdekat'
-          href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Bank Sampah Terdekat</TableTh>
-              <TableTh>Alamat</TableTh>
-              <TableTh>Nama Tempat Maps</TableTh>
-              <TableTh>Detail</TableTh>
+      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Bank Sampah Terdekat</Title>
+          <Tooltip label="Tambah Bank Sampah" withArrow>
+            <Button 
+              leftSection={<IconPlus size={18} />} 
+              color="blue" 
+              variant="light" 
+              onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Bank Sampah</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Nama Tempat di Maps</TableTh>
+                <TableTh>Aksi</TableTh>
               </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{item.alamat}</TableTd>
-                <TableTd>{item.namaTempatMaps}</TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
-          </TableTbody>
-        </Table>  
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text lineClamp={2} truncate="end" fz="sm">
+                          {item.alamat || '-'}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm">
+                        {item.namaTempatMaps || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Lihat Detail" withArrow>
+                        <Button
+                          variant="light"
+                          color="blue"
+                          onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat/${item.id}`)}
+                        >
+                          <IconDeviceImac size={20} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4} align="center" py="xl">
+                    <Text c="dimmed">Tidak ada data bank sampah terdekat</Text>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {totalPages > 1 && (
+          <Center mt="xl">
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              siblings={1}
+              boundaries={1}
+              withEdges
+            />
+          </Center>
+        )}
       </Paper>
     </Box>
   );

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx

@@ -3,7 +3,7 @@
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import SelectIconProgramEdit from '@/app/admin/(dashboard)/_com/selectIconEdit';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -65,47 +65,85 @@ function EditProgramKreatifDesa() {
         ...stateSampah.update.form,
         name: formData.name.trim(),
         icon: formData.icon.trim(),
-      }
+      };
+      
       await stateSampah.update.submit();
+      toast.success('Data pengelolaan sampah berhasil diperbarui!');
       router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah");
     } catch (error) {
       console.error("Error updating pengelolaan sampah:", error);
-      toast.error("Gagal memuat data pengelolaan sampah");
+      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pengelolaan sampah");
     }
   }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button 
+            variant="subtle" 
+            onClick={() => router.back()} 
+            p="xs" 
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Pengelolaan Sampah Bank Sampah
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit List Pengelolaan Sampah Bank Sampah</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Pengelolaan Sampah"
+            placeholder="Masukkan nama pengelolaan sampah"
             value={formData.name}
-            label={<Text fz={"sm"} fw={"bold"}>Nama List Pengelolaan Sampah Bank Sampah</Text>}
-            placeholder="masukkan nama list pengelolaan sampah bank sampah"
-            onChange={(val) => {
-              setFormData({
-                ...formData,
-                name: val.target.value
-              })
+            onChange={(e) => {
+              const value = e.target.value;
+              setFormData(prev => ({
+                ...prev,
+                name: value
+              }));
+              stateSampah.update.form.name = value;
             }}
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Ikon List Pengelolaan Sampah Bank Sampah</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Pilih Ikon
+            </Text>
             <SelectIconProgramEdit
               value={formData.icon as IconKey}
               onChange={(value) => {
-                setFormData((prev) => ({ ...prev, icon: value }));
+                setFormData(prev => ({ ...prev, icon: value }));
                 stateSampah.update.form.icon = value;
               }}
             />
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create/page.tsx

@@ -1,8 +1,8 @@
-'use client'
+'use client';
 import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import SelectIconProgram from '@/app/admin/(dashboard)/_com/selectIcon';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
@@ -11,43 +11,83 @@ import { useProxy } from 'valtio/utils';
 
 
 function CreatePengelolaanSampahBankSampah() {
-  const stateCreate = useProxy(pengelolaanSampahState.pengelolaanSampah)
+  const stateCreate = useProxy(pengelolaanSampahState.pengelolaanSampah);
   const router = useRouter();
 
   const resetForm = () => {
     stateCreate.create.form = {
       name: "",
       icon: "",
-    }
-  }
+    };
+  };
 
   const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    try {
+      await stateCreate.create.create();
+      resetForm();
+      router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah");
+    } catch (error) {
+      console.error('Error creating pengelolaan sampah:', error);
+    }
+  };
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create List Pengelolaan Sampah Bank Sampah</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" position="bottom">
+          <Button 
+            variant="subtle" 
+            onClick={() => router.back()} 
+            p="xs" 
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Pengelolaan Sampah Bank Sampah
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Pengelolaan Sampah Bank Sampah</Text>}
-            placeholder="masukkan nama pengelolaan sampah bank sampah"
-            onChange={(val) => stateCreate.create.form.name = val.target.value}
+            label="Nama Pengelolaan Sampah"
+            placeholder="Masukkan nama pengelolaan sampah"
+            value={stateCreate.create.form.name || ''}
+            onChange={(e) => (stateCreate.create.form.name = e.target.value)}
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Ikon Pengelolaan Sampah Bank Sampah</Text>
-            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
+            <Text fw="bold" fz="sm" mb={6}>
+              Pilih Ikon
+            </Text>
+            <SelectIconProgram 
+              onChange={(value) => (stateCreate.create.form.icon = value)}
+            />
           </Box>
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,26 +1,24 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconChartLine, IconClipboardTextFilled, IconEdit, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled, IconX } from '@tabler/icons-react';
+import { IconChartLine, IconClipboardTextFilled, IconEdit, IconLeaf, IconPlus, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import pengelolaanSampahState from '../../../_state/lingkungan/pengelolaan-sampah';
 import React from 'react';
 
 
 function PengelolaanSampahBankSampah() {
-  const [search, setSearch] = useState("")
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='List Pengelolaan Sampah Bank Sampah'
-        placeholder='pencarian'
+        placeholder='Cari pengelolaan sampah...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -36,9 +34,18 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
   useShallowEffect(() => {
-    stateList.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
+
 
   const handleHapus = () => {
     if (selectedId) {
@@ -48,15 +55,9 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
     }
   }
 
-  const filteredData = (stateList.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-      || item.icon.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  const iconMap: Record<string, React.FC<any>> = {
+  const iconMap: Record<string, React.FC<{ size: number; style?: React.CSSProperties }>> = {
     ekowisata: IconLeaf,
     kompetisi: IconTrophy,
     wisata: IconTent,
@@ -68,7 +69,7 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
     trash: IconTrashFilled,
   };
 
-  if (!stateList.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -78,49 +79,107 @@ function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Pengelolaan Sampah Bank Sampah'
-          href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Pengelolaan Sampah</TableTh>
-              <TableTh>Icon</TableTh>
-              <TableTh>Edit</TableTh>
-              <TableTh>Delete</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd style={{ width: '10%' }}>
-                  {iconMap[item.icon] && (
-                    <Box title={item.icon}>
-                      {React.createElement(iconMap[item.icon], { size: 24 })}
-                    </Box>
-                  )}
-                </TableTd>
-                <TableTd>
-                  <Button color="green" onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}>
-                    <IconEdit size={20} />
-                  </Button>
-                </TableTd>
-                <TableTd>
-                  <Button color="red" onClick={() => {
-                    setSelectedId(item.id)
-                    setModalHapus(true)
-                  }}>
-                    <IconX size={20} />
-                  </Button>
-                </TableTd>
+      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pengelolaan Sampah Bank Sampah</Title>
+          <Tooltip label="Tambah Pengelolaan Sampah" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Pengelolaan Sampah</TableTh>
+                <TableTh>Icon</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text lineClamp={1} truncate="end" fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      {iconMap[item.icon] ? (
+                        <Tooltip label={item.icon} withArrow>
+                          <Box>
+                            {React.createElement(iconMap[item.icon], {
+                              size: 24,
+                              style: { color: colors['blue-button'] }
+                            })}
+                          </Box>
+                        </Tooltip>
+                      ) : (
+                        <Text c="dimmed" fz="sm">-</Text>
+                      )}
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Edit" withArrow>
+                        <Button
+                          variant="light"
+                          color="blue"
+                          size="sm"
+                          onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Hapus" withArrow>
+                        <Button
+                          variant="light"
+                          color="red"
+                          size="sm"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrashFilled size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3} align="center" py="xl">
+                    <Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {totalPages > 1 && (
+          <Center mt="xl">
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              siblings={1}
+              boundaries={1}
+              withEdges
+            />
+          </Center>
+        )}
+
       </Paper>
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/[id]/page.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } 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 EditProgramKreatifDesa() {
+  const state = useProxy(beasiswaDesaState.keunggulanProgram)
+  const params = useParams()
+  const router = useRouter();
+  const [formData, setFormData] = useState({
+    judul: '',
+    deskripsi: '',
+  })
+
+  useEffect(() => {
+    const loadProgramKreatif = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await state.update.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          state.update.id = id;
+
+          state.update.form = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+          };
+
+          setFormData({
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pengelolaan sampah:", error);
+        toast.error("Gagal memuat data pengelolaan sampah");
+      }
+    }
+
+    loadProgramKreatif();
+  }, [params?.id]);
+
+
+
+  const handleSubmit = async () => {
+    try {
+      state.update.form = {
+        ...state.update.form,
+        judul: formData.judul.trim(),
+        deskripsi: formData.deskripsi.trim(),
+      };
+      
+      await state.update.update();
+      toast.success('Data keunggulan program berhasil diperbarui!');
+      router.push("/admin/pendidikan/beasiswa-desa/keunggulan-program");
+    } catch (error) {
+      console.error("Error updating keunggulan program:", error);
+      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data keunggulan program");
+    }
+  }
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" withArrow>
+          <Button 
+            variant="subtle" 
+            onClick={() => router.back()} 
+            p="xs" 
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Keunggulan Program
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Judul"
+            placeholder="Masukkan judul"
+            value={formData.judul}
+            onChange={(e) => {
+              const value = e.target.value;
+              setFormData(prev => ({
+                ...prev,
+                judul: value
+              }));
+              state.update.form.judul = value;
+            }}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={state.update.form.deskripsi}
+              onChange={(htmlContent) => {
+                state.update.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditProgramKreatifDesa;

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/create/page.tsx

@@ -0,0 +1,101 @@
+'use client';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+
+function CreateKeunggulanProgram() {
+  const stateCreate = useProxy(beasiswaDesaState.keunggulanProgram);
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      judul: "",
+      deskripsi: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    try {
+      await stateCreate.create.create();
+      resetForm();
+      router.push("/admin/pendidikan/beasiswa-desa/keunggulan-program");
+    } catch (error) {
+      console.error('Error creating keunggulan program:', error);
+    }
+  };
+
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" color="blue" position="bottom">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Keunggulan Program
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Judul"
+            placeholder="Masukkan judul"
+            value={stateCreate.create.form.judul || ''}
+            onChange={(e) => (stateCreate.create.form.judul = e.target.value)}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateCreate.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKeunggulanProgram;

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/keunggulan-program/page.tsx

@@ -1,71 +1,168 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconPlus, IconSearch, IconTrashFilled } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import beasiswaDesaState from '../../../_state/pendidikan/beasiswa-desa';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 
-function BeasiswaDesa() {
+function KeunggulanProgram() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-      title='Keunggulan Program'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
+        title='List Keunggulan Program'
+        placeholder='Cari keunggulan program...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListBeasiswaDesa/>
+      <ListKeunggulanProgram search={search} />
     </Box>
   );
 }
 
-function ListBeasiswaDesa() {
-  const router = useRouter();
+function ListKeunggulanProgram({ search }: { search: string }) {
+  const stateList = useProxy(beasiswaDesaState.keunggulanProgram)
+  const router = useRouter()
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateList.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-          <Title order={4}>List Beasiswa Desa</Title>
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
+      <Paper bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Keunggulan Program</Title>
+          <Tooltip label="Tambah Keunggulan Program" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/pendidikan/beasiswa-desa/keunggulan-program/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Keunggulan Program</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text lineClamp={1} truncate="end" fw={500}>{item.judul}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text lineClamp={1} truncate="end" fw={500} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></Text>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Edit" withArrow>
+                        <Button
+                          variant="light"
+                          color="blue"
+                          size="sm"
+                          onClick={() => router.push(`/admin/pendidikan/beasiswa-desa/keunggulan-program/${item.id}`)}
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Hapus" withArrow>
+                        <Button
+                          variant="light"
+                          color="red"
+                          size="sm"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrashFilled size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
                 <TableTr>
-                  <TableTh>Nomor</TableTh>
-                  <TableTh>Nama Lengkap</TableTh>
-                  <TableTh>Nomor Telepon</TableTh>
-                  <TableTh>Email</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>1</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Email</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/beasiswa-desa/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
+                  <TableTd colSpan={3} align="center" py="xl">
+                    <Text c="dimmed">Tidak ada data pengelolaan sampah</Text>
                   </TableTd>
                 </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+
+        {totalPages > 1 && (
+          <Center mt="xl">
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              siblings={1}
+              boundaries={1}
+              withEdges
+            />
+          </Center>
+        )}
       </Paper>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus pengelolaan sampah bank sampah ini?'
+      />
     </Box>
-  )
+  );
 }
 
-export default BeasiswaDesa;
+export default KeunggulanProgram;

src/app/admin/(dashboard)/pendidikan/info-sekolah/_lib/layoutTabs.tsx

@@ -12,22 +12,22 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
     {
       label: "Jenjang Pendidikan",
       value: "jenjangPendidikan",
-      href: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
+      href: "/admin/pendidikan/info-sekolah/jenjang-pendidikan"
     },
     {
       label: "Lembaga",
       value: "lembaga",
-      href: "/admin/pendidikan/info-sekolah-paud/lembaga"
+      href: "/admin/pendidikan/info-sekolah/lembaga"
     },
     {
       label: "Siswa",
       value: "siswa",
-      href: "/admin/pendidikan/info-sekolah-paud/siswa"
+      href: "/admin/pendidikan/info-sekolah/siswa"
     },
     {
       label: "Pengajar",
       value: "pengajar",
-      href: "/admin/pendidikan/info-sekolah-paud/pengajar"
+      href: "/admin/pendidikan/info-sekolah/pengajar"
     },
   ];
   const curentTab = tabs.find(tab => tab.href === pathname)

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/[id]/page.tsx

@@ -61,7 +61,7 @@ function EditJenjangPendidikan() {
       const success = await stateJenjang.edit.update();
 
       if (success) {
-        router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan");
+        router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
       }
     } catch (error) {
       console.error("Error updating jenjang pendidikan:", error);

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/create/page.tsx

@@ -25,7 +25,7 @@ function CreateJenjangPendidikan() {
   const handleSubmit = async () => {
     await stateJenjang.create.create();
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan")
+    router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan")
   }
 
   return (

src/app/admin/(dashboard)/pendidikan/info-sekolah/jenjang-pendidikan/page.tsx

@@ -66,7 +66,7 @@ function ListJenjangPendidikan({ search }: { search: string }) {
       <Paper bg={colors['white-1']} p={'md'}>
         <JudulList
           title='List Jenjang Pendidikan'
-          href='/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/create'
+          href='/admin/pendidikan/info-sekolah/jenjang-pendidikan/create'
         />
         <Table striped withTableBorder withRowBorders>
           <TableThead>
@@ -81,7 +81,7 @@ function ListJenjangPendidikan({ search }: { search: string }) {
               <TableTr key={item.id}>
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>
-                  <Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/${item.id}`)}>
+                  <Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah/jenjang-pendidikan/${item.id}`)}>
                     <IconEdit size={20} />
                   </Button>
                 </TableTd>

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/edit/page.tsx

@@ -50,7 +50,7 @@ export default function EditLembaga() {
 
     if (result) {
       toast.success("Data berhasil diperbarui");
-      router.push('/admin/pendidikan/info-sekolah-paud/lembaga');
+      router.push('/admin/pendidikan/info-sekolah/lembaga');
     }
   };
 

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/[id]/page.tsx

@@ -29,7 +29,7 @@ function DetailLembaga() {
       detailState.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
+      router.push("/admin/pendidikan/info-sekolah/lembaga")
     }
   }
 
@@ -86,7 +86,7 @@ function DetailLembaga() {
                   <Button
                     onClick={() => {
                       if (detailState.findUnique.data) {
-                        router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${detailState.findUnique.data.id}/edit`);
+                        router.push(`/admin/pendidikan/info-sekolah/lembaga/${detailState.findUnique.data.id}/edit`);
                       }
                     }}
                     disabled={!detailState.findUnique.data}

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/create/page.tsx

@@ -27,7 +27,7 @@ function CreateLembaga() {
   const handleSubmit = async () => {
     await stateLembaga.create.create();
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
+    router.push("/admin/pendidikan/info-sekolah/lembaga")
   }
 
   return (

src/app/admin/(dashboard)/pendidikan/info-sekolah/lembaga/page.tsx

@@ -57,7 +57,7 @@ function ListLembaga({ search }: { search: string }) {
       <Paper bg={colors['white-1']} p={'md'}>
         <JudulList
           title='List Lembaga'
-          href='/admin/pendidikan/info-sekolah-paud/lembaga/create'
+          href='/admin/pendidikan/info-sekolah/lembaga/create'
         />
         <Table striped withTableBorder withRowBorders>
           <TableThead>
@@ -73,7 +73,7 @@ function ListLembaga({ search }: { search: string }) {
                 <TableTd>{item.nama}</TableTd>
                 <TableTd>{item.jenjangPendidikan?.nama}</TableTd>
                 <TableTd>
-                  <Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${item.id}`)}>
+                  <Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah/lembaga/${item.id}`)}>
                     <IconDeviceImac size={20} />
                   </Button>
                 </TableTd>

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/edit/page.tsx

@@ -55,7 +55,7 @@ function EditPengajar() {
         lembagaId: formData.lembagaId.trim(),
       }
       await pengajarState.edit.update()
-      router.push("/admin/pendidikan/info-sekolah-paud/pengajar");
+      router.push("/admin/pendidikan/info-sekolah/pengajar");
     } catch (error) {
       console.error("Error updating pengajar:", error);
       toast.error("Terjadi kesalahan saat memperbarui pengajar");

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/[id]/page.tsx

@@ -29,7 +29,7 @@ function DetailPengajar() {
       detailState.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
+      router.push("/admin/pendidikan/info-sekolah/pengajar")
     }
   }
 
@@ -78,7 +78,7 @@ function DetailPengajar() {
                   <Button
                     onClick={() => {
                       if (detailState.findUnique.data) {
-                        router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${detailState.findUnique.data.id}/edit`);
+                        router.push(`/admin/pendidikan/info-sekolah/pengajar/${detailState.findUnique.data.id}/edit`);
                       }
                     }}
                     disabled={!detailState.findUnique.data}

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/create/page.tsx

@@ -28,7 +28,7 @@ function CreatePengajar() {
     await stateCreate.create.create();
 
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
+    router.push("/admin/pendidikan/info-sekolah/pengajar")
   }
   return (
     <Box>

src/app/admin/(dashboard)/pendidikan/info-sekolah/pengajar/page.tsx

@@ -55,7 +55,7 @@ function ListPengajar({ search }: { search: string }) {
         <Stack>
           <JudulList
             title='List Pengajar'
-            href='/admin/pendidikan/info-sekolah-paud/pengajar/create'
+            href='/admin/pendidikan/info-sekolah/pengajar/create'
           />
           <Box style={{ overflowX: 'auto' }}>
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
@@ -72,7 +72,7 @@ function ListPengajar({ search }: { search: string }) {
                     <TableTd>{item.nama}</TableTd>
                     <TableTd>{item.lembaga.nama}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${item.id}`)}>
+                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah/pengajar/${item.id}`)}>
                         <IconDeviceImacCog size={25} />
                       </Button>
                     </TableTd>

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/edit/page.tsx

@@ -55,7 +55,7 @@ function EditSiswa() {
         lembagaId: formData.lembagaId.trim(),
       }
       await siswaState.edit.update()
-      router.push("/admin/pendidikan/info-sekolah-paud/siswa");
+      router.push("/admin/pendidikan/info-sekolah/siswa");
     } catch (error) {
       console.error("Error updating siswa:", error);
       toast.error("Terjadi kesalahan saat memperbarui siswa");

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/[id]/page.tsx

@@ -29,7 +29,7 @@ function DetailSiswa() {
       detailState.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/pendidikan/info-sekolah-paud/siswa")
+      router.push("/admin/pendidikan/info-sekolah/siswa")
     }
   }
 
@@ -78,7 +78,7 @@ function DetailSiswa() {
                   <Button
                     onClick={() => {
                       if (detailState.findUnique.data) {
-                        router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${detailState.findUnique.data.id}/edit`);
+                        router.push(`/admin/pendidikan/info-sekolah/siswa/${detailState.findUnique.data.id}/edit`);
                       }
                     }}
                     disabled={!detailState.findUnique.data}

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/create/page.tsx

@@ -28,7 +28,7 @@ function CreateSiswa() {
     await stateCreate.create.create();
 
     resetForm();
-    router.push("/admin/pendidikan/info-sekolah-paud/siswa")
+    router.push("/admin/pendidikan/info-sekolah/siswa")
   }
   return (
     <Box>

src/app/admin/(dashboard)/pendidikan/info-sekolah/siswa/page.tsx

@@ -55,7 +55,7 @@ function ListSiswa({ search }: { search: string }) {
         <Stack>
           <JudulList
             title='List Siswa'
-            href='/admin/pendidikan/info-sekolah-paud/siswa/create'
+            href='/admin/pendidikan/info-sekolah/siswa/create'
           />
           <Box style={{ overflowX: 'auto' }}>
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
@@ -72,7 +72,7 @@ function ListSiswa({ search }: { search: string }) {
                     <TableTd>{item.nama}</TableTd>
                     <TableTd>{item.lembaga.nama}</TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${item.id}`)}>
+                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah/siswa/${item.id}`)}>
                         <IconDeviceImacCog size={25} />
                       </Button>
                     </TableTd>

src/app/admin/_com/list_PageAdmin.tsx

@@ -343,8 +343,8 @@ export const navBar = [
     children: [
       {
         id: "Pendidikan_1",
-        name: "Info Sekolah & PAUD",
-        path: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
+        name: "Info Sekolah",
+        path: "/admin/pendidikan/info-sekolah/jenjang-pendidikan"
       },
       {
         id: "Pendidikan_2",

src/app/admin/layout.tsx

@@ -7,18 +7,23 @@ import {
   AppShellHeader,
   AppShellMain,
   AppShellNavbar,
-  Box,
   Burger,
   Flex,
   Group,
   Image,
   NavLink,
   ScrollArea,
-  Text
+  Text,
+  Tooltip,
+  rem
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
-import { IconChevronLeft, IconChevronRight, IconDoorExit } from "@tabler/icons-react";
-import _ from 'lodash';
+import {
+  IconChevronLeft,
+  IconChevronRight,
+  IconDoorExit,
+} from "@tabler/icons-react";
+import _ from "lodash";
 import Link from "next/link";
 import { useRouter, useSelectedLayoutSegments } from "next/navigation";
 import { navBar } from "./_com/list_PageAdmin";
@@ -26,69 +31,97 @@ import { navBar } from "./_com/list_PageAdmin";
 export default function Layout({ children }: { children: React.ReactNode }) {
   const [opened, { toggle }] = useDisclosure();
   const [desktopOpened, { toggle: toggleDesktop }] = useDisclosure(true);
-  const router = useRouter()
-  // Normalisasi semua segmen jadi lowercase
-  const segments = useSelectedLayoutSegments().map(s => _.lowerCase(s));
+  const router = useRouter();
+  const segments = useSelectedLayoutSegments().map((s) => _.lowerCase(s));
 
   return (
     <AppShell
       suppressHydrationWarning
-      header={{ height: 60 }}
+      header={{ height: 64 }}
       navbar={{
         width: 300,
-        breakpoint: 'sm',
+        breakpoint: "sm",
         collapsed: {
           mobile: !opened,
           desktop: !desktopOpened,
         },
       }}
-      padding={'md'}
+      padding="md"
     >
-      <AppShellHeader bg={colors["white-1"]}>
-        <Group px={10} align="center">
-          <Flex align="center" gap={'xs'}>
+      <AppShellHeader
+        style={{
+          background: "linear-gradient(90deg, #ffffff, #f9fbff)",
+          borderBottom: `1px solid ${colors["blue-button"]}20`,
+        }}
+      >
+        <Group px="md" h="100%" justify="space-between">
+          <Flex align="center" gap="sm">
             <Image
-              py={5}
-              src={'/assets/images/darmasaba-icon.png'}
-              alt=""
-              width={50}
-              height={50}
+              src="/assets/images/darmasaba-icon.png"
+              alt="Logo Darmasaba"
+              width={46}
+              height={46}
+              radius="md"
             />
-            <Text fw={'bold'} c={colors["blue-button"]} fz={'lg'}>
-              Dashboard Admin
+            <Text
+              fw={700}
+              c={colors["blue-button"]}
+              fz="lg"
+              style={{ letterSpacing: rem(0.3) }}
+            >
+              Admin Darmasaba
             </Text>
           </Flex>
-          {!desktopOpened && (
-            <ActionIcon variant="light" onClick={toggleDesktop}>
-              <IconChevronRight />
-            </ActionIcon>
-          )}
-          <Burger
-            opened={opened}
-            onClick={toggle}
-            hiddenFrom="sm"
-            size={'sm'}
-          />
-          <Box>
-            <ActionIcon onClick={() => {
-              router.push("/darmasaba")
-            }} color={colors["blue-button"]} radius={'xl'}>
-              <IconDoorExit size={24} />
-            </ActionIcon>
-          </Box>
-          <ActionIcon
-            w={50}
-            h={50}
-            variant="transparent"
-            component={Link}
-            href="/admin"
-          >
-          </ActionIcon>
+
+          <Group gap="xs">
+            {!desktopOpened && (
+              <Tooltip label="Buka Navigasi" position="bottom" withArrow>
+                <ActionIcon
+                  variant="light"
+                  radius="xl"
+                  size="lg"
+                  onClick={toggleDesktop}
+                  color={colors["blue-button"]}
+                >
+                  <IconChevronRight />
+                </ActionIcon>
+              </Tooltip>
+            )}
+
+            <Burger
+              opened={opened}
+              onClick={toggle}
+              hiddenFrom="sm"
+              size="sm"
+              color={colors["blue-button"]}
+            />
+
+            <Tooltip label="Kembali ke Website Desa" position="bottom" withArrow>
+              <ActionIcon
+                onClick={() => {
+                  router.push("/darmasaba");
+                }}
+                color={colors["blue-button"]}
+                radius="xl"
+                size="lg"
+                variant="gradient"
+                gradient={{ from: colors["blue-button"], to: "#228be6" }}
+              >
+                <IconDoorExit size={22} />
+              </ActionIcon>
+            </Tooltip>
+          </Group>
         </Group>
       </AppShellHeader>
 
-      <AppShellNavbar c={colors["blue-button"]} component={ScrollArea}>
-        <AppShell.Section>
+      <AppShellNavbar
+        component={ScrollArea}
+        style={{
+          background: "#ffffff",
+          borderRight: `1px solid ${colors["blue-button"]}20`,
+        }}
+      >
+        <AppShell.Section p="sm">
           {navBar.map((v, k) => {
             const isParentActive = segments.includes(_.lowerCase(v.name));
 
@@ -96,26 +129,42 @@ export default function Layout({ children }: { children: React.ReactNode }) {
               <NavLink
                 key={k}
                 defaultOpened={isParentActive}
-                c={isParentActive ? colors["blue-button"] : "grey"}
+                c={isParentActive ? colors["blue-button"] : "gray"}
                 label={
-                  <Text style={{ fontWeight: isParentActive ? "bold" : "normal" }}>
+                  <Text fw={isParentActive ? 600 : 400} fz="sm">
                     {v.name}
                   </Text>
                 }
+                style={{
+                  borderRadius: rem(10),
+                  marginBottom: rem(4),
+                  transition: "background 150ms ease",
+                }}
+                variant="light"
+                active={isParentActive}
               >
                 {v.children.map((child, key) => {
-                  const isChildActive = segments.includes(_.lowerCase(child.name));
+                  const isChildActive = segments.includes(
+                    _.lowerCase(child.name)
+                  );
 
                   return (
                     <NavLink
                       key={key}
                       href={child.path}
-                      c={isChildActive ? colors["blue-button"] : "grey"}
+                      c={isChildActive ? colors["blue-button"] : "gray"}
                       label={
-                        <Text style={{ fontWeight: isChildActive ? "bold" : "normal" }}>
+                        <Text fw={isChildActive ? 600 : 400} fz="sm">
                           {child.name}
                         </Text>
                       }
+                      style={{
+                        borderRadius: rem(8),
+                        marginBottom: rem(2),
+                        transition: "background 150ms ease",
+                      }}
+                      active={isChildActive}
+                      component={Link}
                     />
                   );
                 })}
@@ -124,16 +173,35 @@ export default function Layout({ children }: { children: React.ReactNode }) {
           })}
         </AppShell.Section>
 
-        <AppShell.Section py={20}>
-          <Group justify="end">
-            <ActionIcon variant="light" onClick={toggleDesktop}>
-              <IconChevronLeft />
-            </ActionIcon>
+        <AppShell.Section py="md">
+          <Group justify="end" pr="sm">
+            <Tooltip
+              label={desktopOpened ? "Tutup Navigasi" : "Buka Navigasi"}
+              position="top"
+              withArrow
+            >
+              <ActionIcon
+                variant="light"
+                radius="xl"
+                size="lg"
+                onClick={toggleDesktop}
+                color={colors["blue-button"]}
+              >
+                <IconChevronLeft />
+              </ActionIcon>
+            </Tooltip>
           </Group>
         </AppShell.Section>
       </AppShellNavbar>
 
-      <AppShellMain bg={colors.Bg}>{children}</AppShellMain>
+      <AppShellMain
+        style={{
+          background: "linear-gradient(180deg, #fdfdfd, #f6f9fc)",
+          minHeight: "100vh",
+        }}
+      >
+        {children}
+      </AppShellMain>
     </AppShell>
   );
 }

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

@@ -6,6 +6,7 @@ import EdukasiLingkungan from "./edukasi-lingkungan";
 import KonservasiAdatBali from "./konservasi-adat-bali";
 import KegiatanDesa from "./gotong-royong";
 import KategoriKegiatan from "./gotong-royong/kategori-kegiatan";
+import KeteranganBankSampahTerdekat from "./pengelolaan-sampah/keterangan-bank-sampah";
 
 const Lingkungan = new Elysia({
   prefix: "/api/lingkungan",
@@ -19,6 +20,7 @@ const Lingkungan = new Elysia({
 .use(KonservasiAdatBali)
 .use(KegiatanDesa)
 .use(KategoriKegiatan)
+.use(KeteranganBankSampahTerdekat);
 
 
 export default Lingkungan;

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/index.ts

@@ -4,7 +4,6 @@ import pengelolaanSampahDelete from "./del";
 import pengelolaanSampahFindMany from "./findMany";
 import pengelolaanSampahFindUnique from "./findUnique";
 import pengelolaanSampahUpdate from "./updt";
-import KeteranganBankSampahTerdekat from "./keterangan-bank-sampah";
 
 const PengelolaanSampah = new Elysia({
   prefix: "/pengelolaansampah",
@@ -35,5 +34,4 @@ const PengelolaanSampah = new Elysia({
     }
   )
   .delete("/del/:id", pengelolaanSampahDelete)
-  .use(KeteranganBankSampahTerdekat);
 export default PengelolaanSampah;

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/keterangan-bank-sampah/findMany.ts

@@ -1,21 +1,55 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function keteranganBankSampahTerdekatFindMany() {
-    try {
-        const data = await prisma.keteranganBankSampahTerdekat.findMany({
-            where: { isActive: true },
-        });
+// Di findMany.ts
+export default async function keteranganBankSampahTerdekatFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
 
-        return {
-            success: true,
-            message: "Success fetch keterangan bank sampah terdekat",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch keterangan bank sampah terdekat",
-        };
-    }
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.keteranganBankSampahTerdekat.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.keteranganBankSampahTerdekat.count({
+        where,
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch keterangan bank sampah terdekat with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch keterangan bank sampah terdekat with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
 }

src/app/api/[[...slugs]]/_lib/pendidikan/beasiswa-desa/beasiswa-pendaftar/findMany.ts

@@ -1,11 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function beasiswaPendaftarFindMany() {
-  const data = await prisma.beasiswaPendaftar.findMany();
+async function beasiswaPendaftarFindMany(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 skip = (page - 1) * limit;
 
-  return {
-    success: true,
-    message: "Success get all beasiswa pendaftar",
-    data,
-  };
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { namaLengkap: { contains: search, mode: 'insensitive' } },
+      { tempatLahir: { contains: search, mode: 'insensitive' } },
+      { alamatKTP: { contains: search, mode: 'insensitive' } },
+      { alamatDomisili: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.beasiswaPendaftar.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.beasiswaPendaftar.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil beasiswa pendaftar dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data beasiswa pendaftar",
+    };
+  }
 }
+
+export default beasiswaPendaftarFindMany;

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

@@ -1,10 +1,12 @@
 import Elysia from "elysia";
 import BeasiswaPendaftar from "./beasiswa-pendaftar";
+import KeunggulanProgram from "./keunggulan-program";
 
 const Beasiswa = new Elysia({
     prefix: "/beasiswa",
     tags: ["Pendidikan/Beasiswa Desa"]
 })
 .use(BeasiswaPendaftar)
+.use(KeunggulanProgram)
 
 export default Beasiswa

src/app/api/[[...slugs]]/_lib/pendidikan/beasiswa-desa/keunggulan-program/create.ts

@@ -0,0 +1,31 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    judul: string;
+    deskripsi: string;
+}
+
+export default async function keunggulanProgramCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    try {
+        const result = await prisma.keunggulanProgram.create({
+            data: {
+                judul: body.judul,
+                deskripsi: body.deskripsi,
+            },
+        });
+
+        return {
+            success: true,
+            message: "Berhasil membuat data keunggulan program",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Gagal membuat data keunggulan program:", error);
+        throw new Error("Gagal membuat data keunggulan program: " + (error as Error).message);
+    }
+
+}
+    

src/app/api/[[...slugs]]/_lib/pendidikan/beasiswa-desa/keunggulan-program/del.ts

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

src/app/api/[[...slugs]]/_lib/pendidikan/beasiswa-desa/keunggulan-program/findMany.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function keunggulanProgramFindMany(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 skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.keunggulanProgram.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.keunggulanProgram.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil keunggulan program dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data keunggulan program",
+    };
+  }
+}
+
+export default keunggulanProgramFindMany;

src/app/api/[[...slugs]]/_lib/pendidikan/beasiswa-desa/keunggulan-program/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function keunggulanProgramFindUnique(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.keunggulanProgram.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get keunggulan program",
+            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/pendidikan/beasiswa-desa/keunggulan-program/index.ts

@@ -0,0 +1,41 @@
+import Elysia, { t } from "elysia";
+import keunggulanProgramCreate from "./create";
+import keunggulanProgramFindMany from "./findMany";
+import keunggulanProgramFindUnique from "./findUnique";
+import keunggulanProgramUpdate from "./updt";
+import keunggulanProgramDelete from "./del";
+
+const KeunggulanProgram = new Elysia({
+  prefix: "/keunggulanprogram",
+  tags: ["Pendidikan / Beasiswa Desa / Keunggulan Program"],
+})
+
+  .post("/create", keunggulanProgramCreate, {
+    body: t.Object({
+      judul: t.String(),
+      deskripsi: t.String(),
+    }),
+  })
+  .get("/findMany", keunggulanProgramFindMany)
+  .get("/:id", async (context) => {
+    const response = await keunggulanProgramFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await keunggulanProgramUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        judul: t.String(),
+        deskripsi: t.String(),
+      }),
+    }
+  )
+  .delete("/del/:id", keunggulanProgramDelete);
+
+export default KeunggulanProgram;

src/app/api/[[...slugs]]/_lib/pendidikan/beasiswa-desa/keunggulan-program/updt.ts

@@ -0,0 +1,45 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    judul: string;
+    deskripsi: string;
+}
+
+export default async function keunggulanProramUpdate(context: Context){
+    const id = context.params.id as string;
+  const body = context.body as FormUpdate;
+
+  try {
+    if (typeof id !== "string") {
+      return {
+        success: false,
+        message: "ID is required",
+      };
+    }
+
+    const data = await prisma.keunggulanProgram.update({
+      where: { id },
+      data: {
+        judul: body.judul,
+        deskripsi: body.deskripsi,
+      },
+    });
+
+    if (!data) {
+        return {
+          success: false,
+          message: "Data not found",
+        };
+      }
+
+    return {
+      success: true,
+      message: "Success update keunggulan program",
+      data,
+    };
+  } catch (error) {
+    console.error("Gagal update data keunggulan program:", error);
+    throw new Error("Gagal update data keunggulan program: " + (error as Error).message);
+  }
+}

src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/lembaga/findMany.ts

@@ -4,25 +4,58 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 async function lembagaPendidikanFindMany(context: Context) {
-  const page = Number(context.query.page) || 1;
-  const limit = Number(context.query.limit) || 10;
-  const search = (context.query.search as string) || "";
-  const skip = (page - 1) * limit;
-
-  // Buat where clause
-  const where: any = { isActive: true };
-
-  // Tambahkan pencarian (jika ada)
-  if (search) {
-    where.OR = [
-      { nama: { contains: search, mode: "insensitive" } },
-      { siswa: { contains: search, mode: "insensitive" } },
-      { pengajar: { contains: search, mode: "insensitive" } },
-      { jenjangPendidikan: { contains: search, mode: "insensitive" } },
-    ];
-  }
-
   try {
+    const page = Number(context.query.page) || 1;
+    const limit = Number(context.query.limit) || 10;
+    const search = (context.query.search as string) || "";
+    const skip = (page - 1) * limit;
+    const jenjangPendidikanName = (context.query.jenjangPendidikanId as string) || "";
+
+    console.log('Lembaga API Query Params:', { page, limit, search, jenjangPendidikanName });
+
+    // Buat where clause
+    const where: any = { isActive: true };
+
+    // Filter berdasarkan jenjang pendidikan (jika ada)
+    if (jenjangPendidikanName) {
+      // Cari jenjang pendidikan berdasarkan nama
+      const jenjangPendidikan = await prisma.jenjangPendidikan.findFirst({
+        where: {
+          nama: {
+            equals: jenjangPendidikanName,
+            mode: 'insensitive',
+          },
+          isActive: true,
+        },
+        orderBy: { nama: 'desc' },
+      });
+
+      if (jenjangPendidikan) {
+        where.jenjangId = jenjangPendidikan.id;
+      } else {
+        // Jika tidak ditemukan, return data kosong
+        return {
+          success: true,
+          message: "Jenjang pendidikan tidak ditemukan",
+          data: [],
+          page,
+          limit,
+          totalPages: 0,
+          total: 0,
+        };
+      }
+    }
+
+    // Tambahkan pencarian (jika ada)
+    if (search) {
+      where.OR = [
+        { nama: { contains: search, mode: "insensitive" } },
+        { siswa: { nama: { contains: search, mode: "insensitive" } } },
+        { pengajar: { nama: { contains: search, mode: "insensitive" } } },
+        { jenjangPendidikan: { nama: { contains: search, mode: "insensitive" } } },
+      ];
+    }
+
     const [data, total] = await Promise.all([
       prisma.lembaga.findMany({
         where,
@@ -33,13 +66,16 @@ async function lembagaPendidikanFindMany(context: Context) {
         },
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { jenjangPendidikan: { nama: 'asc' } },
       }),
       prisma.lembaga.count({
         where,
       })
     ]);
 
+    console.log('Fetched data count:', data.length);
+    console.log('Total count:', total);
+
     return {
       success: true,
       message: "Success fetch lembaga pendidikan with pagination",
@@ -53,7 +89,7 @@ async function lembagaPendidikanFindMany(context: Context) {
     console.error("Find many paginated error:", e);
     return {
       success: false,
-      message: "Failed fetch lembaga pendidikan with pagination",
+      message: `Failed fetch lembaga pendidikan: ${e instanceof Error ? e.message : 'Unknown error'}`,
     };
   }
 }

src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/pengajar/findMany.ts

@@ -1,41 +1,82 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 async function pengajarFindMany(context: Context) {
-  const page = Number(context.query.page) || 1;
-  const limit = Number(context.query.limit) || 10;
-  const skip = (page - 1) * limit;
-  const search = (context.query.search as string) || "";
-
-  // Buat where clause
-  const where: any = { isActive: true };
-
-  // Tambahkan pencarian (jika ada)
-  if (search) {
-    where.OR = [
-      { nama: { contains: search, mode: "insensitive" } },
-      { lembaga: { contains: search, mode: "insensitive" } },
-    ];
-  }
-
   try {
+    const page = Number(context.query.page) || 1;
+    const limit = Number(context.query.limit) || 10;
+    const skip = (page - 1) * limit;
+    const search = (context.query.search as string) || "";
+    const jenjangPendidikanName = (context.query.jenjangPendidikanId as string) || "";
+
+    console.log('Pengajar API Query Params:', { page, limit, search, jenjangPendidikanId: jenjangPendidikanName });
+
+    const where: any = { isActive: true };
+
+    // Filter berdasarkan jenjang pendidikan (jika ada)
+    if (jenjangPendidikanName) {
+      // Cari jenjang pendidikan berdasarkan nama
+      const jenjangPendidikan = await prisma.jenjangPendidikan.findFirst({
+        where: {
+          nama: {
+            equals: jenjangPendidikanName,
+            mode: 'insensitive'
+          },
+          isActive: true
+        },
+        orderBy: { nama: 'desc' },
+      });
+
+      if (jenjangPendidikan) {
+        where.lembaga = {
+          ...where.lembaga,
+          jenjangId: jenjangPendidikan.id
+        };
+      } else {
+        // Jika tidak ditemukan, return data kosong
+        return {
+          success: true,
+          message: "Jenjang pendidikan tidak ditemukan",
+          data: [],
+          page,
+          limit,
+          totalPages: 0,
+          total: 0,
+        };
+      }
+    }
+
+    // Add search condition if search term exists
+    if (search) {
+      where.OR = [
+        { nama: { contains: search, mode: 'insensitive' } },
+        { lembaga: { nama: { contains: search, mode: 'insensitive' } } }
+      ];
+    }
+
     const [data, total] = await Promise.all([
       prisma.pengajar.findMany({
         where,
         include: {
-          lembaga: true,
+          lembaga: {
+            include: {
+              jenjangPendidikan: true
+            }
+          }
         },
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { lembaga: { jenjangPendidikan: { nama: 'asc' } } }, 
       }),
       prisma.pengajar.count({
         where,
       })
     ]);
 
+    console.log('Fetched pengajar data count:', data.length);
+    console.log('Total pengajar count:', total);
+
     return {
       success: true,
       message: "Success fetch pengajar with pagination",
@@ -45,13 +86,12 @@ async function pengajarFindMany(context: Context) {
       totalPages: Math.ceil(total / limit),
       total,
     };
-  } catch (e) {
-    console.error("Find many paginated error:", e);
+  } catch (error) {
+    console.error("Error in pengajarFindMany:", error);
     return {
       success: false,
-      message: "Failed fetch pengajar with pagination",
+      message: `Failed fetch pengajar: ${error instanceof Error ? error.message : 'Unknown error'}`,
     };
   }
 }
-
-export default pengajarFindMany;
+export default pengajarFindMany;

src/app/api/[[...slugs]]/_lib/pendidikan/info-sekolah-paud/siswa/findMany.ts

@@ -1,41 +1,82 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 async function siswaFindMany(context: Context) {
-  const page = Number(context.query.page) || 1;
-  const limit = Number(context.query.limit) || 10;
-  const skip = (page - 1) * limit;
-  const search = (context.query.search as string) || "";
-
-  // Buat where clause
-  const where: any = { isActive: true };
-
-  // Tambahkan pencarian (jika ada)
-  if (search) {
-    where.OR = [
-      { nama: { contains: search, mode: "insensitive" } },
-      { lembaga: { contains: search, mode: "insensitive" } },
-    ];
-  }
-
   try {
+    const page = Number(context.query.page) || 1;
+    const limit = Number(context.query.limit) || 10;
+    const skip = (page - 1) * limit;
+    const search = (context.query.search as string) || "";
+    const jenjangPendidikanName = (context.query.jenjangPendidikanName as string) || "";
+
+    console.log('Siswa API Query Params:', { page, limit, search, jenjangPendidikanId: jenjangPendidikanName });
+
+    // Buat where clause
+    const where: any = { isActive: true };
+
+    // Filter berdasarkan jenjang pendidikan (jika ada)
+    if (jenjangPendidikanName) {
+      // Cari jenjang pendidikan berdasarkan nama
+      const jenjangPendidikan = await prisma.jenjangPendidikan.findFirst({
+        where: {
+          nama: {
+            equals: jenjangPendidikanName,
+            mode: 'insensitive'
+          },
+          isActive: true,
+        }
+      });
+
+      if (jenjangPendidikan) {
+        where.lembaga = {
+          ...where.lembaga,
+          jenjangId: jenjangPendidikan.id
+        };
+      } else {
+        // Jika tidak ditemukan, return data kosong
+        return {
+          success: true,
+          message: "Jenjang pendidikan tidak ditemukan",
+          data: [],
+          page,
+          limit,
+          totalPages: 0,
+          total: 0,
+        };
+      }
+    }
+
+    // Tambahkan pencarian (jika ada)
+    if (search) {
+      where.OR = [
+        { nama: { contains: search, mode: "insensitive" } },
+        { lembaga: { nama: { contains: search, mode: 'insensitive' } } }
+      ];
+    }
+
     const [data, total] = await Promise.all([
       prisma.siswa.findMany({
         where,
         include: {
-          lembaga: true,
+          lembaga: {
+            include: {
+              jenjangPendidikan: true,
+            },
+          },
         },
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { lembaga: { jenjangPendidikan: { nama: 'asc' } } }, 
       }),
       prisma.siswa.count({
         where,
       })
     ]);
 
+    console.log('Fetched siswa data count:', data.length);
+    console.log('Total siswa count:', total);
+
     return {
       success: true,
       message: "Success fetch siswa with pagination",
@@ -45,11 +86,11 @@ async function siswaFindMany(context: Context) {
       totalPages: Math.ceil(total / limit),
       total,
     };
-  } catch (e) {
-    console.error("Find many paginated error:", e);
+  } catch (error) {
+    console.error("Error in siswaFindMany:", error);
     return {
       success: false,
-      message: "Failed fetch siswa with pagination",
+      message: `Failed fetch siswa: ${error instanceof Error ? error.message : 'Unknown error'}`,
     };
   }
 }

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

@@ -1,48 +1,53 @@
 /* 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 {
+  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 { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function Semua() {
   const searchParams = useSearchParams();
   const router = useTransitionRouter();
 
-  // Parameter URL
+  // Ambil parameter langsung dari URL
   const search = searchParams.get('search') || '';
-  const currentPage = parseInt(searchParams.get('page') || '1');
-  const [page, setPage] = useState(currentPage);
+  const page = parseInt(searchParams.get('page') || '1');
 
-  // Gunakan proxy untuk state
+  // Gunakan proxy untuk state global
   const state = useProxy(stateDashboardBerita.berita);
-  const featured = useProxy(stateDashboardBerita.berita.findFirst); // ✅ Berita utama
+  const featured = useProxy(stateDashboardBerita.berita.findFirst);
   const loadingGrid = state.findMany.loading;
   const loadingFeatured = featured.loading;
 
-  // Load berita utama (hanya sekali)
+  // Load berita utama sekali saja
   useEffect(() => {
     if (!featured.data && !loadingFeatured) {
       stateDashboardBerita.berita.findFirst.load();
     }
   }, [featured.data, loadingFeatured]);
 
-  // Load berita terbaru (untuk grid) saat page/search berubah
+  // Load berita terbaru tiap page / search berubah
   useEffect(() => {
-    const limit = 3; // Sesuaikan dengan tampilan grid
+    const limit = 3;
     state.findMany.load(page, limit, search);
   }, [page, search]);
 
-  // Update URL saat page berubah
-  useEffect(() => {
-    const url = new URLSearchParams();
+  // Handler pagination → langsung update URL
+  const handlePageChange = (newPage: number) => {
+    const url = new URLSearchParams(searchParams.toString());
     if (search) url.set('search', search);
-    if (page > 1) url.set('page', page.toString());
+    if (newPage > 1) url.set('page', newPage.toString());
+    else url.delete('page'); // biar page=1 ga muncul di URL
+
     router.replace(`?${url.toString()}`);
-  }, [search, page, router]);
+  };
 
   const featuredData = featured.data;
   const paginatedNews = state.findMany.data || [];
@@ -51,7 +56,7 @@ function Semua() {
   return (
     <Box py={20}>
       <Container size="xl" px={{ base: "md", md: "xl" }}>
-        {/* === Berita Utama (Tetap) === */}
+        {/* === Berita Utama === */}
         {loadingFeatured ? (
           <Center><Skeleton h={400} /></Center>
         ) : featuredData ? (
@@ -94,7 +99,9 @@ function Semua() {
                       <Button
                         variant="light"
                         rightSection={<IconArrowRight size={16} />}
-                        onClick={() => router.push(`/darmasaba/desa/berita/${featuredData.kategoriBerita?.name}/${featuredData.id}`)}
+                        onClick={() =>
+                          router.push(`/darmasaba/desa/berita/${featuredData.kategoriBerita?.name}/${featuredData.id}`)
+                        }
                       >
                         Baca Selengkapnya
                       </Button>
@@ -106,7 +113,7 @@ function Semua() {
           </Box>
         ) : null}
 
-        {/* === Berita Terbaru (Berubah Saat Pagination) === */}
+        {/* === Berita Terbaru === */}
         <Box mt={50}>
           <Title order={2} mb="md">Berita Terbaru</Title>
           <Divider mb="xl" />
@@ -122,13 +129,7 @@ function Semua() {
           ) : (
             <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 key={item.id} shadow="sm" p="lg" radius="md" withBorder>
                   <Card.Section>
                     <Image
                       src={item.image?.link || '/images/placeholder-small.jpg'}
@@ -143,7 +144,6 @@ function Semua() {
                   </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">
@@ -154,20 +154,28 @@ function Semua() {
                         year: 'numeric'
                       })}
                     </Text>
-                    
-                    <Button p="xs" variant="light" rightSection={<IconArrowRight size={16} />} onClick={() => router.push(`/darmasaba/desa/berita/${item.kategoriBerita?.name}/${item.id}`)}>Baca Selengkapnya</Button>
+                    <Button
+                      p="xs"
+                      variant="light"
+                      rightSection={<IconArrowRight size={16} />}
+                      onClick={() =>
+                        router.push(`/darmasaba/desa/berita/${item.kategoriBerita?.name}/${item.id}`)
+                      }
+                    >
+                      Baca Selengkapnya
+                    </Button>
                   </Flex>
                 </Card>
               ))}
             </SimpleGrid>
           )}
 
-          {/* Pagination hanya untuk berita terbaru */}
+          {/* Pagination */}
           <Center mt="xl">
             <Pagination
               total={totalPages}
               value={page}
-              onChange={setPage}
+              onChange={handlePageChange}
               siblings={1}
               boundaries={1}
               withEdges
@@ -179,4 +187,4 @@ function Semua() {
   );
 }
 
-export default Semua;
+export default Semua;

src/app/darmasaba/(pages)/lingkungan/gotong-royong/_lib/layoutTabs.tsx

@@ -87,9 +87,9 @@ function LayoutTabsGotongRoyong({
       href: "/darmasaba/lingkungan/gotong-royong/kebersihan"
     },
     {
-      label: "Infrasturktur",
-      value: "infrasturktur",
-      href: "/darmasaba/lingkungan/gotong-royong/infrasturktur"
+      label: "Infrastruktur",
+      value: "infrastruktur",
+      href: "/darmasaba/lingkungan/gotong-royong/infrastruktur"
     },
     {
       label: "Sosial",

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -81,8 +81,9 @@ function Page() {
               <Box key={k} px={28}>
                 <Paper p={20} bg={colors['white-trans-1']}>
                   <Flex gap={20} align={'center'}>
+                    <Text>{k + 1}</Text>
                     <Box style={{ alignContent: 'center', alignItems: 'center' }}>
-                      {k + 1} {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
+                      {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
                     </Box>
                     <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
                   </Flex>

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -1,14 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-import { IconSearch, IconLeaf, IconTrophy, IconTent, IconChartLine, IconRecycle, IconTruckFilled, IconScale, IconClipboardTextFilled, IconTrashFilled, IconHomeEco, IconChristmasTreeFilled, IconTrendingUp, IconShieldFilled } from '@tabler/icons-react';
-import BackButton from '../../desa/layanan/_com/BackButto';
 import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
-import { useProxy } from 'valtio/utils';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
-import { useState } from 'react';
-import React from 'react';
+import { IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent, IconTrashFilled, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
   const state = useProxy(programPenghijauanState);
@@ -17,7 +16,7 @@ function Page() {
   const { data, load, page, totalPages, loading } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, debouncedSearch);
+    load(page, 4, debouncedSearch);
   }, [page, debouncedSearch]);
 
   const iconMap: Record<string, any> = {
@@ -110,9 +109,6 @@ function Page() {
                 <Text fz="sm" ta="center" c="dimmed">
                   {v.judul}
                 </Text>
-                <Button variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="sm" radius="xl" mt="sm">
-                  Pelajari Lebih Lanjut
-                </Button>
               </Stack>
             </Paper>
           ))}

src/app/darmasaba/(pages)/pendidikan/beasiswa-desa/page.tsx

@@ -1,46 +1,25 @@
 'use client'
+import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
 import colors from '@/con/colors';
 import { Box, Button, Center, Group, Image, Modal, Paper, Select, SimpleGrid, Stack, Stepper, StepperStep, Text, TextInput, Title } from '@mantine/core';
-import { useState } from 'react';
-import BackButton from '../../desa/layanan/_com/BackButto';
 import { useDisclosure } from '@mantine/hooks';
+import { IconArrowRight, IconCoin, IconInfoCircle, IconSchool, IconUsers } from '@tabler/icons-react';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import beasiswaDesaState from '@/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa';
+import BackButton from '../../desa/layanan/_com/BackButto';
 
 const dataBeasiswa = [
-  {
-    id: 1,
-    nama: 'Penerima Beasiswa',
-    jumlah: '250+'
-  },
-  {
-    id: 2,
-    nama: 'Peluang Kelulusan',
-    jumlah: '90%'
-  },
-  {
-    id: 3,
-    nama: 'Dana Tersalurkan',
-    jumlah: '1.5M'
-  },
-]
+  { id: 1, nama: 'Penerima Beasiswa', jumlah: '250+', icon: IconUsers },
+  { id: 2, nama: 'Peluang Kelulusan', jumlah: '90%', icon: IconSchool },
+  { id: 3, nama: 'Dana Tersalurkan', jumlah: '1.5M', icon: IconCoin },
+];
+
 const dataProgram = [
-  {
-    id: 1,
-    judul: "Pelatihan SoftSkill",
-    deskripsi: "Program pengembangan diri untuk mempersiapkan karir masa depan",
-  },
-  {
-    id: 2,
-    judul: "Peningkatan Akses Pendidikan ",
-    deskripsi: "Program yang menjangkau masyarakat kurang mampu secara finansial, mengurangi angka putus sekolah",
-  },
-  {
-    id: 3,
-    judul: "Pendampingan Intensif",
-    deskripsi: "Program dengan mentor berpengalaman yang membimbing dalam perjalanan akademik",
-  }
-]
+  { id: 1, judul: "Pelatihan SoftSkill", deskripsi: "Pengembangan diri untuk mempersiapkan karir masa depan." },
+  { id: 2, judul: "Peningkatan Akses Pendidikan", deskripsi: "Memberi kesempatan bagi masyarakat kurang mampu untuk tetap sekolah." },
+  { id: 3, judul: "Pendampingan Intensif", deskripsi: "Bimbingan dari mentor berpengalaman untuk mendukung akademik." },
+];
+
 function Page() {
   const beasiswaDesa = useProxy(beasiswaDesaState.beasiswaPendaftar)
   const [opened, { open, close }] = useDisclosure(false);
@@ -60,267 +39,173 @@ function Page() {
       statusPernikahan: "",
       ukuranBaju: "",
     };
-  }
+  };
 
   const handleSubmit = async () => {
     await beasiswaDesa.create.create();
     resetForm();
     close();
-  }
+  };
 
   const [active, setActive] = useState(1);
   const nextStep = () => setActive((current) => (current < 5 ? current + 1 : current));
   const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap={40}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      {/* Page 1 */}
+
       <Box px={{ base: 'md', md: 100 }} pb={50}>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2
-          }}
-        >
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
           <Box>
-            <Title fz={55} fw={'bold'} c={colors['blue-button']}>
+            <Title fz={55} fw={900} c={colors['blue-button']}>
               Wujudkan Mimpi Pendidikanmu di Desa Darmasaba
             </Title>
-            <Text fz={'xl'} >
-              Program beasiswa komprehensif untuk mendukung pendidikan berkualitas bagi putra-putri Desa Darmasaba.
+            <Text fz="lg" mt="md" c="dimmed">
+              Program beasiswa untuk mendukung pendidikan berkualitas bagi generasi muda Desa Darmasaba.
             </Text>
-            <SimpleGrid
-              mt={10}
-              cols={{
-                base: 1,
-                md: 2
-              }}
-            >
-              <Button bg={colors['blue-button']} fz={'lg'} onClick={open}>Daftar Sekarang</Button>
-              <Button bg={colors['blue-button-trans']} fz={'lg'}>Pelajari Lebih Lanjut</Button>
-            </SimpleGrid>
+            <Group mt="xl">
+              <Button size="lg" radius="xl" bg={colors['blue-button']} rightSection={<IconArrowRight size={20} />} onClick={open}>
+                Daftar Sekarang
+              </Button>
+              <Button size="lg" radius="xl" variant="light" color={colors['blue-button']} rightSection={<IconInfoCircle size={20} />}>
+                Pelajari Lebih Lanjut
+              </Button>
+            </Group>
           </Box>
           <Box>
-            <Image alt='' src={'/api/img/beasiswa-siswa.png'} />
+            <Image alt="Beasiswa Desa" src="/api/img/beasiswa-siswa.png" radius="lg" />
           </Box>
         </SimpleGrid>
-        <SimpleGrid mt={30}
-          cols={{
-            base: 1,
-            md: 3
-          }}
-        >
+
+        <SimpleGrid mt={50} cols={{ base: 1, md: 3 }} spacing="lg">
           {dataBeasiswa.map((v, k) => {
+            const IconComp = v.icon;
             return (
-              <Box key={k}>
-                <Paper p={'xl'} bg={colors['white-trans-1']}>
-                  <Title ta={'center'} fz={55} fw={'bold'} c={colors['blue-button']}>
-                    {v.jumlah}
-                  </Title>
-                  <Text ta={'center'}>
-                    {v.nama}
-                  </Text>
-                </Paper>
-              </Box>
-            )
+              <Paper key={k} p="xl" radius="xl" shadow="md" bg={colors['white-trans-1']} withBorder>
+                <Stack align="center" gap="sm">
+                  <IconComp size={45} color={colors['blue-button']} />
+                  <Title fz={42} fw={900} c={colors['blue-button']}>{v.jumlah}</Title>
+                  <Text fz="sm" ta="center">{v.nama}</Text>
+                </Stack>
+              </Paper>
+            );
           })}
         </SimpleGrid>
       </Box>
-      {/* ---- */}
+
       <Box px={{ base: 'md', md: 100 }} pb={20}>
-        <Title pb={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+        <Title pb={20} ta="center" order={1} fw={900} c={colors['blue-button']}>
           Keunggulan Program
         </Title>
-        <Paper p={'xl'} bg={colors['white-trans-1']}>
-          <SimpleGrid
-            cols={{
-              base: 1,
-              md: 3
-            }}
-          >
-            {dataProgram.map((v, k) => {
-              return (
-                <Box key={k}>
-                  <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                    {v.judul}
-                  </Title>
-                  <Text>
-                    {v.deskripsi}
-                  </Text>
-                  {/* <Divider orientation="vertical" size="md" h="auto" /> */}
-                </Box>
-              )
-            })}
-          </SimpleGrid>
-        </Paper>
-        <Title py={20} ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+          {dataProgram.map((v, k) => (
+            <Paper key={k} p="xl" radius="xl" shadow="sm" bg={colors['white-trans-1']}>
+              <Title order={3} fw={700} c={colors['blue-button']} mb="xs">{v.judul}</Title>
+              <Text fz="sm" c="dimmed">{v.deskripsi}</Text>
+            </Paper>
+          ))}
+        </SimpleGrid>
+
+        <Title py={40} ta="center" order={1} fw={900} c={colors['blue-button']}>
           Timeline Pendaftaran
         </Title>
         <Center>
           <Stepper mt={20} active={active} onStepClick={setActive} orientation="vertical" allowNextStepsSelect={false}>
-            <StepperStep label="Pembukaan Pendaftaran 1 Maret 2025" description="" />
-            <StepperStep label="Seleksi Administrasi 15 Maret 2025" description="" />
-            <StepperStep label="Tes Potensi Akademik 1 April 2025" description="" />
-            <StepperStep label="Wawancara 15 April 2025" description="" />
-            <StepperStep label="Pengumuman 1 Mei 2025" description="" />
+            <StepperStep label="1 Maret 2025" description="Pembukaan Pendaftaran" />
+            <StepperStep label="15 Maret 2025" description="Seleksi Administrasi" />
+            <StepperStep label="1 April 2025" description="Tes Potensi Akademik" />
+            <StepperStep label="15 April 2025" description="Wawancara" />
+            <StepperStep label="1 Mei 2025" description="Pengumuman Hasil" />
           </Stepper>
         </Center>
 
         <Group justify="center" mt="xl">
-          <Button variant="default" onClick={prevStep}>Back</Button>
-          <Button onClick={nextStep}>Next step</Button>
+          <Button variant="default" radius="xl" onClick={prevStep}>Kembali</Button>
+          <Button radius="xl" bg={colors['blue-button']} onClick={nextStep}>Lanjut</Button>
         </Group>
       </Box>
 
       <Modal
         opened={opened}
         onClose={close}
-        radius={0}
+        radius="xl"
+        size="lg"
         transitionProps={{ transition: 'fade', duration: 200 }}
+        title={
+          <Text fz="xl" fw={800} c={colors['blue-button']}>
+            Formulir Beasiswa
+          </Text>
+        }
       >
-        <Paper p={"md"} withBorder>
-          <Stack gap={"xs"}>
-            <Title order={3}>Ajukan Beasiswa</Title>
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-              placeholder="masukkan nama"
-              onChange={(val) => {
-                beasiswaDesa.create.form.namaLengkap = val.target.value
-              }}
-            />
-            <TextInput
-              type='number'
-              label={<Text fz={"sm"} fw={"bold"}>NIK</Text>}
-              placeholder="masukkan nik"
-              onChange={(val) => {
-                beasiswaDesa.create.form.nik = val.target.value
-              }}
-            />
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Tempat Lahir</Text>}
-              placeholder="masukkan tempat lahir"
-              onChange={(val) => {
-                beasiswaDesa.create.form.tempatLahir = val.target.value
-              }}
-            />
-            <TextInput
-              type='date'
-              label={<Text fz={"sm"} fw={"bold"}>Tanggal Lahir</Text>}
-              placeholder="masukkan tanggal lahir"
-              onChange={(val) => {
-                beasiswaDesa.create.form.tanggalLahir = val.target.value
-              }}
-            />
-            <Select
-              label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
-              placeholder="Pilih jenis kelamin"
-              data={[
-                { value: "LAKI_LAKI", label: "Laki-laki" },
-                { value: "PEREMPUAN", label: "Perempuan" },
-              ]}
-              onChange={(val) => {
-                if (val) beasiswaDesa.create.form.jenisKelamin = val as "LAKI_LAKI" | "PEREMPUAN";
-              }}
-            />
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Kewarganegaraan</Text>}
-              placeholder="masukkan kewarganegaraan"
-              onChange={(val) => {
-                beasiswaDesa.create.form.kewarganegaraan = val.target.value
-              }}
-            />
-            <Select
-              label={<Text fz={"sm"} fw={"bold"}>Agama</Text>}
-              placeholder="Pilih agama"
-              data={[
-                { value: "ISLAM", label: "Islam" },
-                { value: "KRISTEN_PROTESTAN", label: "Kristen Protestan" },
-                { value: "KRISTEN_KATOLIK", label: "Kristen Katolik" },
-                { value: "HINDU", label: "Hindu" },
-                { value: "BUDDHA", label: "Buddha" },
-                { value: "KONGHUCU", label: "Konghucu" },
-                { value: "LAINNYA", label: "Lainnya" },
-              ]}
-              onChange={(val) => {
-                if (val) beasiswaDesa.create.form.agama = val as
-                  "ISLAM"
-                  | "KRISTEN_PROTESTAN"
-                  | "KRISTEN_KATOLIK"
-                  | "HINDU"
-                  | "BUDDHA"
-                  | "KONGHUCU"
-                  | "LAINNYA";
-              }}
-            />
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Alamat KTP</Text>}
-              placeholder="masukkan alamat ktp"
-              onChange={(val) => {
-                beasiswaDesa.create.form.alamatKTP = val.target.value
-              }}
-            />
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Alamat Domisili</Text>}
-              placeholder="masukkan alamat domisili"
-              onChange={(val) => {
-                beasiswaDesa.create.form.alamatDomisili = val.target.value
-              }}
-            />
-            <TextInput
-              type='number'
-              label={<Text fz={"sm"} fw={"bold"}>No Hp</Text>}
-              placeholder="masukkan no hp"
-              onChange={(val) => {
-                beasiswaDesa.create.form.noHp = val.target.value
-              }}
-            />
-            <TextInput
-              type='email'
-              label={<Text fz={"sm"} fw={"bold"}>Email</Text>}
-              placeholder="masukkan email"
-              onChange={(val) => {
-                beasiswaDesa.create.form.email = val.target.value
-              }}
-            />
-            <Select
-              label={<Text fz={"sm"} fw={"bold"}>Status Pernikahan</Text>}
-              placeholder="Pilih status pernikahan"
-              data={[
-                { value: "BELUM_MENIKAH", label: "Belum Menikah" },
-                { value: "MENIKAH", label: "Menikah" },
-                { value: "JANDA_DUDA", label: "Janda/Duda" },
-              ]}
-              onChange={(val) => {
-                if (val) beasiswaDesa.create.form.statusPernikahan = val as
-                  "BELUM_MENIKAH"
-                  | "MENIKAH"
-                  | "JANDA_DUDA";
-              }}
-            />
-            <Select
-              label={<Text fz={"sm"} fw={"bold"}>Ukuran Baju</Text>}
-              placeholder="Pilih ukuran baju"
-              data={[
-                { value: "S", label: "S" },
-                { value: "M", label: "M" },
-                { value: "L", label: "L" },
-                { value: "XL", label: "XL" },
-                { value: "XXL", label: "XXL" },
-                { value: "LAINNYA", label: "Lainnya" },
-              ]}
-              onChange={(val) => {
-                if (val) beasiswaDesa.create.form.ukuranBaju = val as
-                  "S"
-                  | "M"
-                  | "L"
-                  | "XL"
-                  | "XXL"
-                  | "LAINNYA";
-              }}
-            />
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        <Paper p="lg" radius="xl" withBorder shadow="sm">
+          <Stack gap="sm">
+            <TextInput 
+            label="Nama Lengkap" 
+            placeholder="Masukkan nama lengkap" 
+            onChange={(val) => { beasiswaDesa.create.form.namaLengkap = val.target.value }} />
+            <TextInput 
+            type="number" 
+            label="NIK" 
+            placeholder="Masukkan NIK" 
+            onChange={(val) => { beasiswaDesa.create.form.nik = val.target.value }} />
+            <TextInput 
+            label="Tempat Lahir" 
+            placeholder="Masukkan tempat lahir" 
+            onChange={(val) => { beasiswaDesa.create.form.tempatLahir = val.target.value }} />
+            <TextInput 
+            type="date" 
+            label="Tanggal Lahir" 
+            placeholder="Pilih tanggal lahir" 
+            onChange={(val) => { beasiswaDesa.create.form.tanggalLahir = val.target.value }} />
+            <Select 
+            label="Jenis Kelamin" 
+            placeholder="Pilih jenis kelamin" 
+            data={[{ value: "LAKI_LAKI", label: "Laki-laki" }, { value: "PEREMPUAN", label: "Perempuan" }]}
+            onChange={(val) => { if (val) beasiswaDesa.create.form.jenisKelamin = val }} />
+            <TextInput 
+            label="Kewarganegaraan" 
+            placeholder="Masukkan kewarganegaraan" 
+            onChange={(val) => { beasiswaDesa.create.form.kewarganegaraan = val.target.value }} />
+            <Select 
+            label="Agama" 
+            placeholder="Pilih agama" 
+            data={[{ value: "ISLAM", label: "Islam" }, { value: "KRISTEN_PROTESTAN", label: "Kristen Protestan" }, { value: "KRISTEN_KATOLIK", label: "Kristen Katolik" }, { value: "HINDU", label: "Hindu" }, { value: "BUDDHA", label: "Buddha" }, { value: "KONGHUCU", label: "Konghucu" }, { value: "LAINNYA", label: "Lainnya" }]}
+            onChange={(val) => { if (val) beasiswaDesa.create.form.agama = val }} />
+            <TextInput 
+            label="Alamat KTP" 
+            placeholder="Masukkan alamat sesuai KTP" 
+            onChange={(val) => { beasiswaDesa.create.form.alamatKTP = val.target.value }} />
+            <TextInput 
+            label="Alamat Domisili" 
+            placeholder="Masukkan alamat domisili" 
+            onChange={(val) => { beasiswaDesa.create.form.alamatDomisili = val.target.value }} />
+            <TextInput 
+            type="number" 
+            label="Nomor HP" 
+            placeholder="Masukkan nomor HP" 
+            onChange={(val) => { beasiswaDesa.create.form.noHp = val.target.value }} />
+            <TextInput 
+            type="email" 
+            label="Email" 
+            placeholder="Masukkan alamat email" 
+            onChange={(val) => { beasiswaDesa.create.form.email = val.target.value }} />
+            <Select 
+            label="Status Pernikahan" 
+            placeholder="Pilih status pernikahan" 
+            data={[{ value: "BELUM_MENIKAH", label: "Belum Menikah" }, { value: "MENIKAH", label: "Menikah" }, { value: "JANDA_DUDA", label: "Janda/Duda" }]}
+            onChange={(val) => { if (val) beasiswaDesa.create.form.statusPernikahan = val }} />
+            <Select 
+            label="Ukuran Baju" 
+            placeholder="Pilih ukuran baju" 
+            data={[{ value: "S", label: "S" }, { value: "M", label: "M" }, { value: "L", label: "L" }, { value: "XL", label: "XL" }, { value: "XXL", label: "XXL" }, { value: "LAINNYA", label: "Lainnya" }]}
+            onChange={(val) => { if (val) beasiswaDesa.create.form.ukuranBaju = val }} />
+            <Group justify="flex-end" mt="md">
+              <Button variant="default" radius="xl" onClick={close}>Batal</Button>
+              <Button radius="xl" bg={colors['blue-button']} onClick={handleSubmit}>Kirim</Button>
+            </Group>
           </Stack>
         </Paper>
       </Modal>

src/app/darmasaba/(pages)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -1,67 +1,97 @@
+'use client'
+import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
-import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Badge } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { IconMapPin, IconCalendarTime, IconBook2 } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
+  const stateTujuanProgram = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
+  const stateLokasiDanJadwal = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
+  const stateFasilitas = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
+
+  useShallowEffect(() => {
+    stateTujuanProgram.findById.load('edit');
+    stateLokasiDanJadwal.findById.load('edit');
+    stateFasilitas.findById.load('edit');
+  }, []);
+
+  if (!stateTujuanProgram.findById.data || !stateLokasiDanJadwal.findById.data || !stateFasilitas.findById.data)
+    return (
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }} pb={50}>
+          <Skeleton h={60} radius="xl" />
+          <Skeleton h={200} mt="lg" radius="md" />
+        </Box>
+      </Stack>
+    );
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} pb={50}>
-        <Box>
-          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
-            Bimbingan Belajar Desa
+      <Box px={{ base: 'md', md: 120 }} pb={80}>
+        <Box mb="lg">
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} fz={{ base: 28, md: 38 }}>
+            Program Bimbingan Belajar Desa
           </Title>
-          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
-          Bimbingan Belajar Desa merupakan program unggulan untuk membantu siswa-siswi di Desa Darmasaba dalam memahami pelajaran sekolah, meningkatkan prestasi akademik, serta membangun semangat belajar yang tinggi sejak dini.
+          <Divider size="sm" my="md" mx="auto" w="60%" color={colors['blue-button']} />
+          <Text ta="center" fz="lg" c="black" px={{ base: 'sm', md: 120 }}>
+            Program unggulan untuk mendukung siswa Desa Darmasaba memahami pelajaran sekolah, meningkatkan prestasi akademik, dan menumbuhkan semangat belajar sejak dini.
           </Text>
         </Box>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3
-          }}
-        >
-          <Box>
-            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Tujuan Program
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Memberikan pendampingan belajar secara gratis bagi siswa SD hingga SMP</ListItem>
-                <ListItem fz={'h4'}>Membantu siswa dalam menghadapi ujian dan menyelesaikan tugas sekolah</ListItem>
-                <ListItem fz={'h4'}>Menumbuhkan kepercayaan diri dan kemandirian dalam belajar</ListItem>
-                <ListItem fz={'h4'}>Meningkatkan kesetaraan pendidikan untuk seluruh anak desa</ListItem>
-              </List>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Lokasi dan Jadwal
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Lokasi: Balai Banjar / Balai Desa Darmasaba / Perpustakaan Desa</ListItem>
-                <ListItem fz={'h4'}>Jadwal: Setiap hari Senin, Rabu, dan Jumat pukul 16.00–18.00 WITA</ListItem>
-                <ListItem fz={'h4'}>Peserta: Terbuka untuk semua siswa SD–SMP di wilayah desa</ListItem>
-              </List>
-            </Paper>
-          </Box> 
-          <Box>
-            <Paper h={{base: 0, md: 324}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-              Fasilitas yang Disediakan
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Buku-buku pelajaran dan alat tulis</ListItem>
-                <ListItem fz={'h4'}>Ruang belajar nyaman dan kondusif</ListItem>
-                <ListItem fz={'h4'}>Modul latihan dan pendampingan tugas</ListItem>
-                <ListItem fz={'h4'}>Minuman ringan dan dukungan motivasi belajar</ListItem>
-              </List>
-            </Paper>
-          </Box> 
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="xl">
+          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
+            <Stack gap="sm">
+              <Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  Tujuan Program
+                </Badge>
+                <Tooltip label="Gambaran manfaat utama program" position="top-start" withArrow>
+                  <Box>
+                    <IconBook2 size={36} stroke={1.5} color={colors['blue-button']} />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateTujuanProgram.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
+          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
+            <Stack gap="sm">
+              <Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  Lokasi & Jadwal
+                </Badge>
+                <Tooltip label="Tempat dan waktu pelaksanaan" position="top-start" withArrow>
+                  <Box>
+                    <IconMapPin size={36} stroke={1.5} color={colors['blue-button']} />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateLokasiDanJadwal.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
+          <Paper p="xl" radius="lg" shadow="md" withBorder bg={colors['white-trans-1']}>
+            <Stack gap="sm">
+              <Box>
+                <Badge variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="lg" radius="sm" mb="sm">
+                  Fasilitas
+                </Badge>
+                <Tooltip label="Sarana yang disediakan untuk peserta" position="top-start" withArrow>
+                  <Box>
+                    <IconCalendarTime size={36} stroke={1.5} color={colors['blue-button']} />
+                  </Box>
+                </Tooltip>
+              </Box>
+              <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: stateFasilitas.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
         </SimpleGrid>
       </Box>
     </Stack>

src/app/darmasaba/(pages)/pendidikan/data-pendidikan/page.tsx

@@ -1,71 +1,102 @@
-import colors from '@/con/colors';
-import { Stack, Box, Title, Paper } from '@mantine/core';
-import React from 'react';
+'use client'
+import dataPendidikan from '@/app/admin/(dashboard)/_state/pendidikan/data-pendidikan';
+import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconSchool } from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { BarChart } from '@mantine/charts';
+import colors from '@/con/colors';
 
-const data = [
-  {
-    kategori: 'Jumlah penduduk usia 15-64 th yang tidak bisa baca tulis',
-    jumlah: 30
-  },
-  {
-    kategori: 'Jumlah penduduk tidak tamat SD/sederajat',
-    jumlah: 25
-  },
-  {
-    kategori: 'Jumlah penduduk tidak tamat SLTP/Sederajat',
-    jumlah: 20
-  },
-  {
-    kategori: 'Jumlah penduduk tidak tamat SLTA/Sederajat',
-    jumlah: 10
-  },
-  {
-    kategori: 'Jumlah penduduk tamat Sarjana/S1',
-    jumlah: 15
-  },
-  {
-    kategori: 'Jumlah penduduk tamat Pascsarjana',
-    jumlah: 30
-  },
-
-]
 function Page() {
+  type DPMrafik = {
+    id: string;
+    name: string;
+    jumlah: number;
+  };
+
+  const stateDPM = useProxy(dataPendidikan);
+  const [chartData, setChartData] = useState<DPMrafik[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  useShallowEffect(() => {
+    setMounted(true);
+    stateDPM.findMany.load();
+  }, []);
+
+  useEffect(() => {
+    if (stateDPM.findMany.data) {
+      setChartData(
+        stateDPM.findMany.data.map((item) => ({
+          id: item.id,
+          name: item.name,
+          jumlah: Number(item.jumlah),
+        }))
+      );
+    }
+  }, [stateDPM.findMany.data]);
+
+  if (!stateDPM.findMany.data) {
+    return (
+      <Stack px="md" py="xl">
+        <Skeleton h={400} radius="lg" />
+      </Stack>
+    );
+  }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack bg="var(--mantine-color-gray-0)" py="xl" gap="lg" pos="relative">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <Box pb={20}>
-          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
-            Data Pendidikan
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <Stack gap="xs" align="center" pb="lg">
+          <IconSchool size={48} stroke={1.5} color={colors['blue-button']} />
+          <Title order={1} fw={700} ta="center" c={colors['blue-button']}>
+            Statistik Data Pendidikan
           </Title>
-        </Box>
-        <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-          <BarChart
-            p={'100'}
-            h={600}
-            data={data}
-            dataKey="kategori"
-            series={[
-              { name: 'jumlah', color: colors['blue-button'] },
-            ]}
-            tickLine="y"
-              xAxisProps={{
-                angle: -45,  // Rotate labels by -45 degrees
-                textAnchor: 'end',  // Anchor text to the end for better alignment
-                height: 100,  // Increase height for rotated labels
-                interval: 0,  // Show all labels
-                style: { 
-                  fontSize: '12px',  // Adjust font size if needed
-                  overflow: 'visible',
-                  whiteSpace: 'nowrap'
-                }
-              }}
-          />
-        </Paper>
+          <Text c="dimmed" size="sm" ta="center">
+            Visualisasi jumlah pendidikan berdasarkan kategori yang tersedia
+          </Text>
+        </Stack>
+
+        {!mounted || chartData.length === 0 ? (
+          <Paper radius="lg" p="xl" withBorder shadow="sm" bg="var(--mantine-color-white)">
+            <Stack align="center" gap="sm" justify="center" h={350}>
+              <IconSchool size={40} stroke={1.5} color="var(--mantine-color-gray-5)" />
+              <Title order={4} fw={600}>
+                Belum Ada Data
+              </Title>
+              <Text c="dimmed" size="sm">
+                Data pendidikan belum tersedia. Silakan tambahkan data untuk melihat grafik.
+              </Text>
+            </Stack>
+          </Paper>
+        ) : (
+          <Paper radius="lg" p="xl" withBorder shadow="sm" bg="var(--mantine-color-white)">
+            <Title order={4} fw={600} mb="md">
+              Grafik Pendidikan
+            </Title>
+            <ResponsiveContainer width="100%" height={350}>
+              <BarChart data={chartData}>
+                <XAxis dataKey="name" />
+                <YAxis />
+                <Tooltip
+                  contentStyle={{
+                    borderRadius: 12,
+                    background: 'var(--mantine-color-gray-0)',
+                    border: '1px solid var(--mantine-color-gray-3)',
+                  }}
+                  cursor={{ fill: 'var(--mantine-color-gray-1)' }}
+                />
+                <Legend />
+                <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah Pendidikan" radius={[8, 8, 0, 0]} />
+              </BarChart>
+            </ResponsiveContainer>
+          </Paper>
+        )}
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/pendidikan/info-sekolah-paud/page.tsx

@@ -1,363 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import React, { useMemo, useState } from 'react';
-import {
-  ActionIcon,
-  Badge,
-  Box,
-  Button,
-  Center,
-  Container,
-  Group,
-  Paper,
-  Progress,
-  SimpleGrid,
-  Stack,
-  Text,
-  TextInput,
-  Tooltip,
-  VisuallyHidden,
-} from '@mantine/core';
-import {
-  IconChalkboard,
-  IconInfoCircle,
-  IconMicroscope,
-  IconSchool,
-  IconSearch,
-  IconArrowLeft,
-} from '@tabler/icons-react';
-import { motion } from 'framer-motion';
-import type { IconProps } from '@tabler/icons-react';
-
-type Stat = {
-  id: number;
-  icon: React.ComponentType<IconProps>;
-  jumlah: number;
-  nama: string;
-  helper?: string;
-};
-
-const dataSekolah: Stat[] = [
-  {
-    id: 1,
-    icon: IconChalkboard,
-    jumlah: 15,
-    nama: 'Lembaga Pendidikan',
-    helper: 'Jumlah institusi pendidikan resmi di wilayah ini',
-  },
-  {
-    id: 2,
-    icon: IconSchool,
-    jumlah: 3209,
-    nama: 'Siswa Terdaftar',
-    helper: 'Total siswa aktif di semua jenjang',
-  },
-  {
-    id: 3,
-    icon: IconMicroscope,
-    jumlah: 285,
-    nama: 'Tenaga Pengajar',
-    helper: 'Jumlah guru dan staf pengajar aktif',
-  },
-];
-
-export default function SekolahPage() {
-  const [query, setQuery] = useState('');
-  const [kategoriAktif, setKategoriAktif] = useState('Semua');
-  const kategoriList = ['Semua', 'TK/PAUD', 'SD', 'SMP', 'SMA/SMK'];
-  const maxJumlah = useMemo(() => Math.max(...dataSekolah.map((d) => d.jumlah)), []);
-  const filtered = useMemo(() => {
-    const q = query.trim().toLowerCase();
-    return dataSekolah.filter((d) => {
-      const teks = `${d.nama} ${d.jumlah}`.toLowerCase();
-      const matchQuery = q ? teks.includes(q) : true;
-      return matchQuery;
-    });
-  }, [query, kategoriAktif]);
-
-  const hasilCount = filtered.length;
-
-  return (
-    <Box style={{ minHeight: '100vh', background: '#f8fafc', paddingBottom: 48 }}>
-      <Container size="xl" py={{ base: 'md', md: 'xl' }}>
-        <Stack gap="lg">
-          <Box>
-            <ActionIcon
-              aria-label="Kembali"
-              onClick={() => window.history.back()}
-              size="lg"
-              radius="md"
-              variant="light"
-              style={{
-                color: '#1e293b',
-                background: 'white',
-                boxShadow: '0 2px 12px rgba(0,0,0,0.06)',
-              }}
-            >
-              <IconArrowLeft size={20} stroke={2} />
-              <VisuallyHidden>Tombol kembali</VisuallyHidden>
-            </ActionIcon>
-          </Box>
-
-          <Paper
-            radius="lg"
-            p={{ base: 'md', md: 'xl' }}
-            style={{
-              background: 'linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%)',
-              border: '1px solid #e2e8f0',
-              boxShadow: '0 6px 24px rgba(0,0,0,0.06)',
-            }}
-            role="search"
-            aria-label="Pencarian sekolah"
-          >
-            <Stack gap="md">
-              <Center>
-                <motion.div
-                  initial={{ opacity: 0, y: -8 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.45, ease: 'easeOut' }}
-                >
-                  <Text
-                    ta="center"
-                    c="#0f172a"
-                    fz={{ base: 22, md: 30 }}
-                    fw={800}
-                    style={{ letterSpacing: -0.3 }}
-                  >
-                    Cari Informasi Sekolah
-                  </Text>
-                  <Text ta="center" c="dimmed" fz="sm" mt={6}>
-                    Masukkan nama, jenjang, atau alamat sekolah untuk hasil lebih spesifik.
-                  </Text>
-                </motion.div>
-              </Center>
-
-              <Group align="center" justify="center" gap="sm" style={{ width: '100%' }}>
-                <TextInput
-                  value={query}
-                  onChange={(e) => setQuery(e.currentTarget.value)}
-                  placeholder="Contoh: SMP Negeri, SD 01, Kelurahan..."
-                  leftSection={<IconSearch size={18} aria-hidden />}
-                  aria-label="Masukkan kata kunci pencarian"
-                  radius="xl"
-                  size="md"
-                  rightSection={
-                    <Button
-                      radius="xl"
-                      size="sm"
-                      aria-label="Telusuri"
-                      onClick={() => {}}
-                      style={{
-                        height: 38,
-                        minWidth: 110,
-                        background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)',
-                        color: 'white',
-                        boxShadow: '0 4px 16px rgba(59,130,246,0.3)',
-                      }}
-                    >
-                      Telusuri
-                    </Button>
-                  }
-                  rightSectionWidth={120}
-                  style={{
-                    width: '100%',
-                    maxWidth: 920,
-                  }}
-                />
-              </Group>
-
-              <Group justify="center" gap="xs" wrap="wrap" style={{ marginTop: 4 }}>
-                {kategoriList.map((k) => {
-                  const aktif = k === kategoriAktif;
-                  return (
-                    <motion.div
-                      key={k}
-                      initial={{ scale: 0.98, opacity: 0.9 }}
-                      animate={{ scale: 1, opacity: 1 }}
-                      whileHover={{ scale: 1.02 }}
-                    >
-                      <Button
-                        onClick={() => setKategoriAktif(k)}
-                        radius="xl"
-                        size="sm"
-                        variant={aktif ? 'filled' : 'light'}
-                        style={{
-                          background: aktif
-                            ? 'linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%)'
-                            : 'white',
-                          color: aktif ? 'white' : '#2563eb',
-                          boxShadow: aktif ? '0 4px 16px rgba(59,130,246,0.25)' : 'none',
-                          border: '1px solid #e2e8f0',
-                        }}
-                      >
-                        {k}
-                      </Button>
-                    </motion.div>
-                  );
-                })}
-              </Group>
-            </Stack>
-          </Paper>
-
-          <Box aria-live="polite" aria-atomic>
-            <Text fz="sm" c="dimmed">
-              Menampilkan <Text component="span" c="#0f172a" fw={700}>{hasilCount}</Text> hasil.
-            </Text>
-          </Box>
-
-          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
-            {filtered.length === 0 ? (
-              <Paper
-                p="xl"
-                radius="md"
-                style={{
-                  background: '#f9fafb',
-                  border: '1px dashed #e2e8f0',
-                  minHeight: 220,
-                }}
-                role="status"
-                aria-label="Tidak ada hasil"
-              >
-                <Center style={{ minHeight: 180, flexDirection: 'column' }}>
-                  <Text fz="lg" fw={800} c="#2563eb">
-                    Tidak ditemukan
-                  </Text>
-                  <Text c="dimmed" mt="6px">
-                    Coba gunakan kata kunci lain atau setel ulang filter.
-                  </Text>
-                  <Button
-                    mt="md"
-                    radius="xl"
-                    onClick={() => {
-                      setQuery('');
-                      setKategoriAktif('Semua');
-                    }}
-                    style={{
-                      background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)',
-                      color: 'white',
-                      boxShadow: '0 6px 18px rgba(59,130,246,0.25)',
-                    }}
-                    aria-label="Tampilkan semua"
-                  >
-                    Tampilkan Semua
-                  </Button>
-                </Center>
-              </Paper>
-            ) : (
-              filtered.map((v) => {
-                const percent = Math.round((v.jumlah / maxJumlah) * 100) || 0;
-                return (
-                  <motion.div
-                    key={v.id}
-                    whileHover={{ scale: 1.025 }}
-                    whileTap={{ scale: 0.995 }}
-                    style={{ width: '100%' }}
-                  >
-                    <Paper
-                      p="lg"
-                      radius="lg"
-                      style={{
-                        background: 'white',
-                        border: '1px solid #e2e8f0',
-                        boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
-                        minHeight: 260,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        justifyContent: 'space-between',
-                      }}
-                      role="article"
-                      aria-label={`${v.nama} kartu statistik`}
-                    >
-                      <Stack gap="sm">
-                        <Center>
-                          <Box
-                            style={{
-                              width: 80,
-                              height: 80,
-                              borderRadius: 16,
-                              display: 'flex',
-                              alignItems: 'center',
-                              justifyContent: 'center',
-                              background: '#eff6ff',
-                              boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
-                            }}
-                            aria-hidden
-                          >
-                            {React.createElement(v.icon, {
-                              color: '#2563eb',
-                              size: 34,
-                              stroke: 1.6,
-                            })}
-                          </Box>
-                        </Center>
-
-                        <Group justify="apart" align="center" gap="xs">
-                          <Stack gap={0}>
-                            <Text fz={{ base: 18, md: 22 }} fw={800} c="#0f172a">
-                              {v.jumlah.toLocaleString()}
-                            </Text>
-                            <Group gap={6} align="center">
-                              <Text fz="sm" fw={700} c="#2563eb">
-                                {v.nama}
-                              </Text>
-                              <Tooltip label={v.helper ?? ''} position="right" withArrow>
-                                <ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
-                                  <IconInfoCircle size={16} style={{ color: '#2563eb' }} />
-                                </ActionIcon>
-                              </Tooltip>
-                            </Group>
-                          </Stack>
-
-                          <Badge
-                            radius="md"
-                            variant="light"
-                            style={{
-                              background: '#eff6ff',
-                              color: '#2563eb',
-                              border: '1px solid #e2e8f0',
-                            }}
-                          >
-                            Statistik
-                          </Badge>
-                        </Group>
-
-                        <Box>
-                          <Progress
-                            value={percent}
-                            size="sm"
-                            radius="xl"
-                            aria-label={`${v.nama} progres ${percent} persen`}
-                          />
-                          <Text fz="xs" c="dimmed" mt="6px">
-                            Perbandingan dengan jumlah terbesar.
-                          </Text>
-                        </Box>
-                      </Stack>
-
-                      <Group justify="right" mt="8px">
-                        <Button
-                          radius="xl"
-                          variant="outline"
-                          onClick={() => {}}
-                          aria-label={`Lihat detail ${v.nama}`}
-                          style={{
-                            borderColor: '#e2e8f0',
-                            color: '#2563eb',
-                            paddingLeft: 20,
-                            paddingRight: 20,
-                          }}
-                        >
-                          Lihat Detail
-                        </Button>
-                      </Group>
-                    </Paper>
-                  </motion.div>
-                );
-              })
-            )}
-          </SimpleGrid>
-        </Stack>
-      </Container>
-    </Box>
-  );
-}

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/content.tsx

@@ -0,0 +1,260 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import { Box, Button, Center, Container, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip, ActionIcon } from '@mantine/core';
+import { IconChalkboard, IconMicroscope, IconProps, IconRefresh, IconSchool, IconInfoCircle } from '@tabler/icons-react';
+import { motion } from 'framer-motion';
+import { useTransitionRouter } from 'next-view-transitions';
+import React from 'react';
+import { useCallback, useEffect, useState } from 'react';
+
+
+
+interface Stat {
+  jenjangPendidikan: any;
+  icon: React.ComponentType<IconProps>;
+  jumlah: number;
+  nama: string;
+  helper?: string;
+  loading?: boolean;
+}
+
+export default function KategoriPage({ jenjangPendidikan }: { jenjangPendidikan: string }) {
+  const router = useTransitionRouter();
+  const [stats, setStats] = useState<Stat[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  
+  // Decode the URL parameter
+  const decodedJenjangPendidikan = decodeURIComponent(jenjangPendidikan);
+  const jenjangFilter = decodedJenjangPendidikan.toLowerCase() === 'semua' 
+    ? undefined 
+    : decodedJenjangPendidikan;
+
+  const loadData = useCallback(async () => {
+    if (!decodedJenjangPendidikan) return;
+    
+    try {
+      setIsLoading(true);
+      
+      // Load all data in parallel with the jenjang filter
+      await Promise.all([
+        infoSekolahPaud.lembagaPendidikan.findMany.load(1, 100, '', jenjangFilter),
+        infoSekolahPaud.siswa.findMany.load(1, 100, '', jenjangFilter),
+        infoSekolahPaud.pengajar.findMany.load(1, 100, '', jenjangFilter),
+      ]);
+
+      // Get filtered totals based on jenjang
+      const totalLembaga = infoSekolahPaud.lembagaPendidikan.findMany.total || 0;
+      const totalSiswa = infoSekolahPaud.siswa.findMany.total || 0;
+      const totalPengajar = infoSekolahPaud.pengajar.findMany.total || 0;
+
+      setStats([
+        {
+         
+          icon: IconChalkboard,
+          jumlah: totalLembaga,
+          nama: 'Lembaga Pendidikan',
+          helper: 'Jumlah institusi pendidikan resmi di wilayah ini',
+          loading: false,
+          jenjangPendidikan: decodedJenjangPendidikan,
+        },
+        {
+          icon: IconSchool,
+          jumlah: totalSiswa,
+          nama: 'Siswa Terdaftar',
+          helper: 'Total siswa aktif di semua jenjang',
+          loading: false,
+          jenjangPendidikan: decodedJenjangPendidikan,
+        },
+        {
+          icon: IconMicroscope,
+          jumlah: totalPengajar,
+          nama: 'Tenaga Pengajar',
+          helper: 'Jumlah guru dan staf pengajar aktif',
+          loading: false,
+          jenjangPendidikan: decodedJenjangPendidikan,
+        },
+      ]);
+    } catch (error) {
+      console.error('Error loading data:', error);
+      // Set error state or show toast notification
+    } finally {
+      setIsLoading(false);
+    }
+  }, [decodedJenjangPendidikan, jenjangFilter]);
+
+  useEffect(() => {
+    loadData();
+  }, [loadData, decodedJenjangPendidikan]);
+
+  const handleRefresh = () => {
+    loadData();
+  };
+
+  const hasilCount = stats.reduce((sum, stat) => sum + stat.jumlah, 0);
+  const filtered = stats;
+
+  if (isLoading) {
+    return (
+      <Box style={{ minHeight: '100vh', background: '#f8fafc', padding: '48px 0' }}>
+        <Container size="xl">
+          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+            {[1, 2, 3].map((i) => (
+              <Skeleton key={i} height={260} radius="lg" />
+            ))}
+          </SimpleGrid>
+        </Container>
+      </Box>
+    );
+  }
+
+  return (
+    <Box style={{ minHeight: '100vh', background: '#f8fafc', paddingBottom: 48 }}>
+      <Container size="xl" py={{ base: 'md', md: 'xl' }}>
+        <Box>
+          <Group justify="space-between" mb="md">
+            <Box aria-live="polite" aria-atomic>
+              <Text fz="sm" c="dimmed">
+                Menampilkan <Text component="span" c="#0f172a" fw={700}>{hasilCount}</Text> hasil.
+              </Text>
+            </Box>
+            <Button
+              leftSection={<IconRefresh size={16} />}
+              variant="outline"
+              size="xs"
+              onClick={handleRefresh}
+              loading={stats.some(stat => stat.loading)}
+            >
+              Segarkan Data
+            </Button>
+          </Group>
+
+          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+            {filtered.length === 0 ? (
+              <Paper
+                p="xl"
+                radius="md"
+                style={{
+                  background: '#f9fafb',
+                  border: '1px dashed #e2e8f0',
+                  minHeight: 220,
+                }}
+                role="status"
+                aria-label="Tidak ada hasil"
+              >
+                <Center style={{ minHeight: 180, flexDirection: 'column' }}>
+                  <Text fz="lg" fw={800} c="#2563eb">
+                    Tidak ditemukan
+                  </Text>
+                  <Text c="dimmed" mt="6px">
+                    Coba gunakan kata kunci lain atau setel ulang filter.
+                  </Text>
+                  <Button
+                    mt="md"
+                    radius="xl"
+                    onClick={handleRefresh}
+                    style={{
+                      background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)',
+                      color: 'white',
+                      boxShadow: '0 6px 18px rgba(59,130,246,0.25)',
+                    }}
+                    aria-label="Tampilkan semua"
+                  >
+                    Tampilkan Semua
+                  </Button>
+                </Center>
+              </Paper>
+            ) : (
+              filtered.map((v) => (
+                <motion.div
+                  key={v.nama}
+                  whileHover={{ scale: 1.025 }}
+                  whileTap={{ scale: 0.995 }}
+                  style={{ width: '100%' }}
+                >
+                  <Skeleton visible={v.loading}>
+                  <Paper
+                    p="lg"
+                    radius="lg"
+                    style={{
+                      background: 'white',
+                      border: '1px solid #e2e8f0',
+                      boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
+                      minHeight: 260,
+                    }}
+                    role="article"
+                    aria-label={`${v.nama} kartu statistik`}
+                  >
+                    <Stack gap="sm" mb="md">
+                      <Center>
+                        <Box
+                          style={{
+                            width: 80,
+                            height: 80,
+                            borderRadius: 16,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            background: '#eff6ff',
+                            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
+                          }}
+                          aria-hidden
+                        >
+                          {React.createElement(v.icon, {
+                            color: '#2563eb',
+                            size: 34,
+                            stroke: 1.6,
+                          })}
+                        </Box>
+                      </Center>
+
+                      <Group justify="center" align="center" gap="xs">
+                        <Stack gap={0}>
+                          <Text ta={"center"} fz={{ base: 18, md: 22 }} fw={800} c="#0f172a">
+                            {v.jumlah.toLocaleString()}
+                          </Text>
+                          <Group gap={6} align="center">
+                            <Text ta={"center"} fz="sm" fw={700} c="#2563eb">
+                              {v.nama}
+                            </Text>
+                            <Tooltip label={v.helper ?? ''} position="right" withArrow>
+                              <ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
+                                <IconInfoCircle size={16} style={{ color: '#2563eb' }} />
+                              </ActionIcon>
+                            </Tooltip>
+                          </Group>
+                        </Stack>
+                      </Group>
+                    </Stack>
+
+                    <Group justify="center" mt="8px">
+                      <Button
+                        radius="xl"
+                        variant="outline"
+                        aria-label={`Lihat detail ${v.nama}`}
+                        style={{
+                          borderColor: '#e2e8f0',
+                          color: '#2563eb',
+                          paddingLeft: 20,
+                          paddingRight: 20,
+                        }}
+                        onClick={() => {
+                          if (v.nama === "Lembaga Pendidikan") router.push(`/darmasaba/pendidikan/info-sekolah/${jenjangPendidikan}/lembaga`);
+                          if (v.nama === "Siswa Terdaftar") router.push(`/darmasaba/pendidikan/info-sekolah/${jenjangPendidikan}/siswa`);
+                          if (v.nama === "Tenaga Pengajar") router.push(`/darmasaba/pendidikan/info-sekolah/${jenjangPendidikan}/pengajar`);
+                        }}        
+                      >
+                        Lihat Detail
+                      </Button>
+                    </Group>
+                  </Paper>
+                  </Skeleton>
+                </motion.div>
+              ))
+            )}
+          </SimpleGrid>
+        </Box>
+      </Container>
+    </Box>
+  );
+}

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/lembaga/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { use } from 'react';
+
+
+interface PageProps {
+  params: Promise<{ jenjangPendidikan: string }>
+}
+
+function Page({ params }: PageProps) {
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const { jenjangPendidikan } = use(params);
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    // Decode the URL parameter and pass it to load
+    const decodedJenjang = decodeURIComponent(jenjangPendidikan).toLowerCase()
+    load(page, 10, '', decodedJenjang === 'semua' ? '' : decodedJenjang)
+  }, [page, jenjangPendidikan])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data lembaga pendidikan</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="50%">Nama Lembaga</TableTh>
+                <TableTh w="50%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd fw={500}>{item.nama}</TableTd>
+                  <TableTd>{item.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/page.tsx

@@ -0,0 +1,14 @@
+// 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<{ jenjangPendidikan: string }> }) {
+  const { jenjangPendidikan } = await params;
+
+  return (
+    <Suspense fallback={<div>Loading...</div>}>
+      <Content jenjangPendidikan={jenjangPendidikan} />
+    </Suspense>
+  );
+}

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/pengajar/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { use } from 'react';
+
+
+interface PageProps {
+  params: Promise<{ jenjangPendidikan: string }>
+}
+
+function Page({ params }: PageProps) {
+  const stateList = useProxy(infoSekolahPaud.pengajar)
+  const { jenjangPendidikan } = use(params);
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    // Decode the URL parameter and pass it to load
+    const decodedJenjang = decodeURIComponent(jenjangPendidikan).toLowerCase()
+    load(page, 10, '', decodedJenjang === 'semua' ? '' : decodedJenjang)
+  }, [page, jenjangPendidikan])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Pengajar</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data pengajar</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="30%">Nama Pengajar</TableTh>
+                <TableTh w="30%">Nama Lembaga</TableTh>
+                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd fw={500}>{item.nama}</TableTd>
+                  <TableTd>{item.lembaga.nama}</TableTd>
+                  <TableTd>{item.lembaga.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/info-sekolah/[jenjangPendidikan]/siswa/page.tsx

@@ -0,0 +1,111 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { use } from 'react';
+
+
+interface PageProps {
+  params: Promise<{ jenjangPendidikan: string }>
+}
+
+function Page({ params }: PageProps) {
+  const stateList = useProxy(infoSekolahPaud.siswa)
+  const { jenjangPendidikan } = use(params);
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    // Decode the URL parameter and pass it to load
+    const decodedJenjang = decodeURIComponent(jenjangPendidikan).toLowerCase()
+    load(page, 10, '', decodedJenjang === 'semua' ? '' : decodedJenjang)
+  }, [page, jenjangPendidikan])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Siswa</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data siswa</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="30%">Nama Siswa</TableTh>
+                <TableTh w="30%">Nama Lembaga</TableTh>
+                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd fw={500}>{item.nama}</TableTd>
+                  <TableTd>{item.lembaga.nama}</TableTd>
+                  <TableTd>{item.lembaga.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/info-sekolah/_lib/layoutTabs.tsx

@@ -0,0 +1,127 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Container,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  VisuallyHidden,
+} from '@mantine/core';
+import { IconArrowLeft, IconSearch } from '@tabler/icons-react';
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+import React, { useState, useEffect } from 'react';
+
+type LayoutSekolahProps = {
+  title?: string;
+  jenjangPendidikanList?: string[];
+  children: React.ReactNode;
+};
+
+export default function LayoutSekolah({
+  title = 'Cari Informasi Sekolah',
+  jenjangPendidikanList = ['Semua', 'TK', 'SD', 'SMP', 'SMA'],
+  children,
+}: LayoutSekolahProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+
+  const initialQuery = searchParams.get('search') || '';
+  const initialJenjangPendidikan = searchParams.get('jenjangPendidikan') || 'Semua';
+
+  const [query, setQuery] = useState(initialQuery);
+  const [jenjangPendidikanAktif, setJenjangPendidikanAktif] = useState(initialJenjangPendidikan);
+  const [searchTimeout, setSearchTimeout] = useState<number | null>(null);
+
+  // Cleanup timeout
+  useEffect(() => {
+    return () => {
+      if (searchTimeout) clearTimeout(searchTimeout);
+    };
+  }, [searchTimeout]);
+
+  // Handle Search with debounce
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value;
+    
+    setQuery(val);
+
+    if (searchTimeout) clearTimeout(searchTimeout);
+    const t = window.setTimeout(() => {
+      const params = new URLSearchParams(searchParams.toString());
+      if (val) params.set('search', val);
+      else params.delete('search');
+      params.set('jenjangPendidikan', jenjangPendidikanAktif);
+      router.push(`${pathname}?${params.toString()}`);
+    }, 500);
+    setSearchTimeout(t);
+  };
+
+  // Handle jenjang pendidikan click
+  const handleJenjangPendidikanChange = (k: string) => {
+    // arahkan langsung ke route jenjang pendidikan
+    if (k.toLowerCase() === 'semua') {
+      setJenjangPendidikanAktif(k);
+      router.push(`/darmasaba/pendidikan/info-sekolah/semua`);
+    } else {
+      setJenjangPendidikanAktif(k);
+      router.push(`/darmasaba/pendidikan/info-sekolah/${encodeURIComponent(k.toLowerCase())}`);
+    }
+  };
+  
+
+  return (
+    <Box style={{ minHeight: '100vh', background: colors.Bg, paddingBottom: 48 }}>
+      <Container size="xl" py={{ base: 'md', md: 'xl' }}>
+        <Stack gap="lg">
+          {/* Back Button */}
+          <ActionIcon onClick={() => window.history.back()} variant="light" radius="md" size="lg">
+            <IconArrowLeft size={20} />
+            <VisuallyHidden>Kembali</VisuallyHidden>
+          </ActionIcon>
+
+          {/* Search & Filter */}
+          <Paper radius="lg" p="xl" withBorder>
+            <Stack gap="md">
+              <Text ta="center" fw={800} fz={28}>{title}</Text>
+
+              <TextInput
+                value={query}
+                onChange={handleSearchChange}
+                placeholder="Cari sekolah..."
+                leftSection={<IconSearch size={18} />}
+                radius="xl"
+                size="md"
+              />
+
+              <Group justify="center" gap="xs" wrap="wrap">
+                {jenjangPendidikanList.map((k) => {
+                  const aktif = k === jenjangPendidikanAktif;
+                  return (
+                    <Button
+                      key={k}
+                      onClick={() => handleJenjangPendidikanChange(k)}
+                      radius="xl"
+                      size="sm"
+                      variant={aktif ? 'filled' : 'light'}
+                    >
+                      {k}
+                    </Button>
+                  );
+                })}
+              </Group>
+            </Stack>
+          </Paper>
+
+          {/* Slot konten */}
+          {children}
+        </Stack>
+      </Container>
+    </Box>
+  );
+}

src/app/darmasaba/(pages)/pendidikan/info-sekolah/layout.tsx

@@ -0,0 +1,18 @@
+'use client'
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+const LayoutSekolah = dynamic(
+  () => import('./_lib/layoutTabs'),
+  { ssr: false }
+);
+
+function Layout({children} : {children: React.ReactNode}) {
+  return (
+    <LayoutSekolah>
+      {children}
+    </LayoutSekolah>
+  );
+}
+
+export default Layout;

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/lembaga/page.tsx

@@ -0,0 +1,100 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Lembaga Pendidikan</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data lembaga pendidikan</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="60%">Nama Lembaga</TableTh>
+                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd fw={500}>{item.nama}</TableTd>
+                  <TableTd>{item.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/page.tsx

@@ -0,0 +1,271 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Center,
+  Container,
+  Group,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+import type { IconProps } from '@tabler/icons-react';
+import {
+  IconChalkboard,
+  IconInfoCircle,
+  IconMicroscope,
+  IconRefresh,
+  IconSchool,
+} from '@tabler/icons-react';
+import { motion } from 'framer-motion';
+import { useTransitionRouter } from 'next-view-transitions';
+import React, { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+type Stat = {
+  icon: React.ComponentType<IconProps>;
+  jumlah: number;
+  nama: string;
+  helper?: string;
+  loading?: boolean;
+};
+
+export default function SekolahPage() {
+  const [stats, setStats] = useState<Stat[]>([
+    {
+      icon: IconChalkboard,
+      jumlah: 0,
+      nama: 'Lembaga Pendidikan',
+      helper: 'Jumlah institusi pendidikan resmi di wilayah ini',
+      loading: true,
+    },
+    {
+      icon: IconSchool,
+      jumlah: 0,
+      nama: 'Siswa Terdaftar',
+      helper: 'Total siswa aktif di semua jenjang',
+      loading: true,
+    },
+    {
+      icon: IconMicroscope,
+      jumlah: 0,
+      nama: 'Tenaga Pengajar',
+      helper: 'Jumlah guru dan staf pengajar aktif',
+      loading: true,
+    },
+  ]);
+  const router = useTransitionRouter()
+  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan);
+  const stateSiswa = useProxy(infoSekolahPaud.siswa);
+  const statePengajar = useProxy(infoSekolahPaud.pengajar);
+  const loadData = async () => {
+    try {
+      // Load lembaga data
+      await stateLembaga.findMany.load(1, 1, '');
+      const totalLembaga = stateLembaga.findMany.total || 0;
+
+      // Load siswa data
+      await stateSiswa.findMany.load(1, 1, '');
+      const totalSiswa = stateSiswa.findMany.total || 0;
+
+      // Load pengajar data
+      await statePengajar.findMany.load(1, 1, '');
+      const totalPengajar = statePengajar.findMany.total || 0;
+
+      setStats([
+        {
+          icon: IconChalkboard,
+          jumlah: totalLembaga,
+          nama: 'Lembaga Pendidikan',
+          helper: 'Jumlah institusi pendidikan resmi di wilayah ini',
+          loading: false,
+        },
+        {
+          icon: IconSchool,
+          jumlah: totalSiswa,
+          nama: 'Siswa Terdaftar',
+          helper: 'Total siswa aktif di semua jenjang',
+          loading: false,
+        },
+        {
+          icon: IconMicroscope,
+          jumlah: totalPengajar,
+          nama: 'Tenaga Pengajar',
+          helper: 'Jumlah guru dan staf pengajar aktif',
+          loading: false,
+        },
+      ]);
+    } catch (error) {
+      console.error('Error loading data:', error);
+      // Set error state or show toast notification
+    }
+  };
+
+  useEffect(() => {
+    loadData();
+  }, []);
+
+  const handleRefresh = () => {
+    setStats(prev => prev.map(stat => ({ ...stat, loading: true })));
+    loadData();
+  };
+  const [query] = useState('');
+  
+  const filtered = stats.filter((d) => {
+    const q = query.trim().toLowerCase();
+    if (!q) return true;
+    const teks = `${d.nama} ${d.jumlah}`.toLowerCase();
+    return teks.includes(q);
+  });
+
+  return (
+    <Paper radius="md" style={{ minHeight: '100vh', background: '#f8fafc', paddingBottom: 48 }}>
+      <Container size="xl" py={{ base: 'md', md: 'xl' }}>
+        <Box>
+          <Group justify="start" mb="md">
+            <Button
+              leftSection={<IconRefresh size={16} />}
+              variant="outline"
+              size="xs"
+              onClick={handleRefresh}
+              loading={stats.some(stat => stat.loading)}
+            >
+              Segarkan Data
+            </Button>
+          </Group>
+
+          <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+            {filtered.length === 0 ? (
+              <Paper
+                p="xl"
+                radius="md"
+                style={{
+                  background: '#f9fafb',
+                  border: '1px dashed #e2e8f0',
+                  minHeight: 220,
+                }}
+                role="status"
+                aria-label="Tidak ada hasil"
+              >
+                <Center style={{ minHeight: 180, flexDirection: 'column' }}>
+                  <Text fz="lg" fw={800} c="#2563eb">
+                    Tidak ditemukan
+                  </Text>
+                  <Text c="dimmed" mt="6px">
+                    Coba gunakan kata kunci lain atau setel ulang filter.
+                  </Text>
+                  <Button
+                    mt="md"
+                    radius="xl"
+                    onClick={handleRefresh}
+                    style={{
+                      background: 'linear-gradient(90deg, #3b82f6 0%, #60a5fa 100%)',
+                      color: 'white',
+                      boxShadow: '0 6px 18px rgba(59,130,246,0.25)',
+                    }}
+                    aria-label="Tampilkan semua"
+                  >
+                    Tampilkan Semua
+                  </Button>
+                </Center>
+              </Paper>
+            ) : (
+              filtered.map((v) => (
+                <motion.div
+                  key={v.nama}
+                  whileHover={{ scale: 1.025 }}
+                  whileTap={{ scale: 0.995 }}
+                  style={{ width: '100%' }}
+                >
+                  <Skeleton visible={v.loading}>
+                  <Paper
+                    p="lg"
+                    radius="lg"
+                    style={{
+                      background: 'white',
+                      border: '1px solid #e2e8f0',
+                      boxShadow: '0 8px 28px rgba(0,0,0,0.06)',
+                      minHeight: 260,
+                    }}
+                    role="article"
+                    aria-label={`${v.nama} kartu statistik`}
+                  >
+                    <Stack gap="sm" mb="md">
+                      <Center>
+                        <Box
+                          style={{
+                            width: 80,
+                            height: 80,
+                            borderRadius: 16,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            background: '#eff6ff',
+                            boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.6)',
+                          }}
+                          aria-hidden
+                        >
+                          {React.createElement(v.icon, {
+                            color: '#2563eb',
+                            size: 34,
+                            stroke: 1.6,
+                          })}
+                        </Box>
+                      </Center>
+
+                      <Group justify="center" align="center" gap="xs">
+                        <Stack gap={0}>
+                          <Text ta={"center"} fz={{ base: 18, md: 22 }} fw={800} c="#0f172a">
+                            {v.jumlah.toLocaleString()}
+                          </Text>
+                          <Group gap={6} align="center">
+                            <Text ta={"center"} fz="sm" fw={700} c="#2563eb">
+                              {v.nama}
+                            </Text>
+                            <Tooltip label={v.helper ?? ''} position="right" withArrow>
+                              <ActionIcon aria-label={`Info ${v.nama}`} variant="transparent" size="xs">
+                                <IconInfoCircle size={16} style={{ color: '#2563eb' }} />
+                              </ActionIcon>
+                            </Tooltip>
+                          </Group>
+                        </Stack>
+                      </Group>
+                    </Stack>
+
+                    <Group justify="center" mt="8px">
+                      <Button
+                        radius="xl"
+                        variant="outline"
+                        aria-label={`Lihat detail ${v.nama}`}
+                        style={{
+                          borderColor: '#e2e8f0',
+                          color: '#2563eb',
+                          paddingLeft: 20,
+                          paddingRight: 20,
+                        }}
+                        onClick={() => {
+                          if (v.nama === "Lembaga Pendidikan") router.push(`/darmasaba/pendidikan/info-sekolah/semua/lembaga`);
+                          if (v.nama === "Siswa Terdaftar") router.push(`/darmasaba/pendidikan/info-sekolah/semua/siswa`);
+                          if (v.nama === "Tenaga Pengajar") router.push(`/darmasaba/pendidikan/info-sekolah/semua/pengajar`);
+                        }}                        
+                      >
+                        Lihat Detail
+                      </Button>
+                    </Group>
+                  </Paper>
+                  </Skeleton>
+                </motion.div>
+              ))
+            )}
+          </SimpleGrid>
+        </Box>
+      </Container>
+    </Paper>
+  );
+}

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/pengajar/page.tsx

@@ -0,0 +1,102 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const stateList = useProxy(infoSekolahPaud.pengajar)
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Pengajar</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data pengajar</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="30%">Nama Pengajar</TableTh>
+                <TableTh w="30%">Nama Lembaga</TableTh>
+                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.nama}</TableTd>
+                  <TableTd>{item.lembaga.nama}</TableTd>
+                  <TableTd>{item.lembaga.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/info-sekolah/semua/siswa/page.tsx

@@ -0,0 +1,102 @@
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconSchool, IconLayersSubtract } from '@tabler/icons-react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const stateList = useProxy(infoSekolahPaud.siswa)
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateList.findMany
+
+  useShallowEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py="lg" gap="md">
+        <Skeleton h={40} radius="xl" />
+        <Skeleton h={500} radius="md" />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py="lg">
+      <Paper
+        bg={colors['white-1']}
+        p="lg"
+        radius="xl"
+        shadow="sm"
+        withBorder
+      >
+        <Group justify="space-between" align="center" mb="md">
+          <Group gap="sm">
+            <IconSchool size={28} stroke={1.5} color={colors['blue-button']} />
+            <Title order={2} fz="xl">Daftar Siswa</Title>
+          </Group>
+        </Group>
+
+        {filteredData.length === 0 ? (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <IconLayersSubtract size={48} stroke={1.5} color={"gray"} />
+            <Text fz="lg" c="dimmed">Belum ada data siswa</Text>
+          </Stack>
+        ) : (
+          <Table
+            striped
+            highlightOnHover
+            withTableBorder
+            withRowBorders
+            horizontalSpacing="md"
+            verticalSpacing="sm"
+            fz="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh w="30%">Nama Siswa</TableTh>
+                <TableTh w="30%">Nama Lembaga</TableTh>
+                <TableTh w="40%">Jenjang Pendidikan</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.nama}</TableTd>
+                  <TableTd>{item.lembaga.nama}</TableTd>
+                  <TableTd>{item.lembaga.jenjangPendidikan?.nama || '-'}</TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        )}
+      </Paper>
+
+      {filteredData.length > 0 && (
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            size="md"
+            radius="xl"
+            withEdges
+          />
+        </Center>
+      )}
+    </Box>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/pendidikan/pendidikan-non-formal/page.tsx

@@ -1,92 +1,107 @@
+'use client'
+import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
-import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { IconMapPin, IconTarget, IconBook2 } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
+  const stateTujuanPendidikanNonFormal = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
+  const stateTempatKegiatan = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
+  const stateJenisProgram = useProxy(pendidikanNonFormalState.stateJenisProgram);
+
+  useShallowEffect(() => {
+    stateTujuanPendidikanNonFormal.findById.load('edit');
+    stateTempatKegiatan.findById.load('edit');
+    stateJenisProgram.findById.load('edit');
+  }, []);
+
+  if (!stateTujuanPendidikanNonFormal.findById.data || !stateTempatKegiatan.findById.data || !stateJenisProgram.findById.data)
+    return (
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg" mih="100vh" justify="flex-start">
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }} pb={50}>
+          <Skeleton h={50} radius="xl" />
+          <Skeleton h={150} mt="lg" radius="md" />
+          <Skeleton h={150} mt="lg" radius="md" />
+        </Box>
+      </Stack>
+    );
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg" mih="100vh">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} pb={50}>
         <Box>
-          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} mb="sm">
             Pendidikan Non Formal
           </Title>
-          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
-            Pendidikan Non Formal adalah bentuk pendidikan di luar sekolah yang diselenggarakan secara terstruktur dan bertujuan memberikan keterampilan, pengetahuan, serta pengembangan karakter masyarakat dari berbagai usia dan latar belakang.
+          <Text ta="center" fz="lg" lh={1.6} c="black" maw={800} mx="auto">
+            Bentuk pendidikan di luar sekolah yang terstruktur, bertujuan memberikan keterampilan, pengetahuan, dan pengembangan karakter masyarakat dari berbagai usia serta latar belakang.
           </Text>
         </Box>
         <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2
-          }}
+          cols={{ base: 1, md: 2 }}
+          spacing="lg"
+          mt={40}
         >
-          <Box>
-            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Tujuan Program
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Memberikan kesempatan belajar yang fleksibel bagi warga desa</ListItem>
-                <ListItem fz={'h4'}>Meningkatkan keterampilan hidup dan kemandirian ekonomi</ListItem>
-                <ListItem fz={'h4'}>Mendorong partisipasi masyarakat dalam pembangunan desa</ListItem>
-                <ListItem fz={'h4'}>Mengurangi angka putus sekolah dan meningkatkan kualitas SDM</ListItem>
-              </List>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper h={{ base: 0, md: 210 }} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Tempat Kegiatan
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Balai Desa Darmasaba</ListItem>
-                <ListItem fz={'h4'}>TPK, Perpustakaan Desa, atau Posyandu</ListItem>
-                <ListItem fz={'h4'}>Bisa juga dilakukan secara mobile atau door to door</ListItem>
-              </List>
-            </Paper>
-          </Box>
-        </SimpleGrid>
-        <Box py={20}>
-          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-            <Title order={2} fw={'bold'} c={colors['blue-button']}>
-              Jenis Program yang Diselenggarakan
-            </Title>
-            <Text fz={'h4'}>Program Pendidikan Non Formal yang diselenggarakan di Desa Darmasaba meliputi:</Text>
+          <Paper
+            p="xl"
+            radius="lg"
+            bg={colors['white-trans-1']}
+            shadow="md"
+            withBorder
+          >
             <Stack>
-              <Box>
-                <Text fz={'h4'}> 1) Keaksaraan Fungsional</Text>
-                <List>
-                  <ListItem fz={'h4'}>Untuk warga yang belum bisa membaca dan menulis</ListItem>
-                </List>
-              </Box>
-              <Box>
-                <Text fz={'h4'}> 2) Pendidikan Kesetaraan (Paket A, B, C)</Text>
-                <List>
-                  <ListItem fz={'h4'}>Setara SD, SMP, dan SMA bagi yang tidak menyelesaikan pendidikan formal</ListItem>
-                </List>
-              </Box>
-              <Box>
-                <Text fz={'h4'}> 3) Pelatihan Keterampilan</Text>
-                <List>
-                  <ListItem fz={'h4'}>Menjahit, memasak, sablon, pertanian, peternakan, hingga teknologi digital</ListItem>
-                </List>
-              </Box>
-              <Box>
-                <Text fz={'h4'}> 4) Kursus & Pelatihan Soft Skill</Text>
-                <List>
-                  <ListItem fz={'h4'}>Public speaking, pengelolaan keuangan, kepemimpinan pemuda</ListItem>
-                </List>
-              </Box>
-              <Box>
-                <Text fz={'h4'}> 5) Pendidikan Keluarga & Parenting</Text>
-                <List>
-                  <ListItem fz={'h4'}>Untuk membekali orang tua dalam mendampingi tumbuh kembang anak</ListItem>
-                </List>
-              </Box>
+              <Tooltip label="Fokus utama program" withArrow>
+                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
+                  <IconTarget size={28} style={{ marginRight: 8 }} />
+                  Tujuan Program
+                </Title>
+              </Tooltip>
+              <Text fz="md" lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTujuanPendidikanNonFormal.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
+          <Paper
+            p="xl"
+            radius="lg"
+            bg={colors['white-trans-1']}
+            shadow="md"
+            withBorder
+          >
+            <Stack>
+              <Tooltip label="Lokasi pelaksanaan kegiatan" withArrow>
+                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
+                  <IconMapPin size={28} style={{ marginRight: 8 }} />
+                  Tempat Kegiatan
+                </Title>
+              </Tooltip>
+              <Text fz="md" lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateTempatKegiatan.findById.data?.deskripsi }} />
+            </Stack>
+          </Paper>
+        </SimpleGrid>
+        <Box py={40}>
+          <Paper
+            p="xl"
+            radius="lg"
+            bg={colors['white-trans-1']}
+            shadow="md"
+            withBorder
+          >
+            <Stack>
+              <Tooltip label="Ragam jenis program yang tersedia" withArrow>
+                <Title order={2} fw="bold" c={colors['blue-button']} mb="xs" flex="center">
+                  <IconBook2 size={28} style={{ marginRight: 8 }} />
+                  Jenis Program yang Diselenggarakan
+                </Title>
+              </Tooltip>
+              <Text fz="md" lh={1.7} c="dark" dangerouslySetInnerHTML={{ __html: stateJenisProgram.findById.data?.deskripsi }} />
             </Stack>
           </Paper>
         </Box>

src/app/darmasaba/(pages)/pendidikan/perpustakaan-digital/page.tsx

@@ -1,35 +1,34 @@
 'use client'
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { ActionIcon, Box, Button, Center, Flex, Group, Image, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from '@mantine/core';
 import { IconSearch, IconUser } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import Link from 'next/link';
-
-
-const dataSekolah = [
-  {
-    id: 1,
-    gambar: '/api/img/buku-1.png',
-    judul: 'Angkasa dan 56 Hari',
-    deskripsi: 'Angkasa dan 56 hari mengisahkan tentang sebuah perjuangan perihal asa yang belum usai. Tentang cinta pertama yang secara tiba-tiba menghilang dari kehidupan.'
-  },
-  {
-    id: 2,
-    gambar: '/api/img/buku-2.png',
-    judul: 'Sayuran Organik',
-    deskripsi: 'Buku ini membahas cara menanam sayuran secara organik, jenis-jenis sayuran organik, dan cara mengatasi hama dan penyakit. '
-  },
-  {
-    id: 3,
-    gambar: '/api/img/buku-3.png',
-    judul: 'Bali Tempo Dulu',
-    deskripsi: 'Buku Bali Tempo Doeloe oleh Adrian Vickers berisi berbagai catatan perjalanan yang menggambarkan kehidupan sosial budaya Bali di masa lampau.'
-  },
-]
-
+import { useProxy } from 'valtio/utils';
+import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
 
 function Page() {
+  const state = useProxy(perpustakaanDigitalState)
+  const [expandedId, setExpandedId] = useState<string | null>(null);
+  useShallowEffect(() => {
+    state.dataPerpustakaan.findMany.load()
+  }, [])
+
+  if (!state.dataPerpustakaan.findMany.load)
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }} pb={50}>
+          <Skeleton h={60} radius="xl" />
+          <Skeleton h={200} mt="lg" radius="md" />
+        </Box>
+      </Stack>
+    )
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -80,22 +79,54 @@ function Page() {
             base: 1,
             md: 3
           }}
+          style={{
+            alignItems: 'stretch'
+          }}
         >
-          {dataSekolah.map((v, k) => {
+          {state.dataPerpustakaan.findMany.data.map((v, k) => {
             return (
-              <Box key={k}>
+              <Box key={k} style={{ height: '100%' }}>
                 <motion.div
                   whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.8 }}
                   style={{ width: '100%', height: '100%' }}
                 >
-                  <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                    <Stack>
+                  <Paper 
+                    p={"xl"} 
+                    bg={colors['white-trans-1']} 
+                    w={{ base: "100%", md: "100%" }}
+                    style={{
+                      height: '100%',
+                      display: 'flex',
+                      flexDirection: 'column'
+                    }}
+                  >
+                    <Stack style={{ flex: 1 }}>
                       <Center>
-                        <Image src={v.gambar} alt='' w={{ base: 390, md: 1000 }}/>
+                        <Image src={v.image.link} alt='' w={{ base: 390, md: 1000 }} />
                       </Center>
                       <Text c={colors["blue-button"]} ta={'center'} fw={'bold'} fz={{ base: "h2", md: "h1" }}>{v.judul}</Text>
-                      <Text c={colors["blue-button"]} ta={'center'} fw={'bold'}>{v.deskripsi}</Text>
+                      <Spoiler
+                        showLabel={
+                          <Text fw="bold" fz="sm" c={colors['blue-button']}>
+                            Show more
+                          </Text>
+                        }
+                        hideLabel={
+                          <Text fw="bold" fz="sm" c={colors['blue-button']}>
+                            Hide details
+                          </Text>
+                        }
+                        expanded={expandedId === v.id}
+                        onExpandedChange={(isExpanded) => 
+                          setExpandedId(isExpanded ? v.id : null)
+                        }
+                      >
+                        <Text
+                          ta="justify"
+                          fz="sm"
+                          dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                        />
+                      </Spoiler>
                     </Stack>
                   </Paper>
                 </motion.div>

src/app/darmasaba/(pages)/pendidikan/program-pendidikan-anak/page.tsx

@@ -1,55 +1,96 @@
+'use client'
+import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
 import colors from '@/con/colors';
-import { Stack, Box, Title, Text, SimpleGrid, Paper, List, ListItem } from '@mantine/core';
-import React from 'react';
+import { Box, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip, Divider, Group } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { IconBook2, IconTargetArrow } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
+  const stateUnggulan = useProxy(stateProgramPendidikanAnak.programUnggulanState);
+  const stateTujuan = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
+
+  useShallowEffect(() => {
+    stateUnggulan.findById.load('edit');
+    stateTujuan.findById.load('edit');
+  }, []);
+
+  if (!stateUnggulan.findById.data || !stateTujuan.findById.data)
+    return (
+      <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }} pb={50}>
+          <Skeleton h={50} radius="xl" />
+          <Skeleton h={150} mt="lg" radius="md" />
+        </Box>
+      </Stack>
+    );
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
+
       <Box px={{ base: 'md', md: 100 }} pb={50}>
-        <Box>
-          <Title ta={'center'} order={1} fw={'bold'} c={colors['blue-button']}>
+        <Box mb="xl">
+          <Title ta="center" order={1} fw="bold" c={colors['blue-button']} mb="sm">
             Program Pendidikan Anak
           </Title>
-          <Text pb={20} ta={'justify'} fz={'xl'} px={{ base: 'md', md: 100 }}>
-            Desa Darmasaba berkomitmen untuk menciptakan generasi muda yang cerdas, berkarakter, dan berdaya saing melalui berbagai program pendidikan yang inklusif dan berkelanjutan. Pendidikan anak menjadi pondasi utama dalam mewujudkan masa depan desa yang lebih baik.
+          <Text ta="center" fz="lg" c="black" mb="lg" maw={800} mx="auto">
+            Desa Darmasaba berkomitmen mencetak generasi muda yang cerdas, berkarakter, dan siap bersaing melalui program pendidikan yang inklusif dan berkelanjutan.
           </Text>
+          <Divider size="sm" color={colors['blue-button']} mx="auto" maw={120} />
         </Box>
+
         <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2
-          }}
+          cols={{ base: 1, md: 2 }}
+          spacing="xl"
         >
-          <Box>
-            <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Tujuan Program
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Meningkatkan akses pendidikan yang merata dan berkualitas</ListItem>
-                <ListItem fz={'h4'}>Menumbuhkan semangat belajar sejak dini</ListItem>
-                <ListItem fz={'h4'}>Membentuk karakter anak yang berakhlak dan berwawasan lingkungan</ListItem>
-                <ListItem fz={'h4'}>Mendukung tumbuh kembang anak melalui pendekatan pendidikan yang holistik</ListItem>
-              </List>
-            </Paper>
-          </Box>
-          <Box>
-            <Paper h={{base: 0, md: 239}} p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Program Unggulan
-              </Title>
-              <List>
-                <ListItem fz={'h4'}>Bimbingan Belajar Gratis: Untuk siswa kurang mampu</ListItem>
-                <ListItem fz={'h4'}>Gerakan Literasi Desa: Meningkatkan minat baca sejak dini</ListItem>
-                <ListItem fz={'h4'}>Pelatihan Digital untuk Anak dan Remaja</ListItem>
-                <ListItem fz={'h4'}>Beasiswa Anak Berprestasi & Kurang Mampu</ListItem>
-              </List>
-            </Paper>
-          </Box> 
+          <Paper
+            p="xl"
+            radius="xl"
+            withBorder
+            bg="white"
+            shadow="md"
+            style={{ transition: 'transform 0.2s ease', cursor: 'default' }}
+          >
+            <Stack gap="sm">
+              <Group gap="sm">
+                <IconTargetArrow size={28} color={colors['blue-button']} />
+                <Title order={2} fw="bold" c={colors['blue-button']}>
+                  Tujuan Program
+                </Title>
+              </Group>
+              <Tooltip label="Detail tujuan program pendidikan anak" position="top-start" withArrow>
+                <Text fz="lg" lh={1.6} c="dark" dangerouslySetInnerHTML={{ __html: stateTujuan.findById.data?.deskripsi }} />
+              </Tooltip>
+            </Stack>
+          </Paper>
+
+          <Paper
+            p="xl"
+            radius="xl"
+            withBorder
+            bg="white"
+            shadow="md"
+            style={{ transition: 'transform 0.2s ease', cursor: 'default' }}
+          >
+            <Stack gap="sm">
+              <Group gap="sm">
+                <IconBook2 size={28} color={colors['blue-button']} />
+                <Title order={2} fw="bold" c={colors['blue-button']}>
+                  Program Unggulan
+                </Title>
+              </Group>
+              <Tooltip label="Detail program unggulan yang sedang berjalan" position="top-start" withArrow>
+                <Text fz="lg" lh={1.6} c="dark" dangerouslySetInnerHTML={{ __html: stateUnggulan.findById.data?.deskripsi }} />
+              </Tooltip>
+            </Stack>
+          </Paper>
         </SimpleGrid>
       </Box>
     </Stack>

src/app/darmasaba/_com/Footer.tsx

@@ -5,7 +5,7 @@ import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBr
 function Footer() {
   return (
     <Stack bg="linear-gradient(180deg, #1C6EA4, #124170)" c="white">
-      <Box w="100%" p="xl" h={{ base: 1800, md: 1100 }}>
+      <Box w="100%" p="xl">
         <Center>
           <Paper w="100%" bg="transparent" shadow="md" radius="lg" p="xl">
             <Box component="footer">

src/app/darmasaba/_com/Navbar.tsx

@@ -26,8 +26,8 @@ export function Navbar() {
       >
         <NavbarMainMenu listNavbar={navbarListMenu} />
 
-        <Stack hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
-          <Group justify="space-between">
+        <Box hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
+          <Group justify="space-between" wrap="nowrap">
             <ActionIcon
               variant="transparent"
               size="xl"
@@ -51,16 +51,23 @@ export function Navbar() {
             </Tooltip>
           </Group>
           {mobileOpen && (
-            <motion.div
-              initial={{ x: 300 }}
+            <Paper
+              component={motion.div}
+              initial={{ x: '100%' }}
               animate={{ x: 0 }}
+              exit={{ x: '100%' }}
               transition={{ duration: 0.2 }}
-              style={{ height: "100vh" }}
+              pos="absolute"
+              left={0}
+              right={0}
+              top="100%"
+              m={0}
+              radius={0}
             >
               <NavbarMobile listNavbar={navbarListMenu} />
-            </motion.div>
+            </Paper>
           )}
-        </Stack>
+        </Box>
       </Paper>
       {(item || isSearch) && <Box className="glass" />}
     </Box>
@@ -70,28 +77,34 @@ export function Navbar() {
 function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
   const router = useRouter();
   return (
-    <ScrollArea h="100vh" offsetScrollbars>
-      <Stack p="lg" gap="md" style={{ backgroundColor: "rgba(255, 255, 255, 0.25)" }}>
+    <ScrollArea.Autosize mah="calc(100vh - 80px)" offsetScrollbars>
+      <Stack p="md" gap="xs">
         {listNavbar.map((item, k) => (
-          <Stack key={k} gap={4}>
+          <Box key={k}>
             <Group
               justify="space-between"
               align="center"
+              p="xs"
               onClick={() => {
                 router.push(item.href);
                 stateNav.mobileOpen = false;
               }}
               style={{ cursor: "pointer" }}
             >
-              <Text c="dark.9" fw={600} fz="lg">
+              <Text c="dark.9" fw={600} fz="md">
                 {item.name}
               </Text>
-              <IconSquareArrowRight size={20} />
+              <IconSquareArrowRight size={18} />
             </Group>
-            {item.children && <NavbarMobile listNavbar={item.children} />}
-          </Stack>
+            {item.children && (
+              <Box pl="md">
+                <NavbarMobile listNavbar={item.children} />
+              </Box>
+            )}
+          </Box>
         ))}
       </Stack>
-    </ScrollArea>
+    </ScrollArea.Autosize>
   );
 }
+

src/con/navbar-list-menu.ts

@@ -302,12 +302,12 @@ const navbarListMenu = [
     }, {
         id: "8",
         name: "Pendidikan",
-        href: "/darmasaba/pendidikan/info-sekolah-paud",
+        href: "/darmasaba/pendidikan/info-sekolah",
         children: [
             {
                 id: "8.1",
-                name: "Info Sekolah & PAUD",
-                href: "/darmasaba/pendidikan/info-sekolah-paud"
+                name: "Info Sekolah",
+                href: "/darmasaba/pendidikan/info-sekolah/semua"
             },
             {
                 id: "8.2",