Sinkronisasi UI & API Admin - User Submenu Info Sekolah

src/app/admin/(dashboard)/_com/LeafletMultiMarkerMap.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { LatLngExpression } from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import { useEffect } from 'react';
+
+type MarkerData = {
+  position: [number, number];
+  popup: string;
+};
+
+type Props = {
+  center: [number, number];
+  markers: MarkerData[];
+  zoom?: number;
+  scrollWheelZoom?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export default function LeafletMultiMarkerMap({
+  center,
+  markers,
+  zoom = 13,
+  scrollWheelZoom = true,
+  className = '',
+  style = { height: '100%', width: '100%', zIndex: 0 },
+}: Props) {
+  // Fix for default marker icons in Next.js
+  useEffect(() => {
+    delete (L.Icon.Default.prototype as any)._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+      iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+    });
+  }, []);
+
+  return (
+    <div className={className} style={style}>
+      <MapContainer
+        center={center as LatLngExpression}
+        zoom={zoom}
+        scrollWheelZoom={scrollWheelZoom}
+        style={{ height: '100%', width: '100%' }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {markers.map((marker, index) => (
+          <Marker key={index} position={marker.position as LatLngExpression}>
+            <Popup>{marker.popup}</Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </div>
+  );
+}

src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts

@@ -56,13 +56,17 @@ const dataLingkunganDesaState = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       dataLingkunganDesaState.findMany.loading = true; // Use the full path to access the property
       dataLingkunganDesaState.findMany.page = page;
+      dataLingkunganDesaState.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.datalingkungandesa["find-many"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -67,10 +68,46 @@ const kegiatanDesa = proxy({
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
-      if (res.status === 200) {
-        kegiatanDesa.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      // Change to arrow function
+      kegiatanDesa.findMany.loading = true; // Use the full path to access the property
+      kegiatanDesa.findMany.page = page;
+      kegiatanDesa.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+        const res = await ApiFetch.api.lingkungan.kegiatandesa[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kegiatanDesa.findMany.data = res.data.data || [];
+          kegiatanDesa.findMany.total = res.data.total || 0;
+          kegiatanDesa.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load kegiatan desa:",
+            res.data?.message
+          );
+          kegiatanDesa.findMany.data = [];
+          kegiatanDesa.findMany.total = 0;
+          kegiatanDesa.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading kegiatan desa:", error);
+        kegiatanDesa.findMany.data = [];
+        kegiatanDesa.findMany.total = 0;
+        kegiatanDesa.findMany.totalPages = 1;
+      } finally {
+        kegiatanDesa.findMany.loading = false;
       }
     },
   },
@@ -244,6 +281,35 @@ const kegiatanDesa = proxy({
       kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
     },
   },
+  findFirst: {
+    data: null as Prisma.KegiatanDesaGetPayload<{
+      include: {
+        image: true;
+        kategoriKegiatan: true;
+      };
+    }> | null,
+    loading: false,
+    // findFirst.load()
+    async load(kategori?: string) {
+      this.loading = true;
+      try {
+        const res = await ApiFetch.api.lingkungan.kegiatandesa["find-first"].get({
+          query: kategori ? { kategori } : {},
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          this.data = res.data.data || null;
+        } else {
+          this.data = null;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kegiatan desa terbaru:", err);
+        this.data = null;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
 });
 
 // ========================================= KATEGORI kegiatan ========================================= //
@@ -269,9 +335,7 @@ const kategoriKegiatan = proxy({
       }
       try {
         kategoriKegiatan.create.loading = true;
-        const res = await ApiFetch.api.lingkungan.kategorikegiatan[
-          "create"
-        ].post(kategoriKegiatan.create.form);
+        const res = await ApiFetch.api.lingkungan.kategorikegiatan["create"].post(kategoriKegiatan.create.form);
         if (res.status === 200) {
           kategoriKegiatan.findMany.load();
           return toast.success("Data berhasil ditambahkan");
@@ -305,9 +369,7 @@ const kategoriKegiatan = proxy({
     }> | null,
     async load(id: string) {
       try {
-        const res = await fetch(
-          `/api/lingkungan/kategorikegiatan/${id}`
-        );
+        const res = await fetch(`/api/lingkungan/kategorikegiatan/${id}`);
         if (res.ok) {
           const data = await res.json();
           kategoriKegiatan.findUnique.data = data.data ?? null;
@@ -367,15 +429,12 @@ const kategoriKegiatan = proxy({
       }
 
       try {
-        const response = await fetch(
-          `/api/lingkungan/kategorikegiatan/${id}`,
-          {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/lingkungan/kategorikegiatan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }

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

@@ -52,15 +52,19 @@ const pengelolaanSampah = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       pengelolaanSampah.findMany.loading = true; // Use the full path to access the property
       pengelolaanSampah.findMany.page = page;
+      pengelolaanSampah.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.pengelolaansampah[
           "find-many"
         ].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {
@@ -265,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) {
@@ -287,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<{
@@ -302,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;
@@ -324,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",
@@ -359,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",
@@ -404,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/lingkungan/program-penghijauan.ts

@@ -56,13 +56,17 @@ const programPenghijauanState = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       programPenghijauanState.findMany.loading = true; // Use the full path to access the property
       programPenghijauanState.findMany.page = page;
+      programPenghijauanState.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.programpenghijauan["find-many"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -51,13 +52,46 @@ const jenjangPendidikan = proxy({
       id: string;
       nama: string;
     }> | null,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
-          "find-many"
-        ].get();
-      if (res.status === 200) {
-        jenjangPendidikan.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
+      jenjangPendidikan.findMany.loading = true; // Use the full path to access the property
+      jenjangPendidikan.findMany.page = page;
+      jenjangPendidikan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res =
+          await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
+            "find-many"
+          ].get({
+            query,
+          });
+
+        if (res.status === 200 && res.data?.success) {
+          jenjangPendidikan.findMany.data = res.data.data || [];
+          jenjangPendidikan.findMany.total = res.data.total || 0;
+          jenjangPendidikan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load jenjang pendidikan:",
+            res.data?.message
+          );
+          jenjangPendidikan.findMany.data = [];
+          jenjangPendidikan.findMany.total = 0;
+          jenjangPendidikan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading jenjang pendidikan:", error);
+        jenjangPendidikan.findMany.data = [];
+        jenjangPendidikan.findMany.total = 0;
+        jenjangPendidikan.findMany.totalPages = 1;
+      } finally {
+        jenjangPendidikan.findMany.loading = false;
       }
     },
   },
@@ -304,13 +338,53 @@ const lembagaPendidikan = proxy({
         };
       }>
     > | null,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
-          "find-many"
-        ].get();
-      if (res.status === 200) {
-        lembagaPendidikan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    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, 
+          ...(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 = 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 || 'No error message provided'
+          );
+          throw new Error(res.data?.message || 'Failed to load lembaga pendidikan');
+        }
+      } catch (error) {
+        console.error("Error loading lembaga pendidikan:", error);
+        lembagaPendidikan.findMany.data = [];
+        lembagaPendidikan.findMany.total = 0;
+        lembagaPendidikan.findMany.totalPages = 1;
+      } finally {
+        lembagaPendidikan.findMany.loading = false;
       }
     },
   },
@@ -554,16 +628,55 @@ const siswa = proxy({
     data: null as Array<
       Prisma.SiswaGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true;
+            };
+          };
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        siswa.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    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({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          siswa.findMany.data = res.data.data || [];
+          siswa.findMany.total = res.data.total || 0;
+          siswa.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load siswa:",
+            res.data?.message
+          );
+          siswa.findMany.data = [];
+          siswa.findMany.total = 0;
+          siswa.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        siswa.findMany.data = [];
+        siswa.findMany.total = 0;
+        siswa.findMany.totalPages = 1;
+      } finally {
+        siswa.findMany.loading = false;
       }
     },
   },
@@ -794,16 +907,56 @@ const pengajar = proxy({
     data: null as Array<
       Prisma.PengajarGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true
+            }
+          }
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        pengajar.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    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({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pengajar.findMany.data = res.data.data || [];
+          pengajar.findMany.total = res.data.total || 0;
+          pengajar.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load pengajar:",
+            res.data?.message
+          );
+          pengajar.findMany.data = [];
+          pengajar.findMany.total = 0;
+          pengajar.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pengajar:", error);
+        pengajar.findMany.data = [];
+        pengajar.findMany.total = 0;
+        pengajar.findMany.totalPages = 1;
+      } finally {
+        pengajar.findMany.loading = false;
       }
     },
   },
@@ -815,7 +968,9 @@ const pengajar = proxy({
     }> | null,
     async load(id: string) {
       try {
-        const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
+        const res = await fetch(
+          `/api/pendidikan/infosekolahpaud/pengajar/${id}`
+        );
         if (res.ok) {
           const data = await res.json();
           pengajar.findUnique.data = data.data ?? null;
@@ -948,7 +1103,8 @@ const pengajar = proxy({
               result
             );
             throw new Error(
-              result?.message || `Gagal mengupdate pengajar (${response.status})`
+              result?.message ||
+                `Gagal mengupdate pengajar (${response.status})`
             );
           }
 

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/data-lingkungan-desa/page.tsx

@@ -42,18 +42,10 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
   const router = useRouter();
 
   useEffect(() => {
-    load(page, 10)
-  }, [page])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.jumlah.toLowerCase().includes(keyword) ||
-      item.icon.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,

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)/lingkungan/program-penghijauan/page.tsx

@@ -126,7 +126,9 @@ function ListProgramPenghijauan({ search }: { search: string }) {
                 <TableTr key={item.id}>
                   <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
                   <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
-                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.judul }}></TableTd>
+                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }}>
+                    <Text lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.judul }}/>
+                  </TableTd>
                   <TableTd style={{ width: '10%' }}>
                     {iconMap[item.icon] && (
                       <Box title={item.icon}>

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/data-lingkungan-desa/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -6,17 +7,28 @@ export default async function dataLingkunganDesaFindMany(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) || '';
+
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
 
   try {
     const [data, total] = await Promise.all([
       prisma.dataLingkunganDesa.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.dataLingkunganDesa.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/findFirst.ts

@@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function KegiatanDesaFindFirst(context: Context) {
+    const kategori = (context.query.kategori as string) || '';
+
+    const where: any = { isActive: true };
+
+    if (kategori) {
+      where.kategoriKegiatan = {
+        name: { equals: kategori, mode: 'insensitive' }
+      };
+    }
+
+    try {
+    const data = await prisma.kegiatanDesa.findFirst({
+      where,
+      include: {
+        image: true,
+        kategoriKegiatan: true,
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+
+    return {
+      success: true,
+      message: "Berhasil ambil gotong royong terbaru",
+      data,
+    };
+  } catch (error) {
+    console.error('Error di findFirst:', error);
+    return {
+      success: false,
+      message: 'Gagal memuat gotong royong terbaru',
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/lingkungan/gotong-royong/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
@@ -5,12 +6,38 @@ import { Context } from "elysia";
 async function kegiatanDesaFindMany(context: Context) {
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const kategori = (context.query.kategori as string) || ''; // 🔥 Parameter kategori baru
   const skip = (page - 1) * limit;
 
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan kategori (jika ada)
+  if (kategori) {
+    where.kategoriKegiatan = {
+      nama: {
+        equals: kategori,
+        mode: 'insensitive' // Tidak case-sensitive
+      }
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { deskripsiSingkat: { contains: search, mode: 'insensitive' } },
+      { deskripsiLengkap: { contains: search, mode: 'insensitive' } },
+      { kategoriKegiatan: { nama: { contains: search, mode: 'insensitive' } } }
+    ];
+  }
+
+
   try {
     const [data, total] = await Promise.all([
       prisma.kegiatanDesa.findMany({
-        where: { isActive: true },
+        where,
         include: {
           kategoriKegiatan: true,
           image: true,
@@ -20,7 +47,7 @@ async function kegiatanDesaFindMany(context: Context) {
         orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
       }),
       prisma.kegiatanDesa.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

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

@@ -4,6 +4,7 @@ import KegiatanDesaDelete from "./del";
 import KegiatanDesaFindMany from "./findMany";
 import KegiatanDesaFindUnique from "./findUnique";
 import KegiatanDesaUpdate from "./updt";
+import KegiatanDesaFindFirst from "./findFirst";
 
 const KegiatanDesa = new Elysia({
   prefix: "/kegiatandesa",
@@ -16,6 +17,9 @@ const KegiatanDesa = new Elysia({
   // ✅ Find by ID
   .get("/:id", KegiatanDesaFindUnique)
 
+  // ✅ Find First
+  .get("/find-first", KegiatanDesaFindFirst)
+
   // ✅ Create
   .post("/create", KegiatanDesaCreate, {
     body: t.Object({

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/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -5,18 +6,28 @@ import { Context } from "elysia";
 export default async function pengelolaanSampahFindMany(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;
 
+  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.pengelolaanSampah.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.pengelolaanSampah.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

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/lingkungan/program-penghijauan/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -6,17 +7,26 @@ export default async function programPenghijauanFindMany(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) || '';
 
+  const where: any = { isActive: true };
+
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { judul: { contains: search, mode: 'insensitive' } },
+    ];
+  }
   try {
     const [data, total] = await Promise.all([
       prisma.programPenghijauan.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.programPenghijauan.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

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/jenjang-pendidikan/findMany.ts

@@ -1,15 +1,56 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function jenjangPendidikanFindMany() {
-    const data = await prisma.jenjangPendidikan.findMany();
-    return { 
-        success: true,
-        data: data.map((item: any) => {
-            return {
-                id: item.id,
-                nama: item.nama,
-            }
-        }),
+export default async function jenjangPendidikanFindMany(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" } },
+      { lembagas: { contains: search, mode: "insensitive" } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.jenjangPendidikan.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: "desc" },
+      }),
+      prisma.jenjangPendidikan.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil jenjang pendidikan dengan pagination",
+      data: data.map((item: any) => {
+        return {
+          id: item.id,
+          nama: item.nama,
+          lembagas: item.lembagas,
+        };
+      }),
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
     };
-}
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data jenjang pendidikan",
+    };
+  }
+}

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

@@ -1,16 +1,64 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // /api/berita/findManyPaginated.ts
 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 skip = (page - 1) * limit;
-
   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: { isActive: true },
+        where,
         include: {
           jenjangPendidikan: true,
           siswa: true,
@@ -18,18 +66,22 @@ async function lembagaPendidikanFindMany(context: Context) {
         },
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { jenjangPendidikan: { nama: 'asc' } },
       }),
-      prisma.kegiatanDesa.count({
-        where: { isActive: true }
+      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",
       data,
       page,
+      limit,
       totalPages: Math.ceil(total / limit),
       total,
     };
@@ -37,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,43 +1,97 @@
-// /api/berita/findManyPaginated.ts
+/* eslint-disable @typescript-eslint/no-explicit-any */
 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;
-
   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: { isActive: true },
+        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: { isActive: true }
+        where,
       })
     ]);
 
+    console.log('Fetched pengajar data count:', data.length);
+    console.log('Total pengajar count:', total);
+
     return {
       success: true,
       message: "Success fetch pengajar with pagination",
       data,
       page,
+      limit,
       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,96 @@
-// /api/berita/findManyPaginated.ts
+/* eslint-disable @typescript-eslint/no-explicit-any */
 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;
-
   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: { isActive: true },
+        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: { isActive: true }
+        where,
       })
     ]);
 
+    console.log('Fetched siswa data count:', data.length);
+    console.log('Total siswa count:', total);
+
     return {
       success: true,
       message: "Success fetch siswa with pagination",
       data,
       page,
+      limit,
       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)/desa/layanan/[id]/page.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import { useParams } from 'next/navigation';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import { Box, Button, Center, Container, Group, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../_com/BackButto';
@@ -34,46 +34,44 @@ function Page() {
   useEffect(() => {
     const loadData = async () => {
       if (!id) return;
-
       try {
         setLoading(true);
         await state.suratKeterangan.findUnique.load(id);
         const result = state.suratKeterangan.findUnique.data as unknown as LayananData;
         setData(result);
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Terjadi kesalahan saat memuat data:', error);
       } finally {
         setLoading(false);
       }
     };
-
     loadData();
   }, [id]);
 
   if (loading) {
     return (
-      <Center>
-        <Skeleton height={500} />
+      <Center h="100vh" bg={colors.Bg}>
+        <Skeleton height={500} radius="md" animate />
       </Center>
     );
   }
 
   if (!data) {
     return (
-      <Center>
-        <Text>Data tidak ditemukan</Text>
+      <Center h="100vh" bg={colors.Bg}>
+        <Text fz="xl" c="dimmed">Maaf, data layanan tidak ditemukan</Text>
       </Center>
     );
   }
 
   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>
-      <Container w={{ base: "100%", md: "50%" }}>
+      <Container w={{ base: "100%", md: "60%" }}>
         <Text
-          fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }}
+          fz={{ base: "2rem", md: "2.5rem", lg: "3rem" }}
           ta="center"
           fw="bold"
         >
@@ -81,19 +79,32 @@ function Page() {
         </Text>
       </Container>
       <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
+        <Stack gap="md">
           <Text
             dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-            fz={{ base: "h4", md: "h2" }}
-            pb={20}
+            fz={{ base: "md", md: "lg" }}
+            c="dark.7"
+            ta="justify"
           />
           {data.image2?.link && (
             <Center>
-              <Image src={data.image2.link} alt={data.name} />
+              <Image
+                src={data.image2.link}
+                alt={data.name}
+                radius="md"
+                maw={500}
+                mx="auto"
+                style={{ boxShadow: '0 0 20px rgba(28,110,164,0.2)' }}
+              />
             </Center>
           )}
-          <Group justify='center' mt="md">
-            <Button radius="lg" fz="h4" bg={colors['blue-button']}>
+          <Group justify="center" mt="md">
+            <Button
+              radius="xl"
+              size="lg"
+              variant="gradient"
+              gradient={{ from: '#1C6EA4', to: '#63B3ED' }}
+            >
               Ajukan Permohonan
             </Button>
           </Group>

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPendudukNonPermanent.tsx

@@ -1,62 +1,95 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Divider, Flex, Skeleton, Text } from '@mantine/core';
+import { ActionIcon, Box, Divider, Flex, Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function PelayananPendudukNonPermanent() {
-  const state = useProxy(stateLayananDesa)
-  const [loading, setLoading] = useState(false)
+  const state = useProxy(stateLayananDesa);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true)
-        await state.pelayananPendudukNonPermanen.findById.load('1')
+        setLoading(true);
+        await state.pelayananPendudukNonPermanen.findById.load('1');
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
-    }
-    loadData()
-  }, [])
+    };
+    loadData();
+  }, []);
+
+  const data = state.pelayananPendudukNonPermanen.findById.data;
 
-  const data = state.pelayananPendudukNonPermanen.findById.data
   return (
-    <Box>
+    <Box py="lg">
       {loading ? (
-        <Skeleton h={500} />
+        <Stack gap="lg">
+          <Skeleton height={40} radius="md" />
+          <Skeleton height={200} radius="md" />
+          <Skeleton height={30} radius="md" />
+        </Stack>
       ) : (
-        <Box>
-          <Box py={15}>
-            <Text fz={{ base: "h4", md: "h3" }} fw={"bold"}>{data?.name}</Text>
+        <Stack gap="xl">
+          <Box>
+            <Text fz={{ base: "xl", md: "2xl" }} fw={700} lh={1.3} c="dark">
+              {data?.name || "Judul belum tersedia"}
+            </Text>
           </Box>
-          <Text pb={20} fz={{ base: "sm", md: 'h3' }} ta={"justify"} dangerouslySetInnerHTML={{__html: data?.deskripsi || ''}} />
-          <Divider color={colors["blue-button"]} />
-          <Flex justify={"space-between"} py={20}>
-            <Text fz={{ base: "sm", md: 'h3' }}>25 May 2021 . Darmasaba</Text>
-            <Box>
-              <Flex gap={"lg"}>
-                <ActionIcon variant='transparent'>
-                  <IconBrandFacebook color={colors["blue-button"]} size={"30"} />
+
+          <Box>
+            {data?.deskripsi ? (
+              <Text
+                fz={{ base: "sm", md: "md" }}
+                lh={1.7}
+                ta="justify"
+                c="dimmed"
+                dangerouslySetInnerHTML={{ __html: data?.deskripsi }}
+              />
+            ) : (
+              <Text fz="sm" c="gray">Deskripsi belum tersedia.</Text>
+            )}
+          </Box>
+
+          <Divider color={colors["blue-button"]} size="sm" />
+
+          <Flex justify="space-between" align="center" wrap="wrap" gap="md">
+            <Text fz={{ base: "xs", md: "sm" }} c="dimmed">
+              25 Mei 2021 • Darmasaba
+            </Text>
+            <Group gap="md">
+              <Tooltip label="Bagikan ke Facebook" withArrow>
+                <ActionIcon size="lg" radius="xl" variant="subtle" color="blue">
+                  <IconBrandFacebook size={24} />
                 </ActionIcon>
-                <ActionIcon variant='transparent'>
-                  <IconBrandInstagram color={colors["blue-button"]} size={"30"} />
+              </Tooltip>
+              <Tooltip label="Bagikan ke Instagram" withArrow>
+                <ActionIcon size="lg" radius="xl" variant="subtle" color="pink">
+                  <IconBrandInstagram size={24} />
                 </ActionIcon>
-                <ActionIcon variant='transparent'>
-                  <IconBrandTwitter color={colors["blue-button"]} size={"30"} />
+              </Tooltip>
+              <Tooltip label="Bagikan ke Twitter" withArrow>
+                <ActionIcon size="lg" radius="xl" variant="subtle" color="blue">
+                  <IconBrandTwitter size={24} />
                 </ActionIcon>
-                <ActionIcon variant='transparent'>
-                  <IconBrandWhatsapp color={colors["blue-button"]} size={"30"} />
+              </Tooltip>
+              <Tooltip label="Bagikan ke WhatsApp" withArrow>
+                <ActionIcon size="lg" radius="xl" variant="subtle" color="green">
+                  <IconBrandWhatsapp size={24} />
                 </ActionIcon>
-              </Flex>
-            </Box>
+              </Tooltip>
+            </Group>
           </Flex>
-          <Divider color={colors["blue-button"]} pb={50} />
-        </Box>
+
+          <Divider color={colors["blue-button"]} size="sm" />
+        </Stack>
       )}
     </Box>
   );

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananPerizinanBerusaha.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
-import { Box, Button, Center, Group, Skeleton, Stepper, StepperCompleted, StepperStep, Text } from '@mantine/core';
+import { Box, Button, Center, Group, Loader, Stack, Stepper, StepperCompleted, StepperStep, Text, Title } from '@mantine/core';
+import { IconArrowLeft, IconArrowRight, IconCheck } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
@@ -18,7 +19,7 @@ function PelayananPerizinanBerusaha() {
         setLoading(true);
         await state.pelayananPerizinanBerusaha.findById.load('1')
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false);
       }
@@ -28,76 +29,87 @@ function PelayananPerizinanBerusaha() {
 
   const data = state.pelayananPerizinanBerusaha.findById.data;
   
-  if (!data) {
+  if (!data && !loading) {
     return (
-      <Center>
-        <Text>Data tidak tersedia</Text>
+      <Center mih={300}>
+        <Stack align="center" gap="sm">
+          <Text fz="lg" fw={500} c="dimmed">Belum ada informasi layanan yang tersedia</Text>
+          <Button component="a" href="https://oss.go.id" target="_blank" radius="xl">Kunjungi OSS</Button>
+        </Stack>
       </Center>
     );
   }
 
   return (
-    <Box>
+    <Box px={{ base: 'md', md: 'xl' }} py="lg">
       {loading ? (
-        <Center>
-          <Skeleton h={250} />
+        <Center mih={300}>
+          <Loader size="lg" color="blue" />
         </Center>
       ) : (
-        <Box>
-          <Box py={15}>
-            <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)</Text>
-          </Box>
-          <Text 
-            py={10} 
-            ta={"justify"} 
-            fz={{ base: "sm", md: 'h3' }} 
-            dangerouslySetInnerHTML={{ __html: data.deskripsi || '' }} 
-          />
-          <Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
-          <Box p={"xl"} w={{ base: "100%", md: "100%" }}>
-            <Stepper active={active} onStepClick={setActive} orientation="vertical"
-              styles={{
-                separator: {
-                  marginLeft: 25
-                },
-                step: {
-                  padding: '12px 0'
-                }
-              }}>
-              <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
-                Pendaftaran akun pada portal OSS
-              </StepperStep>
-              <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
-                Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
-              </StepperStep>
-              <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI">
-                Memilih KBLI dengan jenis usaha yang akan didaftarkan
-              </StepperStep>
-              <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
-                Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
-              </StepperStep>
-              <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
-                Proses verifikasi dan persetujuan oleh instansi terkait
-              </StepperStep>
-              <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
-                Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
-              </StepperStep>
-              <StepperCompleted>
-                Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
-              </StepperCompleted>
-            </Stepper>
+          <Stack gap="lg">
+            <Box>
+              <Title order={2} fw={700} fz={{ base: 22, md: 32 }} mb="sm">
+                Perizinan Berusaha Berbasis Risiko melalui OSS
+              </Title>
+              <Text fz={{ base: 'sm', md: 'md' }} c="dimmed">
+                Sistem Online Single Submission (OSS) untuk pendaftaran NIB
+              </Text>
+            </Box>
 
-            <Group justify="center" mt="xl">
-              <Button variant="default" onClick={prevStep}>Back</Button>
-              <Button onClick={nextStep}>Next step</Button>
-            </Group>
-            <Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>
-              Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
-              seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
-              resmi OSS <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">(https://oss.go.id/)</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.
+            <Text fz={{ base: 'sm', md: 'md' }} ta="justify" dangerouslySetInnerHTML={{ __html: data?.deskripsi || '' }} />
+
+            <Box>
+              <Text fw={600} mb="sm" fz={{ base: 'sm', md: 'lg' }}>Alur pendaftaran NIB:</Text>
+              <Stepper active={active} onStepClick={setActive} orientation="vertical" color="blue" radius="md"
+                styles={{
+                  step: { padding: '14px 0' },
+                  stepBody: { marginLeft: 8 }
+                }}
+              >
+                <StepperStep label="Langkah 1" description="Daftar Akun">
+                  <Text fz="sm">Membuat akun di portal OSS</Text>
+                </StepperStep>
+                <StepperStep label="Langkah 2" description="Isi Data Perusahaan">
+                  <Text fz="sm">Lengkapi informasi perusahaan, data pemegang saham, dan alamat</Text>
+                </StepperStep>
+                <StepperStep label="Langkah 3" description="Pilih KBLI">
+                  <Text fz="sm">Menentukan kode KBLI sesuai jenis usaha</Text>
+                </StepperStep>
+                <StepperStep label="Langkah 4" description="Unggah Dokumen">
+                  <Text fz="sm">Unggah akta pendirian, surat izin, dan dokumen wajib lainnya</Text>
+                </StepperStep>
+                <StepperStep label="Langkah 5" description="Verifikasi Instansi">
+                  <Text fz="sm">Menunggu verifikasi dan persetujuan dari pihak berwenang</Text>
+                </StepperStep>
+                <StepperStep label="Langkah 6" description="Terbit NIB">
+                  <Text fz="sm">Menerima NIB sebagai identitas resmi usaha</Text>
+                </StepperStep>
+                <StepperCompleted>
+                  <Center>
+                    <Stack align="center" gap="xs">
+                      <IconCheck size={40} color="green" />
+                      <Text fz="sm" fw={500}>Proses pendaftaran selesai</Text>
+                    </Stack>
+                  </Center>
+                </StepperCompleted>
+              </Stepper>
+
+              <Group justify="center" mt="lg">
+                <Button variant="light" leftSection={<IconArrowLeft size={18} />} onClick={prevStep} disabled={active === 0}>
+                  Kembali
+                </Button>
+                <Button rightSection={<IconArrowRight size={18} />} onClick={nextStep}>
+                  Lanjut
+                </Button>
+              </Group>
+            </Box>
+
+            <Text fz="sm" ta="justify" c="dimmed" mt="md">
+              Catatan: Persyaratan dan prosedur dapat berubah sewaktu-waktu. Untuk informasi resmi terbaru, silakan kunjungi situs{" "}
+              <a href="https://oss.go.id/" target="_blank" rel="noopener noreferrer">oss.go.id</a> atau hubungi instansi pemerintah terkait.
             </Text>
-          </Box>
-        </Box>
+          </Stack>
       )}
     </Box>
   );

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananSuratKeterangan.tsx

@@ -1,96 +1,124 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Group, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { IconFileDescription, IconInfoCircle } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useMemo, useState } from 'react';
-
 import { useProxy } from 'valtio/utils';
 
 function PelayananSuratKeterangan({ search }: { search: string }) {
   const [loading, setLoading] = useState(false);
-  const router = useRouter()
-  const state = useProxy(stateLayananDesa)
+  const router = useRouter();
+  const state = useProxy(stateLayananDesa);
+
   const filteredData = useMemo(() => {
     if (!state.suratKeterangan.findMany.data) return [];
-    return state.suratKeterangan.findMany.data.filter(item => {
+    return state.suratKeterangan.findMany.data.filter((item) => {
       const keyword = search.toLowerCase();
-      return (
-        item.name?.toLowerCase().includes(keyword)
-      );
-    })
+      return item.name?.toLowerCase().includes(keyword);
+    });
   }, [state.suratKeterangan.findMany.data, search]);
 
   useEffect(() => {
     const loadData = async () => {
       try {
         setLoading(true);
-        await state.suratKeterangan.findMany.load()
+        await state.suratKeterangan.findMany.load();
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false);
       }
-    }
-    loadData()
-  }, [])
+    };
+    loadData();
+  }, []);
+
   return (
-    <Box pb={10}>
-      <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>Pelayanan Surat Keterangan</Text>
+    <Box pb="xl">
+      <Group justify="space-between" align="center" mb="md">
+        <Group gap="xs">
+          <IconFileDescription size={28} stroke={1.8} color={colors["blue-button"]} />
+          <Text fz={{ base: "h4", md: "h2" }} fw={700}>
+            Layanan Surat Keterangan
+          </Text>
+        </Group>
+        <Tooltip label="Pilih layanan surat keterangan sesuai kebutuhan Anda" withArrow>
+          <IconInfoCircle size={22} stroke={1.8} color={colors["blue-button"]} />
+        </Tooltip>
+      </Group>
+
       <SimpleGrid
-        py={20}
-        cols={{
-          base: 1,
-          sm: 3
-        }}
+        py="lg"
+        cols={{ base: 1, sm: 2, md: 3 }}
+        spacing="lg"
       >
         {loading ? (
-          <Center>
-            <Skeleton h={250} />
+          Array.from({ length: 3 }).map((_, i) => (
+            <Skeleton key={i} h={250} radius="lg" />
+          ))
+        ) : filteredData.length === 0 ? (
+          <Center py="xl">
+            <Stack align="center" gap="xs">
+              <IconFileDescription size={40} stroke={1.5} color={colors["blue-button"]} />
+              <Text c="dimmed" ta="center">
+                Tidak ada layanan surat keterangan yang ditemukan
+              </Text>
+            </Stack>
           </Center>
         ) : (
-          filteredData.map((v, k) => {
-            return (
-              <BackgroundImage
-                key={k}
-                src={v.image?.link || ''}
-                h={250}
-                radius={16}
-                pos={"relative"}
-              >
-                <Box
-                  style={{
-                    borderRadius: 16,
-                    zIndex: 0
-                  }}
-                  pos={"absolute"}
-                  w={"100%"}
-                  h={"100%"}
-                  bg={colors.trans.dark[2]}
-                />
-                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                  <Box p={"lg"}>
-                    <Text
-                      c={"white"}
-                      size={"1.5rem"}
-                      style={{
-                        textAlign: "center",
-                      }}>{v.name}</Text>
-                  </Box>
-                  <Group justify="center">
-                    <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
-                      onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}>
-                      Detail
-                    </Button>
-                  </Group>
-                </Stack>
-              </BackgroundImage>
-            )
-          })
+          filteredData.map((v, k) => (
+            <BackgroundImage
+              key={k}
+              src={v.image?.link || ''}
+              h={250}
+              radius="lg"
+              pos="relative"
+              style={{
+                boxShadow: "0 4px 20px rgba(0,0,0,0.1)",
+                overflow: "hidden",
+              }}
+            >
+              <Box
+                pos="absolute"
+                w="100%"
+                h="100%"
+                bg="rgba(0,0,0,0.45)"
+                style={{ borderRadius: 16 }}
+              />
+              <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
+                <Text
+                  c="white"
+                  fw={600}
+                  fz="lg"
+                  ta="center"
+                  lineClamp={2}
+                >
+                  {v.name}
+                </Text>
+                <Group justify="center">
+                  <Button
+                    size="md"
+                    radius="xl"
+                    bg={colors["blue-button"]}
+                    px="lg"
+                    onClick={() => router.push(`/darmasaba/desa/layanan/${v.id}`)}
+                    style={{
+                      boxShadow: "0 0 12px rgba(59,130,246,0.6)",
+                      transition: "all 0.2s ease",
+                    }}
+                  >
+                    Lihat Detail
+                  </Button>
+                </Group>
+              </Stack>
+            </BackgroundImage>
+          ))
         )}
       </SimpleGrid>
     </Box>
-
   );
 }
 

src/app/darmasaba/(pages)/desa/layanan/_com/pelayananTelunjukSaktiDesa.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
-import { Box, Flex, Skeleton, Text, Title } from '@mantine/core';
+import { Box, Card, Flex, Grid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { IconExternalLink } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
@@ -11,22 +12,22 @@ interface ServiceItem {
 }
 
 function PelayananTelunjukSaktiDesa() {
-  const state = useProxy(stateLayananDesa)
-  const [loading, setLoading] = useState(false)
+  const state = useProxy(stateLayananDesa);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true)
-        await state.pelayananTelunjukSaktiDesa.findMany.load()
+        setLoading(true);
+        await state.pelayananTelunjukSaktiDesa.findMany.load();
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
-    }
-    loadData()
-  }, [])
+    };
+    loadData();
+  }, []);
 
   const data = (state.pelayananTelunjukSaktiDesa.findMany.data || []) as Array<{
     name: string;
@@ -37,28 +38,63 @@ function PelayananTelunjukSaktiDesa() {
     createdAt: Date;
     updatedAt: Date;
     deletedAt: Date | null;
-  }>
+  }>;
+
   return (
     <Box>
-      <Title fz="h2" py={10} mb="md">Terwujudnya Layanan umum bertajuk Sistim administrasi Kependudukan Terintegrasi di Desa berbasi Elektronik, Smart dan Aman. Layanan Telunjuk Sakti Desa meliputi :</Title>
+      <Title order={2} mb="lg" fz={{ base: 22, md: 28 }} fw={700} style={{ lineHeight: 1.4 }}>
+        Layanan Telunjuk Sakti Desa <br /> 
+        <Text span c="dimmed" fz="lg" fw={400}>
+          Terwujudnya sistem administrasi kependudukan terintegrasi berbasis elektronik, cerdas, dan aman
+        </Text>
+      </Title>
+
       {loading ? (
-        <Skeleton h={500} />
+        <Skeleton h={400} radius="lg" />
+      ) : data.length === 0 ? (
+        <Card shadow="sm" radius="lg" withBorder>
+          <Text c="dimmed" ta="center" py="xl">
+            Belum ada layanan tersedia untuk saat ini
+          </Text>
+        </Card>
       ) : (
-        data.map((v, k) => {
-          return (
-            <Box key={k}>
-              <Box py={10}>
-                <Flex gap={"3"} align={"center"}>
-                  <Text fz={{ base: "h4", md: "h3" }} fw={"bold"}>{v.name}
+        <Grid gutter="lg">
+          {data.map((v, k) => (
+            <Grid.Col span={{ base: 12, sm: 6, lg: 4 }} key={k}>
+              <Card
+                shadow="md"
+                radius="xl"
+                withBorder
+                p="lg"
+                style={{
+                  transition: 'all 0.3s ease',
+                  background: 'linear-gradient(145deg, #ffffff, #f8f9fa)',
+                }}
+              >
+                <Stack gap="sm">
+                  <Text fw={700} fz="lg" lh={1.4}>
+                    {v.name}
                   </Text>
-                  <Text span fz={{ base: "h4", md: "h3" }}>
-                    <a href={v.link} target="_blank" rel="noopener noreferrer" style={{ color: '#228be6' }}>{v.deskripsi}</a>
-                  </Text>
-                </Flex>
-              </Box>
-            </Box>
-          )
-        })
+                  <Flex gap="xs" align="center">
+                    <IconExternalLink size={18} stroke={1.5} />
+                    <Text
+                      component="a"
+                      href={v.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      fz="sm"
+                      c="blue"
+                      td="underline"
+                      style={{ cursor: 'pointer' }}
+                    >
+                      {v.deskripsi}
+                    </Text>
+                  </Flex>
+                </Stack>
+              </Card>
+            </Grid.Col>
+          ))}
+        </Grid>
       )}
     </Box>
   );

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

@@ -12,7 +12,7 @@ import PelayananPendudukNonPermanent from "./_com/pelayananPendudukNonPermanent"
 
 export default function Page() {
     const [search, setSearch] = useState("")
-    
+
 
     return (
         <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -40,14 +40,16 @@ export default function Page() {
                 </Stack>
             </Container>
             <Box px={{ base: "md", md: 100 }}>
-                {/* Bagian Pelayanan Surat Keterangan */}
-                <PelayananSuratKeterangan search={search} />
-                {/* Bagian Pelayanan Perizinan Berusaha */}
-                <PelayananPerizinanBerusaha/>
-                {/* Bagian Pelayanan Telunjuk Sakti Desa */}
-                <PelayananTelunjukSaktiDesa/>
-                 {/* Bagian Pelayanan Penduduk Non Permanent */}
-                 <PelayananPendudukNonPermanent/>
+                <Stack gap={"xl"}>
+                    {/* Bagian Pelayanan Surat Keterangan */}
+                    <PelayananSuratKeterangan search={search} />
+                    {/* Bagian Pelayanan Perizinan Berusaha */}
+                    <PelayananPerizinanBerusaha />
+                    {/* Bagian Pelayanan Telunjuk Sakti Desa */}
+                    <PelayananTelunjukSaktiDesa />
+                    {/* Bagian Pelayanan Penduduk Non Permanent */}
+                    <PelayananPendudukNonPermanent />
+                </Stack>
             </Box>
         </Stack>
     )

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

@@ -2,18 +2,18 @@
 'use client'
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import { Box, Center, Container, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, Container, Image, Loader, Paper, Stack, Text, Title } from '@mantine/core';
+import { IconMoodSad } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../layanan/_com/BackButto';
 
-
 function Page() {
   const params = useParams<{ id: string }>();
   const id = Array.isArray(params.id) ? params.id[0] : params.id;
-  const state = useProxy(potensiDesaState.potensiDesa)
-  const [loading, setLoading] = useState(true)
+  const state = useProxy(potensiDesaState.potensiDesa);
+  const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     const loadData = async () => {
@@ -22,54 +22,66 @@ function Page() {
         setLoading(true);
         await state.findUnique.load(id);
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false);
       }
-    }
-    loadData()
-  }, [id])
+    };
+    loadData();
+  }, [id]);
 
   if (loading) {
     return (
-      <Center>
-        <Skeleton height={500} />
+      <Center h="80vh">
+        <Stack align="center" gap="md">
+          <Loader size="lg" color="blue" />
+          <Text c="dimmed" fz="sm">Sedang memuat informasi...</Text>
+        </Stack>
       </Center>
     );
   }
 
   if (!state.findUnique.data) {
     return (
-      <Center>
-        <Text>Data tidak ditemukan</Text>
+      <Center h="80vh">
+        <Stack align="center" gap="sm">
+          <IconMoodSad size={64} stroke={1.5} color="var(--mantine-color-blue-6)" />
+          <Title order={3}>Data Tidak Ditemukan</Title>
+          <Text c="dimmed" fz="sm">Mohon periksa kembali atau coba beberapa saat lagi</Text>
+        </Stack>
       </Center>
     );
   }
 
-
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} px={{ base: "md", md: 0 }}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }} >
-        <Box pb={20}>
-          <Text ta={"center"} fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-            {state.findUnique.data?.name}
-          </Text>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"1.5rem"}
-          >
-            Informasi dan Pelayanan Administrasi Digital
-          </Text>
-        </Box>
-        <Image src={state.findUnique.data?.image?.link || ''} alt='' w={"100%"} />
-      </Container>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl" px={{ base: "md", md: 0 }}>
       <Box px={{ base: "md", md: 100 }}>
-        <Text py={20} fz={{ base: "sm", md: "lg" }} ta={"justify"}>
-          {state.findUnique.data?.deskripsi || ''}
-        </Text>
+        <BackButton />
       </Box>
+      <Container w={{ base: "100%", md: "60%" }}>
+        <Paper radius="2xl" shadow="lg" p="xl" withBorder>
+          <Stack gap="lg" align="center">
+            <Title ta="center" fz={{ base: "2rem", md: "3rem" }} c={colors["blue-button"]} fw={800}>
+              {state.findUnique.data?.name}
+            </Title>
+            <Text ta="center" fw={600} fz={{ base: "md", md: "lg" }} c="dimmed">
+              Informasi & Pelayanan Potensi Desa Digital
+            </Text>
+            <Image
+              src={state.findUnique.data?.image?.link || ''}
+              alt={state.findUnique.data?.name || 'Potensi Desa'}
+              radius="lg"
+              fit="cover"
+              w="100%"
+              h={{ base: 220, md: 400 }}
+              fallbackSrc="https://placehold.co/800x400?text=Gambar+tidak+tersedia"
+            />
+            <Text py="md" fz={{ base: "sm", md: "md" }} ta="justify" lh={1.8}>
+              {state.findUnique.data?.deskripsi || 'Belum ada deskripsi untuk potensi desa ini.'}
+            </Text>
+          </Stack>
+        </Paper>
+      </Container>
     </Stack>
   );
 }

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

