Sinkroniasasi Admin - User, Submenu Info Sekolah Paud

prisma/schema.prisma

@@ -85,7 +85,6 @@ model FileStorage {
   KontakItem                     KontakItem[]
   Pegawai                        Pegawai[]
   DesaDigital                    DesaDigital[]
-  KolaborasiInovasi              KolaborasiInovasi[]
   InfoTekno                      InfoTekno[]
   PengaduanMasyarakat            PengaduanMasyarakat[]
   KegiatanDesa                   KegiatanDesa[]
@@ -100,6 +99,8 @@ model FileStorage {
   DataPerpustakaan               DataPerpustakaan[]
   PegawaiPPID                    PegawaiPPID[]
   PerbekelDariMasaKeMasa         PerbekelDariMasaKeMasa[]
+
+  MitraKolaborasi MitraKolaborasi[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -1644,14 +1645,22 @@ model KolaborasiInovasi {
   slug        String      @db.Text //deskripsi singkat
   deskripsi   String      @db.Text //deskripsi panjang
   kolaborator String
-  image       FileStorage @relation(fields: [imageId], references: [id])
-  imageId     String
   createdAt   DateTime    @default(now())
   updatedAt   DateTime    @updatedAt
   deletedAt   DateTime    @default(now())
   isActive    Boolean     @default(true)
 }
 
+model MitraKolaborasi {
+  id        String   @id @default(cuid())
+  name      String
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
 // ========================================= INFO TEKHNOLOGI TEPAT GUNA ========================================= //
 model InfoTekno {
   id        String      @id @default(cuid())

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/inovasi/desa-digital.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";
@@ -55,10 +56,34 @@ const desaDigitalState = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.inovasi.desadigital["find-many"].get();
-      if (res.status === 200) {
-        desaDigitalState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      desaDigitalState.findMany.loading = true; // ✅ Akses langsung via nama path
+      desaDigitalState.findMany.page = page;
+      desaDigitalState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.inovasi.desadigital["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          desaDigitalState.findMany.data = res.data.data ?? [];
+          desaDigitalState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          desaDigitalState.findMany.data = [];
+          desaDigitalState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch desa digital paginated:", err);
+        desaDigitalState.findMany.data = [];
+        desaDigitalState.findMany.totalPages = 1;
+      } finally {
+        desaDigitalState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/inovasi/info-tekno.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";
@@ -55,10 +56,34 @@ const infoTeknoState = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.inovasi.infotekno["find-many"].get();
-      if (res.status === 200) {
-        infoTeknoState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      infoTeknoState.findMany.loading = true; // ✅ Akses langsung via nama path
+      infoTeknoState.findMany.page = page;
+      infoTeknoState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.inovasi.infotekno["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          infoTeknoState.findMany.data = res.data.data ?? [];
+          infoTeknoState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          infoTeknoState.findMany.data = [];
+          infoTeknoState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch info teknologi paginated:", err);
+        infoTeknoState.findMany.data = [];
+        infoTeknoState.findMany.totalPages = 1;
+      } finally {
+        infoTeknoState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi.ts

@@ -6,12 +6,11 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-    name: z.string().min(1, "Nama minimal 1 karakter"),
-    tahun: z.number().min(4, "Tahun minimal 4 karakter"),
-    slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
-    deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
-    kolaborator: z.string().min(1, "Kolaborator minimal 1 karakter"),
-    imageId: z.string().min(1, "Image ID minimal 1 karakter"),
+    name: z.string().min(1, "Nama kolaborasi inovasi harus diisi"),
+    tahun: z.number().min(1900, "Tahun tidak valid").max(new Date().getFullYear() + 1, "Tahun tidak boleh lebih dari tahun depan"),
+    slug: z.string().min(1, "Slug harus dihasilkan otomatis"),
+    deskripsi: z.string().min(1, "Deskripsi harus diisi"),
+    kolaborator: z.string().min(1, "Kolaborator harus diisi"),
 })
 
 const defaultForm = {
@@ -20,7 +19,6 @@ const defaultForm = {
     slug: "",
     deskripsi: "",
     kolaborator: "",
-    imageId: "",
 }
 
 const kolaborasiInovasiState = proxy({
@@ -28,27 +26,37 @@ const kolaborasiInovasiState = proxy({
     form: { ...defaultForm },
     loading: false,
     async create() {
-      const cek = templateForm.safeParse(kolaborasiInovasiState.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-
       try {
+        // Validate form
+        const validation = templateForm.safeParse(kolaborasiInovasiState.create.form);
+        if (!validation.success) {
+          const errorMessages = validation.error.issues
+            .map(issue => `- ${issue.path.join('.')}: ${issue.message}`)
+            .join('\n');
+          return toast.error(`Validasi gagal:\n${errorMessages}`);
+        }
+
         kolaborasiInovasiState.create.loading = true;
+        
         const res = await ApiFetch.api.inovasi.kolaborasiinovasi["create"].post(
           kolaborasiInovasiState.create.form
         );
+        
         if (res.status === 200) {
-          kolaborasiInovasiState.findMany.load();
-          return toast.success("success create");
+          await kolaborasiInovasiState.findMany.load();
+          return { success: true, data: res.data };
         }
-        console.log(res);
-        return toast.error("failed create");
+        
+        console.error('Create failed:', res);
+        toast.error(res.data?.message || "Gagal menyimpan data");
+        return { success: false, error: res.data };
       } catch (error) {
-        console.log((error as Error).message);
+        console.error('Error in create:', error);
+        toast.error("Terjadi kesalahan saat menyimpan data");
+        return { 
+          success: false, 
+          error: error instanceof Error ? error.message : 'Unknown error' 
+        };
       } finally {
         kolaborasiInovasiState.create.loading = false;
       }
@@ -60,13 +68,21 @@ const kolaborasiInovasiState = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
-      // Change to arrow function
-      kolaborasiInovasiState.findMany.loading = true; // Use the full path to access the property
+    search: "",
+    year: "",
+    load: async (page = 1, limit = 10, search = "", year?: string) => {
+      kolaborasiInovasiState.findMany.loading = true;
       kolaborasiInovasiState.findMany.page = page;
+      kolaborasiInovasiState.findMany.search = search;
+      kolaborasiInovasiState.findMany.year = year || "";
+
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (year) query.year = year;
+        
         const res = await ApiFetch.api.inovasi.kolaborasiinovasi["find-many"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {
@@ -124,7 +140,6 @@ const kolaborasiInovasiState = proxy({
             slug: data.slug,
             deskripsi: data.deskripsi,
             kolaborator: data.kolaborator,
-            imageId: data.imageId,
           };
           return data;
         } else {
@@ -179,7 +194,7 @@ const kolaborasiInovasiState = proxy({
   },
   findUnique: {
     data: null as Prisma.KolaborasiInovasiGetPayload<{
-      include: { image: true };
+      omit: { isActive: true };
     }> | null,
     async load(id: string) {
       try {

src/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi.ts

@@ -0,0 +1,229 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const mitraKolaborasiForm = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  imageId: z.string().nonempty(),
+});
+
+const defaultForm = {
+  name: "",
+  imageId: "",
+};
+
+const mitraKolaborasi = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = mitraKolaborasiForm.safeParse(mitraKolaborasi.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mitraKolaborasi.create.loading = true;
+        const res = await ApiFetch.api.inovasi.mitrakolaborasi["create"].post(
+          mitraKolaborasi.create.form
+        );
+        if (res.status === 200) {
+          mitraKolaborasi.findMany.load();
+          return toast.success("mitraKolaborasi berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan mitraKolaborasi");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mitraKolaborasi.create.loading = false;
+      }
+    },
+    resetForm() {
+      mitraKolaborasi.create.form = { ...defaultForm };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.MitraKolaborasiGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      mitraKolaborasi.findMany.loading = true; // ✅ Akses langsung via nama path
+      mitraKolaborasi.findMany.page = page;
+      mitraKolaborasi.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.inovasi.mitrakolaborasi["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          mitraKolaborasi.findMany.data = res.data.data ?? [];
+          mitraKolaborasi.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          mitraKolaborasi.findMany.data = [];
+          mitraKolaborasi.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch mitraKolaborasi paginated:", err);
+        mitraKolaborasi.findMany.data = [];
+        mitraKolaborasi.findMany.totalPages = 1;
+      } finally {
+        mitraKolaborasi.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.MitraKolaborasiGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/mitrakolaborasi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          mitraKolaborasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch mitraKolaborasi:", res.statusText);
+          mitraKolaborasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching mitraKolaborasi:", error);
+        mitraKolaborasi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        mitraKolaborasi.delete.loading = true;
+        const response = await fetch(`/api/inovasi/mitrakolaborasi/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "mitraKolaborasi berhasil dihapus");
+          await mitraKolaborasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus mitraKolaborasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus mitraKolaborasi");
+      } finally {
+        mitraKolaborasi.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/inovasi/mitrakolaborasi/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading mitraKolaborasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = mitraKolaborasiForm.safeParse(mitraKolaborasi.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        mitraKolaborasi.update.loading = true;
+        const response = await fetch(`/api/inovasi/mitrakolaborasi/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            imageId: this.form.imageId,
+          }),
+        });
+        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(result.message || "mitraKolaborasi berhasil diupdate");
+          await mitraKolaborasi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate mitraKolaborasi");
+        }
+      } catch (error) {
+        console.error("Error updating mitraKolaborasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate mitraKolaborasi"
+        );
+        return false;
+      } finally {
+        mitraKolaborasi.update.loading = false;
+      }
+    },
+    reset() {
+      mitraKolaborasi.update.id = "";
+      mitraKolaborasi.update.form = { ...defaultForm };
+    },
+  },
+});
+
+export default mitraKolaborasi;

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

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/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)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Pagination } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,19 +29,22 @@ function DesaDigitalSmartVillage() {
 function ListDesaDigitalSmartVillage({ search }: { search: string }) {
   const state = useProxy(desaDigitalState)
   const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (state.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!state.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -68,18 +71,27 @@ function ListDesaDigitalSmartVillage({ search }: { search: string }) {
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                 </TableTd>
-              <TableTd>
-                <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, 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 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,19 +29,22 @@ function InfoTeknologiTepatGuna() {
 function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
   const state = useProxy(infoTeknoState)
   const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (state.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!state.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -68,17 +71,25 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                 </TableTd>
-              <TableTd>
-                <Button onClick={() => router.push(`/admin/inovasi/info-teknologi-tepat-guna/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/inovasi/info-teknologi-tepat-guna/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)} // ini penting!
+            total={totalPages}
+            my="md"
+          />
+        </Center>
       </Paper>
     </Box>
   );

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/_lib/layoutTabs.tsx

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

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/create/page.tsx

@@ -1,155 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import CreateEditor from '../../../_com/createEditor';
-import kolaborasiInovasiState from '../../../_state/inovasi/kolaborasi-inovasi';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import ApiFetch from '@/lib/api-fetch';
-import { Dropzone } from '@mantine/dropzone';
-
-
-function CreateProgramKreatifDesa() {
-  const stateCreate = useProxy(kolaborasiInovasiState)
-  const router = useRouter();
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      name: "",
-      tahun: 0,
-      slug: "",
-      deskripsi: "",
-      kolaborator: "",
-      imageId: "",
-    }
-
-    setPreviewImage(null);
-    setFile(null);
-  }
-
-  const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
-    }
-
-    // Upload gambar dulu
-    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");
-    }
-
-    // Simpan ID gambar ke form
-    stateCreate.create.form.imageId = uploaded.id;
-
-    // Submit data berita
-    await stateCreate.create.create();
-
-    // Reset form setelah submit
-    resetForm();
-    router.push("/admin/inovasi/kolaborasi-inovasi")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Kolaborasi Inovasi</Title>
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
-            placeholder="masukkan nama kolaborasi inovasi"
-            onChange={(val) => stateCreate.create.form.name = val.target.value}
-          />
-          <TextInput
-            type='number'
-            label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
-            placeholder="masukkan tahun"
-            onChange={(val) => stateCreate.create.form.tahun = parseInt(val.target.value)}
-          />
-          <TextInput
-            onChange={(e) => stateCreate.create.form.slug = e.currentTarget.value}
-            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Kolaborasi Inovasi</Text>}
-            placeholder='Masukkan deskripsi singkat kolaborasi inovasi'
-          />
-          <TextInput
-            onChange={(e) => stateCreate.create.form.kolaborator = e.currentTarget.value}
-            label={<Text fw={"bold"} fz={"sm"}>Kolaborator</Text>}
-            placeholder='Masukkan kolaborator'
-          />
-          <Box>
-            <Stack gap={"xs"}>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const newImages = files.map((file) => ({
-                      file,
-                      preview: URL.createObjectURL(file),
-                      label: '',
-                    }));
-                    setFile(newImages[0].file);
-                    setPreviewImage(newImages[0].preview); // ← ini yang kurang
-                  }}
-
-                >
-                  <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 images here or click to select files
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Attach as many files as you like, each file should not exceed 5mb
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-              </Box>
-              {previewImage ? (
-                <Image alt="" src={previewImage} w={200} h={200} />
-              ) : (
-                <Center w={200} h={200} bg={"gray"}>
-                  <IconImageInPicture />
-                </Center>
-              )}
-            </Stack>
-          </Box>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
-            <CreateEditor
-              value={stateCreate.create.form.deskripsi}
-              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/layout.tsx

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

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/edit/page.tsx

@@ -2,41 +2,34 @@
 "use client";
 
 import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import kolaborasiInovasiState from "@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi";
 import colors from "@/con/colors";
-import ApiFetch from "@/lib/api-fetch";
 import {
   Box,
   Button,
-  Center,
-  FileInput,
-  Image,
   Paper,
   Stack,
   Text,
   TextInput,
   Title
 } from "@mantine/core";
-import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+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";
-import kolaborasiInovasiState from "@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi";
 
 function EditKolaborasiInovasi() {
   const kolaborasiState = useProxy(kolaborasiInovasiState);
   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: kolaborasiState.update.form.name || '',
     deskripsi: kolaborasiState.update.form.deskripsi || '',
     tahun: kolaborasiState.update.form.tahun || '',
     slug: kolaborasiState.update.form.slug || '',
     kolaborator: kolaborasiState.update.form.kolaborator || '',
-    imageId: kolaborasiState.update.form.imageId || ''
   });
 
   // Load berita by id saat pertama kali
@@ -54,13 +47,7 @@ function EditKolaborasiInovasi() {
             tahun: data.tahun || '',
             slug: data.slug || '',
             kolaborator: data.kolaborator || '',
-            imageId: data.imageId || '',
           });
-          if (data.image) {
-            if (data?.image?.link) {
-              setPreviewImage(data.image.link);
-            }
-          }
         }
       } catch (error) {
         console.error("Error loading berita:", error);
@@ -82,22 +69,7 @@ function EditKolaborasiInovasi() {
         tahun: Number(formData.tahun),
         slug: formData.slug,
         kolaborator: formData.kolaborator,
-        imageId: formData.imageId // Keep existing imageId if not changed
       };
-
-      // Jika ada file baru, upload
-      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");
-        }
-
-        // Update imageId in global state
-        kolaborasiState.update.form.imageId = uploaded.id;
-      }
-
       await kolaborasiState.update.submit();
       toast.success("Berita berhasil diperbarui!");
       router.push("/admin/inovasi/kolaborasi-inovasi");
@@ -144,28 +116,6 @@ function EditKolaborasiInovasi() {
             label={<Text fz={"sm"} fw={"bold"}>Kolaborator</Text>}
             placeholder="masukkan kolaborator"
           />
-
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
-
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <EditEditor

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/page.tsx

@@ -1,15 +1,15 @@
 'use client'
 import { useProxy } from 'valtio/utils';
 
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
 import colors from '@/con/colors';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import kolaborasiInovasiState from '../../../_state/inovasi/kolaborasi-inovasi';
 
 function DetailKolaborasiInovasi() {
   const kolaborasiState = useProxy(kolaborasiInovasiState)
@@ -69,10 +69,6 @@ function DetailKolaborasiInovasi() {
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
                   <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: kolaborasiState.findUnique.data?.deskripsi }} />
                 </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={kolaborasiState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Kolaborator</Text>
                   <Text fz={"lg"}>{kolaborasiState.findUnique.data?.kolaborator}</Text>

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/create/page.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { YearPickerInput } from '@mantine/dates';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateProgramKreatifDesa() {
+  const stateCreate = useProxy(kolaborasiInovasiState)
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      tahun: 0,
+      slug: "",
+      deskripsi: "",
+      kolaborator: "",
+    }
+  }
+
+  // Generate slug from name
+  useEffect(() => {
+    const { name } = stateCreate.create.form;
+    if (name) {
+      const slug = name
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-');
+      stateCreate.create.form.slug = slug;
+    }
+  }, [stateCreate.create.form.name]);
+
+  const handleSubmit = async () => {
+    try {
+      // Submit data kolaborasi inovasi
+      await stateCreate.create.create();
+
+      // Reset form setelah submit
+      resetForm();
+      router.push("/admin/inovasi/kolaborasi-inovasi");
+      toast.success("Berhasil menambahkan kolaborasi inovasi");
+    } catch (error) {
+      console.error("Error creating kolaborasi inovasi:", error);
+      toast.error("Terjadi kesalahan saat menyimpan data");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Kolaborasi Inovasi</Title>
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
+            placeholder="masukkan nama kolaborasi inovasi"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
+          />
+          <YearPickerInput
+            clearable
+            value={stateCreate.create.form.tahun ? new Date(stateCreate.create.form.tahun, 0, 1) : null}
+            label="Tahun"
+            placeholder="Pilih tahun"
+            onChange={(dateString: string) => {
+              const year = dateString ? new Date(dateString).getFullYear() : 0;
+              stateCreate.create.form.tahun = year;
+            }}
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(val) => {
+                stateCreate.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <TextInput
+            onChange={(e) => stateCreate.create.form.kolaborator = e.currentTarget.value}
+            label={<Text fw={"bold"} fz={"sm"}>Kolaborator</Text>}
+            placeholder='Masukkan kolaborator'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/page.tsx

@@ -3,11 +3,11 @@
 import colors from '@/con/colors';
 import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import kolaborasiInovasiState from '../../_state/inovasi/kolaborasi-inovasi';
+import kolaborasiInovasiState from '../../../_state/inovasi/kolaborasi-inovasi';
 import { useProxy } from 'valtio/utils';
 
 function KolaborasiInovasi() {
@@ -28,22 +28,21 @@ function KolaborasiInovasi() {
 
 function ListKolaborasiInovasi({ search }: { search: string }) {
   const listState = useProxy(kolaborasiInovasiState)
-  const { data, loading, page, totalPages, load } = listState.findMany
   const router = useRouter();
 
-  useEffect(() => {
-    load(page, 10)
-  }, [page])
+  const {
+    data,
+    loading,
+    page,
+    totalPages,
+    load,
+  } = listState.findMany
 
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.slug.toLowerCase().includes(keyword) ||
-      item.kolaborator.toLowerCase().includes(keyword)
-    );
-  });
+  useEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
 
   if (loading || !data) {
     return (
@@ -64,11 +63,11 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
             <Table striped withTableBorder withRowBorders>
               <TableThead>
                 <TableTr>
-                  <TableTh style={{ width: '2%', textAlign: 'center' }}>No</TableTh>
-                  <TableTh style={{ width: '15%' }}>Nama Kolaborasi Inovasi</TableTh>
-                  <TableTh style={{ width: '15%', textAlign: 'center' }}>Tahun</TableTh>
-                  <TableTh style={{ width: '20%' }}>Deskripsi Singkat</TableTh>
-                  <TableTh style={{ width: '5%', textAlign: 'center' }}>Detail</TableTh>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Kolaborasi Inovasi</TableTh>
+                  <TableTh>Tahun</TableTh>
+                  <TableTh>Deskripsi Singkat</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
             </Table>
@@ -89,21 +88,21 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
-              <TableTh style={{ width: '1%', textAlign: 'center' }}>No</TableTh>
-              <TableTh style={{ width: '15%' }}>Nama Kolaborasi Inovasi</TableTh>
-              <TableTh style={{ width: '5%', textAlign: 'center' }}>Tahun</TableTh>
-              <TableTh style={{ width: '20%' }}>Deskripsi Singkat</TableTh>
-              <TableTh style={{ width: '5%', textAlign: 'center' }}>Detail</TableTh>
+              <TableTh>No</TableTh>
+              <TableTh>Nama Kolaborasi Inovasi</TableTh>
+              <TableTh>Tahun</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Detail</TableTh>
             </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item, index) => (
               <TableTr key={item.id}>
-                <TableTd style={{ width: '1%', textAlign: 'center' }}>{index + 1}</TableTd>
-                <TableTd style={{ width: '15%' }}>{item.name}</TableTd>
-                <TableTd style={{ width: '5%', textAlign: 'center' }}>{item.tahun}</TableTd>
-                <TableTd style={{ width: '20%' }}>{item.slug}</TableTd>
-                <TableTd style={{ width: '5%', textAlign: 'center' }}>
+                <TableTd>{index + 1}</TableTd>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.tahun}</TableTd>
+                <TableTd>{item.slug}</TableTd>
+                <TableTd>
                   <Button onClick={() => router.push(`/admin/inovasi/kolaborasi-inovasi/${item.id}`)}>
                     <IconDeviceImac size={20} />
                   </Button>
@@ -116,17 +115,13 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0);
-          }}
+          onChange={(newPage) => load(newPage)} // ini penting!
           total={totalPages}
           mt="md"
           mb="md"
         />
       </Center>
-
-    </Box>
+    </Box >
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx

@@ -0,0 +1,148 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconPhoto, 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';
+
+
+function EditFoto() {
+  const state = useProxy(mitraKolaborasi)
+  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: state.update.form.name || '',
+    imageId: state.update.form.imageId || ''
+  });
+
+  useEffect(() => {
+    const loadFoto = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await state.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            imageId: data.imageId || ''
+          });
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading foto:', error);
+        toast.error('Gagal memuat data foto');
+      }
+    };
+    loadFoto();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      state.update.form = {
+        ...state.update.form,
+        name: formData.name,
+        imageId: formData.imageId
+      };
+      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");
+        }
+        state.update.form.imageId = uploaded.id;
+      }
+      await state.update.update();
+      toast.success('Mitra berhasil diperbarui!');
+      router.push('/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi');
+    } catch (error) {
+      console.error('Error updating mitra:', error);
+      toast.error('Terjadi kesalahan saat memperbarui mitra');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Mitra</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Mitra</Text>}
+            placeholder='Masukkan nama mitra'
+            value={formData.name}
+            onChange={(e) =>
+              (formData.name = e.target.value)
+            }
+          />
+          <Box>
+            <Text>Upload Foto</Text>
+            <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>
+
+                <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>
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg={"gray"}>
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditFoto;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx

@@ -0,0 +1,136 @@
+'use client'
+import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
+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 { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateFoto() {
+  const state = useProxy(mitraKolaborasi)
+  const router = useRouter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    state.create.form = {
+      name: "",
+      imageId: "",
+    };
+
+    setPreviewImage(null)
+    setFile(null)
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("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 upload gambar");
+    }
+
+    state.create.form.imageId = uploaded.id;
+    await state.create.create();
+    resetForm();
+    router.push("/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Mitra</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Mitra</Text>}
+            placeholder='Masukkan nama mitra'
+            value={state.create.form.name}
+            onChange={(val) => {
+              state.create.form.name = val.target.value;
+            }}
+          />
+          <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>
+
+                  <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>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateFoto;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/page.tsx

@@ -0,0 +1,187 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'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 { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import mitraKolaborasi from '../../../_state/inovasi/mitra-kolaborasi';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function MitraKolaborasi() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Mitra Kolaborasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListMitraKolaborasi search={search} />
+    </Box>
+  );
+}
+
+function ListMitraKolaborasi({ search }: { search: string }) {
+  const listState = useProxy(mitraKolaborasi)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const handleHapus = () => {
+    if (selectedId) {
+      mitraKolaborasi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/kolaborasi-inovasi")
+    }
+  }
+
+  const {
+    data,
+    loading,
+    page,
+    totalPages,
+    load,
+  } = listState.findMany
+
+  useEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Mitra Kolaborasi'
+              href='/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Mitra</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Delete</TableTh>
+                  <TableTh>Edit</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data mitra kolaborasi yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Mitra Kolaborasi'
+          href='/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>No</TableTh>
+              <TableTh>Nama Mitra</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Delete</TableTh>
+              <TableTh>Edit</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item, index) => (
+              <TableTr key={item.id}>
+                <TableTd>{index + 1}</TableTd>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Box style={{
+                    width: 100,
+                    height: 100,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    borderRadius: 4
+                  }}>
+                    <Image
+                      src={item.image?.link || ''}
+                      alt={item.name}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        objectPosition: 'center'
+                      }}
+                    />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    onClick={() => {
+                      if (item) {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={mitraKolaborasi.delete.loading || !item}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    onClick={() => {
+                      if (item) {
+                        router.push(`/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi/${item.id}`);
+                      }
+                    }}
+                    disabled={!item}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus mitra kolaborasi ini?'
+      />
+    </Box >
+  );
+}
+
+export default MitraKolaborasi;

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/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/_com/list_PageAdmin.tsx

@@ -286,7 +286,7 @@ export const navBar = [
       {
         id: "Inovasi_4",
         name: "Kolaborasi Inovasi",
-        path: "/admin/inovasi/kolaborasi-inovasi"
+        path: "/admin/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi"
       },
       {
         id: "Inovasi_5",

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

@@ -1,23 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function desaDigitalFindMany() {
-    try {
-        const data = await prisma.desaDigital.findMany({
-            include: {
-                image: true,
-            },
-        });
+export default async function desaDigitalFindMany(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 fetch desa digital",
-            data,
-        };
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch desa digital",
-        };
-    }
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.desaDigital.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.desaDigital.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil desa digital 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 desa digital",
+    };
+  }
 }

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

@@ -5,6 +5,7 @@ import KolaborasiInovasi from "./kolaborasi-inovasi";
 import InfoTekno from "./info-teknologi";
 import AjukanIdeInovatif from "./ajukan-ide-inovatif";
 import LayananOnlineDesa from "./layanan-online-desa";
+import MitraKolaborasi from "./kolaborasi-inovasi/mitra-kolaborasi";
 
 const Inovasi = new Elysia({
   prefix: "/api/inovasi",
@@ -16,5 +17,6 @@ const Inovasi = new Elysia({
   .use(InfoTekno)
   .use(AjukanIdeInovatif)
   .use(LayananOnlineDesa)
-
+  .use(MitraKolaborasi)
+  
 export default Inovasi;

src/app/api/[[...slugs]]/_lib/inovasi/info-teknologi/findMany.ts

@@ -1,23 +1,61 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function infoTeknoFindMany() {
-    try {
-        const data = await prisma.infoTekno.findMany({
-            include: {
-                image: true,
-            },
-        });
+// Di findMany.ts
+export default async function infoTeknoFindMany(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 info teknologi",
-            data,
-        };
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch info teknologi",
-        };
-    }
+  // Buat where clause
+  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.infoTekno.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.infoTekno.count({
+        where
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch info teknologi with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch info teknologi with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
 }

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/create.ts

@@ -1,34 +1,37 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
+import { Prisma } from "@prisma/client";
 
-type FormCreateKolaborasiInovasi = {
-    name: string;
-    tahun: number;
-    slug: string;
-    deskripsi: string;
-    kolaborator: string;
-    imageId: string;
+// Define validation schema
+type FormCreateKolaborasiInovasi = Prisma.KolaborasiInovasiGetPayload<{
+  select: {
+    name: true;
+    tahun: true;
+    slug: true;
+    deskripsi: true;
+    kolaborator: true;
+  };
+}>;
+
+export default async function kolaborasiInovasiCreate(context: Context) {
+  const body = context.body as FormCreateKolaborasiInovasi;
+
+  // Create new kolaborasi inovasi
+  await prisma.kolaborasiInovasi.create({
+    data: {
+      name: body.name,
+      tahun: body.tahun,
+      slug: body.slug,
+      deskripsi: body.deskripsi,
+      kolaborator: body.kolaborator,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Berhasil membuat kolaborasi inovasi",
+    data: {
+      ...body,
+    },
+  };
 }
-
-export default async function kolaborasiInovasiCreate(context: Context){
-    const body = context.body as FormCreateKolaborasiInovasi;
-
-    await prisma.kolaborasiInovasi.create({
-        data: {
-            name: body.name,
-            tahun: body.tahun,
-            slug: body.slug,
-            deskripsi: body.deskripsi,
-            kolaborator: body.kolaborator,
-            imageId: body.imageId,
-        }
-    })
-
-    return {
-        success: true,
-        message: "Success create kolaborasi inovasi",
-        data: {
-            ...body,
-        }
-    }
-}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/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,42 @@ import { Context } from "elysia";
 export default async function kolaborasiInovasiFindMany(context: Context) {
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const year = (context.query.year as string) || '';
   const skip = (page - 1) * limit;
 
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan filter tahun (jika ada)
+  if (year) {
+    const startDate = new Date(parseInt(year), 0, 1); // 1 Januari tahun tersebut
+    const endDate = new Date(parseInt(year) + 1, 0, 1); // 1 Januari tahun berikutnya
+    where.createdAt = {
+      gte: startDate,
+      lt: endDate,
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { slug: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+
   try {
     const [data, total] = await Promise.all([
       prisma.kolaborasiInovasi.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.kolaborasiInovasi.count({
-        where: { isActive: true }
+        where
       })
     ]);
 

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/findUnique.ts

@@ -15,9 +15,6 @@ export default async function kolaborasiInovasiFindUnique(context: Context) {
     try {
         const kolaborasiInovasi = await prisma.kolaborasiInovasi.findUnique({
             where: { id },
-            include: {
-                image: true,
-            }
         });
 
         if (!kolaborasiInovasi) {

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/index.ts

@@ -21,7 +21,6 @@ const KolaborasiInovasi = new Elysia({
       slug: t.String(),
       deskripsi: t.String(),
       kolaborator: t.String(),
-      imageId: t.String(),
     }),
   })
   .put(
@@ -37,7 +36,7 @@ const KolaborasiInovasi = new Elysia({
         slug: t.String(),
         deskripsi: t.String(),
         kolaborator: t.String(),
-        imageId: t.String(),
+
       }),
     }
   )

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  name: string;
+  imageId: string;
+};
+
+export default async function mitraKolaborasiCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.mitraKolaborasi.create({
+        data: {
+            name: body.name,
+            imageId: body.imageId,
+        },
+    });
+
+    return {
+        success: true,
+        message: "Berhasil membuat mitra kolaborasi",
+        data: {
+            ...body,
+        },
+    };
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/del.ts

@@ -0,0 +1,54 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+export default async function mitraKolaborasiDelete(context: Context) {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const mitraKolaborasi = await prisma.mitraKolaborasi.findUnique({
+    where: { id },
+    include: {
+      image: true,
+    },
+  });
+
+  if (!mitraKolaborasi) {
+    return {
+      status: 404,
+      body: "Mitra kolaborasi tidak ditemukan",
+    };
+  }
+
+  if (mitraKolaborasi.image) {
+    try {
+      const filePath = path.join(
+        mitraKolaborasi.image.path,
+        mitraKolaborasi.image.name
+      );
+      await fs.unlink(filePath);
+      await prisma.fileStorage.delete({
+        where: { id: mitraKolaborasi.image.id },
+      });
+    } catch (error) {
+      console.error("Gagal hapus file image:", error);
+    }
+  }
+
+  await prisma.mitraKolaborasi.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Mitra kolaborasi berhasil dihapus",
+    status: 200,
+  };
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/findMany.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function mitraKolaborasiFindMany(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 = [
+      { name: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.mitraKolaborasi.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.mitraKolaborasi.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil mitra kolaborasi 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 mitra kolaborasi",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/findUnique.ts

@@ -0,0 +1,49 @@
+import prisma from "@/lib/prisma";
+
+export default async function mitraKolaborasiFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split("/");
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json({
+            success: false,
+            message: "ID tidak ditemukan",
+        }, {status: 400});
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, {status: 400});
+        }
+
+        const data = await prisma.mitraKolaborasi.findUnique({
+            where: { id },
+            include: {
+                image: true,
+            },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Mitra kolaborasi tidak ditemukan",
+            }, {status: 404});
+        }
+
+        return Response.json({
+            success: true,
+            message: "Success fetch mitra kolaborasi by ID",
+            data,
+        }, {status: 200});
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil mitra kolaborasi: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }, {status: 500});
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/index.ts

@@ -0,0 +1,37 @@
+import Elysia, { t } from "elysia";
+import mitraKolaborasiCreate from "./create";
+import mitraKolaborasiDelete from "./del";
+import mitraKolaborasiUpdate from "./updt";
+import mitraKolaborasiFindUnique from "./findUnique";
+import mitraKolaborasiFindMany from "./findMany";
+
+const MitraKolaborasi = new Elysia({
+  prefix: "/mitrakolaborasi",
+  tags: ["Inovasi/Mitra Kolaborasi"],
+})
+  .post("/create", mitraKolaborasiCreate, {
+    body: t.Object({
+      name: t.String(),
+      imageId: t.String(),
+    }),
+  })
+  .get("/find-many", mitraKolaborasiFindMany)
+  .get("/:id", async (context) => {
+    const response = await mitraKolaborasiFindUnique(context.request);
+    return response;
+  })
+  .delete("/del/:id", mitraKolaborasiDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await mitraKolaborasiUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        imageId: t.String(),
+      }),
+    }
+  );
+export default MitraKolaborasi;

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/updt.ts

@@ -0,0 +1,97 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+type FormUpdate = {
+    id: string;
+    name: string;
+    imageId: string;
+}
+export default async function mitraKolaborasiUpdate(context: Context) {
+    try {
+        const id = context.params?.id as string;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+    
+        const {
+            name,
+            imageId
+        } = body;
+    
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak ditemukan",
+            }), {
+                status: 400,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        const existing = await prisma.mitraKolaborasi.findUnique({
+            where: {id},
+            include: {
+                image: true,
+            }
+        })
+    
+        if (!existing) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "mitra kolaborasi tidak ditemukan",
+            }), {
+                status: 404,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        if (existing.imageId && existing.imageId !== imageId) {
+        const oldImage = existing.image;
+        if (oldImage) {
+            try {
+                const filePath = path.join(oldImage.path, oldImage.name);
+                await fs.unlink(filePath);
+                await prisma.fileStorage.delete({
+                    where: { id: oldImage.id },
+                });
+            } catch (error) {
+                console.error("Gagal hapus gambar lama:", error);
+            }
+        }
+        }
+    
+        const updated = await prisma.mitraKolaborasi.update({
+            where: { id },
+            data: {
+                name,
+                imageId,
+            }
+        })
+    
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Mitra kolaborasi berhasil diupdate",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    } catch (error) {
+        console.error("Error updating mitra kolaborasi:", error); 
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate mitra kolaborasi",
+        }), {
+            status: 500,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    }
+    }

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/updt.ts

@@ -9,7 +9,7 @@ type FormUpdateKolaborasiInovasi = {
     slug?: string;
     deskripsi?: string;
     kolaborator?: string;
-    imageId?: string;
+
 };
 export default async function kolaborasiInovasiUpdate(context: Context) {
     const body = context.body as FormUpdateKolaborasiInovasi;
@@ -31,7 +31,6 @@ export default async function kolaborasiInovasiUpdate(context: Context) {
           slug: body.slug,
           deskripsi: body.deskripsi,
           kolaborator: body.kolaborator,
-          imageId: body.imageId,
         },
       });
   

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/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/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/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)/ekonomi/pasar-desa/page.tsx

@@ -2,7 +2,7 @@
 import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
 import colors from '@/con/colors';
 import { Box, Center, Flex, Grid, GridCol, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react';
 import { motion } from 'motion/react';
 import { useRouter } from 'next/navigation';
@@ -14,6 +14,7 @@ function Page() {
   const router = useRouter()
   const state = useProxy(pasarDesaState.pasarDesa)
   const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const {
     data,
@@ -35,8 +36,8 @@ function Page() {
     : data;
 
   useShallowEffect(() => {
-    load(page, 4, search, selectedCategory || undefined)
-  }, [page, search, selectedCategory])
+    load(page, 4, debouncedSearch, selectedCategory || undefined)
+  }, [page, debouncedSearch, selectedCategory])
 
 
   if (loading || !data) {

src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx

@@ -6,7 +6,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import programKemiskinanState from '@/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 
 interface StatistikData {
@@ -31,6 +31,7 @@ interface ProgramKemiskinanData {
 
 function Page() {
   const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const state = useProxy(programKemiskinanState)
 
   const {
@@ -42,8 +43,8 @@ function Page() {
   } = state.findMany
 
   useShallowEffect(() => {
-    load(page, 2, search)
-  }, [page, search])
+    load(page, 2, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,79 +1,62 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
-import React from 'react';
+import { Stack, Box, Text, Paper, SimpleGrid, Image, Skeleton, Center, Pagination, Grid, GridCol, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
 
-const data = [
-  {
-    id: 1,
-    image: '/api/img/administrasi-digital.png',
-    judul: 'Layanan Administrasi Digital',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pengurusan dokumen kependudukan online.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembuatan KTP, KK, Surat Keterangan secara daring.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Antrian dan pembayaran pajak berbasis aplikasi mobile.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi kependudukan terintegrasi.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    image: '/api/img/edukasi-digital.png',
-    judul: 'Edukasi Digital',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ruang Belajar Digital dengan akses internet gratis.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan komputer dan literasi digital untuk semua usia.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kursus online keterampilan digital (desain, pemrograman, marketing).</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Beasiswa pendidikan teknologi untuk pemuda desa.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Perpustakaan digital dengan koleksi buku elektronik.</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    image: '/api/img/ekonomi-digital.png',
-    judul: 'Ekonomi Digital',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Marketplace produk UMKM Darmasaba.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Platform pemasaran hasil pertanian dan kerajinan lokal.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pembayaran digital untuk pelaku usaha desa.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Inkubator bisnis digital untuk wirausaha muda.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan e-commerce dan digital marketing.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    image: '/api/img/kesehatan-daring.png',
-    judul: 'Kesehatan Daring',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Telemedicine dengan dokter dan puskesmas.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Monitoring kesehatan berbasis aplikasi.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pendaftaran antrian puskesmas online.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Edukasi kesehatan melalui platform digital.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Rekam medis elektronik.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    image: '/api/img/pertanian-cerdas.png',
-    judul: 'Pertanian Cerdas',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi cuaca dan prediksi pertanian.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi pertanian online dengan ahli.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penjualan hasil pertanian melalui platform digital.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan pertanian modern berbasis teknologi.</ListItem>
-    </List>
-  },
-]
 function Page() {
+  const [search, setSearch] = useState("")
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const state = useProxy(desaDigitalState)
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Desa Digital / Smart Village
-        </Text>
-        <Text ta={'center'} fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
+      <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Desa Digital / Smart Village
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Produk'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>
@@ -84,13 +67,13 @@ function Page() {
               md: 3
             }}
           >
-            {data.map((v, k) => {
+            {filteredData.map((v, k) => {
               return (
                 <Paper p={'xl'} key={k}>
-                  <Image src={v.image} pb={10} radius={10} alt='' />
-                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
-                  <Box pr={'lg'}>
-                  {v.deskripsi}
+                  <Image src={v.image.link? v.image.link : ''} pb={10} radius={10} alt='' />
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
+                  <Box>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                   </Box>
                 </Paper>
               )
@@ -98,6 +81,15 @@ function Page() {
           </SimpleGrid>
         </Stack>
       </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,108 +1,63 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
 
-const data = [
-  {
-    id: 1,
-    image: '/api/img/pertanian-cerdas.png',
-    judul: 'Pertanian Cerdas',
-    subjudul1: 'Sistem Irigasi Hemat Air',
-    subjudul2: 'Pengolahan Limbah Pertanian',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penggunaan sensor kelembaban tanah</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kontrol penyiraman otomatis </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pengurangan konsumsi air hingga 40%</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pencacah jerami otomatis</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konversi limbah menjadi pupuk organik</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi pembakaran sampah pertanian</ListItem>
-    </List>,
-  },
-  {
-    id: 2,
-    image: '/api/img/energi-terbarukan.png',
-    judul: 'Energi Terbarukan',
-    subjudul1: 'Pembangkit Listrik Mikrohidro',
-    subjudul2: 'Solar Home System',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memanfaatkan aliran sungai sekitar</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kapasitas 10-50 kW</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Elektrifikasi mandiri desa</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Panel surya untuk rumah tangga </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Akses listrik 24 jam</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hemat biaya energi</ListItem>
-    </List>,
-  },
-  {
-    id: 3,
-    image: '/api/img/pengolahan-pangan.png',
-    judul: 'Pengolahan Pangan',
-    subjudul1: 'Mesin Pengering Hasil Pertanian',
-    subjudul2: 'Alat Pengolah Hasil Pertanian',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengering tenaga surya</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menjaga kualitas hasil panen</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mencegah kerusakan pasca panen</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pengupas dan pengemas produk</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Meningkatkan nilai jual komoditas</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Standarisasi kualitas produk</ListItem>
-    </List>,
-  },
-  {
-    id: 4,
-    image: '/api/img/pengelolaan-sampah.png',
-    judul: 'Pengelolaan Sampah',
-    subjudul1: 'Sistem Pengolahan Sampah Terpadu',
-    subjudul2: 'Komposter Komunal',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemilahan otomatis</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Daur ulang sampah organik dan anorganik</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembangkit listrik dari sampah</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengomposan cepat</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghasilkan pupuk organik</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi sampah ke TPA</ListItem>
-    </List>,
-  },
-  {
-    id: 5,
-    image: '/api/img/kesehatan-daring.png',
-    judul: 'Kesehatan Masyarakat',
-    subjudul1: 'Alat Deteksi Dini Penyakit',
-    subjudul2: 'Air Bersih Mandiri',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Skrining kesehatan portable </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemeriksaan tekanan darah dan gula </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi medis jarak jauh</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem filter air canggih </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghilangkan kontaminan </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jaminan kualitas air minum
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import infoTeknoState from '@/app/admin/(dashboard)/_state/inovasi/info-tekno';
+import { IconSearch } from '@tabler/icons-react';
 
-</ListItem>
-    </List>,
-  },
-]
 function Page() {
+  const [search, setSearch] = useState("")
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const state = useProxy(infoTeknoState)
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Info Teknologi Tepat Guna
-        </Text>
-        <Text ta={'center'} fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
+        <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Info Teknologi Tepat Guna
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Info Teknologi'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} p={'lg'}>
@@ -113,18 +68,13 @@ function Page() {
               md: 3
             }}
           >
-            {data.map((v, k) => {
+            {filteredData.map((v, k) => {
               return (
                 <Paper p={'xl'} key={k}>
-                  <Image src={v.image} pb={10} radius={10} alt='' />
-                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                  <Image src={v.image.link || ''} pb={10} radius={10} alt='' />
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
                   <Box pr={'lg'} pb={10}>
-                  <Text fz={'h4'} fw={'bold'} >{v.subjudul1}</Text>
-                    {v.deskripsi1}
-                  </Box>
-                  <Box pr={'lg'}>
-                  <Text fz={'h4'} fw={'bold'} >{v.subjudul2}</Text>
-                    {v.deskripsi2}
+                    <Text fz={'h4'} fw={'bold'} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                   </Box>
                 </Paper>
               )
@@ -132,6 +82,14 @@ function Page() {
           </SimpleGrid>
         </Stack>
       </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,26 +1,51 @@
+'use client'
+import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
 import colors from '@/con/colors';
-import { Stack, Box, Text, Paper, Flex, Group, SimpleGrid, Button, Image, Center } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Grid, GridCol, Group, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconChevronDown } from '@tabler/icons-react';
-
-const data = [
-  {
-    id: 1,
-    bulan: 'JANUARI 2025',
-    judul: 'Darmasaba Smart Waste',
-    deskripsi: 'Sistem manajemen sampah terpadu yang memudahkan warga untuk memilah dan mendaur ulang sampah.',
-    kolaborator: 'Kolaborator: DLH Kabupaten Badung, Komunitas Peduli Lingkungan, TPS3R Pudak Mesari'
-  },
-  {
-    id: 2,
-    bulan: 'FEBRUARI 2025',
-    judul: 'Darmasaba Digital Market',
-    deskripsi: 'Platform e-commerce untuk produk UMKM desa yang menghubungkan produsen lokal dengan pasar global.',
-    kolaborator: 'Kolaborator: Kementerian Desa PDTT, UMKM Darmasaba'
-  }
-]
 function Page() {
+  const state = useProxy(kolaborasiInovasiState)
+  const [search, setSearch] = useState('');
+  const [selectedYear, setSelectedYear] = useState<string | null>(null);
+
+  // Get unique years from the data
+  const years = Array.from(
+    new Set(
+      state.findMany.data?.map(item => 
+        new Date(item.createdAt).getFullYear().toString()
+      ) || []
+    )
+  )
+  .sort((a, b) => b.localeCompare(a)) // Sort descending (newest first)
+  .map(year => ({
+    value: year,
+    label: year,
+  }));
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    load(page, 10, search, selectedYear || '')
+  }, [page, search, selectedYear])
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+
   return (
     <>
       <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -28,27 +53,46 @@ function Page() {
           <BackButton />
         </Box>
         <Box px={{ base: 'md', md: 100 }} >
-          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Kolaborasi Inovasi
-          </Text>
+          <Grid align='center'>
+            <GridCol span={{ base: 12, md: 9 }}>
+              <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                Kolaborasi Inovasi
+              </Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3 }}>
+              <TextInput
+                radius={"lg"}
+                placeholder='Cari Kolaborasi Inovasi'
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                leftSection={<IconSearch size={20} />}
+                w={{ base: "50%", md: "100%" }}
+              />
+            </GridCol>
+          </Grid>
         </Box>
         <Box px={{ base: "md", md: 100 }}>
           <Stack gap={'lg'} justify='center'>
             <Group justify='flex-end'>
-              <Paper bg={colors['blue-button']} p={5} w={{ base: 150, md: 300 }}>
-                <Flex px={20} align={'center'} justify={'space-between'}>
-                  <Text fz={'h4'} fw={'bold'} c={colors['white-1']}>Tahun</Text>
-                  <IconChevronDown size={20} color={colors['white-1']} />
-                </Flex>
-              </Paper>
+              <Select
+                value={selectedYear}
+                onChange={setSelectedYear}
+                label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+                placeholder='Semua Tahun'
+                clearable
+                data={[
+                  { value: '', label: 'Semua Tahun' },
+                  ...years
+                ]}
+              />
             </Group>
             <SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
               {data.map((v, k) => {
                 return (
                   <Paper p={'xl'} key={k}>
-                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
                     <Box pr={'lg'} pb={20}>
-                      {v.deskripsi}
+                      {v.slug}
                     </Box>
                     <Box pr={'lg'}>
                       {v.kolaborator}
@@ -57,9 +101,15 @@ function Page() {
                 );
               })}
             </SimpleGrid>
-            <Group py={40} justify='center'>
-              <Button px={80} rightSection={<IconChevronDown />} radius={6} bg={colors["blue-button"]} c={colors["white-1"]}>Lihat Laporan Lainnya</Button>
-            </Group>
+            <Center>
+              <Pagination
+                value={page}
+                onChange={(newPage) => load(newPage)} // ini penting!
+                total={totalPages}
+                mt="md"
+                mb="md"
+              />
+            </Center>
           </Stack>
         </Box>
       </Stack>
@@ -72,7 +122,7 @@ function Page() {
             <Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
           </Box>
           <Center>
-            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{base: 500, md: 650}}/>
+            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{ base: 500, md: 650 }} />
           </Center>
         </Stack>
       </Box>

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -2,7 +2,7 @@
 import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan';
 import colors from '@/con/colors';
 import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -12,6 +12,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 function Page() {
   const state = useProxy(keamananLingkunganState)
   const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const {
     data,
     page,
@@ -21,8 +22,8 @@ function Page() {
   } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 3, search)
-  }, [page, search])
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (

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)/keamanan/tips-keamanan/page.tsx

@@ -4,7 +4,7 @@ import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skele
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { useProxy } from 'valtio/utils';
 import tipsKeamananState from '@/app/admin/(dashboard)/_state/keamanan/tips-keamanan';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { useState } from 'react';
 import { IconSearch } from '@tabler/icons-react';
 
@@ -12,6 +12,7 @@ import { IconSearch } from '@tabler/icons-react';
 function Page() {
   const state = useProxy(tipsKeamananState)
   const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const {
     data,
     page,
@@ -21,8 +22,8 @@ function Page() {
   } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 3, search)
-  }, [page, search])
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (

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>

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

@@ -2,10 +2,30 @@
 import jadwalkegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, CheckIcon, Combobox, ComboboxChevron, ComboboxOption, ComboboxOptions, ComboboxTarget, Divider, Group, InputBase, InputPlaceholder, Paper, Skeleton, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
+import {
+  ActionIcon,
+  Box,
+  Button,
+  Combobox,
+  ComboboxChevron,
+  ComboboxOption,
+  ComboboxOptions,
+  ComboboxTarget,
+  Divider,
+  Group,
+  InputBase,
+  InputPlaceholder,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Textarea,
+  TextInput,
+  useCombobox
+} from '@mantine/core';
 import { DateInput } from '@mantine/dates';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconCalendar } from '@tabler/icons-react';
+import { IconCalendar, IconDownload, IconPhone, IconMail, IconUser } from '@tabler/icons-react';
 import { useParams } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -17,6 +37,7 @@ const layanan = [
   'Konsultasi Gizi',
   'Pemeriksaan Kesehatan'
 ];
+
 function Page() {
   const combobox = useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),
@@ -30,192 +51,160 @@ function Page() {
   });
 
   const [value, setValue] = useState<string | null>('');
+  const [dateInputOpened, setDateInputOpened] = useState(false);
+  const params = useParams();
+  const state = useProxy(jadwalkegiatanState);
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string);
+  }, []);
 
   const options = layanan.map((item) => (
     <ComboboxOption value={item} key={item} active={item === value}>
       <Group gap="xs">
-        {item === value && <CheckIcon size={12} />}
+        {item === value && <IconUser size={14} stroke={2} />}
         <span>{item}</span>
       </Group>
     </ComboboxOption>
   ));
-  const [dateInputOpened, setDateInputOpened] = useState(false);
 
   const pickerControl = (
-    <ActionIcon onClick={() => setDateInputOpened(true)} variant="subtle" color="gray">
+    <ActionIcon onClick={() => setDateInputOpened(true)} variant="light" color="blue">
       <IconCalendar size={18} />
     </ActionIcon>
   );
 
-
-  const params = useParams()
-  const state = useProxy(jadwalkegiatanState)
-  useShallowEffect(() => {
-    state.findUnique.load(params?.id as string)
-  }, [])
-
   if (!state.findUnique.data) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
+      <Stack py="xl" px="lg">
+        <Skeleton h={500} radius="lg" />
       </Stack>
-    )
+    );
   }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="lg">
       <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"}>
+        <Stack gap="lg">
+          <Paper radius="xl" shadow="md">
+            <Box
+              style={{ borderTopLeftRadius: 16, borderTopRightRadius: 16 }}
+              bg={colors['blue-button']}
+            >
+              <Text p="md" fz={{ base: "h3", md: "h2" }} c={colors['white-1']} fw="bold">
                 Detail & Pendaftaran Kegiatan
               </Text>
             </Box>
-            <Box p={'md'} >
-              <Stack gap={'xs'}>
-                {/* Informasi Kegiatan */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Informasi Kegiatan
-                </Text>
-                <Divider />
-                <Text fz={'h4'} fw={"bold"}>
-                  Nama Kegiatan : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.name}</Text>
-                </Text>
-                <Text fz={'h4'} fw={"bold"}>
-                  Tanggal : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.tanggal}</Text>
-                </Text>
-                <Text fz={'h4'} fw={"bold"}>
-                  Waktu : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.waktu}</Text>
-                </Text>
-                <Text pb={10} fz={'h4'} fw={"bold"}>
-                  Lokasi : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.lokasi}</Text>
-                </Text>
-                {/* Deskripsi Kegiatan */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Deskripsi Kegiatan
-                </Text>
-                <Divider />
-                <Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
-                {/* Layanan Yang Tersedia */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Layanan Yang Tersedia
-                </Text>
-                <Divider />
-                <Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
-                {/* Syarat dan Ketentuan */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Syarat dan Ketentuan
-                </Text>
-                <Divider />
-                <Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
-                {/* Dokumen yang Perlu Dibawa */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Dokumen yang Perlu Dibawa
-                </Text>
-                <Divider />
-                <Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
-                {/* Pendaftaran */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Pendaftaran
-                </Text>
-                <Divider />
-                <Stack gap={'xs'} pb={20}>
-                  <TextInput
-                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    label="Nama Balita"
-                    placeholder='Masukkan nama balita'
-                  />
-                  <DateInput
-                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
-                    placeholder='dd/mm/yyyy'
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    label="Tanggal Lahir"
-                    popoverProps={{ opened: dateInputOpened, onChange: setDateInputOpened }}
-                    rightSection={pickerControl}
-                  />
-                  <TextInput
-                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    label="Nama Orang Tua / Wali"
-                    placeholder='Masukkan nama orang tua / wali'
-                  />
-                  <TextInput
-                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    label="No. Telepon"
-                    placeholder='Masukkan no. telepon'
-                  />
-                  <TextInput
-                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }}
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    label="Alamat"
-                    placeholder='Masukkan alamat lengkap'
-                  />
-                  {/* Layanan */}
-                  <Text fz={'16px'} fw={"bold"}>
-                    Layananan Yang Dibutuhkan
-                  </Text>
-                  <Box
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                  >
-                    <Combobox
-                      store={combobox}
-                      resetSelectionOnOptionHover
-                      withinPortal={false}
-                      onOptionSubmit={(val) => {
-                        setValue(val);
-                        combobox.updateSelectedOptionIndex('active');
-                      }}
-                    >
-                      <ComboboxTarget targetType="button">
-                        <InputBase
-                          component="button"
-                          type="button"
-                          pointer
-                          rightSection={<ComboboxChevron />}
-                          rightSectionPointerEvents="none"
-                          onClick={() => combobox.toggleDropdown()}
-                        >
-                          {value || <InputPlaceholder>Layanan</InputPlaceholder>}
-                        </InputBase>
-                      </ComboboxTarget>
-
-                      <Combobox.Dropdown>
-                        <ComboboxOptions>{options}</ComboboxOptions>
-                      </Combobox.Dropdown>
-                    </Combobox>
-                  </Box>
-                  <Textarea
-                    pb={10}
-                    styles={{ label: { fontSize: '16px', fontWeight: 'bold' }, }} w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    label="Catatan Khusus (Opsional)"
-                    placeholder='Masukkan catatan jika ada'
-                  />
-                  <Button
-                    w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
-                    fz={'md'} bg={colors['blue-button']}>
-                    Daftar Sekarang
-                  </Button>
+            <Box p="lg">
+              <Stack gap="xl">
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Informasi Kegiatan</Text>
+                  <Divider />
+                  <Text fz="md" fw="bold">Nama Kegiatan: <Text span>{state.findUnique.data.informasijadwalkegiatan.name}</Text></Text>
+                  <Text fz="md" fw="bold">Tanggal: <Text span>{state.findUnique.data.informasijadwalkegiatan.tanggal}</Text></Text>
+                  <Text fz="md" fw="bold">Waktu: <Text span>{state.findUnique.data.informasijadwalkegiatan.waktu}</Text></Text>
+                  <Text fz="md" fw="bold">Lokasi: <Text span>{state.findUnique.data.informasijadwalkegiatan.lokasi}</Text></Text>
                 </Stack>
-                <Paper p={'lg'} bg={colors['blue-button-trans']}>
-                  <Text fz={'h3'} c={colors['white-1']} fw={'bold'}>Informasi Kontak</Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    Penanggung Jawab : <Text span fz={'h4'}>Bidan Komang Ayu</Text>
-                  </Text>
-                  <Text fz={'h4'} c={colors['white-1']} fw={"bold"}>
-                    Telepon : <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>
+
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Deskripsi Kegiatan</Text>
+                  <Divider />
+                  <Text ta="justify" fz="md" dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsijadwalkegiatan.deskripsi }} />
+                </Stack>
+
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Layanan yang Tersedia</Text>
+                  <Divider />
+                  <Text ta="justify" fz="md" dangerouslySetInnerHTML={{ __html: state.findUnique.data.layananjadwalkegiatan.content }} />
+                </Stack>
+
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Syarat & Ketentuan</Text>
+                  <Divider />
+                  <Text ta="justify" fz="md" dangerouslySetInnerHTML={{ __html: state.findUnique.data.syaratketentuanjadwalkegiatan.content }} />
+                </Stack>
+
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Dokumen yang Perlu Dibawa</Text>
+                  <Divider />
+                  <Text ta="justify" fz="md" dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
+                </Stack>
+
+                <Stack gap="sm">
+                  <Text fz="lg" fw="bold">Formulir Pendaftaran</Text>
+                  <Divider />
+                  <Stack gap="md">
+                    <TextInput label="Nama Balita" placeholder="Masukkan nama balita" size="md" />
+                    <DateInput
+                      label="Tanggal Lahir"
+                      placeholder="dd/mm/yyyy"
+                      size="md"
+                      w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}
+                      popoverProps={{ opened: dateInputOpened, onChange: setDateInputOpened }}
+                      rightSection={pickerControl}
+                    />
+                    <TextInput label="Nama Orang Tua / Wali" placeholder="Masukkan nama orang tua / wali" size="md" />
+                    <TextInput label="Nomor Telepon" placeholder="Masukkan nomor telepon" size="md" />
+                    <TextInput label="Alamat" placeholder="Masukkan alamat lengkap" size="md" />
+                    <Box w={{ base: '100%', md: '85%', lg: '75%', xl: '50%' }}>
+                      <Text fz="sm" fw="bold" pb={4}>Pilih Layanan</Text>
+                      <Combobox
+                        store={combobox}
+                        resetSelectionOnOptionHover
+                        withinPortal={false}
+                        onOptionSubmit={(val) => {
+                          setValue(val);
+                          combobox.updateSelectedOptionIndex('active');
+                        }}
+                      >
+                        <ComboboxTarget targetType="button">
+                          <InputBase
+                            component="button"
+                            type="button"
+                            pointer
+                            rightSection={<ComboboxChevron />}
+                            rightSectionPointerEvents="none"
+                            onClick={() => combobox.toggleDropdown()}
+                          >
+                            {value || <InputPlaceholder>Pilih layanan</InputPlaceholder>}
+                          </InputBase>
+                        </ComboboxTarget>
+                        <Combobox.Dropdown>
+                          <ComboboxOptions>{options}</ComboboxOptions>
+                        </Combobox.Dropdown>
+                      </Combobox>
+                    </Box>
+                    <Textarea label="Catatan Khusus (Opsional)" placeholder="Masukkan catatan jika ada" size="md" />
+                    <Button size="md" radius="lg" bg={colors['blue-button']}>
+                      Daftar Sekarang
+                    </Button>
+                  </Stack>
+                </Stack>
+
+                <Paper p="lg" radius="md" bg={colors['blue-button-trans']} shadow="sm">
+                  <Stack gap="xs">
+                    <Text fz="lg" c={colors['white-1']} fw="bold">Informasi Kontak</Text>
+                    <Group gap="xs">
+                      <IconUser size={18} color="white" />
+                      <Text fz="md" c={colors['white-1']}>Penanggung Jawab: <Text span fw="bold">Bidan Komang Ayu</Text></Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconPhone size={18} color="white" />
+                      <Text fz="md" c={colors['white-1']}>081234567890</Text>
+                    </Group>
+                    <Group gap="xs">
+                      <IconMail size={18} color="white" />
+                      <Text fz="md" c={colors['white-1']}>puskesmasabiansemal3@gmail.com</Text>
+                    </Group>
+                  </Stack>
                 </Paper>
+
                 <Group>
-                  <Button fz={'lg'} bg={'green'}>
-                    Download Jadwal Posyandu 2025 (PDF)
+                  <Button size="md" radius="lg" leftSection={<IconDownload size={18} />} color="green">
+                    Unduh Jadwal Posyandu 2025 (PDF)
                   </Button>
                 </Group>
               </Stack>
@@ -227,5 +216,4 @@ function Page() {
   );
 }
 
-
 export default Page;

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

@@ -1,53 +1,101 @@
 'use client'
 import jadwalkegiatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan';
 import colors from '@/con/colors';
-import { Anchor, Box, Divider, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Card, Divider, Group, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconChevronRight, IconClockHour4, IconMapPin } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
 function JadwalKegiatanPage() {
-  const state = useProxy(jadwalkegiatanState)
+  const state = useProxy(jadwalkegiatanState);
   const router = useRouter();
 
-  useShallowEffect(()=> {
-    state.findMany.load()
-  }, [])
+  useShallowEffect(() => {
+    state.findMany.load();
+  }, []);
 
-  if(!state.findMany.data){
+  if (!state.findMany.data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
+      <Box py="lg">
+        <Skeleton h={500} radius="lg" />
       </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']}>Jadwal Kegiatan</Text>
-          {state.findMany.data.map((item) => (
-            <Box key={item.id}>
-              <Text fz={'h4'} fw={'bold'}>
-                {item.informasijadwalkegiatan.name}
+      <Paper p="xl" bg={colors['white-trans-1']} radius="xl" shadow="md" h="auto" mih="100vh">
+        <Stack gap="lg">
+          <Text ta="center" fw={700} fz="32px" c={colors['blue-button']}>
+            Jadwal Kegiatan Warga
+          </Text>
+
+          {state.findMany.data.length === 0 ? (
+            <Box py="xl" ta="center">
+              <Text fz="lg" c="dimmed">
+                Belum ada jadwal kegiatan yang tersedia
               </Text>
-              <Text fz={'h4'}>
-                {item.informasijadwalkegiatan.waktu}
-              </Text>
-              <Text fz={'h4'}>
-                {item.informasijadwalkegiatan.lokasi}
-              </Text>
-              <Text fz={'h6'} fw={'bold'} c={colors['blue-button']}>
-                {item.informasijadwalkegiatan.tanggal}
-              </Text>
-              <Anchor onClick={()=> router.push(`/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/${item.id}`)} c={colors['blue-button']} variant='transparent'>
-                <Text c={colors['blue-button']} fz={'h4'} >
-                  Detail & Pendaftaran
-                </Text>
-              </Anchor>
             </Box>
-          ))}
-          <Divider color={colors['blue-button']} px={'xl'} />
+          ) : (
+            state.findMany.data.map((item) => (
+              <Card
+                key={item.id}
+                withBorder
+                radius="xl"
+                shadow="sm"
+                p="lg"
+                style={{ backdropFilter: 'blur(8px)' }}
+              >
+                <Stack gap="sm">
+                  <Group justify="space-between">
+                    <Text fw={700} fz="xl">
+                      {item.informasijadwalkegiatan.name}
+                    </Text>
+                    <Text fw={600} fz="sm" c={colors['blue-button']}>
+                      {item.informasijadwalkegiatan.tanggal}
+                    </Text>
+                  </Group>
+
+                  <Group gap="xs">
+                    <IconClockHour4 size={18} color={colors['blue-button']} />
+                    <Text fz="sm">{item.informasijadwalkegiatan.waktu}</Text>
+                  </Group>
+
+                  <Group gap="xs">
+                    <IconMapPin size={18} color={colors['blue-button']} />
+                    <Text fz="sm">{item.informasijadwalkegiatan.lokasi}</Text>
+                  </Group>
+
+                  <Divider my="sm" />
+
+                  <Group justify="flex-end">
+                    <Button
+                      variant="light"
+                      radius="lg"
+                      size="sm"
+                      rightSection={<IconChevronRight size={18} />}
+                      onClick={() =>
+                        router.push(
+                          `/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan-page/${item.id}`
+                        )
+                      }
+                      styles={{
+                        root: {
+                          background: colors['blue-button'],
+                          color: 'white',
+                          boxShadow: '0 0 12px rgba(0, 123, 255, 0.4)',
+                          transition: 'all 0.2s ease',
+                        },
+                      }}
+                    >
+                      Lihat Detail & Daftar
+                    </Button>
+                  </Group>
+                </Stack>
+              </Card>
+            ))
+          )}
         </Stack>
       </Paper>
     </Box>