@@ -1,27 +1,27 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { BackgroundImage, Box, Button, Center, Flex, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { IconEye } from '@tabler/icons-react';
 import { useTransitionRouter } from 'next-view-transitions';
-import BackButton from '../layanan/_com/BackButto';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
-
+import BackButton from '../layanan/_com/BackButto';
 
 function Page() {
   const router = useTransitionRouter()
   const [loading, setLoading] = useState(false)
   const state = useProxy(potensiDesaState)
 
-  useEffect(()=> {
+  useEffect(() => {
     state.kategoriPotensi.findMany.load()
     const loadData = async () => {
       try {
         setLoading(true)
         await state.potensiDesa.findMany.load()
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false)
       }
@@ -30,104 +30,121 @@ function Page() {
   }, [])
 
   const data = state.potensiDesa.findMany.data
-  // const kategoriData = state.kategoriPotensi.findMany.data
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"} >
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap={48}>
       <Box px={{ base: "md", md: 100 }}>
         <BackButton />
       </Box>
+
       <Box px={{ base: "md", md: 100 }}>
-        <Box>
-          <Stack gap={0}>
-            <Flex justify={"space-between"} align={"center"} >
+        <Flex justify="space-between" align="center" direction={{ base: "column", md: "row" }} gap="lg">
+          <Stack gap="sm" maw={600}>
+            <Text fz={{ base: "2rem", md: "3rem" }} fw={900} c={colors["blue-button"]} lh={1.2}>
+              Potensi Desa Darmasaba
+            </Text>
+            <Text fz="lg" c="dimmed" ta="justify">
+              Temukan berbagai potensi unggulan, peluang, dan daya tarik yang menjadikan Desa Darmasaba istimewa.
+            </Text>
+          </Stack>
+          <Paper
+            radius="2xl"
+            px="xl"
+            py="md"
+            bg={colors["blue-button"]}
+            shadow="xl"
+            withBorder
+          >
+            <Flex justify="center" align="center" gap="xl">
               <Box>
-                <Text fz={"3.4rem"} c={colors["blue-button"]} fw={"bold"}>
-                  Potensi Desa
+                <Text ta="center" fz="2rem" fw={800} c="white">
+                  {data?.filter(item => item.kategori?.nama.toLowerCase() !== 'wisata').length || 0}
                 </Text>
-                <Text ta={"justify"} >
-                  Temukan berbagai potensi dan keunggulan yang dimiliki Desa Darmasaba.
+                <Text ta="center" fz="sm" c="white" fw={500}>
+                  Potensi
+                </Text>
+              </Box>
+              <Box>
+                <Text ta="center" fz="2rem" fw={800} c="white">
+                  {data?.filter(item => item.kategori?.nama.toLowerCase() === 'wisata').length || 0}
+                </Text>
+                <Text ta="center" fz="sm" c="white" fw={500}>
+                  Wisata
                 </Text>
               </Box>
-              <Paper radius={"md"} px={"xl"} py={5} bg={colors["blue-button"]} >
-                <Flex justify={"space-between"} align={"center"} gap={"xl"}>
-                  <Box>
-                    <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
-                      {data?.filter(item => item.kategori?.nama.toLowerCase() !== 'wisata' ).length || 0}
-                    </Text>
-                    <Text ta={"center"} fz={"sm"} c={"white"}>Potensi</Text>
-                  </Box>
-                  <Box>
-                    <Text ta={"center"} fz={"h2"} fw={"bold"} c={"white"}>
-                      {data?.filter(item => item.kategori?.nama.toLowerCase() === 'wisata' ).length || 0}
-                    </Text>
-                    <Text ta={"center"} fz={"sm"} c={"white"}>Wisata</Text>
-                  </Box>
-                </Flex>
-              </Paper>
             </Flex>
-          </Stack>
-        </Box>
+          </Paper>
+        </Flex>
 
-        <SimpleGrid
-          py={20}
-          cols={{
-            base: 1,
-            sm: 3
-          }}
-        >
+        <SimpleGrid py={48} cols={{ base: 1, sm: 2, lg: 3 }} spacing="2xl">
           {loading ? (
-            <Center>
-              <Skeleton h={250} />
-            </Center>
-          ) : (
-            data?.map((v, k) => {
-            return (
+            Array.from({ length: 6 }).map((_, i) => (
+              <Skeleton key={i} h={360} radius="xl" />
+            ))
+          ) : data && data.length > 0 ? (
+            data.map((v, k) => (
               <BackgroundImage
                 key={k}
                 src={v.image?.link || ''}
-                h={350}
-                radius={16}
-                pos={"relative"}
+                h={360}
+                radius="xl"
+                style={{ overflow: 'hidden', position: 'relative' }}
               >
                 <Box
-                  style={{
-                    borderRadius: 16,
-                    zIndex: 0
-                  }}
-                  pos={"absolute"}
-                  w={"100%"}
-                  h={"100%"}
-                  bg={colors.trans.dark[2]}
+                  pos="absolute"
+                  inset={0}
+                  bg="linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.7) 100%)"
                 />
-                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
+                <Stack justify="space-between" h="100%" gap="md" p="lg" pos="relative">
                   <Group>
-                    <Paper radius={"lg"} py={7} px={10}>
-                      <Text>{v.kategori?.nama}</Text>
+                    <Paper radius="lg" py={6} px={12} shadow="md" withBorder bg="rgba(255,255,255,0.85)">
+                      <Text fz="sm" fw={600}>{v.kategori?.nama}</Text>
                     </Paper>
                   </Group>
-                  <Box p={"lg"}>
+                  <Box>
                     <Text
-                      fw={"bold"}
-                      c={"white"}
-                      size={"1.8rem"}
-                      style={{
-                        textAlign: "center",
-                      }}>{v.name}</Text>
+                      fw={800}
+                      c="white"
+                      fz="xl"
+                      ta="center"
+                      lineClamp={2}
+                      lh={1.3}
+                    >
+                      {v.name}
+                    </Text>
                   </Box>
                   <Group justify="center">
-                    <Button px={20} radius={"100"} size="md" bg={colors["blue-button"]}
-                      onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}>
-                      Detail
-                    </Button>
+                    <Tooltip label="Lihat detail potensi" withArrow>
+                      <Button
+                        radius="xl"
+                        size="md"
+                        leftSection={<IconEye size={18} />}
+                        bg={colors["blue-button"]}
+                        variant="gradient"
+                        gradient={{ from: colors["blue-button"], to: "#4dabf7", deg: 45 }}
+                        onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}
+                      >
+                        Lihat Detail
+                      </Button>
+                    </Tooltip>
                   </Group>
                 </Stack>
               </BackgroundImage>
-            )
-          })
-        )}
+            ))
+          ) : (
+            <Center h={240}>
+              <Stack align="center" gap="xs">
+                <Text fz="lg" fw={600} c="dimmed">
+                  Belum ada potensi desa
+                </Text>
+                <Text fz="sm" c="dimmed">
+                  Data potensi akan tampil di sini setelah tersedia.
+                </Text>
+              </Stack>
+            </Center>
+          )}
         </SimpleGrid>
       </Box>
-
     </Stack>
   );
 }

src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx

@@ -1,10 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import colors from '@/con/colors';
-import { Box, Stack, Paper, Image, Text, Center, Skeleton } from '@mantine/core';
-import React, { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile'
+import colors from '@/con/colors'
+import { Box, Center, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core'
+import { useEffect } from 'react'
+import { useProxy } from 'valtio/utils'
 
 function LambangDesa() {
   const state = useProxy(stateProfileDesa.lambangDesa)
@@ -17,26 +17,60 @@ function LambangDesa() {
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
+      <Box py="lg">
+        <Skeleton h={420} radius="xl" />
       </Box>
     )
   }
+
   return (
-    <Box pb={70}>
-      <Stack align='center' gap={0}>
-        <Box pb={30}>
+    <Box pb={90}>
+      <Stack align="center" gap="lg">
+        <Box pb="lg">
           <Center>
-          <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+            <Image
+              src={"/darmasaba-icon.png"}
+              alt="Lambang resmi desa"
+              w={{ base: 180, md: 280 }}
+              radius="md"
+            />
           </Center>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
+          <Text
+            c={colors['blue-button']}
+            ta="center"
+            fw={800}
+            fz={{ base: 28, md: 40 }}
+            mt="sm"
+            style={{ letterSpacing: '-0.5px' }}
+          >
+            Lambang Desa
+          </Text>
         </Box>
-        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Text fz={{ base: "md", md: "h3"}} ta={"justify"} dangerouslySetInnerHTML={{__html: data.deskripsi}} />
+        <Paper
+          p="xl"
+          radius="xl"
+          withBorder
+          shadow="sm"
+          w="100%"
+          style={{
+            background: 'linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%)',
+            borderColor: '#e0e9ff',
+          }}
+        >
+          <Tooltip label="Deskripsi lambang desa" position="top-start" withArrow>
+            <Text
+              fz={{ base: 'md', md: 'lg' }}
+              lh={1.8}
+              c="dark"
+              ta="justify"
+              style={{ fontWeight: 400 }}
+              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+            />
+          </Tooltip>
         </Paper>
       </Stack>
-    </Box >
-  );
+    </Box>
+  )
 }
 
-export default LambangDesa;
+export default LambangDesa

src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx

@@ -1,59 +1,95 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import colors from '@/con/colors';
-import { Box, Card, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Card, Center, Group, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
+import { IconPhoto } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function MaskotDesa() {
-  const state = useProxy(stateProfileDesa.maskotDesa)
+  const state = useProxy(stateProfileDesa.maskotDesa);
 
   useEffect(() => {
-    state.findUnique.load("edit")
-  }, [])
+    state.findUnique.load('edit');
+  }, []);
 
-  const { data, loading } = state.findUnique
+  const { data, loading } = state.findUnique;
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Center mih={500}>
+        <Stack align="center" gap="sm">
+          <Loader size="lg" color="blue" />
+          <Text c="dimmed" fz="sm">Sedang memuat data maskot desa...</Text>
+        </Stack>
+      </Center>
+    );
   }
+
   return (
-    <Box pb={70}>
-      <Stack align='center' gap={0}>
-        <Box pb={30}>
-          <Center>
-            <Image src={"/pudak-icon.png"} alt="" w={{ base: 200, md: 300 }} />
-          </Center>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
-        </Box>
-        <Paper p={"xl"} bg={colors['white-trans-1']}>
-          <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
-          <Group wrap="wrap" gap="md">
-            {data.images.map((img, index) => (
-              <Card key={index} p="xs" w={220}>
-                <Image
-                  src={img.image.link}
-                  alt={img.label}
-                  w={200}
-                  h={200}
-                  fit="cover"
-                  radius="md"
-                  style={{ border: '1px solid #ccc', objectFit: 'cover' }}
-                />
-                <Text ta="center" mt="xs" fw="bold">{img.label}</Text>
-              </Card>
-            ))}
+    <Box pb={80}>
+      <Stack align="center" gap="xl">
+        <Stack align="center" gap={10}>
+          <Image src="/pudak-icon.png" alt="Ikon Desa" w={{ base: 160, md: 240 }} />
+          <Text c={colors['blue-button']} ta="center" fw={700} fz={{ base: 28, md: 36 }}>Maskot Desa</Text>
+        </Stack>
+
+        <Paper
+          p={{ base: 'md', md: 'xl' }}
+          radius="lg"
+          shadow="sm"
+          withBorder
+          style={{ background: 'linear-gradient(145deg, #ffffff, #f8f9fa)' }}
+        >
+          <Text
+            fz={{ base: 'sm', md: 'lg' }}
+            lh={1.7}
+            ta="justify"
+            c="dark"
+            dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+          />
+
+          <Group justify="center" gap="lg" mt="lg">
+            {data.images.length > 0 ? (
+              data.images.map((img, index) => (
+                <Tooltip key={index} label={img.label} position="bottom" withArrow>
+                  <Card
+                    radius="lg"
+                    shadow="md"
+                    withBorder
+                    w={220}
+                    p="sm"
+                    style={{
+                      transition: 'transform 200ms ease, box-shadow 200ms ease',
+                    }}
+                    className="hover:scale-105 hover:shadow-lg"
+                  >
+                    <Image
+                      src={img.image.link}
+                      alt={img.label}
+                      w="100%"
+                      h={200}
+                      fit="cover"
+                      radius="md"
+                    />
+                    <Text ta="center" mt="sm" fw={600} fz="sm" c="dark">
+                      {img.label}
+                    </Text>
+                  </Card>
+                </Tooltip>
+              ))
+            ) : (
+              <Stack align="center" gap="xs" mt="lg">
+                <IconPhoto size={48} stroke={1.5} color="gray" />
+                <Text c="dimmed" fz="sm">Belum ada gambar maskot yang ditambahkan</Text>
+              </Stack>
+            )}
           </Group>
         </Paper>
       </Stack>
-    </Box >
+    </Box>
   );
 }
 
-
 export default MaskotDesa;

src/app/darmasaba/(pages)/desa/profile/ui/motoDesa.tsx

@@ -1,75 +1,133 @@
-import colors from '@/con/colors';
+'use client'
 import { ActionIcon, Box, Flex, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { motion } from 'framer-motion';
+import { IconSparkles } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 const dataText = [
   {
     id: 1,
-    title: "SANTUN",
-    description: "Memberikan pelayanan yang baik, penuh rasa empati, sopan, dan beretika"
+    title: "Santun",
+    description: "Pelayanan ramah, penuh empati, sopan, dan beretika."
   },
   {
     id: 2,
-    title: "ADAPTIF",
-    description: "Cepat menyesuaikan diri menghadapi perubahan dan bertindak proaktif"
+    title: "Adaptif",
+    description: "Cepat menyesuaikan diri terhadap perubahan dan selalu proaktif."
   },
   {
     id: 3,
-    title: "INOVATIF",
-    description: "Selalu berusaha menciptakan pembaruan atau kreasi baru"
+    title: "Inovatif",
+    description: "Berani menciptakan pembaruan dan ide-ide kreatif."
   },
   {
     id: 4,
-    title: "PROFESIONAL",
-    description: "Memiliki pengetahuan, terampil dan bertanggung jawab"
+    title: "Profesional",
+    description: "Berpengetahuan luas, terampil, dan bertanggung jawab."
   },
   {
     id: 5,
-    title: "GESIT",
-    description: "Inisiatif dan cekatan dalam bekerja"
+    title: "Gesit",
+    description: "Cekatan, sigap, dan penuh inisiatif dalam bekerja."
   },
-]
+];
+
+const letters = ["S", "I", "G", "A", "P"];
+
 function MotoDesa() {
   return (
-    <Box pb={70}>
-      <Stack align='center' gap={0} >
-        <Box pb={30}>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Moto Desa Darmasaba</Text>
-        </Box>
-        <Flex gap={50} pb={50} pt={20} justify={"space-evenly"} align={"center"} >
-          <ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
-            <Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>S</Text>
-          </ActionIcon>
-          <ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
-            <Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>I</Text>
-          </ActionIcon>
-          <ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
-            <Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>G</Text>
-          </ActionIcon>
-          <ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
-            <Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>A</Text>
-          </ActionIcon>
-          <ActionIcon bg={colors['blue-button']} radius={150} p={{ base: "lg", md: "xl" }}>
-            <Text c={colors['white-1']} ta={"center"} fw={"bold"} fz={{ base: "h2", md: "h1" }}>P</Text>
-          </ActionIcon>
-        </Flex>
-        <Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <SimpleGrid
-            cols={{
-              base: 1,
-              md: 2,
+    <Box pb={80} px={{ base: "md", md: "xl" }}>
+      <Stack align="center" gap="lg">
+        <Box>
+          <Text
+            ta="center"
+            fw={800}
+            fz={{ base: "2rem", md: "2.8rem" }}
+            style={{
+              background: "linear-gradient(90deg, #0D5594FF, #094678FF)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
             }}
           >
-            {dataText.map((v, k) => {
-              return (
-                <Box key={k}>
-                  <Text fw={"bold"} fz={{ base: "lg", md: "h3" }}>{v.title}</Text>
-                  <Text fz={{ base: "sm", md: "md" }}>{v.description}</Text>
-                </Box>
-              )
-            })}
+            Moto Desa Darmasaba
+          </Text>
+        </Box>
+
+        <Flex gap={30} pb={40} pt={10} wrap="wrap" justify="center">
+          {letters.map((letter, i) => (
+            <motion.div
+              key={i}
+              whileHover={{ scale: 1.15, rotate: 5 }}
+              whileTap={{ scale: 0.95 }}
+              transition={{ type: "spring", stiffness: 300 }}
+            >
+              <ActionIcon
+                radius="xl"
+                size={90}
+                variant="gradient"
+                gradient={{ from: "blue", to: "cyan" }}
+                style={{
+                  boxShadow: `0 0 18px ${colors['blue-button']}`,
+                  backdropFilter: "blur(6px)",
+                }}
+              >
+                <Text c="white" fw={800} fz="xl">
+                  {letter}
+                </Text>
+              </ActionIcon>
+            </motion.div>
+          ))}
+        </Flex>
+
+        <Paper
+          radius="lg"
+          p="xl"
+          withBorder
+          style={{
+            background: "linear-gradient(145deg, #ffffffcc, #f5faffcc)",
+            boxShadow: "0 8px 24px rgba(0,0,0,0.08)",
+          }}
+        >
+          <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl">
+            {dataText.map((v) => (
+              <motion.div
+                key={v.id}
+                whileHover={{ scale: 1.02 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Stack gap={4}>
+                  <Flex align="center" gap="sm">
+                    <IconSparkles size={20} color={colors['blue-button']} />
+                    <Text fw={700} fz={{ base: "lg", md: "xl" }} c={colors['blue-button']}>
+                      {v.title}
+                    </Text>
+                  </Flex>
+                  <Text fz={{ base: "sm", md: "md" }} c="gray.7">
+                    {v.description}
+                  </Text>
+                </Stack>
+              </motion.div>
+            ))}
           </SimpleGrid>
         </Paper>
-        <Text mb={40} c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h4", md: "h3" }}>&quot;Berkomitmen memberikan pelayanan terbaik dengan prinsip SIGAP untuk masyarakat Desa Darmasaba&quot;</Text>
+
+        <Text
+          ta="center"
+          fw={700}
+          fz={{ base: "md", md: "xl" }}
+          c="blue.8"
+          mt="md"
+          style={{
+            maxWidth: 720,
+            lineHeight: 1.6,
+          }}
+        >
+          &quot;Berkomitmen menghadirkan pelayanan terbaik dengan semangat{" "}
+          <Text span fw={800} c="cyan.6">
+            SIGAP
+          </Text>{" "}
+          untuk masyarakat Desa Darmasaba.&quot;
+        </Text>
       </Stack>
     </Box>
   );

src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx

@@ -2,9 +2,10 @@
 'use client'
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Divider, Tooltip } from '@mantine/core';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
+import { IconUser, IconBriefcase, IconUsers, IconTargetArrow } from '@tabler/icons-react';
 
 function ProfilPerbekel() {
   const state = useProxy(stateProfileDesa.profilPerbekel)
@@ -17,77 +18,155 @@ function ProfilPerbekel() {
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
+      <Box py={20} px="md">
+        <Skeleton h={500} radius="lg" />
       </Box>
     )
   }
+
   return (
-    <Box pb={70}>
-      <Stack align='center' gap={0}>
-        <Box pb={30}>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Profil Perbekel</Text>
-        </Box>
+    <Box pb={80} px="md">
+      <Stack align="center" gap={0} mb={40}>
+        <Text 
+          c={colors['blue-button']} 
+          ta="center" 
+          fw="bold" 
+          fz={{ base: "2rem", md: "2.8rem" }}
+          style={{ letterSpacing: "0.5px" }}
+        >
+          Profil Perbekel
+        </Text>
+        <Divider w={120} size="sm" color={colors['blue-button']} mt={10} />
       </Stack>
-      <SimpleGrid
-        cols={{
-          base: 1,
-          md: 2,
-        }}
-        pb={50}
-      >
+
+      <SimpleGrid cols={{ base: 1, md: 2 }} spacing="xl" pb={50}>
         <Box>
-          <Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Paper 
+            bg={colors['white-trans-1']} 
+            w="100%" 
+            radius="xl" 
+            shadow="md" 
+            withBorder
+          >
             <Stack gap={0}>
               <Image
-                pt={{ base: 0, md: 120 }}
-                px={"lg"}
+                pt={{ base: 0, md: 100 }}
+                px="lg"
                 src={data.image?.link || "/perbekel.png"}
-                sizes='100%'
-                alt=''
+                alt="Foto Perbekel"
+                radius="lg"
                 onError={(e) => {
                   e.currentTarget.src = "/perbekel.png";
                 }}
               />
               <Paper
                 bg={colors['blue-button']}
-                px={"lg"}
+                px="lg"
+                radius="0 0 var(--mantine-radius-xl) var(--mantine-radius-xl)"
                 className="glass3"
                 py={{ base: 20, md: 50 }}
-
               >
-                <Text c={colors['white-1']} fz={{ base: "md", md: "h3" }}>Perbekel Desa Darmasaba</Text>
-                <Text c={colors['white-1']} fw={"bolder"} fz={{ base: "md", md: "h2" }}>
-                  I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P.
+                <Text c={colors['white-1']} fz={{ base: "lg", md: "h3" }}>
+                  Perbekel Desa Darmasaba
+                </Text>
+                <Text 
+                  c={colors['white-1']} 
+                  fw="bolder" 
+                  fz={{ base: "xl", md: "h2" }}
+                  mt={8}
+                >
+                  {"I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P."}
                 </Text>
               </Paper>
             </Stack>
           </Paper>
         </Box>
-        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Box>
-            <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
-            <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.biodata }} />
-          </Box>
-          <Box>
-            <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman</Text>
-            <Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: data.pengalaman }} />
-          </Box>
+
+        <Paper 
+          p="xl" 
+          bg={colors['white-trans-1']} 
+          w="100%" 
+          radius="xl" 
+          shadow="md" 
+          withBorder
+        >
+          <Stack gap="xl">
+            <Box>
+              <Tooltip label="Informasi pribadi perbekel" withArrow>
+                <Stack gap={6}>
+                  <Stack align="center" gap={6}>
+                    <IconUser size={22} color={colors['blue-button']} />
+                    <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Biodata</Text>
+                  </Stack>
+                  <Text 
+                    fz={{ base: "1rem", md: "1.2rem" }} 
+                    ta="justify" 
+                    lh={1.6}
+                    dangerouslySetInnerHTML={{ __html: data.biodata }} 
+                  />
+                </Stack>
+              </Tooltip>
+            </Box>
+
+            <Box>
+              <Tooltip label="Pengalaman kerja perbekel" withArrow>
+                <Stack gap={6}>
+                  <Stack align="center" gap={6}>
+                    <IconBriefcase size={22} color={colors['blue-button']} />
+                    <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman</Text>
+                  </Stack>
+                  <Text 
+                    fz={{ base: "1rem", md: "1.2rem" }} 
+                    ta="justify" 
+                    lh={1.6}
+                    dangerouslySetInnerHTML={{ __html: data.pengalaman }} 
+                  />
+                </Stack>
+              </Tooltip>
+            </Box>
+          </Stack>
         </Paper>
-      </SimpleGrid >
-      <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-        <Box>
-          <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
-          <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} />
-        </Box>
-        <Box pb={20}>
-          <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
-          <Box px={20}>
-            <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.programUnggulan }} />
+      </SimpleGrid>
+
+      <Paper 
+        p="xl" 
+        bg={colors['white-trans-1']} 
+        w="100%" 
+        radius="xl" 
+        shadow="md" 
+        withBorder
+      >
+        <Stack gap="xl">
+          <Box>
+            <Stack align="center" gap={6} >
+              <IconUsers size={22} color={colors['blue-button']} />
+              <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Pengalaman Organisasi</Text>
+            </Stack>
+            <Text 
+              fz={{ base: "1rem", md: "1.2rem" }} 
+              ta="justify" 
+              lh={1.6}
+              dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} 
+            />
           </Box>
-        </Box>
+
+          <Box>
+            <Stack align="center" gap={6}  mb={6}>
+              <IconTargetArrow size={22} color={colors['blue-button']} />
+              <Text fz={{ base: "1.2rem", md: "1.5rem" }} fw="bold">Program Kerja Unggulan</Text>
+            </Stack>
+            <Box px={10}>
+              <Text 
+                fz={{ base: "1rem", md: "1.2rem" }} 
+                ta="justify" 
+                lh={1.6}
+                dangerouslySetInnerHTML={{ __html: data.programUnggulan }} 
+              />
+            </Box>
+          </Box>
+        </Stack>
       </Paper>
-    </Box >
+    </Box>
   );
 }
 

src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx

@@ -7,39 +7,69 @@ import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function SejarahDesa() {
-  const state = useProxy(stateProfileDesa.sejarahDesa)
+  const state = useProxy(stateProfileDesa.sejarahDesa);
 
   useEffect(() => {
-    state.findUnique.load("edit")
-  }, [])
+    state.findUnique.load('edit');
+  }, []);
 
-  const { data, loading } = state.findUnique
+  const { data, loading } = state.findUnique;
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
+      <Box py="lg">
+        <Skeleton h={500} radius="lg" />
       </Box>
-    )
+    );
   }
 
   return (
-    <>
-      <Box pb={70}>
-        <Stack align='center' gap={0}>
-          <Box pb={30}>
-            <Center>
-              <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
-            </Center>
-            <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Sejarah Desa</Text>
-          </Box>
-          <Paper p={"xl"} bg={colors['white-trans-1']}>
-            <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
-          </Paper>
-
+    <Box py="xl">
+      <Stack align="center" gap="xl">
+        <Stack align="center" gap="sm">
+          <Center>
+            <Image
+              src="/darmasaba-icon.png"
+              alt="Ikon Desa Darmasaba"
+              w={{ base: 180, md: 260 }}
+              radius="md"
+              style={{ filter: 'drop-shadow(0 4px 12px rgba(0,0,0,0.15))' }}
+            />
+          </Center>
+          <Center>
+            <Text
+              c={colors['blue-button']}
+              ta="center"
+              fw={700}
+              fz={{ base: '2rem', md: '2.8rem' }}
+              style={{ letterSpacing: '-0.5px' }}
+            >
+              Sejarah Desa
+            </Text>
+          </Center>
         </Stack>
-      </Box >
-    </>
+        <Paper
+          p="xl"
+          radius="lg"
+          bg="white"
+          shadow="sm"
+          style={{
+            background: 'linear-gradient(135deg, #ffffff 0%, #f9fbfd 100%)',
+            border: `1px solid ${colors['blue-button']}20`,
+          }}
+        >
+          <Stack gap="md">
+            <Text
+              fz={{ base: 'md', md: 'lg' }}
+              lh={1.8}
+              ta="justify"
+              style={{ color: '#2a2a2a' }}
+              dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+            />
+          </Stack>
+        </Paper>
+      </Stack>
+    </Box>
   );
 }
 

src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx

@@ -1,59 +1,102 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-import colors from '@/con/colors';
-import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
-import { useProxy } from 'valtio/utils';
+import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconUser } from '@tabler/icons-react';
+import { useProxy } from 'valtio/utils';
+
 function SemuaPerbekel() {
-const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const state = useProxy(stateProfileDesa.mantanPerbekel);
 
-useShallowEffect(() => {
-  state.findMany.load()
-}, [])
+  useShallowEffect(() => {
+    state.findMany.load();
+  }, []);
 
-const {data, loading} = state.findMany
+  const { data, loading } = state.findMany;
 
-if (loading || !data) {
-  return (
-    <Box py={10}>
-      <Skeleton h={500} />
-    </Box>
-  )
-}
+  if (loading || !data) {
+    return (
+      <Box py="xl">
+        <Skeleton h={500} radius="xl" />
+      </Box>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Center py="xl">
+        <Stack align="center" gap="sm">
+          <IconUser size={48} stroke={1.5} />
+          <Title fw="bold" order={2}>Belum ada data Perbekel</Title>
+          <Text c="dimmed" fz="sm" ta="center">Data mantan Perbekel akan muncul di sini ketika sudah tersedia</Text>
+        </Stack>
+      </Center>
+    );
+  }
 
   return (
-    <Box pb={50}>
-      <Stack align='center'>
-        <Box pb={30}>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Perbekel Dari Masa Ke Masa</Text>
+    <Box pb={80}>
+      <Stack align="center" gap="lg">
+        <Box>
+          <Text
+            ta="center"
+            fw={900}
+            fz={{ base: "2rem", md: "2.5rem" }}
+            variant="gradient"
+            gradient={{ from: "blue", to: "cyan", deg: 45 }}
+          >
+            Perbekel Dari Masa ke Masa
+          </Text>
         </Box>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3,
-          }}
-        >
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper h={620} mb={50} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                  <Box>
-                    <Center>
-                      <Image src={v.image?.link} alt='' />
-                    </Center>
-                  </Box>
-                  <Box>
-                    <Stack gap={"sm"} py={10}>
-                      <Text ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h3" }}>{v.nama}</Text>
-                      <Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.daerah}</Text>
-                      <Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.periode}</Text>
-                    </Stack>
-                  </Box>
-                </Paper>
-              </Box>
-            )
-          })
-          }
+
+        <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" w="100%">
+          {data.map((v: any, k: number) => (
+            <Paper
+              key={k}
+              radius="2xl"
+              shadow="md"
+              withBorder
+              p="lg"
+              bg="white"
+              style={{
+                transition: "all 250ms ease",
+              }}
+              className="hover:shadow-xl hover:scale-[1.02]"
+            >
+              <Stack gap="md" align="center">
+                <Box w="100%" h={300} style={{ overflow: "hidden", borderRadius: "1rem" }}>
+                  <Image
+                    src={v.image?.link}
+                    alt={v.nama || "Foto Perbekel"}
+                    fit="cover"
+                    h="100%"
+                    w="100%"
+                  />
+                </Box>
+
+                <Stack gap={4} align="center">
+                  <Tooltip label="Nama Perbekel" withArrow>
+                    <Text fw={700} fz="lg" ta="center">
+                      {v.nama}
+                    </Text>
+                  </Tooltip>
+
+                  <Tooltip label="Wilayah menjabat" withArrow>
+                    <Text c="dimmed" fz="sm" ta="center">
+                      {v.daerah}
+                    </Text>
+                  </Tooltip>
+
+                  <Tooltip label="Periode jabatan" withArrow>
+                    <Text c="blue" fw={600} fz="sm" ta="center">
+                      {v.periode}
+                    </Text>
+                  </Tooltip>
+                </Stack>
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
       </Stack>
     </Box>

src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx

@@ -6,43 +6,90 @@ import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
-function VisimisiDesa() {
-    const state = useProxy(stateProfileDesa.visiMisiDesa)
+function VisiMisiDesa() {
+  const state = useProxy(stateProfileDesa.visiMisiDesa);
 
-    useEffect(() => {
-        state.findUnique.load("edit")
-    }, [])
+  useEffect(() => {
+    state.findUnique.load('edit');
+  }, []);
 
-    const { data, loading } = state.findUnique
+  const { data, loading } = state.findUnique;
 
-    if (loading || !data) {
-        return (
-            <Box py={10}>
-                <Skeleton h={500} />
-            </Box>
-        )
-    }
+  if (loading || !data) {
     return (
-        <>
-            <Box pb={30}>
-                <Stack align='center' gap={0}>
-                    <Box pb={30}>
-                        <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
-                    </Box>
-                    <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                        <Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Visi Desa</Text>
-                        <Text fz={"1.5rem"} ta={"center"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.visi }} />
-                    </Paper>
-                    <Paper my={20} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                        <Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Misi Desa</Text>
-                        <Box>
-                            <Text fz={"1.5rem"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.misi }} />
-                        </Box>
-                    </Paper>
-                </Stack>
-            </Box >
-        </>
+      <Box py="xl">
+        <Skeleton h={500} radius="lg" />
+      </Box>
     );
+  }
+
+  return (
+    <Box py="xl">
+      <Stack align="center" gap="xl">
+        <Image
+          src="/darmasaba-icon.png"
+          alt="Lambang Desa Darmasaba"
+          w={{ base: 160, md: 240 }}
+          radius="md"
+        />
+
+        <Paper
+          p="xl"
+          radius="lg"
+          shadow="md"
+          withBorder
+          w="100%"
+          style={{
+            background: 'linear-gradient(145deg, #ffffff, #f5f7fa)',
+          }}
+        >
+          <Text
+            c={colors['blue-button']}
+            ta="center"
+            fw={700}
+            fz={{ base: '2rem', md: '2.5rem' }}
+            mb="md"
+          >
+            Visi Desa
+          </Text>
+          <Text
+            fz={{ base: '1.125rem', md: '1.375rem' }}
+            ta="center"
+            fw={500}
+            lh={1.6}
+            dangerouslySetInnerHTML={{ __html: data.visi }}
+          />
+        </Paper>
+
+        <Paper
+          p="xl"
+          radius="lg"
+          shadow="md"
+          withBorder
+          w="100%"
+          style={{
+            background: 'linear-gradient(145deg, #ffffff, #f5f7fa)',
+          }}
+        >
+          <Text
+            c={colors['blue-button']}
+            ta="center"
+            fw={700}
+            fz={{ base: '2rem', md: '2.5rem' }}
+            mb="md"
+          >
+            Misi Desa
+          </Text>
+          <Text
+            fz={{ base: '1.125rem', md: '1.375rem' }}
+            fw={500}
+            lh={1.6}
+            dangerouslySetInnerHTML={{ __html: data.misi }}
+          />
+        </Paper>
+      </Stack>
+    </Box>
+  );
 }
 
-export default VisimisiDesa;
+export default VisiMisiDesa;

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -5,112 +5,130 @@ import { IconArrowRight } from '@tabler/icons-react';
 
 function Page() {
   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>
       <SimpleGrid
         px={{ base: 20, md: 100 }}
-        cols={{
-          base: 1,
-          md: 2
-        }}
+        cols={{ base: 1, md: 2 }}
+        spacing="xl"
       >
-        {/* Content 1 */}
-        <Box pt={{base: 0, md: 35}}>
-          <Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
-            Info Keamanan dan Pencegahan Kriminalitas
+        <Box pt={{ base: 0, md: 35 }}>
+          <Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
+            Community Safety & Crime Prevention
           </Text>
-          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Kontak Darurat
+          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+            Emergency Contacts
           </Text>
           <Group>
-            <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
-              Lihat Detail
+            <Button
+              rightSection={<IconArrowRight />}
+              mt={20}
+              radius="xl"
+              size="md"
+              bg={colors['blue-button']}
+              c={colors['white-1']}
+            >
+              View Details
             </Button>
           </Group>
         </Box>
-        {/* Content 2 */}
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Paper p={"lg"}>
-            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
-              Tips menjaga keamanan lingkungan
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+          <Paper p="lg" radius="xl" shadow="md">
+            <Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
+              How to Keep Your Neighborhood Safe
             </Text>
-            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
+              Practical safety habits everyone can apply daily to reduce risks.
             </Text>
             <Group>
-              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
-                Lihat Detail
+              <Button
+                rightSection={<IconArrowRight />}
+                mt={20}
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                c={colors['white-1']}
+              >
+                Learn More
               </Button>
             </Group>
           </Paper>
-          <Paper p={"lg"}>
-            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
-              Mengenali tanda-tanda kegiatan kriminal
+          <Paper p="lg" radius="xl" shadow="md">
+            <Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
+              Recognizing Criminal Activities
             </Text>
-            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
-              the printing and typesetting industry. the printing and typesetting industry.
+            <Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
+              Key warning signs and behavior patterns you should stay aware of.
             </Text>
             <Group>
-              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
-                Lihat Detail
+              <Button
+                rightSection={<IconArrowRight />}
+                mt={20}
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                c={colors['white-1']}
+              >
+                Learn More
               </Button>
             </Group>
           </Paper>
         </SimpleGrid>
-        {/* Content 3 */}
-        <Paper p={'xl'}>
-          <Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
-            Program Keamanan Rutin
+        <Paper p="xl" radius="xl" shadow="lg">
+          <Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
+            Ongoing Security Programs
           </Text>
-          <Stack pt={30} gap={'lg'}>
-            <Box>
-              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
-                <Flex align={'center'} justify={'space-between'}>
-                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
-                  <IconArrowRight size={30} color={colors['white-1']} />
+          <Stack pt={30} gap="lg">
+            {['Night Patrol', 'Neighborhood Watch', 'Emergency Preparedness'].map((program, i) => (
+              <Paper key={i} p="md" bg={colors['blue-button']} radius="md" shadow="sm">
+                <Flex align="center" justify="space-between">
+                  <Text fz="h3" c={colors['white-1']}>
+                    {program}
+                  </Text>
+                  <IconArrowRight size={28} color={colors['white-1']} />
                 </Flex>
               </Paper>
-            </Box>
-            <Box>
-              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
-                <Flex align={'center'} justify={'space-between'}>
-                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
-                  <IconArrowRight size={30} color={colors['white-1']} />
-                </Flex>
-              </Paper>
-            </Box>
-            <Box>
-              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
-                <Flex align={'center'} justify={'space-between'}>
-                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
-                  <IconArrowRight size={30} color={colors['white-1']} />
-                </Flex>
-              </Paper>
-            </Box>
+            ))}
             <Box pt={25}>
-              <Button fullWidth rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat program lainnya</Button>
+              <Button
+                fullWidth
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
+              >
+                Explore More Programs
+              </Button>
             </Box>
           </Stack>
         </Paper>
-        {/* Content 4 */}
         <Box>
-          <Paper p={'xl'} >
-            <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
-              <iframe width="100%"
+          <Paper p="xl" radius="xl" shadow="lg">
+            <Box style={{ maxWidth: 560, width: '100%', aspectRatio: '16/9' }}>
+              <iframe
+                width="100%"
                 height="100%"
-                src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+                src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq"
+                title="Community Safety Patrol"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              />
             </Box>
-            <Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
-              Patroli Malam Darmasaba
+            <Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
+              Darmasaba Night Patrol
             </Text>
-            <Text fz={'h4'} >
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <Text fz="h4" c={colors['blue-button']}>
+              A closer look at how the community works together to maintain safety.
             </Text>
             <Box pt={10}>
-              <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
-                Lihat Video Lainnya
+              <Button
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
+              >
+                Watch More Videos
               </Button>
             </Box>
           </Paper>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/[id]/page.tsx

@@ -2,158 +2,155 @@
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Group, Image, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Divider, Group, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconAlertCircle, IconCalendar, IconInfoCircle } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
 function Page() {
-  const state = useProxy(artikelKesehatanState)
-  const params = useParams()
+  const state = useProxy(artikelKesehatanState);
+  const params = useParams();
 
   useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   if (!state.findUnique.data) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
+      <Stack py="xl" px="md">
+        <Skeleton h={420} radius="lg" />
+        <Skeleton h={20} mt="md" w="60%" />
+        <Skeleton h={20} w="40%" />
+        <Skeleton h={200} radius="md" />
       </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 }}>
-        <Stack gap={'lg'}>
-          <Paper radius={10}>
-            <Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
-              <Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
-                Detail Lengkap Fasilitas Kesehatan
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <Stack gap="lg">
+          <Paper radius="xl" shadow="md" withBorder>
+            <Box style={{ borderTopLeftRadius: 16, borderTopRightRadius: 16 }} bg={colors['blue-button']}>
+              <Text p="md" fz={{ base: 'h3', md: 'h2' }} c={colors['white-1']} fw="bold">
+                {state.findUnique.data.title || 'Detail Artikel Kesehatan'}
               </Text>
             </Box>
-            <Box p={'md'} >
-              <Stack gap={'xs'}>
-                <Center bg={'#DEE3E3FF'}>
-                  <Image
-                    w={'100%'}
-                    src={'/api/img/dbd.png'}
-                    alt='' />
-                </Center>
-                <Box>
-                  <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
-                    {new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })}
-                  </Text>
-                </Box>
-                {/* Pendahuluan */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Pendahuluan
-                </Text>
-                <Divider />
-                <Text pb={10} fz={'h4'} ta={'justify'}>
-                  {state.findUnique.data.introduction?.content}
-                </Text>
-                {/* Kenali Gejala DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Kenali Gejala DBD
-                </Text>
-                <Divider />
-                <Text fz={'h4'}>
-                  {state.findUnique.data.symptom?.title}
-                </Text>
-                <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
-                {/* Cara Mencegah DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  {state.findUnique.data.prevention?.title}
-                </Text>
-                <Divider />
-                <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.prevention?.content }} />
-                {/* Pertolongan Pertama Pada Penderita DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  {state.findUnique.data.firstaid?.title}
-                </Text>
-                <Divider />
-                <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.firstaid?.content }} />
-                {/* Mitos dan Fakta tentang DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  {state.findUnique.data.mythvsfact?.title}
-                </Text>
-                <Divider />
-                <Box pb={10}>
-                  <Table highlightOnHover withTableBorder withColumnBorders>
-                    <TableThead>
-                      <TableTr>
-                        <TableTh fz={'h4'}>Mitos</TableTh>
-                        <TableTh fz={'h4'}>Fakta</TableTh>
-                      </TableTr>
-                    </TableThead>
-                    <TableTbody>
-                      {state.findUnique.data?.mythvsfact ? (
-                        <TableTr>
-                          <TableTd>
-                            <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.mitos }} />
-                          </TableTd>
-                          <TableTd>
-                            <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.fakta }} />
-                          </TableTd>
-                        </TableTr>
-                      ) : (
-                        <TableTr>
-                          <TableTd colSpan={3} style={{ textAlign: 'center' }}>Tidak ada data mitos dan fakta</TableTd>
-                        </TableTr>
-                      )}
-                    </TableTbody>
-                  </Table>
-                </Box>
-                {/* Kapan Harus ke Dokter */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Kapan Harus ke Dokter?
-                </Text>
-                <Divider />
-                <Text fz={'h4'}>
-                  Segera bawa penderita ke fasilitas kesehatan jika mengalami:
-                </Text>
-                <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.doctorsign.content }} />
-                {/* Kasus DBD di Wilayah Abiansemal */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Kasus DBD di Wilayah Abiansemal
-                </Text>
-                <Divider />
 
-                <Paper p={'lg'} bg={colors['blue-button-trans']}>
-                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Informasi Lebih Lanjut</Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    Hotline DBD : <Text span fz={'h4'}>(0361) 123456</Text>
+            <Box p="lg">
+              <Stack gap="lg">
+                <Group gap="xs">
+                  <IconCalendar size={18} color={colors['blue-button']} />
+                  <Text c="dimmed" fz="sm">
+                    {new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
+                      year: 'numeric',
+                      month: 'long',
+                      day: 'numeric',
+                    })}
                   </Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    WhatsApp Center : <Text span fz={'h4'}>081234567890</Text>
-                  </Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    Email : <Text span fz={'h4'}>
-                      p2p@dinkes.badungkab.go.id</Text>
-                  </Text>
-                </Paper>
-                {/* Referensi */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Referensi
-                </Text>
-                <Divider />
-                <List pb={10} type='ordered'>
-                  <ListItem fz={'h4'}>Kementerian Kesehatan RI. (2024). Pedoman Pencegahan dan Pengendalian DBD.</ListItem>
-                  <ListItem fz={'h4'}>World Health Organization. (2024). Dengue Guidelines for Diagnosis, Treatment, Prevention and Control.</ListItem>
-                  <ListItem fz={'h4'}>Dinas Kesehatan Kabupaten Badung. (2025). Laporan Surveilans DBD Triwulan I 2025.</ListItem>
-                </List>
-                <Group>
-                  <Button fz={'lg'} bg={colors['blue-button']}>
-                    Download Infografis Pencegahan DBD (PDF)
-                  </Button>
-                  <Button fz={'lg'} bg={'green'}>
-                    Bagikan Artikel Ini
-                  </Button>
                 </Group>
+
+                <Stack gap="lg">
+                  <Box>
+                    <Text fz="h4" fw="bold">Pendahuluan</Text>
+                    <Divider my="xs" />
+                    <Text fz="md" lh={1.6} ta="justify">
+                      {state.findUnique.data.introduction?.content}
+                    </Text>
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">Kenali Gejala DBD</Text>
+                    <Divider my="xs" />
+                    <Text fz="md" fw="semibold">{state.findUnique.data.symptom?.title}</Text>
+                    <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.symptom?.content }} />
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">{state.findUnique.data.prevention?.title}</Text>
+                    <Divider my="xs" />
+                    <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.prevention?.content }} />
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">{state.findUnique.data.firstaid?.title}</Text>
+                    <Divider my="xs" />
+                    <Text fz="md" lh={1.6} ta="justify" dangerouslySetInnerHTML={{ __html: state.findUnique.data.firstaid?.content }} />
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">{state.findUnique.data.mythvsfact?.title}</Text>
+                    <Divider my="xs" />
+                    <Box pb="md">
+                      <Table highlightOnHover withTableBorder withColumnBorders striped>
+                        <TableThead>
+                          <TableTr>
+                            <TableTh fz="sm" fw="bold">Mitos</TableTh>
+                            <TableTh fz="sm" fw="bold">Fakta</TableTh>
+                          </TableTr>
+                        </TableThead>
+                        <TableTbody>
+                          {state.findUnique.data?.mythvsfact ? (
+                            <TableTr>
+                              <TableTd>
+                                <Text fz="sm" lh={1.6} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.mitos }} />
+                              </TableTd>
+                              <TableTd>
+                                <Text fz="sm" lh={1.6} dangerouslySetInnerHTML={{ __html: state.findUnique.data.mythvsfact.fakta }} />
+                              </TableTd>
+                            </TableTr>
+                          ) : (
+                            <TableTr>
+                              <TableTd colSpan={2} ta="center" c="dimmed">Belum ada data mitos dan fakta</TableTd>
+                            </TableTr>
+                          )}
+                        </TableTbody>
+                      </Table>
+                    </Box>
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">Kapan Harus ke Dokter?</Text>
+                    <Divider my="xs" />
+                    <Group gap="xs" mb="xs">
+                      <IconAlertCircle size={18} color="red" />
+                      <Text fz="md">Segera bawa penderita ke fasilitas kesehatan jika mengalami:</Text>
+                    </Group>
+                    <Text fz="md" lh={1.6} dangerouslySetInnerHTML={{ __html: state.findUnique.data.doctorsign.content }} />
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">Kasus DBD di Wilayah Abiansemal</Text>
+                    <Divider my="xs" />
+
+                    <Paper p="lg" radius="md" bg={colors['blue-button-trans']} withBorder>
+                      <Group gap="xs" mb="sm">
+                        <IconInfoCircle size={20} color={colors['white-1']} />
+                        <Text fz="h4" c={colors['white-1']} fw="bold">Informasi Lebih Lanjut</Text>
+                      </Group>
+                      <Stack gap={4}>
+                        <Text fz="sm" c={colors['white-1']}>Hotline DBD: <b>(0361) 123456</b></Text>
+                        <Text fz="sm" c={colors['white-1']}>WhatsApp Center: <b>081234567890</b></Text>
+                        <Text fz="sm" c={colors['white-1']}>Email: <b>p2p@dinkes.badungkab.go.id</b></Text>
+                      </Stack>
+                    </Paper>
+                  </Box>
+
+                  <Box>
+                    <Text fz="h4" fw="bold">Referensi</Text>
+                    <Divider my="xs" />
+                    <List spacing="xs" size="sm" type="ordered">
+                      <ListItem>Kementerian Kesehatan RI. (2024). Pedoman Pencegahan dan Pengendalian DBD.</ListItem>
+                      <ListItem>World Health Organization. (2024). Dengue Guidelines for Diagnosis, Treatment, Prevention and Control.</ListItem>
+                      <ListItem>Dinas Kesehatan Kabupaten Badung. (2025). Laporan Surveilans DBD Triwulan I 2025.</ListItem>
+                    </List>
+                  </Box>
+                </Stack>
               </Stack>
             </Box>
           </Paper>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/page.tsx

@@ -1,8 +1,9 @@
 'use client'
 import artikelKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan';
 import colors from '@/con/colors';
-import { Anchor, Box, Divider, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Anchor, Box, Card, Divider, Group, Image, Loader, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconCalendar, IconChevronRight } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
@@ -16,36 +17,71 @@ function ArtikelKesehatanPage() {
 
   if(!state.findMany.data){
     return (
-      <Box py={10}>
-        <Skeleton h={500}/>
+      <Box py="xl" ta="center">
+        <Loader size="lg" color={colors['blue-button']} />
+        <Text mt="md" c="dimmed" fz="md">Memuat artikel kesehatan...</Text>
       </Box>
     )
   }
+
+  if(state.findMany.data.length === 0){
+    return (
+      <Box py="xl" ta="center">
+        <Image src="/empty-state.svg" alt="Tidak ada data" w={220} mx="auto" />
+        <Text mt="md" fw="bold" fz="lg">Belum ada artikel kesehatan</Text>
+        <Text c="dimmed" fz="sm">Artikel akan tampil di sini setelah tersedia.</Text>
+      </Box>
+    )
+  }
+
   return (
     <Box>
-      <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
-        <Stack gap={'xs'}>
-          <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
-          {state.findMany.data.map((item) => (
-            <Box key={item.id}>
-              <Image pt={5} src={'/api/img/dbd.png'} alt="" />
-              <Text fz={'h4'} fw={'bold'} >
-                {item.title}
-              </Text>
-            <Text fz={'h6'} pb={10}>
-              Diposting: {new Date(item.createdAt).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })} | Dinas Kesehatan
-            </Text>
-            <Text fz={'h4'} pb={10} lineClamp={2}>
-              {item.content}
-            </Text>
-            <Anchor c={'black'} onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)} variant='transparent'>
-              <Text c={colors['blue-button']} fz={'h4'} >
-                Baca Selengkapnya {'>>'}
-              </Text>
-            </Anchor>
-          </Box>
-          ))}
-          <Divider color={colors['blue-button']} px={'xl'} />
+      <Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md">
+        <Stack gap="xl">
+          <Title order={2} ta="center" c={colors['blue-button']}>Artikel Kesehatan</Title>
+          <Divider color={colors['blue-button']} />
+          <Stack gap="lg">
+            {state.findMany.data.map((item) => (
+              <Card 
+                key={item.id} 
+                withBorder 
+                radius="lg" 
+                shadow="sm" 
+                p="lg" 
+                style={{ transition: 'transform 200ms ease' }}
+                onMouseEnter={(e) => (e.currentTarget.style.transform = 'translateY(-4px)')}
+                onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
+              >
+                <Card.Section>
+                  <Image src={'/api/img/dbd.png'} alt={item.title} height={200} fit="cover" />
+                </Card.Section>
+                <Stack gap="xs" mt="md">
+                  <Text fw="bold" fz="xl" c="dark">{item.title}</Text>
+                  <Group gap="xs">
+                    <IconCalendar size={16} color={colors['blue-button']} />
+                    <Text fz="sm" c="dimmed">
+                      {new Date(item.createdAt).toLocaleDateString('id-ID', { year: 'numeric', month: 'long', day: 'numeric' })} • Dinas Kesehatan
+                    </Text>
+                  </Group>
+                  <Text fz="md" c="dark" lineClamp={3}>
+                    {item.content}
+                  </Text>
+                  <Tooltip label="Baca artikel lengkap">
+                    <Anchor 
+                      onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan-page/${item.id}`)} 
+                      variant="light" 
+                      c={colors['blue-button']}
+                    >
+                      <Group gap="xs">
+                        <Text fw="bold" fz="md">Baca Selengkapnya</Text>
+                        <IconChevronRight size={18} />
+                      </Group>
+                    </Anchor>
+                  </Tooltip>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
         </Stack>
       </Paper>
     </Box>

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/[id]/page.tsx

@@ -1,160 +1,353 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { Box, Divider, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { ActionIcon, Anchor, AspectRatio, Badge, Box, Button, Card, Chip, CopyButton, Divider, Grid, Group, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowRight, IconBrandWhatsapp, IconCheck, IconCopy, IconDeviceLandlinePhone, IconFileDownload, IconHeart, IconInfoCircle, IconMail, IconMapPin, IconMoodEmpty, IconSearch, IconStethoscope, IconUser, IconUsersGroup, IconWallet } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
+import { useMemo } from 'react';
 import { useProxy } from 'valtio/utils';
 
+interface Kontak {
+  telepon: string;
+  whatsapp: string;
+  email: string;
+}
+
+interface LayananItem {
+  nama: string;
+  keterangan?: string;
+}
+
+interface LayananUnggulan {
+  items: LayananItem[];
+}
+
+interface Lokasi {
+  mapsEmbed: string;
+}
+
+interface TarifDanLayanan {
+  layanan: string;
+  tarif: string | number;
+  gratisBpjs?: boolean;
+}
+
 function Page() {
-  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
-  const params = useParams()
+  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
+  const params = useParams();
 
   useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
+    state.findUnique.load(params?.id as string);
+  }, []);
 
-  if (!state.findUnique.data) {
+  const data = state.findUnique.data as any; // Temporary any to fix type issues
+
+  const nama = data?.name || 'Fasilitas Kesehatan';
+  const alamat = data?.informasiumum?.alamat || '-';
+  const jam = data?.informasiumum?.jamOperasional || '-';
+  const layananUnggulan = (data?.layananunggulan as LayananUnggulan)?.items || [];
+  const tenaga = data?.dokterdantenagamedis || null;
+  const fasilitasPendukungHtml = data?.fasilitaspendukung?.content || '';
+  const tarif = (data?.tarifdanlayanan as TarifDanLayanan) || null;
+  const kontak = (data?.kontak as Kontak) || { 
+    telepon: '(0361) 123456', 
+    whatsapp: '081234567890', 
+    email: 'info@fasilitas-kesehatan.id' 
+  };
+  const lokasi = (data?.lokasi as Lokasi) || { 
+    mapsEmbed: 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.272172359321!2d115.21836257533302!3d-8.569807186941553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23e9d99b9395f%3A0xb002795fdcb33b30!2sUPTD%20Puskesmas%20Abiansemal%20III!5e0!3m2!1sid!2sid!4v1744792682341!5m2!1sid!2sid'
+  };
+  
+  const gratisBpjs = (data?.tarifdanlayanan as TarifDanLayanan)?.gratisBpjs ?? true;
+
+  const formatRupiah = useMemo(
+    () => (v?: number | string) => {
+      if (v === null || v === undefined || v === '') return '-';
+      const n = typeof v === 'string' ? Number(v) : v;
+      if (Number.isNaN(n as number)) return String(v);
+      return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n as number);
+    },
+    []
+  );
+
+  if (state.findUnique.loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
+      <Stack bg={colors.Bg} mih="100vh" p="lg" gap="lg">
+        <Box px={{ base: 'md', md: 100 }}>
+          <Skeleton h={32} w={220} />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }}>
+          <Skeleton h={64} radius="lg" />
+        </Box>
+        <Box px={{ base: 'md', md: 100 }}>
+          <Grid gutter="lg">
+            <Grid.Col span={{ base: 12, md: 8 }}>
+              <Skeleton h={320} radius="lg" />
+            </Grid.Col>
+            <Grid.Col span={{ base: 12, md: 4 }}>
+              <Skeleton h={320} radius="lg" />
+            </Grid.Col>
+          </Grid>
+        </Box>
+        <Box px={{ base: 'md', md: 100 }}>
+          <Skeleton h={420} radius="lg" />
+        </Box>
       </Stack>
-    )
+    );
   }
 
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
+        <Group justify="space-between">
+          <Group gap="xs">
+            <BackButton />
+          </Group>
+          <Group gap="xs">
+            <Badge variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} radius="xl" size="lg" leftSection={<IconHeart size={16} />}>Pelayanan Aktif</Badge>
+            <Badge variant="light" radius="xl" size="lg" leftSection={<IconInfoCircle size={16} />}>Jam: {jam}</Badge>
+          </Group>
+        </Group>
       </Box>
-      <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <Paper radius={10}>
-            <Box style={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }} bg={colors['blue-button']}>
-              <Text p={'md'} fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw={"bold"}>
-                Detail Lengkap Fasilitas Kesehatan
-              </Text>
-            </Box>
-            <Box p={'md'} >
-              <Stack gap={'xs'}>
-                {/* Informasi Umum */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Informasi Umum
-                </Text>
-                <Divider />
-                <Text fz={'h4'} fw={"bold"}>
-                  Nama Fasilitas : <Text span fz={'h4'}>{state.findUnique.data?.name}</Text>
-                </Text>
-                <Text fz={'h4'} fw={"bold"}>
-                  Alamat : <Text span fz={'h4'}>{state.findUnique.data?.informasiumum.alamat}</Text>
-                </Text>
-                <Text pb={10} fz={'h4'} fw={"bold"}>
-                  Jam Operasional: : <Text span fz={'h4'}>{state.findUnique.data?.informasiumum.jamOperasional}</Text>
-                </Text>
-                {/* Layanan Unggulan */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Layanan Unggulan
-                </Text>
-                <Divider />
 
-                {/* Tenaga Medis */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Dokter & Tenaga Medis
-                </Text>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Card radius="xl" p="lg" withBorder style={{ backdropFilter: 'blur(6px)' }}>
+          <Stack gap="sm">
+            <Title order={2}>{nama}</Title>
+            <Group gap="md" wrap="wrap">
+              <Group gap="xs">
+                <ThemeIcon variant="light" radius="xl"><IconMapPin size={18} /></ThemeIcon>
+                <Text>{alamat}</Text>
+              </Group>
+              <Group gap="xs">
+                <ThemeIcon variant="light" radius="xl"><IconDeviceLandlinePhone size={18} /></ThemeIcon>
+                <Text>{kontak.telepon}</Text>
+                <CopyButton value={kontak.telepon}>
+                  {({ copied, copy }) => (
+                    <Tooltip label={copied ? 'Disalin' : 'Salin nomor'}>
+                      <ActionIcon variant="subtle" onClick={copy}>{copied ? <IconCheck size={18} /> : <IconCopy size={18} />}</ActionIcon>
+                    </Tooltip>
+                  )}
+                </CopyButton>
+              </Group>
+              <Group gap="xs">
+                <ThemeIcon variant="light" radius="xl"><IconBrandWhatsapp size={18} /></ThemeIcon>
+                <Text>{kontak.whatsapp}</Text>
+                <CopyButton value={kontak.whatsapp}>
+                  {({ copied, copy }) => (
+                    <Tooltip label={copied ? 'Disalin' : 'Salin WhatsApp'}>
+                      <ActionIcon variant="subtle" onClick={copy}>{copied ? <IconCheck size={18} /> : <IconCopy size={18} />}</ActionIcon>
+                    </Tooltip>
+                  )}
+                </CopyButton>
+              </Group>
+              <Group gap="xs">
+                <ThemeIcon variant="light" radius="xl"><IconMail size={18} /></ThemeIcon>
+                <Text>{kontak.email}</Text>
+                <CopyButton value={kontak.email}>
+                  {({ copied, copy }) => (
+                    <Tooltip label={copied ? 'Disalin' : 'Salin email'}>
+                      <ActionIcon variant="subtle" onClick={copy}>{copied ? <IconCheck size={18} /> : <IconCopy size={18} />}</ActionIcon>
+                    </Tooltip>
+                  )}
+                </CopyButton>
+              </Group>
+            </Group>
+            <Group gap="xs" mt="sm" wrap="wrap">
+              <Chip defaultChecked radius="xl" variant="light" icon={<IconStethoscope size={16} />}>Layanan Medis</Chip>
+              <Chip radius="xl" variant="light" icon={<IconUsersGroup size={16} />}>Ramah Keluarga</Chip>
+              <Chip radius="xl" variant="light" icon={<IconWallet size={16} />}>Pembayaran Non-Tunai</Chip>
+            </Group>
+          </Stack>
+        </Card>
+      </Box>
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <Grid gutter="lg">
+          <Grid.Col span={{ base: 12, md: 8 }}>
+            <Card radius="xl" p="lg" withBorder>
+              <Stack gap="md">
+                <Group justify="space-between" align="center">
+                  <Title order={3}>Informasi Umum</Title>
+                  <Badge variant="gradient" gradient={{ from: 'cyan', to: 'blue' }} radius="xl">Terverifikasi</Badge>
+                </Group>
                 <Divider />
-                <Box pb={10}>
-                  <Table highlightOnHover withTableBorder withColumnBorders>
+                <Group gap="xl" align="start">
+                  <Stack gap={2}>
+                    <Text c="dimmed" fz="sm">Nama Fasilitas</Text>
+                    <Text fw={600}>{nama}</Text>
+                  </Stack>
+                  <Stack gap={2}>
+                    <Text c="dimmed" fz="sm">Jam Operasional</Text>
+                    <Text fw={600}>{jam}</Text>
+                  </Stack>
+                </Group>
+                <Divider />
+                <Title order={4}>Layanan Unggulan</Title>
+                {Array.isArray(layananUnggulan) && layananUnggulan.length > 0 ? (
+                  <List spacing="xs" icon={<ThemeIcon variant="light" radius="xl"><IconArrowRight size={16} /></ThemeIcon>}>
+                    {layananUnggulan.map((x: any, idx: number) => (
+                      <ListItem key={idx}>
+                        <Group gap="xs" wrap="wrap">
+                          <Text fw={600}>{x?.nama || 'Layanan'}</Text>
+                          {x?.keterangan && <Badge variant="light" radius="sm">{x.keterangan}</Badge>}
+                        </Group>
+                      </ListItem>
+                    ))}
+                  </List>
+                ) : (
+                  <Paper withBorder radius="md" p="md">
+                    <Group gap="sm">
+                      <IconMoodEmpty />
+                      <Text>Tidak ada layanan unggulan yang tercatat.</Text>
+                    </Group>
+                  </Paper>
+                )}
+                <Divider />
+                <Title order={4}>Peta Lokasi</Title>
+                <AspectRatio ratio={16 / 9}>
+                  <iframe src={lokasi.mapsEmbed} style={{ border: 0, width: '100%', height: '100%', borderRadius: 16 }} loading="lazy" aria-label="Peta Lokasi" />
+                </AspectRatio>
+              </Stack>
+            </Card>
+          </Grid.Col>
+
+          <Grid.Col span={{ base: 12, md: 4 }}>
+            <Stack gap="lg">
+              <Card radius="xl" p="lg" withBorder>
+                <Stack gap="md">
+                  <Title order={4}>Kontak Cepat</Title>
+                  <Group gap="sm" wrap="wrap">
+                    <Button variant="light" leftSection={<IconDeviceLandlinePhone size={18} />} component="a" href={`tel:${kontak.telepon}`} aria-label="Hubungi Telepon">Telepon</Button>
+                    <Button variant="light" leftSection={<IconBrandWhatsapp size={18} />} component="a" href={`https://wa.me/${kontak.whatsapp.replace(/\D/g, '')}`} target="_blank" aria-label="Hubungi WhatsApp">WhatsApp</Button>
+                    <Button variant="light" leftSection={<IconMail size={18} />} component="a" href={`mailto:${kontak.email}`} aria-label="Kirim Email">Email</Button>
+                  </Group>
+                  <Anchor target="_blank" underline="hover">Kunjungi situs resmi</Anchor>
+                </Stack>
+              </Card>
+
+              <Card radius="xl" p="lg" withBorder>
+                <Stack gap="md">
+                  <Title order={4}>Dokter & Tenaga Medis</Title>
+                  <Table highlightOnHover withTableBorder withColumnBorders stickyHeader stickyHeaderOffset={0} aria-label="Tabel Dokter">
                     <TableThead>
                       <TableTr>
-                        <TableTh fz={'h4'}>Nama</TableTh>
-                        <TableTh fz={'h4'}>Spesialisasi</TableTh>
-                        <TableTh fz={'h4'}>Jadwal</TableTh>
+                        <TableTh>Nama</TableTh>
+                        <TableTh>Spesialisasi</TableTh>
+                        <TableTh>Jadwal</TableTh>
                       </TableTr>
                     </TableThead>
                     <TableTbody>
-                      {state.findUnique.data?.dokterdantenagamedis ? (
+                      {tenaga ? (
                         <TableTr>
-                          <TableTd>{state.findUnique.data.dokterdantenagamedis.name}</TableTd>
-                          <TableTd>{state.findUnique.data.dokterdantenagamedis.specialist}</TableTd>
-                          <TableTd>{state.findUnique.data.dokterdantenagamedis.jadwal}</TableTd>
+                          <TableTd><Group gap="xs"><IconUser size={16} /><Text>{tenaga?.name || '-'}</Text></Group></TableTd>
+                          <TableTd>{tenaga?.specialist || '-'}</TableTd>
+                          <TableTd>{tenaga?.jadwal || '-'}</TableTd>
                         </TableTr>
                       ) : (
                         <TableTr>
-                          <TableTd colSpan={3} style={{ textAlign: 'center' }}>Tidak ada data dokter/tenaga medis</TableTd>
+                          <TableTd colSpan={3}>
+                            <Group justify="center" gap="xs" c="dimmed">
+                              <IconSearch size={18} />
+                              <Text>Tidak ada data tenaga medis.</Text>
+                            </Group>
+                          </TableTd>
                         </TableTr>
                       )}
                     </TableTbody>
                   </Table>
-                </Box>
-                {/* Fasilitas Pendukung */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Fasilitas Pendukung
-                </Text>
+                </Stack>
+              </Card>
+            </Stack>
+          </Grid.Col>
+        </Grid>
+      </Box>
+
+      <Box px={{ base: 'md', md: 100 }}>
+        <Grid gutter="lg">
+          <Grid.Col span={{ base: 12, md: 8 }}>
+            <Card radius="xl" p="lg" withBorder>
+              <Stack gap="md">
+                <Title order={3}>Fasilitas Pendukung</Title>
                 <Divider />
-                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.fasilitaspendukung?.content }} />
-                {/* Dokter */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Layanan & Tarif
-                </Text>
+                {fasilitasPendukungHtml ? (
+                  <Text fz="md" style={{ lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: fasilitasPendukungHtml }} />
+                ) : (
+                  <Paper withBorder radius="md" p="md">
+                    <Group gap="sm">
+                      <IconMoodEmpty />
+                      <Text>Belum ada informasi fasilitas pendukung.</Text>
+                    </Group>
+                  </Paper>
+                )}
+              </Stack>
+            </Card>
+          </Grid.Col>
+          <Grid.Col span={{ base: 12, md: 4 }}>
+            <Card radius="xl" p="lg" withBorder>
+              <Stack gap="md">
+                <Title order={3}>Layanan & Tarif</Title>
                 <Divider />
-                <Table highlightOnHover withTableBorder withColumnBorders>
+                <Table highlightOnHover withTableBorder withColumnBorders aria-label="Tabel Layanan dan Tarif">
                   <TableThead>
                     <TableTr>
-                      <TableTh fz={'h4'}>Layanan</TableTh>
-                      <TableTh fz={'h4'}>Tarif</TableTh>
+                      <TableTh>Layanan</TableTh>
+                      <TableTh>Tarif</TableTh>
                     </TableTr>
                   </TableThead>
                   <TableTbody>
-                    <TableTr>
-                      <TableTd>{state.findUnique?.data?.tarifdanlayanan.layanan}</TableTd>
-                      <TableTd>{state.findUnique?.data?.tarifdanlayanan.tarif}</TableTd>
-                    </TableTr>
+                    {tarif ? (
+                      <TableTr>
+                        <TableTd>{tarif?.layanan || '-'}</TableTd>
+                        <TableTd>{formatRupiah(tarif?.tarif)}</TableTd>
+                      </TableTr>
+                    ) : (
+                      <TableTr>
+                        <TableTd colSpan={2}>
+                          <Group justify="center" gap="xs" c="dimmed">
+                            <IconSearch size={18} />
+                            <Text>Tidak ada data tarif.</Text>
+                          </Group>
+                        </TableTd>
+                      </TableTr>
+                    )}
                   </TableTbody>
                 </Table>
-                <Text fz={'h6'} pb={10} fw={"bold"}>
-                  * Gratis dengan BPJS Kesehatan
-                </Text>
-                {/* Prosedur Pendaftaran */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Prosedur Pendaftaran
-                </Text>
-                <Divider />
-                <List type='ordered' pb={10} >
-                  <ListItem fz={'h4'}>Pendaftaran dibuka pukul 07:30 WITA</ListItem>
-                  <ListItem fz={'h4'}>Bawa KTP dan Kartu BPJS (jika ada)</ListItem>
-                  <ListItem fz={'h4'}>Ambil nomor antrian di loket pendaftaran</ListItem>
-                  <ListItem fz={'h4'}>Pengunjung baru wajib mengisi formulir pendaftaran</ListItem>
-                  <ListItem fz={'h4'}>Pendaftaran online tersedia melalui aplikasi S-Sehat</ListItem>
-                </List>
-                <Paper p={'lg'} bg={colors['blue-button-trans']}>
-                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Kontak Darurat</Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    Telepon : <Text span fz={'h4'}>(0361) 123456</Text>
-                  </Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    WhatsApp : <Text span fz={'h4'}>081234567890</Text>
-                  </Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    Email : <Text span fz={'h4'}>puskesmasabiansemal3@gmail.com</Text>
-                  </Text>
-                </Paper>
-                {/* <Paper p={'lg'} w={{ base: "100%", md: "100%" }}>
-                  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.272172359321!2d115.21836257533302!3d-8.569807186941553!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23e9d99b9395f%3A0xb002795fdcb33b30!2sUPTD%20Puskesmas%20Abiansemal%20III!5e0!3m2!1sid!2sid!4v1744792682341!5m2!1sid!2sid" width="600" height="450" style={{ border: 2, width: "100%", borderRadius: 10 }} loading="lazy"></iframe>
-                </Paper>
+                {gratisBpjs && (
+                  <Group gap="xs">
+                    <ThemeIcon variant="light" radius="xl"><IconCheck size={18} /></ThemeIcon>
+                    <Text fw={600}>Gratis dengan BPJS Kesehatan</Text>
+                  </Group>
+                )}
                 <Group>
-                  <Button fz={'lg'} bg={colors['blue-button']}>
-                    Download Brosur Layanan (PDF)
-                  </Button>
-                </Group> */}
+                  <Button variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} leftSection={<IconFileDownload size={18} />}>Unduh Brosur (PDF)</Button>
+                </Group>
               </Stack>
-            </Box>
-          </Paper>
-        </Stack>
+            </Card>
+          </Grid.Col>
+        </Grid>
+      </Box>
+
+      <Box px={{ base: 'md', md: 100 }} pb="xl">
+        <Paper radius="xl" p="lg" withBorder>
+          <Stack gap="md">
+            <Title order={3}>Prosedur Pendaftaran</Title>
+            <Divider />
+            <List type="ordered" spacing="xs" icon={<ThemeIcon variant="light" radius="xl"><IconArrowRight size={16} /></ThemeIcon>}>
+              <ListItem>Pendaftaran dibuka pukul 07.30 WITA</ListItem>
+              <ListItem>Bawa KTP dan Kartu BPJS (jika ada)</ListItem>
+              <ListItem>Ambil nomor antrian di loket pendaftaran</ListItem>
+              <ListItem>Pengunjung baru mengisi formulir pendaftaran</ListItem>
+              <ListItem>Pendaftaran online tersedia melalui aplikasi S-Sehat</ListItem>
+            </List>
+          </Stack>
+        </Paper>
       </Box>
     </Stack>
   );
 }
 
-
 export default Page;

src/app/darmasaba/(pages)/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/page.tsx

@@ -1,50 +1,100 @@
 'use client'
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Anchor, Box, Divider, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Anchor, Badge, Box, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
+import { IconMapPin, IconClock, IconArrowRight } from '@tabler/icons-react';
 
 function FasilitasKesehatanPage() {
-  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
+  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
   const router = useRouter();
 
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    state.findMany.load();
+  }, []);
 
-  if(!state.findMany.data){
+  if (!state.findMany.data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
+      <Box py="xl" px="md">
+        <Stack gap="md">
+          <Skeleton height={80} radius="lg" />
+          <Skeleton height={80} radius="lg" />
+          <Skeleton height={80} radius="lg" />
+        </Stack>
       </Box>
-    )
+    );
   }
+
   return (
     <Box>
-      <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
-        <Stack gap={'xs'}>
-          <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Fasilitas Kesehatan</Text>
-          {state.findMany.data.map((item) => (
-            <Box key={item.id}>
-              <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
-                {item.name}
-              </Text>
-              <Text fz={'h4'}>
-                {item.informasiumum.alamat}
-              </Text>
-              <Text fz={'h4'}>
-                {item.informasiumum.jamOperasional}
-              </Text>
-              <Anchor onClick={() => router.push(`/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`)} c={colors['blue-button']} variant='transparent'>
-                <Text c={colors['blue-button']} fz={'h4'}>
-                  Detail {'>>'}
-                </Text>
-              </Anchor>
-            </Box>
-          ))}
-          <Divider color={colors['blue-button']} px={'xl'} />
+      <Paper p="xl" radius="xl" shadow="md" h="100%" bg="white">
+        <Stack gap="lg">
+          <Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
+            Fasilitas Kesehatan
+          </Text>
+          <Divider size="sm" color={colors['blue-button']} />
+          <Stack gap="lg">
+            {state.findMany.data.map((item) => (
+              <Card
+                key={item.id}
+                withBorder
+                radius="xl"
+                shadow="sm"
+                p="lg"
+                style={{
+                  background: 'linear-gradient(135deg, #fdfdfd, #f7faff)',
+                  transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+                }}
+                onMouseEnter={(e) => {
+                  (e.currentTarget as HTMLElement).style.transform = 'translateY(-4px)';
+                  (e.currentTarget as HTMLElement).style.boxShadow = '0 8px 20px rgba(0,0,0,0.08)';
+                }}
+                onMouseLeave={(e) => {
+                  (e.currentTarget as HTMLElement).style.transform = 'translateY(0px)';
+                  (e.currentTarget as HTMLElement).style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
+                }}
+              >
+                <Stack gap="sm">
+                  <Group justify="space-between" align="center">
+                    <Text fw={700} fz="lg" c={colors['blue-button']}>
+                      {item.name}
+                    </Text>
+                    <Badge color="blue" radius="sm" variant="light" fz="xs">
+                      Aktif
+                    </Badge>
+                  </Group>
+                  <Group gap="xs">
+                    <IconMapPin size={18} stroke={1.5} color={colors['blue-button']} />
+                    <Text fz="sm" c="dimmed">
+                      {item.informasiumum.alamat}
+                    </Text>
+                  </Group>
+                  <Group gap="xs">
+                    <IconClock size={18} stroke={1.5} color={colors['blue-button']} />
+                    <Text fz="sm" c="dimmed">
+                      {item.informasiumum.jamOperasional}
+                    </Text>
+                  </Group>
+                  <Anchor
+                    onClick={() =>
+                      router.push(
+                        `/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan-page/${item.id}`
+                      )
+                    }
+                    c={colors['blue-button']}
+                    fz="sm"
+                    fw={600}
+                    style={{ display: 'inline-flex', alignItems: 'center', gap: '4px' }}
+                  >
+                    Lihat Detail
+                    <IconArrowRight size={16} stroke={1.5} />
+                  </Anchor>
+                </Stack>
+              </Card>
+            ))}
+          </Stack>
         </Stack>
       </Paper>
     </Box>