Fix eror edit admin lowongan kerja

prisma/schema.prisma

@@ -223,7 +223,7 @@ model KategoriPrestasiDesa {
 model Responden {
   id             String                 @id @default(cuid())
   name           String                 @unique
-  tanggal        DateTime // misal: 2025-05-01
+  tanggal        String // misal: 2025-05-01
   jenisKelamin   JenisKelaminResponden  @relation(fields: [jenisKelaminId], references: [id])
   jenisKelaminId String
   rating         PilihanRatingResponden @relation(fields: [ratingId], references: [id])

src/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja.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";
@@ -61,13 +62,39 @@ const lowonganKerjaState = proxy({
   findMany: {
     data: null as
       | Prisma.LowonganPekerjaanGetPayload<{
-          omit: { isActive: true };
+          omit: {
+            isActive: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.lowongankerja["find-many"].get();
-      if (res.status === 200) {
-        lowonganKerjaState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      lowonganKerjaState.findMany.loading = true; // ✅ Akses langsung via nama path
+      lowonganKerjaState.findMany.page = page;
+      lowonganKerjaState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.ekonomi.lowongankerja["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          lowonganKerjaState.findMany.data = res.data.data ?? [];
+          lowonganKerjaState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          lowonganKerjaState.findMany.data = [];
+          lowonganKerjaState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch lowongan kerja paginated:", err);
+        lowonganKerjaState.findMany.data = [];
+        lowonganKerjaState.findMany.totalPages = 1;
+      } finally {
+        lowonganKerjaState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.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";
@@ -53,22 +54,47 @@ const pasarDesa = proxy({
     },
   },
   findMany: {
-    data: null as Array<
-      Prisma.PasarDesaGetPayload<{
-        include: {
-          image: true;
-          KategoriToPasar: {
-            include: {
-              kategori: true;
+    data: null as
+      | Prisma.PasarDesaGetPayload<{
+          include: {
+            image: true;
+            KategoriToPasar: {
+              include: {
+                kategori: true;
+              };
             };
           };
-        };
-      }>
-    > | null,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get();
-      if (res.status === 200) {
-        pasarDesa.findMany.data = res.data?.data ?? [];
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "", categoryId?: string) => {
+      pasarDesa.findMany.loading = true;
+      pasarDesa.findMany.page = page;
+      pasarDesa.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (categoryId) query.categoryId = categoryId;
+    
+        const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          pasarDesa.findMany.data = res.data.data ?? [];
+          pasarDesa.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          pasarDesa.findMany.data = [];
+          pasarDesa.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch keamanan lingkungan paginated:", err);
+        pasarDesa.findMany.data = [];
+        pasarDesa.findMany.totalPages = 1;
+      } finally {
+        pasarDesa.findMany.loading = false;
       }
     },
   },
@@ -272,14 +298,41 @@ const kategoriProduk = proxy({
     },
   },
   findMany: {
-    data: null as Array<{
-      id: string;
-      nama: string;
-    }> | null,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get();
-      if (res.status === 200) {
-        kategoriProduk.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.KategoriProdukGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search2: "",
+   load: async (page = 1, limit = 10, search2 = "") => {
+      kategoriProduk.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriProduk.findMany.page = page;
+      kategoriProduk.findMany.search2 = search2;
+  
+      try {
+        const query: any = { page, limit };
+        if (search2) query.search2 = search2;
+    
+        const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          kategoriProduk.findMany.data = res.data.data ?? [];
+          kategoriProduk.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kategoriProduk.findMany.data = [];
+          kategoriProduk.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kategori produk paginated:", err);
+        kategoriProduk.findMany.data = [];
+        kategoriProduk.findMany.totalPages = 1;
+      } finally {
+        kategoriProduk.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan.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";
@@ -53,15 +54,39 @@ const keamananLingkunganState = proxy({
   findMany: {
     data: null as
       | Prisma.KeamananLingkunganGetPayload<{
-          include: { image: true };
+          include: {
+            image: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.keamananlingkungan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        keamananLingkunganState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      keamananLingkunganState.findMany.loading = true; // ✅ Akses langsung via nama path
+      keamananLingkunganState.findMany.page = page;
+      keamananLingkunganState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.keamanan.keamananlingkungan["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          keamananLingkunganState.findMany.data = res.data.data ?? [];
+          keamananLingkunganState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          keamananLingkunganState.findMany.data = [];
+          keamananLingkunganState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch keamanan lingkungan paginated:", err);
+        keamananLingkunganState.findMany.data = [];
+        keamananLingkunganState.findMany.totalPages = 1;
+      } finally {
+        keamananLingkunganState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/keamanan/polsek-terdekat.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";
@@ -63,13 +64,41 @@ const polsekTerdekatState = proxy({
   findMany: {
     data: null as
       | Prisma.PolsekTerdekatGetPayload<{
-          include: { layananPolsek: true };
+          include: {
+            layananPolsek: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.polsekterdekat["find-many"].get();
-      if (res.status === 200) {
-        polsekTerdekatState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      polsekTerdekatState.findMany.loading = true; // ✅ Akses langsung via nama path
+      polsekTerdekatState.findMany.page = page;
+      polsekTerdekatState.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.keamanan.polsekterdekat["find-many"].get(
+          { query }
+        );
+
+        if (res.status === 200 && res.data?.success) {
+          polsekTerdekatState.findMany.data = res.data.data ?? [];
+          polsekTerdekatState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          polsekTerdekatState.findMany.data = [];
+          polsekTerdekatState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch polsek terdekat paginated:", err);
+        polsekTerdekatState.findMany.data = [];
+        polsekTerdekatState.findMany.totalPages = 1;
+      } finally {
+        polsekTerdekatState.findMany.loading = false;
       }
     },
   },
@@ -237,6 +266,29 @@ const polsekTerdekatState = proxy({
       polsekTerdekatState.edit.form = { ...defaultForm };
     },
   },
+  findFirst: {
+    data: null as Prisma.PolsekTerdekatGetPayload<{
+      include: {
+        layananPolsek: true;
+      };
+    }> | null,
+    loading: false,
+    load: async () => {  // Changed to arrow function
+      polsekTerdekatState.findFirst.loading = true;
+      try {
+        const res = await ApiFetch.api.keamanan.polsekterdekat["find-first"].get();
+        if (res.status === 200 && res.data?.success) {
+          polsekTerdekatState.findFirst.data = res.data.data || null;
+        } else {
+          polsekTerdekatState.findFirst.data = null;
+        }
+      } catch (err) {
+        console.error("Gagal fetch polsek terdekat terbaru:", err);
+      } finally {
+        polsekTerdekatState.findFirst.loading = false;
+      }
+    }
+  }
 });
 
 export default polsekTerdekatState;

src/app/admin/(dashboard)/_state/keamanan/tips-keamanan.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";
@@ -53,15 +54,39 @@ const tipsKeamananState = proxy({
   findMany: {
     data: null as
       | Prisma.MenuTipsKeamananGetPayload<{
-          include: { image: true };
+          include: {
+            image: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.menutipskeamanan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        tipsKeamananState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      tipsKeamananState.findMany.loading = true; // ✅ Akses langsung via nama path
+      tipsKeamananState.findMany.page = page;
+      tipsKeamananState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.keamanan.menutipskeamanan["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          tipsKeamananState.findMany.data = res.data.data ?? [];
+          tipsKeamananState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          tipsKeamananState.findMany.data = [];
+          tipsKeamananState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch menu tips keamanan paginated:", err);
+        tipsKeamananState.findMany.data = [];
+        tipsKeamananState.findMany.totalPages = 1;
+      } finally {
+        tipsKeamananState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit.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";
@@ -20,17 +21,41 @@ const defaultForm = {
 
 const infoWabahPenyakit = proxy({
   findMany: {
-    data: [] as Prisma.InfoWabahPenyakitGetPayload<{
-      include: {
-        image: true;
-      };
-    }>[],
-    async load() {
-      const res = await ApiFetch.api.kesehatan.infowabahpenyakit[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        infoWabahPenyakit.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.InfoWabahPenyakitGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      infoWabahPenyakit.findMany.loading = true; // ✅ Akses langsung via nama path
+      infoWabahPenyakit.findMany.page = page;
+      infoWabahPenyakit.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.infowabahpenyakit["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+         infoWabahPenyakit.findMany.data = res.data.data ?? [];
+          infoWabahPenyakit.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          infoWabahPenyakit.findMany.data = [];
+          infoWabahPenyakit.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch info wabah penyakit paginated:", err);
+        infoWabahPenyakit.findMany.data = [];
+        infoWabahPenyakit.findMany.totalPages = 1;
+      } finally {
+        infoWabahPenyakit.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.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";
@@ -5,204 +6,241 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-    name: z.string().min(3, "Judul minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    imageId: z.string().nonempty(),
-})
-
-const defaultForm = {
-    name: "",
-    deskripsi: "",
-    imageId: "",
-}
-
-const kontakDarurat = proxy({
-    findMany: {
-        data: [] as Prisma.KontakDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }>[],
-        async load() {
-            const res = await ApiFetch.api.kesehatan.kontakdarurat[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                kontakDarurat.findMany.data = res.data?.data ?? [];
-            }
-        },
-    },
-    create:{
-        form: {...defaultForm},
-        loading: false,
-        async create() {
-            const cek = templateForm.safeParse(kontakDarurat.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-
-            try {
-                kontakDarurat.create.loading = true;
-                const res = await ApiFetch.api.kesehatan.kontakdarurat[
-                    "create"
-                ].post(kontakDarurat.create.form);
-                if (res.status === 200) {
-                    kontakDarurat.findMany.load();
-                    return toast.success("Kontak Darurat berhasil disimpan!");
-                }
-
-                return toast.error("Gagal menyimpan kontak darurat");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                kontakDarurat.create.loading = false;
-            }
-        },
-        resetForm() {
-            kontakDarurat.create.form = {...defaultForm};
-        }
-    },
-    findUnique: {
-        data: null as Prisma.KontakDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }> | null,
-        async load(id: string) {
-           try {
-            const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
-            if (res.ok) {
-                const data = await res.json();
-                kontakDarurat.findUnique.data = data.data ?? null;
-            } else {
-                console.error("Failed to fetch data", res.status, res.statusText);
-                kontakDarurat.findUnique.data = null;
-            }
-           } catch (error) {
-            console.error("Error fetching data:", error);
-            kontakDarurat.findUnique.data = null;
-           }
-        },
-    },
-    delete: {
-        loading: false,
-        async byId(id: string) {
-          try {
-            kontakDarurat.delete.loading = true;
-            const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            });
-            
-            const result = await response.json();
-            
-            if (response.ok && result?.success) {
-              toast.success(result.message || "Kontak darurat berhasil dihapus");
-              await kontakDarurat.findMany.load(); // refresh list
-            } else {
-              toast.error(result?.message || "Gagal menghapus kontak darurat");
-            }
-          } catch (error) {
-            console.error("Gagal delete:", error);
-            toast.error("Terjadi kesalahan saat menghapus kontak darurat");
-          } finally {
-            kontakDarurat.delete.loading = false;
-          }
-        }
-      },
-    edit: {
-        id: "",
-        form: { ...defaultForm },
-        loading: false,
-    
-        async load(id: string) {
-          if (!id) {
-            toast.warn("ID tidak valid");
-            return null;
-          }
-    
-          try {
-            const response = await fetch(`/api/kesehatan/kontakdarurat/${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,
-                deskripsi: data.deskripsi,
-                imageId: data.imageId,
-              };
-              return data; // Return the loaded data
-            } else {
-              throw new Error(result?.message || "Gagal memuat data");
-            }
-          } catch (error) {
-            console.error("Error fetching kontak darurat:", error);
-            toast.error(error instanceof Error ? error.message : "Gagal memuat data");
-            return null;
-          }
-        },
-    
-        async update() {
-            const cek = templateForm.safeParse(kontakDarurat.edit.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-    
-            try {
-                kontakDarurat.edit.loading = true;
-                const response = await fetch(`/api/kesehatan/kontakdarurat/${this.id}`, {
-                    method: "PUT",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        name: this.form.name,
-                        deskripsi: this.form.deskripsi,
-                        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 || "Kontak darurat berhasil diupdate");
-                    await kontakDarurat.findMany.load();  
-                    return true;
-                } else {
-                    throw new Error(result.message || "Gagal update kontak darurat");
-                }
-            } catch (error) {
-                console.error("Gagal update:", error);
-                toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate kontak darurat");
-                return false;
-            } finally {
-                kontakDarurat.edit.loading = false;
-            }
-        },
-        reset() {
-            kontakDarurat.edit.id = "";
-            kontakDarurat.edit.form = { ...defaultForm };
-        },
-      },
+  name: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
 });
 
-export default kontakDarurat
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const kontakDarurat = proxy({
+  findMany: {
+    data: null as
+      | Prisma.KontakDaruratGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kontakDarurat.findMany.loading = true; // ✅ Akses langsung via nama path
+      kontakDarurat.findMany.page = page;
+      kontakDarurat.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kontakdarurat[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          kontakDarurat.findMany.data = res.data.data ?? [];
+          kontakDarurat.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kontakDarurat.findMany.data = [];
+          kontakDarurat.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kontak darurat paginated:", err);
+        kontakDarurat.findMany.data = [];
+        kontakDarurat.findMany.totalPages = 1;
+      } finally {
+        kontakDarurat.findMany.loading = false;
+      }
+    },
+  },
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(kontakDarurat.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDarurat.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kontakdarurat["create"].post(
+          kontakDarurat.create.form
+        );
+        if (res.status === 200) {
+          kontakDarurat.findMany.load();
+          return toast.success("Kontak Darurat berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kontak darurat");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kontakDarurat.create.loading = false;
+      }
+    },
+    resetForm() {
+      kontakDarurat.create.form = { ...defaultForm };
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KontakDaruratGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kontakDarurat.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kontakDarurat.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kontakDarurat.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      try {
+        kontakDarurat.delete.loading = true;
+        const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kontak darurat berhasil dihapus");
+          await kontakDarurat.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kontak darurat");
+      } finally {
+        kontakDarurat.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kontakdarurat/${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,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching kontak darurat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(kontakDarurat.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDarurat.edit.loading = true;
+        const response = await fetch(
+          `/api/kesehatan/kontakdarurat/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              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 || "Kontak darurat berhasil diupdate");
+          await kontakDarurat.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal update:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat mengupdate kontak darurat"
+        );
+        return false;
+      } finally {
+        kontakDarurat.edit.loading = false;
+      }
+    },
+    reset() {
+      kontakDarurat.edit.id = "";
+      kontakDarurat.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default kontakDarurat;

src/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat.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";
@@ -17,21 +18,45 @@ const defaultForm = {
 }
 
 const penangananDarurat = proxy({
-    findMany: {
-        data: [] as Prisma.PenangananDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }>[],
-        async load() {
-            const res = await ApiFetch.api.kesehatan.penanganandarurat[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                penangananDarurat.findMany.data = res.data?.data ?? [];
-            }
-        },
+  findMany: {
+    data: null as
+      | Prisma.PenangananDaruratGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      penangananDarurat.findMany.loading = true; // ✅ Akses langsung via nama path
+      penangananDarurat.findMany.page = page;
+      penangananDarurat.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.penanganandarurat["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+         penangananDarurat.findMany.data = res.data.data ?? [];
+          penangananDarurat.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          penangananDarurat.findMany.data = [];
+          penangananDarurat.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        penangananDarurat.findMany.data = [];
+        penangananDarurat.findMany.totalPages = 1;
+      } finally {
+        penangananDarurat.findMany.loading = false;
+      }
     },
+  },
     create:{
         form: {...defaultForm},
         loading: false,

src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.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";
@@ -20,17 +21,43 @@ const defaultForm = {
 
 const programKesehatan = proxy({
   findMany: {
-    data: [] as Prisma.ProgramKesehatanGetPayload<{
-      include: {
-        image: true;
-      };
-    }>[],
-    async load() {
-      const res = await ApiFetch.api.kesehatan.programkesehatan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        programKesehatan.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.ProgramKesehatanGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      programKesehatan.findMany.loading = true; // ✅ Akses langsung via nama path
+      programKesehatan.findMany.page = page;
+      programKesehatan.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.programkesehatan[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          programKesehatan.findMany.data = res.data.data ?? [];
+          programKesehatan.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          programKesehatan.findMany.data = [];
+          programKesehatan.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        programKesehatan.findMany.data = [];
+        programKesehatan.findMany.totalPages = 1;
+      } finally {
+        programKesehatan.findMany.loading = false;
       }
     },
   },
@@ -97,12 +124,15 @@ const programKesehatan = proxy({
       try {
         programKesehatan.delete.loading = true;
 
-        const response = await fetch(`/api/kesehatan/programkesehatan/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/kesehatan/programkesehatan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         const result = await response.json();
         if (response.ok && result?.success) {
@@ -156,57 +186,70 @@ const programKesehatan = proxy({
         }
       } catch (error) {
         console.error("Error fetching program kesehatan:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
         return null;
       }
     },
 
     async update() {
-        const cek = templateForm.safeParse(programKesehatan.edit.form);
-        if (!cek.success) {
-            const err = `[${cek.error.issues
-                .map((v) => `${v.path.join(".")}`)
-                .join("\n")}] required`;
-            return toast.error(err);
-        }
+      const cek = templateForm.safeParse(programKesehatan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
 
-        try {
-            programKesehatan.edit.loading = true;
-            const response = await fetch(`/api/kesehatan/programkesehatan/${this.id}`, {
-                method: "PUT",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    name: this.form.name,
-                    deskripsiSingkat: this.form.deskripsiSingkat,
-                    deskripsi: this.form.deskripsi,
-                    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 || "Program kesehatan berhasil diupdate");
-                await programKesehatan.findMany.load();  
-                return true;
-            } else {
-                throw new Error(result.message || "Gagal update program kesehatan");
-            }
-        } catch (error) {
-            console.error("Gagal update:", error);
-            toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate program kesehatan");
-            return false;
-        } finally {
-            programKesehatan.edit.loading = false;
+      try {
+        programKesehatan.edit.loading = true;
+        const response = await fetch(
+          `/api/kesehatan/programkesehatan/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsiSingkat: this.form.deskripsiSingkat,
+              deskripsi: this.form.deskripsi,
+              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 || "Program kesehatan berhasil diupdate"
+          );
+          await programKesehatan.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update program kesehatan");
+        }
+      } catch (error) {
+        console.error("Gagal update:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat mengupdate program kesehatan"
+        );
+        return false;
+      } finally {
+        programKesehatan.edit.loading = false;
+      }
     },
     reset() {
-        programKesehatan.edit.id = "";
-        programKesehatan.edit.form = { ...defaultForm };
+      programKesehatan.edit.id = "";
+      programKesehatan.edit.form = { ...defaultForm };
     },
   },
 });

src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.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";
@@ -163,13 +164,43 @@ const puskesmasState = proxy({
   },
 
   findMany: {
-    data: null as Prisma.PuskesmasGetPayload<{
-      include: { image: true; jam: true; kontak: true };
-    }>[] | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get();
-      if (res.status === 200) {
-        puskesmasState.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.PuskesmasGetPayload<{
+          include: {
+            image: true;
+            jam: true;
+            kontak: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      puskesmasState.findMany.loading = true; // ✅ Akses langsung via nama path
+      puskesmasState.findMany.page = page;
+      puskesmasState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          puskesmasState.findMany.data = res.data.data ?? [];
+          puskesmasState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          puskesmasState.findMany.data = [];
+          puskesmasState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        puskesmasState.findMany.data = [];
+        puskesmasState.findMany.totalPages = 1;
+      } finally {
+        puskesmasState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts

@@ -181,7 +181,13 @@ const responden = proxy({
           headers: {
             "Content-Type": "application/json",
           },
-          body: JSON.stringify(this.form),
+          body: JSON.stringify({
+            name: this.form.name,
+            tanggal: this.form.tanggal,
+            jenisKelaminId: this.form.jenisKelaminId,
+            ratingId: this.form.ratingId,
+            kelompokUmurId: this.form.kelompokUmurId,
+          }),
         });
         const result = await response.json();
         if (!response.ok || !result?.success) {

src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts

@@ -49,35 +49,38 @@ const daftarInformasiPublik = proxy({
     },
   },
   findMany: {
-    data: null as any[] | null,
+    data: null as
+      | Prisma.DaftarInformasiPublikGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
     page: 1,
     totalPages: 1,
-    total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      daftarInformasiPublik.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      daftarInformasiPublik.findMany.loading = true; // ✅ Akses langsung via nama path
       daftarInformasiPublik.findMany.page = page;
-      try {
-        const res = await ApiFetch.api.ppid.daftarinformasipublik[
-          "find-many"
-        ].get({
-          query: { page, limit },
-        });
+      daftarInformasiPublik.findMany.search = search;
   
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get({ query });
+    
         if (res.status === 200 && res.data?.success) {
-          daftarInformasiPublik.findMany.data = res.data.data || [];
-          daftarInformasiPublik.findMany.total = res.data.total || 0;
-          daftarInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
+          daftarInformasiPublik.findMany.data = res.data.data ?? [];
+          daftarInformasiPublik.findMany.totalPages = res.data.totalPages ?? 1;
         } else {
-          console.error("Failed to load daftar informasi publik:", res.data?.message);
           daftarInformasiPublik.findMany.data = [];
-          daftarInformasiPublik.findMany.total = 0;
           daftarInformasiPublik.findMany.totalPages = 1;
         }
-      } catch (error) {
-        console.error("Error loading daftar informasi publik:", error);
+      } catch (err) {
+        console.error("Gagal fetch daftar informasi publik paginated:", err);
         daftarInformasiPublik.findMany.data = [];
-        daftarInformasiPublik.findMany.total = 0;
         daftarInformasiPublik.findMany.totalPages = 1;
       } finally {
         daftarInformasiPublik.findMany.loading = false;

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx

@@ -55,17 +55,17 @@ function EditLowonganKerja() {
 
   const handleSubmit = async () => {
     try {
-      lowonganKerjaState.update.form = {
-        ...lowonganKerjaState.update.form,
-        posisi: formData.posisi,
-        namaPerusahaan: formData.namaPerusahaan,
-        lokasi: formData.lokasi,
-        tipePekerjaan: formData.tipePekerjaan,
-        gaji: formData.gaji,
-        deskripsi: formData.deskripsi,
-        kualifikasi: formData.kualifikasi,
-      }
-      await lowonganState.update.update()
+      // Set the ID for the update
+      lowonganState.update.id = params?.id as string;
+      
+      // Update the form state
+      lowonganState.update.form = {
+        ...lowonganState.update.form,
+        ...formData
+      };
+      
+      // Call the update function
+      await lowonganState.update.update();
       toast.success("Lowongan kerja berhasil diperbarui!");
       router.push("/admin/ekonomi/lowongan-kerja-lokal");
     } catch (error) {
@@ -88,7 +88,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.posisi}
             onChange={(val) => {
-              formData.posisi = val.target.value;
+              setFormData(prev => ({ ...prev, posisi: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Posisi</Text>}
             placeholder='Masukkan posisi'
@@ -96,7 +96,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.namaPerusahaan}
             onChange={(val) => {
-              formData.namaPerusahaan = val.target.value;
+              setFormData(prev => ({ ...prev, namaPerusahaan: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Nama Perusahaan</Text>}
             placeholder='Masukkan nama perusahaan'
@@ -104,7 +104,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.lokasi}
             onChange={(val) => {
-              formData.lokasi = val.target.value;
+              setFormData(prev => ({ ...prev, lokasi: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Lokasi</Text>}
             placeholder='Masukkan lokasi'
@@ -112,7 +112,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.tipePekerjaan}
             onChange={(val) => {
-              formData.tipePekerjaan = val.target.value;
+              setFormData(prev => ({ ...prev, tipePekerjaan: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Tipe Pekerjaan</Text>}
             placeholder='Masukkan tipe pekerjaan'
@@ -120,7 +120,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.gaji}
             onChange={(val) => {
-              formData.gaji = val.target.value;
+              setFormData(prev => ({ ...prev, gaji: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Gaji selama 1 bulan</Text>}
             placeholder='Masukkan gaji'
@@ -130,7 +130,7 @@ function EditLowonganKerja() {
             <EditEditor
               value={formData.deskripsi}
               onChange={(val) => {
-                formData.deskripsi = val;
+                setFormData(prev => ({ ...prev, deskripsi: val }));
               }}
             />
           </Box>
@@ -139,7 +139,7 @@ function EditLowonganKerja() {
             <EditEditor
               value={formData.kualifikasi}
               onChange={(val) => {
-                formData.kualifikasi = val;
+                setFormData(prev => ({ ...prev, kualifikasi: val }));
               }}
             />
           </Box>

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/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 } from '@mantine/core';
+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';
@@ -30,20 +30,21 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
   const lowonganState = useProxy(lowonganKerjaState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = lowonganState.findMany
+
   useShallowEffect(() => {
-    lowonganState.findMany.load();
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (lowonganState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.posisi.toLowerCase().includes(keyword) ||
-      item.namaPerusahaan.toLowerCase().includes(keyword) ||
-      item.lokasi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!lowonganState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -60,18 +61,24 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
-              <TableTh>Bekerja Sebagai</TableTh>
-              <TableTh>Nama Usaha</TableTh>
-              <TableTh>Alamat Usaha</TableTh>
+              <TableTh>Pekerjaan</TableTh>
+              <TableTh>Nama Perusahaan</TableTh>
+              <TableTh>Lokasi</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.posisi}</TableTd>
-                <TableTd>{item.namaPerusahaan}</TableTd>
-                <TableTd>{item.lokasi}</TableTd>
+                <TableTd>
+                  <Text fz={"md"}>{item.posisi}</Text>
+                </TableTd>
+                <TableTd>
+                  <Text fz={"md"}>{item.namaPerusahaan}</Text>
+                </TableTd>
+                <TableTd>
+                  <Text fz={"md"}>{item.lokasi}</Text>
+                </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/ekonomi/lowongan-kerja-lokal/${item.id}`)}>
                   <IconDeviceImac size={20} />
@@ -82,6 +89,14 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
           </TableTbody>
         </Table>  
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/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 } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -13,31 +13,39 @@ import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
 
 
 function PasarDesa() {
-  const [search, setSearch] = useState("")
+  const [search2, setSearch2] = useState("")
   return (
     <Box>
       <HeaderSearch
         title='Kategori Produk'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
+        value={search2}
+        onChange={(e) => setSearch2(e.currentTarget.value)}
       />
-      <ListPasarDesa search={search} />
+      <ListPasarDesa search2={search2} />
     </Box>
   );
 }
 
-function ListPasarDesa({ search }: { search: string }) {
+function ListPasarDesa({ search2 }: { search2: string }) {
   const statePasar = useProxy(pasarDesaState.kategoriProduk)
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   // const params = useParams()
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = statePasar.findMany
+
   useShallowEffect(() => {
-    statePasar.findMany.load()
-  }, [])
+    load(page, 10, search2)
+  }, [page, search2])
 
   const handleHapus = () => {
     if (selectedId) {
@@ -47,14 +55,9 @@ function ListPasarDesa({ search }: { search: string }) {
     }
   }
 
-  const filteredData = (statePasar.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!statePasar.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -99,6 +102,14 @@ function ListPasarDesa({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my={"md"}
+        />
+      </Center>
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/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 } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
@@ -30,21 +30,21 @@ function ListPasarDesa({ search }: { search: string }) {
   const statePasar = useProxy(pasarDesaState.pasarDesa)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = statePasar.findMany
+
   useShallowEffect(() => {
-    statePasar.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (statePasar.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.harga.toString().toLowerCase().includes(keyword) ||
-      item.rating.toString().toLowerCase().includes(keyword) ||
-      item.alamatUsaha.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!statePasar.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -86,6 +86,14 @@ function ListPasarDesa({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my={"md"}
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -54,6 +54,10 @@ function DetailKeamananLingkungan() {
           {keamananState.findUnique.data ? (
             <Paper key={keamananState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
               <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 490}} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Judul Keamanan Lingkungan</Text>
                   <Text fz={"lg"}>{keamananState.findUnique.data?.name}</Text>
@@ -62,10 +66,6 @@ function DetailKeamananLingkungan() {
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
                   <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: keamananState.findUnique.data?.deskripsi }} />
                 </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button
                     onClick={() => {

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/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 { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -30,19 +30,21 @@ function ListKeamananLingkungan({ search }: { search: string }) {
   const keamananState = useProxy(keamananLingkunganState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = keamananState.findMany;
+
   useShallowEffect(() => {
-    keamananState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (keamananState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!keamananState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -67,9 +69,15 @@ function ListKeamananLingkungan({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Box w={180}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={250}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}>
@@ -81,6 +89,14 @@ function ListKeamananLingkungan({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my={"md"}
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/keamanan/polsek-terdekat/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 } 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';
@@ -21,7 +21,7 @@ function PolsekTerdekat() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPolsekTerdekat search={search}/>
+      <ListPolsekTerdekat search={search} />
     </Box>
   );
 }
@@ -30,20 +30,21 @@ function ListPolsekTerdekat({ search }: { search: string }) {
   const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = polsekState.findMany;
+
   useShallowEffect(() => {
-    polsekState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (polsekState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.jarakKeDesa.toLowerCase().includes(keyword) ||
-      item.alamat.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!polsekState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -64,24 +65,44 @@ function ListPolsekTerdekat({ search }: { search: string }) {
               <TableTh>Jarak Polsek</TableTh>
               <TableTh>Alamat</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>{item.jarakKeDesa}</TableTd>
-                <TableTd>{item.alamat}</TableTd>
+                <TableTd>
+                  <Box w={180}>
+                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.nama}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={180}>
+                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.jarakKeDesa}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={250}>
+                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.alamat}</Text>
+                  </Box>
+                </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/keamanan/tips-keamanan/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 { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -30,19 +30,21 @@ function ListTipsKeamanan({ search }: { search: string }) {
   const stateKeamanan = useProxy(tipsKeamananState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateKeamanan.findMany
+
   useShallowEffect(() => {
-    stateKeamanan.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (stateKeamanan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!stateKeamanan.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -67,9 +69,15 @@ function ListTipsKeamanan({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.judul}</TableTd>
                 <TableTd>
-                  <Text fz={"xs"} dangerouslySetInnerHTML={{__html: item.deskripsi}} />
+                  <Box w={150}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.judul}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={250}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{__html: item.deskripsi}} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/keamanan/tips-keamanan/${item.id}`)}>
@@ -81,6 +89,14 @@ function ListTipsKeamanan({ search }: { search: string }) {
           </TableTbody>
         </Table>  
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/artikel_kesehatan/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 } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -22,7 +22,7 @@ function ArtikelKesehatan() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListArtikelKesehatan search={search}/>
+      <ListArtikelKesehatan search={search} />
     </Box>
   );
 }
@@ -46,45 +46,53 @@ function ListArtikelKesehatan({ search }: { search: string }) {
   if (!stateArtikelKesehatan.findMany.data) {
     return (
       <Box py={10}>
-        <Skeleton h={500}/>
+        <Skeleton h={500} />
       </Box>
     )
   }
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Artikel Kesehatan'
-          href='/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Content</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.title}</TableTd>
-                  <TableTd>{item.content}</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Artikel Kesehatan'
+            href='/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Content</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate={'end'} lineClamp={1} fz={'h5'}>{item.title}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text truncate={'end'} lineClamp={1} fz={'h5'}>{item.content}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/artikel_kesehatan/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/page.tsx

@@ -1,22 +1,22 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImacCog, IconList, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import HeaderSearch from '../../../_com/header';
 import JudulList from '../../../_com/judulList';
-import { useState } from 'react';
+import fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 
 
 function FasilitasKesehatan() {
   const [search, setSearch] = useState("");
-  const router = useRouter();
+  // const router = useRouter();
   return (
     <Box>
-      <Grid>
+      {/* <Grid>
         <GridCol span={12}>
           <HeaderSearch
             title='Fasilitas Kesehatan'
@@ -36,7 +36,14 @@ function FasilitasKesehatan() {
             </Button>
           </Flex>
         </GridCol>
-      </Grid>
+      </Grid> */}
+      <HeaderSearch
+        title='Fasilitas Kesehatan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
       <ListFasilitasKesehatan search={search} />
     </Box>
   );

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan/page.tsx

@@ -1,11 +1,112 @@
-import React from 'react';
+'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 { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
 
-function Page() {
+import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import JudulList from '@/app/admin/(dashboard)/_com/judulList';
+import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import { useState } from 'react';
+
+
+function TarifLayanan() {
+  const [search, setSearch] = useState("");
+  const router = useRouter();
   return (
-    <div>
-      Page
-    </div>
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <HeaderSearch
+        title='Dokter dan Tenaga Medis'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListTarifLayanan search={search} />
+    </Box>
   );
 }
 
-export default Page;
+function ListTarifLayanan({ search }: { search: string }) {
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.dokter)
+  const router = useRouter();
+  const {
+    data,
+    loading,
+    load,
+    page,
+    totalPages
+  } = stateFasilitasKesehatan.findMany
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Fasilitas Kesehatan'
+            href={`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/create`}
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Fasilitas Kesehatan</TableTh>
+                  <TableTh>Alamat</TableTh>
+                  <TableTh>Jam Operasional</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>{item.specialist}</TableTd>
+                    <TableTd>
+                      <Text dangerouslySetInnerHTML={{ __html: item.jadwal }} />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  )
+}
+
+export default TarifLayanan;

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function InfoWabahPenyakit() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListInfoWabahPenyakit search={search}/>
+      <ListInfoWabahPenyakit search={search} />
     </Box>
   );
 }
@@ -30,19 +30,21 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
   const infoWabahPenyakitState = useProxy(infoWabahPenyakit)
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = infoWabahPenyakitState.findMany;
+
   useShallowEffect(() => {
-    infoWabahPenyakitState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (infoWabahPenyakitState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsiSingkat.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!infoWabahPenyakitState.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
@@ -51,49 +53,60 @@ function ListInfoWabahPenyakit({ search }: { search: string }) {
   }
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Info Wabah Penyakit'
-          href='/admin/kesehatan/info-wabah-penyakit/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Deskripsi Singkat</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>{item.deskripsiSingkat}</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Image w={100} src={item.image?.link} alt="image" />
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Info Wabah Penyakit'
+            href='/admin/kesehatan/info-wabah-penyakit/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Deskripsi Singkat</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.deskripsiSingkat}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/info-wabah-penyakit/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/kesehatan/kontak-darurat/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function KontakDarurat() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKontakDarurat search={search}/>
+      <ListKontakDarurat search={search} />
     </Box>
   );
 }
@@ -30,19 +30,21 @@ function ListKontakDarurat({ search }: { search: string }) {
   const kontakDaruratState = useProxy(kontakDarurat)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = kontakDaruratState.findMany;
+
   useShallowEffect(() => {
-    kontakDaruratState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (kontakDaruratState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!kontakDaruratState.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
@@ -77,7 +79,9 @@ function ListKontakDarurat({ search }: { search: string }) {
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      <Box w={100}>
+                        <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Image w={100} src={item.image?.link} alt="image" />
@@ -94,6 +98,15 @@ function ListKontakDarurat({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   )
 }

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function PenangananDarurat() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPenangananDarurat search={search}/>
+      <ListPenangananDarurat search={search} />
     </Box>
   );
 }
@@ -30,19 +30,21 @@ function ListPenangananDarurat({ search }: { search: string }) {
   const penangananDaruratState = useProxy(penangananDarurat)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = penangananDaruratState.findMany;
+
   useShallowEffect(() => {
-    penangananDaruratState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (penangananDaruratState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!penangananDaruratState.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
@@ -52,48 +54,59 @@ function ListPenangananDarurat({ search }: { search: string }) {
 
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Penanganan Darurat'
-          href='/admin/kesehatan/penanganan-darurat/create'
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Penanganan Darurat'
+            href='/admin/kesehatan/penanganan-darurat/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box></TableTd>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
         />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Judul</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                  </Box></TableTd>
-                <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                </TableTd>
-                <TableTd>
-                  <Image w={100} src={item.image?.link} alt="image" />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/kesehatan/penanganan-darurat/${item.id}`)}>
-                    <IconDeviceImacCog size={25} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+      </Center>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/kesehatan/program-kesehatan/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import JudulList from '../../_com/judulList';
 import HeaderSearch from '../../_com/header';
@@ -21,7 +21,7 @@ function ProgramKesehatan() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListProgramKesehatan search={search}/>
+      <ListProgramKesehatan search={search} />
     </Box>
   );
 }
@@ -30,19 +30,21 @@ function ListProgramKesehatan({ search }: { search: string }) {
   const programKesehatanState = useProxy(programKesehatan)
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = programKesehatanState.findMany;
+
   useShallowEffect(() => {
-    programKesehatanState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (programKesehatanState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsiSingkat.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!programKesehatanState.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
@@ -77,7 +79,9 @@ function ListProgramKesehatan({ search }: { search: string }) {
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsiSingkat }} />
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Image w={100} src={item.image?.link} alt="image" />
@@ -94,6 +98,15 @@ function ListProgramKesehatan({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   )
 }

src/app/admin/(dashboard)/kesehatan/puskesmas/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -21,7 +21,7 @@ function Puskesmas() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPuskesmas search={search}/>
+      <ListPuskesmas search={search} />
     </Box>
   );
 }
@@ -30,64 +30,75 @@ function ListPuskesmas({ search }: { search: string }) {
   const statePuskesmas = useProxy(puskesmasState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = statePuskesmas.findMany;
+
   useShallowEffect(() => {
-    statePuskesmas.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (statePuskesmas.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.alamat.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!statePuskesmas.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
-        <Skeleton h={500}/>
+        <Skeleton h={500} />
       </Box>
     )
   }
   return (
     <Box py={10}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack>
-        <JudulList
-          title='List Puskesmas'
-          href='/admin/kesehatan/puskesmas/create'
-        />
-        <Box style={{ overflowX: "auto" }}>
-          <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh>Nama Puskesmas</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>{item.alamat}</TableTd>
-                  <TableTd>
-                    <Image w={100} src={item.image.link} alt="image" />
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/puskesmas/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Puskesmas'
+            href='/admin/kesehatan/puskesmas/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Puskesmas</TableTh>
+                  <TableTh>Alamat</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Box>
-      </Stack>
-    </Paper>
-  </Box>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>{item.alamat}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image.link} alt="image" />
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/kesehatan/puskesmas/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
   )
 }
 

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -106,8 +106,16 @@ function ListDaftarInformasi({ search }: { search: string }) {
                 {filteredData.map((item, index) => (
                   <TableTr key={item.id}>
                     <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd style={{ wordWrap: 'break-word' }}>{item.jenisInformasi}</TableTd>
-                    <TableTd style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }}>
+                      <Box w={200}>
+                        <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.jenisInformasi}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }}>
+                      <Box w={200}>
+                        <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></Text>
+                      </Box>
+                    </TableTd>
                     <TableTd style={{ textAlign: 'center' }}>
                       <Button bg={"green"} onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}>
                         <IconDeviceImacCog size={25} />

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/[id]/edit/page.tsx

@@ -41,15 +41,11 @@ function EditResponden() {
       try {
         const data = await state.update.load(id);
         if (data) {
-          const formattedDate = data.tanggal && !isNaN(new Date(data.tanggal).getTime())
-            ? new Date(data.tanggal).toISOString().split('T')[0]
-            : '';
-          // ⬇️ FIX PENTING: tambahkan ini
           state.update.id = id;
 
           state.update.form = {
             name: data.name,
-            tanggal: formattedDate,
+            tanggal: data.tanggal,
             jenisKelaminId: data.jenisKelaminId,
             ratingId: data.ratingId,
             kelompokUmurId: data.kelompokUmurId,
@@ -76,6 +72,7 @@ function EditResponden() {
 
   const handleSubmit = async () => {
     state.update.id = id;
+    state.update.form = { ...formData }; // <-- sinkronisasi manual
     await state.update.submit();
     router.push('/admin/ppid/ikm-desa-darmasaba/responden')
   }
@@ -103,12 +100,15 @@ function EditResponden() {
             }}
           />
           <TextInput
+            label="Tanggal"
             type="date"
-            value={formData.tanggal}
+            placeholder='Pilih tanggal'
+            value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
             onChange={(e) => {
+              const selectedDate = e.currentTarget.value;
               setFormData({
                 ...formData,
-                tanggal: e.currentTarget.value, // ✅ sudah format YYYY-MM-DD
+                tanggal: selectedDate,
               });
             }}
           />

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/responden/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, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, 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 indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
 
 function Responden() {
@@ -60,10 +59,7 @@ function ListResponden({ search }: ListRespondenProps) {
       <Box py={10}>
         <Paper p="md">
           <Stack>
-            <JudulList
-              title='List Data Berdasarkan Jenis Kelamin Responden'
-              href='/admin/ppid/ikm-desa-darmasaba/responden/create'
-            />
+            <Title>Responden</Title>
             <Table striped withTableBorder withRowBorders>
               <TableThead>
                 <TableTr>
@@ -86,10 +82,7 @@ function ListResponden({ search }: ListRespondenProps) {
     <Box>
       <Stack gap="xs">
         <Paper bg={colors['white-1']} p="md" h={{ base: 730, md: 650 }}>
-          <JudulList
-            title='List Data Responden'
-            href='/admin/ppid/ikm-desa-darmasaba/responden/create'
-          />
+          <Title mb={10} order={3}>List Responden</Title>
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>

src/app/api/[[...slugs]]/_lib/ekonomi/lowongan-kerja/findMany.ts

@@ -1,21 +1,55 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function lowonganKerjaFindMany() {
-    try {
-        const data = await prisma.lowonganPekerjaan.findMany({
-            where: { isActive: true },
-        });
+async function lowonganKerjaFindMany(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 lowongan kerja",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch lowongan kerja",
-        };
-    }
-}
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { posisi: { contains: search, mode: 'insensitive' } },
+      { namaPerusahaan: { contains: search, mode: 'insensitive' } },
+      { lokasi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.lowonganPekerjaan.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.lowonganPekerjaan.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil lowongan kerja 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 lowongan kerja",
+    };
+  }
+}
+
+export default lowonganKerjaFindMany;

src/app/api/[[...slugs]]/_lib/ekonomi/pasar-desa/findMany.ts

@@ -1,26 +1,84 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function pasarDesaFindMany() {
-  const data = await prisma.pasarDesa.findMany({
-    where: {
-      isActive: true, // Opsional filter
-    },
-    orderBy: {
-      createdAt: "desc",
-    },
-    include: {
-      image: true,
-      KategoriToPasar: {
+async function pasarDesaFindMany(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 categoryId = context.query.categoryId as string | undefined;
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan filter kategori (jika ada)
+  if (categoryId) {
+    where.KategoriToPasar = {
+      some: {
+        kategoriId: categoryId
+      }
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.AND = where.AND || [];
+    where.AND.push({
+      OR: [
+        { nama: { contains: search, mode: 'insensitive' } },
+        { alamatUsaha: { contains: search, mode: 'insensitive' } },
+        { 
+          KategoriToPasar: { 
+            some: { 
+              kategori: { 
+                nama: { contains: search, mode: 'insensitive' } 
+              } 
+            } 
+          } 
+        }
+      ]
+    });
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.pasarDesa.findMany({
+        where,
         include: {
-          kategori: true,
+          image: true,
+          KategoriToPasar: {
+            include: {
+              kategori: true
+            }
+          }
         },
-      },
-    },
-  });
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.pasarDesa.count({ where }),
+    ]);
 
-  return {
-    success: true,
-    message: "Berhasil mengambil semua data pasar desa",
-    data,
-  };
+    return {
+      success: true,
+      message: "Berhasil ambil pasar desa 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 pasar desa",
+    };
+  }
 }
+
+export default pasarDesaFindMany;

src/app/api/[[...slugs]]/_lib/ekonomi/pasar-desa/kategori-produk/findMany.ts

@@ -1,15 +1,60 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function kategoriProdukFindMany() {
-    const data = await prisma.kategoriProduk.findMany();
-    return { 
-        success: true,
-        data: data.map((item: any) => {
-            return {
-                id: item.id,
-                nama: item.nama,
-            }
-        }),
+async function kategoriProdukFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search2 = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search2) {
+    where.OR = [
+      { nama: { contains: search2, mode: 'insensitive' } },
+      {KategoriToPasar : {
+        some: {
+          kategori: {
+            nama: { contains: search2, mode: 'insensitive' }
+          }
+        }
+      }}
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.kategoriProduk.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kategoriProduk.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil kategori produk 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 kategori produk",
+    };
+  }
+}
+
+export default kategoriProdukFindMany;

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

@@ -1,24 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function keamananLingkunganFindMany() {
-    try {
-        const data = await prisma.keamananLingkungan.findMany({
-            where: { isActive: true },
-            include: {
-                image: true,
-            },
-        });
+async function keamananLingkunganFindMany(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 keamanan lingkungan",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch keamanan lingkungan",
-        };
-    }
-}
+  // 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.keamananLingkungan.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.keamananLingkungan.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil keamanan lingkungan 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 keamanan lingkungan",
+    };
+  }
+}
+
+export default keamananLingkunganFindMany;

src/app/api/[[...slugs]]/_lib/keamanan/polsek-terdekat/findFirst.ts

@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// find-first.ts
+import prisma from "@/lib/prisma";
+
+async function polsekTerdekatFindFirst() {
+  const where: any = { isActive: true };
+
+  try {
+    const data = await prisma.polsekTerdekat.findFirst({
+      where,
+      include: {
+        layananPolsek: true,
+      },
+      orderBy: { createdAt: 'desc' },
+    });
+
+    return {
+      success: true,
+      message: "Berhasil ambil polsek terdekat terbaru",
+      data,
+    };
+  } catch (e) {
+    console.error("Error di findFirst:", e);
+    return {
+      success: false,
+      message: "Gagal ambil polsek terdekat terbaru",
+    };
+  }
+}
+
+export default polsekTerdekatFindFirst;

src/app/api/[[...slugs]]/_lib/keamanan/polsek-terdekat/findMany.ts

@@ -1,24 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function polsekTerdekatFindMany() {
-    try {
-        const data = await prisma.polsekTerdekat.findMany({
-            where: { isActive: true },
-            include: {
-                layananPolsek: true,
-            },
-        });
+async function polsekTerdekatFindMany(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 polsek terdekat",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch polsek terdekat",
-        };
-    }
-}
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { nama: { contains: search, mode: 'insensitive' } },
+      { alamat: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.polsekTerdekat.findMany({
+        where,
+        include: {
+          layananPolsek: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.polsekTerdekat.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil polsek terdekat 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 polsek terdekat",
+    };
+  }
+}
+
+export default polsekTerdekatFindMany;

src/app/api/[[...slugs]]/_lib/keamanan/polsek-terdekat/index.ts

@@ -4,6 +4,7 @@ import polsekTerdekatDelete from "./del";
 import polsekTerdekatFindMany from "./findMany";
 import polsekTerdekatFindUnique from "./findUnique";
 import polsekTerdekatUpdate from "./updt";
+import polsekTerdekatFindFirst from "./findFirst";
 
 
 const PolsekTerdekat = new Elysia({ prefix: "/polsekterdekat", tags: ["Keamanan/Polsek Terdekat"] })
@@ -12,6 +13,7 @@ const PolsekTerdekat = new Elysia({ prefix: "/polsekterdekat", tags: ["Keamanan/
     const response = await polsekTerdekatFindUnique(new Request(context.request));
     return response;
 })
+.get("/find-first", polsekTerdekatFindFirst)
 .post("/create", polsekTerdekatCreate, {
     body: t.Object({
         nama: t.String(),

src/app/api/[[...slugs]]/_lib/keamanan/tips-keamanan/findMany.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/info-wabah-penyakit/find-many.ts

@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function infoWabahPenyakitFindMany() {
-    try {
-        const data = await prisma.infoWabahPenyakit.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch info wabah penyakit",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch info wabah penyakit",
-        }
-    }
-}
+async function infoWabahPenyakitFindMany(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' } },
+      { deskripsiLengkap: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.infoWabahPenyakit.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.infoWabahPenyakit.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil info wabah penyakit 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 info wabah penyakit",
+    };
+  }
+}
+
+export default infoWabahPenyakitFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/kontak-darurat/find-many.ts

@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function kontakDaruratFindMany() {
-    try {
-        const data = await prisma.kontakDarurat.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch kontak darurat",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch kontak darurat",
-        }
-    }
-}
+async function kontakDaruratFindMany(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' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.kontakDarurat.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kontakDarurat.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil kontak darurat 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 kontak darurat",
+    };
+  }
+}
+
+export default kontakDaruratFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/penanganan-darurat/find-many.ts

@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function penangananDaruratFindMany() {
-    try {
-        const data = await prisma.penangananDarurat.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch penanganan darurat",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch penanganan darurat",
-        }
-    }
-}
+async function penangananDaruratFindMany(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' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.penangananDarurat.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.penangananDarurat.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil penanganan darurat 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 penanganan darurat",
+    };
+  }
+}
+
+export default penangananDaruratFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/program-kesehatan/find-many.ts

@@ -1,25 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function programKesehatanFindMany() {
-    try {
-        const data = await prisma.programKesehatan.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch program kesehatan",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch program kesehatan",
-        }
-    }
-}
+async function programKesehatanFindMany(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.programKesehatan.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.programKesehatan.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil program kesehatan 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 program kesehatan",
+    };
+  }
+}
+
+export default programKesehatanFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/puskesmas/find-many.ts

@@ -1,27 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function puskesmasFindMany() {
-    try {
-        const data = await prisma.puskesmas.findMany({
-            where: {
-                isActive: true,
-            },
-            include: {
-                image: true,
-                jam: true,
-                kontak: true,
-            }
-        })
-        return {
-            success: true,
-            message: "Success fetch puskesmas",
-            data,
-        }
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch puskesmas",
-        }
-    }
-}
+async function puskesmasFindMany(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' } },
+      { alamat: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.puskesmas.findMany({
+        where,
+        include: {
+          image: true,
+          jam: true,
+          kontak: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.puskesmas.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil puskesmas 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 berita",
+    };
+  }
+}
+
+export default puskesmasFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/create.ts

@@ -15,16 +15,12 @@ export default async function respondenCreate(context: Context) {
     try {
         // Convert the date string to a Date object
         const tanggal = new Date(body.tanggal);
-        
-        // Validate the date
-        if (isNaN(tanggal.getTime())) {
-            throw new Error('Tanggal tidak valid');
-        }
+
 
         const result = await prisma.responden.create({
             data: {
                 name: body.name,
-                tanggal: tanggal, // Use the Date object
+                tanggal: tanggal.toISOString(), // Use the Date object
                 jenisKelaminId: body.jenisKelaminId,
                 ratingId: body.ratingId,
                 kelompokUmurId: body.kelompokUmurId,

src/app/api/[[...slugs]]/_lib/landing_page/indeks_kepuasan/responden/updt.ts

@@ -2,35 +2,40 @@ import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 type FormUpdate = {
-    name: string;
-    tanggal: string;
-    jenisKelaminId: string;
-    ratingId: string;
-    kelompokUmurId: string;
-}
+  name: string;
+  tanggal: string;
+  jenisKelaminId: string;
+  ratingId: string;
+  kelompokUmurId: string;
+};
 
 export default async function respondenUpdate(context: Context) {
-    const body = (await context.body) as FormUpdate;
-    const id = context.params.id as string;
+  const body = (await context.body) as FormUpdate;
+  const id = context.params.id as string;
 
-    try {
-        const result = await prisma.responden.update({
-            where: { id },
-            data: {
-                name: body.name,
-                tanggal: body.tanggal,
-                jenisKelaminId: body.jenisKelaminId,
-                ratingId: body.ratingId,
-                kelompokUmurId: body.kelompokUmurId,
-            },
-        });
-        return {
-            success: true,
-            message: "Berhasil mengupdate responden",
-            data: result,
-        };
-    } catch (error) {
-        console.error("Error updating responden:", error);
-        throw new Error("Gagal mengupdate responden: " + (error as Error).message);
-    }
+  try {
+    const result = await prisma.responden.update({
+      where: { id },
+      data: {
+        name: body.name,
+        tanggal: new Date(body.tanggal).toISOString(),
+        jenisKelaminId: body.jenisKelaminId,
+        ratingId: body.ratingId,
+        kelompokUmurId: body.kelompokUmurId,
+      },
+    });
+    return {
+      success: true,
+      message: "Berhasil mengupdate responden",
+      data: result,
+    };
+  } catch (error) {
+    console.error("Error updating responden:", error);
+    // Instead of throwing an error, return a proper JSON response
+    return {
+      success: false,
+      message: "Gagal mengupdate responden: " + (error as Error).message,
+      data: null,
+    };
+  }
 }

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/find-many.ts

@@ -1,44 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
-// Di findMany.ts
-export default async function daftarInformasiPublikFindMany(context: Context) {
+async function daftarInformasiPublikFindMany(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 = [
+      { jenisInformasi: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
   try {
+    // Ambil data dan total count secara paralel
     const [data, total] = await Promise.all([
       prisma.daftarInformasiPublik.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
-      prisma.daftarInformasiPublik.count({
-        where: { isActive: true }
-      })
+      prisma.daftarInformasiPublik.count({ where }),
     ]);
 
-    const totalPages = Math.ceil(total / limit);
-
     return {
       success: true,
-      message: "Success fetch daftar informasi publik with pagination",
+      message: "Berhasil ambil daftar informasi publik dengan pagination",
       data,
       page,
-      totalPages,
+      limit,
       total,
+      totalPages: Math.ceil(total / limit),
     };
   } catch (e) {
-    console.error("Find many paginated error:", e);
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message: "Failed fetch daftar informasi publik with pagination",
-      data: [],
-      page: 1,
-      totalPages: 1,
-      total: 0,
+      message: "Gagal mengambil data daftar informasi publik",
     };
   }
-}
+}
+
+export default daftarInformasiPublikFindMany;

src/app/api/[[...slugs]]/_lib/ppid/struktur_ppid/pegawai/findMany.ts

@@ -16,8 +16,8 @@ export default async function pegawaiFindMany(context: Context) {
           image: true,
         },
         skip,
-        take: limit,
-        orderBy: { createdAt: 'desc' },
+        take: limit,  
+        orderBy: { posisi: { hierarki: 'asc' } },
       }),
       prisma.pegawaiPPID.count({
         where: { isActive: true }

src/app/darmasaba/(pages)/ekonomi/lowongan-kerja-lokal/page.tsx

@@ -1,64 +1,52 @@
 'use client'
+import lowonganKerjaState from '@/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja';
 import colors from '@/con/colors';
-import { Stack, Box, Text, TextInput, Group, SimpleGrid, Paper, Flex, Button } from '@mantine/core';
-import React from 'react';
-import BackButton from '../../desa/layanan/_com/BackButto';
+import { Box, Button, Center, Flex, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { IconBriefcase, IconClock, IconMapPin, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../desa/layanan/_com/BackButto';
 
-const data = [
-  {
-    id: 1,
-    kerja: 'Kasir',
-    tempat: 'Toko Sumber Rejeki',
-    alamat: 'Desa Munggu , Badung',
-    gaji: 'Rp. 2.500.000 / bulan'
+const formatCurrency = (value: string | number) => {
+  // Convert to string if it's a number
+  const numStr = typeof value === 'number' ? value.toString() : value;
+  
+  // Remove all non-digit characters
+  const digitsOnly = numStr.replace(/\D/g, '');
+  
+  // Format with thousand separators
+  const formatted = digitsOnly.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
+  
+  return `Rp.${formatted}`;
+};
 
-  },
-  {
-    id: 2,
-    kerja: 'Kasir',
-    tempat: 'Toko Sumber Rejeki',
-    alamat: 'Desa Munggu , Badung',
-    gaji: 'Rp. 2.500.000 / bulan'
-
-  },
-  {
-    id: 3,
-    kerja: 'Kasir',
-    tempat: 'Toko Sumber Rejeki',
-    alamat: 'Desa Munggu , Badung',
-    gaji: 'Rp. 2.500.000 / bulan'
-
-  },
-  {
-    id: 4,
-    kerja: 'Kasir',
-    tempat: 'Toko Sumber Rejeki',
-    alamat: 'Desa Munggu , Badung',
-    gaji: 'Rp. 2.500.000 / bulan'
-
-  },
-  {
-    id: 5,
-    kerja: 'Kasir',
-    tempat: 'Toko Sumber Rejeki',
-    alamat: 'Desa Munggu , Badung',
-    gaji: 'Rp. 2.500.000 / bulan'
-
-  },
-  {
-    id: 6,
-    kerja: 'Kasir',
-    tempat: 'Toko Sumber Rejeki',
-    alamat: 'Desa Munggu , Badung',
-    gaji: 'Rp. 2.500.000 / bulan'
-
-  },
-
-]
 function Page() {
+  const state = useProxy(lowonganKerjaState)
   const router = useRouter()
+  const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useEffect(() => {
+    load(page, 6, debouncedSearch)
+  }, [page, debouncedSearch, load])
+
+  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 }}>
@@ -74,6 +62,8 @@ function Page() {
             w={{ base: 500, md: 700 }}
             placeholder='Cari Pekerjaan'
             leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
           />
         </Group>
       </Box>
@@ -93,15 +83,15 @@ function Page() {
                       <Flex gap={'xl'} align={'center'}>
                         <IconBriefcase color={colors['blue-button']} size={50} />
                         <Box>
-                          <Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>{v.kerja}</Text>
-                          <Text fz={'h4'}>{v.tempat}</Text>
+                          <Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>{v.posisi}</Text>
+                          <Text fz={'h4'}>{v.namaPerusahaan}</Text>
                         </Box>
                       </Flex>
                     </Box>
                     <Box>
                       <Flex gap={'xl'} align={'center'}>
                         <IconMapPin color={colors['blue-button']} size={50} />
-                        <Text fz={'h4'}>{v.alamat}</Text>
+                        <Text fz={'h4'}>{v.lokasi}</Text>
                       </Flex>
                     </Box>
                     <Box>
@@ -109,7 +99,7 @@ function Page() {
                         <IconClock color={colors['blue-button']} size={50} />
                         <Box>
                           <Text fw={'bold'} fz={'h4'} c={colors['blue-button']}>Full Time</Text>
-                          <Text fz={'h4'}>{v.gaji}</Text>
+                          <Text fz={'h4'}>{formatCurrency(v.gaji)}</Text>
                         </Box>
                       </Flex>
                     </Box>
@@ -119,6 +109,14 @@ function Page() {
               )
             })}
           </SimpleGrid>
+          <Center>
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              my="md"
+            />
+          </Center>
         </Stack>
       </Box >
     </Stack >

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -1,90 +1,76 @@
 'use client'
+import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
 import colors from '@/con/colors';
-import { Box, Combobox, Flex, Image, InputBase, InputPlaceholder, Paper, SimpleGrid, Stack, Text, TextInput, useCombobox } from '@mantine/core';
+import { Box, Center, Flex, Grid, GridCol, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react';
 import { motion } from 'motion/react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
-const groceries = [
-  'Makanan',
-  'Minuman',
-  'Pakaian',
-  'Alat Dapur',
-  'Alat Mandi',
-  'Furniture',
-];
-
-const dataBarang = [
-  {
-    id: 1,
-    image: '/api/img/semat.png',
-    judul: 'Semat Bambu / Semat Banten',
-    harga: 'Rp. 3000 / pcs',
-    bintang: '4.9',
-    alamat: 'Jl. Kecubung no.6'
-  },
-  {
-    id: 2,
-    image: '/api/img/kerupuk.png',
-    judul: 'Kerupuk Babi',
-    harga: 'Rp. 12000 / pcs',
-    bintang: '4.9',
-    alamat: 'Jl. Kenari no.7'
-  },
-  {
-    id: 3,
-    image: '/api/img/beras.png',
-    judul: 'beras Merah Organik',
-    harga: 'Rp. 40000 / 1 kg',
-    bintang: '4.9',
-    alamat: 'Jl. Mawar no.8'
-  },
-  {
-    id: 4,
-    image: '/api/img/genteng.png',
-    judul: 'Genteng',
-    harga: 'Rp. 3600 / pcs',
-    bintang: '4.9',
-    alamat: 'Jl. Kecubung no.16'
-  },
-
-]
 function Page() {
-  const [search, setSearch] = useState('');
-  const combobox = useCombobox({
-    onDropdownClose: () => {
-      combobox.resetSelectedOption();
-      combobox.focusTarget();
-      setSearch('');
-    },
-
-    onDropdownOpen: () => {
-      combobox.focusSearchInput();
-    },
-  });
-
-  const [value, setValue] = useState<string | null>(null);
-
-  const options = groceries
-    .filter((item) => item.toLowerCase().includes(search.toLowerCase().trim()))
-    .map((item) => (
-      <Combobox.Option value={item} key={item}>
-        {item}
-      </Combobox.Option>
-    ));
   const router = useRouter()
+  const state = useProxy(pasarDesaState.pasarDesa)
+  const [search, setSearch] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+  const {
+    data,
+    page,
+    loading,
+    totalPages,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    pasarDesaState.kategoriProduk.findMany.load()
+  }, [])
+
+  // Filter data based on selected category
+  const filteredData = selectedCategory
+    ? data?.filter(item => 
+        item.KategoriToPasar?.some(kategori => kategori.kategoriId === selectedCategory)
+      )
+    : data;
+
+  useShallowEffect(() => {
+    load(page, 4, search, selectedCategory || undefined)
+  }, [page, search, selectedCategory])
+
+
+  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>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Pasar Desa
-        </Text>
-        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+        <Grid align='center' px={{ base: 'md', md: 100 }}>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Pasar Desa
+            </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 px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
           Pasar Desa Online merupakan Media Promosi yang bertujuan untuk membantu warga desa dalam memasarkan dan memperkenalkan produknya kepada masyarakat.
         </Text>
       </Box>
@@ -98,48 +84,23 @@ function Page() {
             }}
           >
             <Box>
-              <Combobox
-                store={combobox}
-                withinPortal={false}
-                onOptionSubmit={(val) => {
-                  setValue(val);
-                  combobox.closeDropdown();
-                }}
-              >
-                <Combobox.Target>
-                  <InputBase
-                    component="button"
-                    type="button"
-                    pointer
-                    rightSection={<Combobox.Chevron />}
-                    onClick={() => combobox.toggleDropdown()}
-                    rightSectionPointerEvents="none"
-                  >
-                    {value || <InputPlaceholder>Kategori</InputPlaceholder>}
-                  </InputBase>
-                </Combobox.Target>
-
-                <Combobox.Dropdown>
-                  <Combobox.Search
-                    value={search}
-                    onChange={(event) => setSearch(event.currentTarget.value)}
-                    placeholder="Search groceries"
-                  />
-                  <Combobox.Options>
-                    {options.length > 0 ? options : <Combobox.Empty>Nothing found</Combobox.Empty>}
-                  </Combobox.Options>
-                </Combobox.Dropdown>
-              </Combobox>
-            </Box>
-            <Box>
-              <TextInput
-                placeholder='Cari Produk'
-                leftSection={<IconSearch size={20} />}
+              <Select
+                placeholder="Pilih Kategori"
+                data={pasarDesaState.kategoriProduk.findMany.data?.map((v) => ({
+                  value: v.id,
+                  label: v.nama
+                })) || []}
+                value={selectedCategory}
+                onChange={setSelectedCategory}
+                clearable
+                searchable
+                nothingFoundMessage="Tidak ada kategori ditemukan"
+                style={{ width: '100%' }}
               />
             </Box>
           </SimpleGrid>
           <SimpleGrid cols={{ base: 1, md: 4 }}>
-            {dataBarang.map((v, k) => {
+            {filteredData?.map((v, k) => {
               return (
                 <Stack key={k}>
                   <motion.div
@@ -148,18 +109,25 @@ function Page() {
                     whileTap={{ scale: 0.8 }}
                   >
                     <Paper p={'lg'}>
-                      <Image radius={'lg'} src={v.image} alt='' />
-                      <Text py={10} fw={'bold'} fz={'lg'}>{v.judul}</Text>
-                      <Text fz={'md'}>{v.harga}</Text>
+                      <Image
+                        radius={'lg'}
+                        src={v.image?.link || '/placeholder-product.jpg'}
+                        alt={v.nama}
+                        h={200}
+                        w='100%'
+                        style={{ objectFit: 'cover' }}
+                      />
+                      <Text py={10} fw={'bold'} fz={'lg'}>{v.nama}</Text>
+                      <Text fz={'md'}>Rp {v.harga.toLocaleString('id-ID')}</Text>
                       <Flex py={10} gap={'md'}>
                         <IconStarFilled size={20} color='#EBCB09' />
-                        <Text fz={'sm'} ml={2}>{v.bintang}</Text>
+                        <Text fz={'sm'} ml={2}>{v.rating}</Text>
                       </Flex>
                       <Flex justify={'space-between'} align={'center'}>
                         <Box>
                           <Flex gap={'md'} align={'center'}>
                             <IconMapPinFilled size={20} color='red' />
-                            <Text fz={'sm'} ml={2}>{v.alamat}</Text>
+                            <Text fz={'sm'} ml={2}>{v.alamatUsaha}</Text>
                           </Flex>
                         </Box>
                         <IconShoppingCartFilled size={20} color={colors['blue-button']} />
@@ -170,6 +138,14 @@ function Page() {
               )
             })}
           </SimpleGrid>
+          <Center>
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)} // ini penting!
+              total={totalPages}
+              my="md"
+            />
+          </Center>
         </Stack>
       </Box>
     </Stack>

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

@@ -1,67 +1,61 @@
+'use client'
+import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan';
 import colors from '@/con/colors';
-import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, 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';
 
-const data1 = [
-  {
-    id: 1,
-    judul: 'Peran Pecalang dalam Keamanan Desa',
-    image: '/api/img/pecalang.png',
-    pengertian: 'Pecalang adalah petugas keamanan adat di Bali yang memiliki peran penting dalam menjaga ketertiban dan budaya lokal. Tugas mereka meliputi:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengamankan upacara adat dan kegiatan keagamaan.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Mengatur lalu lintas saat ada perayaan atau kegiatan besar.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli untuk mencegah gangguan keamanan di lingkungan desa.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berkoordinasi dengan aparat desa dan kepolisian dalam penanganan situasi darurat.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Patwal (Patroli Pengawal) Desa',
-    image: '/api/img/patwal-1.png',
-    pengertian: 'Selain Pecalang, Desa Darmasaba juga memiliki Patwal yang bertugas menjaga keamanan sehari-hari. Peran mereka antara lain:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Berpatroli secara rutin untuk memastikan lingkungan tetap aman.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Menjaga ketertiban lalu lintas di area desa.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Melakukan tindakan preventif terhadap potensi gangguan keamanan.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Siap siaga dalam keadaan darurat untuk membantu warga.</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Layanan Keamanan yang Tersedia',
-    image: '/api/img/pospecalang.png',
-    pengertian: 'Jika terjadi keadaan darurat atau membutuhkan bantuan keamanan, warga dapat menghubungi:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Pos Pecalang Desa: [Masukkan Nomor Kontak].</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Patwal Desa Darmasaba: [Masukkan Nomor Kontak].</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Polsek Terdekat: 110 (Layanan Kepolisian).</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Program Keamanan Desa',
-    image: '/api/img/rond.png',
-    pengertian: 'Untuk meningkatkan keamanan, Desa Darmasaba menjalankan berbagai program, seperti:',
-    deskripsi: <List>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Ronda Malam Warga: Kegiatan jaga malam secara bergilir oleh warga bersama Pecalang dan Patwal.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}>Sosialisasi Keamanan: Edukasi bagi warga tentang cara menjaga keamanan lingkungan.</ListItem>
-      <ListItem fz={{ base: 'h4', md: 'lg' }}> Pengawasan Kamera CCTV: Memantau titik- titik strategis untuk mencegah tindak kejahatan.</ListItem>
-    </List>
-  }
-]
 
 function Page() {
+  const state = useProxy(keamananLingkunganState)
+  const [search, setSearch] = useState('')
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Keamanan Lingkungan (Pecalang / Patwal)
-        </Text>
-        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
+        <Grid align='center' px={{ base: 'md', md: 100 }}>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Keamanan Lingkungan (Pecalang / Patwal)
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Puskesmas'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
           Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
         </Text>
       </Box>
@@ -73,24 +67,19 @@ function Page() {
               base: 1,
               md: 3,
             }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
               return (
                 <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                   <Stack gap={'xs'}>
                     <Center px={10} py={20}>
-                      <Image src={v.image} alt='' />
+                      <Image src={v.image?.link} alt='' />
                     </Center>
                     <Box px={'lg'}>
                       <Box pb={20}>
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                         </Text>
-                        <Text pb={10} fz={"h4"} ta={'justify'}>
-                          {v.pengertian}
-                        </Text>
-                        <Box px={10}>
-                          {v.deskripsi}
-                        </Box>
+                        <Text pb={10} fz={"h4"} ta={'justify'} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                       </Box>
                     </Box>
                   </Stack>
@@ -99,7 +88,15 @@ function Page() {
             })}
           </SimpleGrid>
         </Stack>
-      </Box>
+      </Box>  
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/page.tsx

@@ -1,10 +1,30 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import polsekTerdekatState from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
 import colors from '@/con/colors';
-import { Badge, Box, Button, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowDown, IconClock, IconNavigation, IconPhone, IconPin, IconSearch } from '@tabler/icons-react';
+import { Badge, Box, Button, Center, Flex, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowDown, IconClock, IconNavigation, IconPhone, IconPin } from '@tabler/icons-react';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
 
 
 function Page() {
+  const state = useProxy(polsekTerdekatState.findFirst);
+  const router = useRouter()
+  const {
+    data,
+    loading,
+    load,
+  } = state;
+
+  useEffect(() => {
+    if (!data && !loading) {
+      load();
+    }
+  }, [data, loading]);
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -17,7 +37,6 @@ function Page() {
         <Text pb={15} fz={'h4'} >
           Desa Darmasaba, Kecamatan Abiansemal, Kabupaten Badung
         </Text>
-        <TextInput radius={10} leftSection={<IconSearch size={20} />} placeholder='Cari Kantor Polisi' />
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
@@ -30,59 +49,56 @@ function Page() {
                 }}
               >
                 {/* Content Sebelah Kiri */}
-                <Box>
-                  <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Polsek Abiansemal</Text>
-                  <Text c={colors["blue-button"]} fz={'sm'}>2,5 Km dari Desa Darmasaba</Text>
-                  <Flex py={10} gap={9} align={'center'}>
-                    <IconPin size={25} color={colors["blue-button"]} />
-                    <Text c={colors["blue-button"]} fz={'lg'}>Jl. Gandamayu 1 Blahkiuh</Text>
-                  </Flex>
-                  <Flex gap={9} align={'center'}>
-                    <IconPhone size={25} color={colors["blue-button"]} />
-                    <Text c={colors["blue-button"]} fz={'lg'}>08xxxxxxxx</Text>
-                  </Flex>
-                  <Flex py={10} gap={9} align={'center'}>
-                    <IconClock size={25} color={colors["blue-button"]} />
-                    <Text c={colors["blue-button"]} fz={'lg'}>24 Jam</Text>
-                  </Flex>
-                  <Box>
-                    <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Layanan Yang Tersedia :</Text>
-                    <SimpleGrid
-                      py={10}
-                      cols={{
-                        base: 1,
-                        md: 2,
-                      }}
-                    >
+                {loading ? (
+                  <Center><Skeleton h={400} /></Center>
+                ) : data ? (
+                  <>
+                    <Box>
+                      <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>{data.nama}</Text>
+                      <Text c={colors["blue-button"]} fz={'sm'}>{data.jarakKeDesa}</Text>
+                      <Flex py={10} gap={9} align={'center'}>
+                        <IconPin size={25} color={colors["blue-button"]} />
+                        <Text c={colors["blue-button"]} fz={'lg'}>{data.alamat}</Text>
+                      </Flex>
+                      <Flex gap={9} align={'center'}>
+                        <IconPhone size={25} color={colors["blue-button"]} />
+                        <Text c={colors["blue-button"]} fz={'lg'}>{data.nomorTelepon}</Text>
+                      </Flex>
+                      <Flex py={10} gap={9} align={'center'}>
+                        <IconClock size={25} color={colors["blue-button"]} />
+                        <Text c={colors["blue-button"]} fz={'lg'}>{data.jamOperasional}</Text>
+                      </Flex>
                       <Box>
-                        <Text c={colors["blue-button"]} fz={'lg'}>Laporan Kehilangan</Text>
+                        <Text c={colors["blue-button"]} fw={'bold'} fz={'h2'}>Layanan Yang Tersedia :</Text>
+                        <SimpleGrid
+                          py={10}
+                          cols={{
+                            base: 1,
+                            md: 2,
+                          }}
+                        >
+                          <Box>
+                            <Text c={colors["blue-button"]} fz={'lg'}>{data.layananPolsek.nama}</Text>
+                          </Box>
+                        </SimpleGrid>
                       </Box>
                       <Box>
-                        <Text c={colors["blue-button"]} fz={'lg'}>Laporan Kriminal</Text>
+                        <Button bg={colors["blue-button"]} onClick={() => router.push(`/darmasaba/keamanan/polsek-terdekat/semua-polsek`)} rightSection={<IconArrowDown size={20} />}>Lihat Kantor Polisi Lainnya</Button>
                       </Box>
-                      <Box>
-                        <Text c={colors["blue-button"]} fz={'lg'}>Pelayanan SKCK</Text>
+                    </Box>
+                    <Box pos={'relative'}>
+                      <Box style={{ position: 'absolute', top: 0, right: 0 }}>
+                        <Badge size='lg' c={'#287407'} bg={'#A8EDC4'}>Buka</Badge>
                       </Box>
-                      <Box>
-                        <Text c={colors["blue-button"]} fz={'lg'}>Pengaduan Masyarakat</Text>
+                      <Box pt={40}>
+                        <iframe style={{ border: 2, width: "100%" }} src={data.embedMapUrl} width="550" height="300" ></iframe>
                       </Box>
-                    </SimpleGrid>
-                  </Box>
-                  <Box>
-                    <Button bg={colors["blue-button"]} rightSection={<IconArrowDown size={20}/>}>Lihat Kantor Polisi Lainnya</Button>
-                  </Box>
-                </Box>
-                <Box pos={'relative'}>
-                  <Box style={{ position: 'absolute', top: 0, right: 0 }}>
-                    <Badge size='lg' c={'#287407'} bg={'#A8EDC4'}>Buka</Badge>
-                  </Box>
-                  <Box pt={40}>
-                  <iframe style={{ border: 2, width: "100%" }} src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3945.7949871034166!2d115.20778387533218!3d-8.519275686287415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ceb4f6e5363%3A0xa353662f070f47d8!2sAbian%20Semal%20Police%20Station!5e0!3m2!1sid!2sid!4v1742789148825!5m2!1sid!2sid" width="550" height="300" ></iframe>
-                  </Box>
-                  <Box pt={20}>
-                    <Button fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20}/>}>Petunjuk Arah</Button>
-                  </Box>
-                </Box>
+                      <Box pt={20}>
+                        <Button onClick={() => router.push(data.linkPetunjukArah)} fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20} />}>Petunjuk Arah</Button>
+                      </Box>
+                    </Box>
+                  </>
+                ) : null}
               </SimpleGrid>
             </Stack>
           </Paper>

src/app/darmasaba/(pages)/keamanan/polsek-terdekat/semua-polsek/page.tsx

@@ -0,0 +1,100 @@
+'use client'
+import polsekTerdekatState from '@/app/admin/(dashboard)/_state/keamanan/polsek-terdekat';
+import colors from '@/con/colors';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconNavigation, IconSearch } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../desa/layanan/_com/BackButto';
+import { useRouter } from 'next/navigation';
+
+function Page() {
+  const state = useProxy(polsekTerdekatState);
+  const [search, setSearch] = useState('');
+  const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Semua Polsek Terdekat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Polsek'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
+      <Box px={{ base: "md", md: 100 }}>
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}
+        >
+          {data.map((v, k) => {
+            return (
+              <Paper p={"xl"} bg={colors['white-trans-1']} key={k}>
+                <Stack gap={"xs"}>
+                  <Text fw={"bold"} fz={"h3"}>{v.nama}</Text>
+                  <Text>Alamat: {v.alamat}</Text>
+                  <Text>Jarak: {v.jarakKeDesa}</Text>
+                  <Text>Telepon: {v.nomorTelepon}</Text>
+                  <Text>Jam Operasional: {v.jamOperasional}</Text>
+                  <Box pt={20}>
+                    <iframe style={{ border: 2, width: "100%" }} src={v.embedMapUrl} width="550" height="300" ></iframe>
+                  </Box>
+                  <Box pt={20}>
+                    <Button onClick={() => router.push(v.linkPetunjukArah)} fullWidth bg={colors["blue-button"]} radius={10} leftSection={<IconNavigation size={20} />}>Petunjuk Arah</Button>
+                  </Box>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
+      </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -1,83 +1,62 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Center, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+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';
+import tipsKeamananState from '@/app/admin/(dashboard)/_state/keamanan/tips-keamanan';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { IconSearch } from '@tabler/icons-react';
 
-const data1 = [
-  {
-    id: 1,
-    judul: 'Keamanan Rumah',
-    image: '/api/img/kemanan.png',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pastikan pintu dan jendela selalu terkunci saat meninggalkan rumah.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pasang lampu penerangan di halaman dan area sekitar rumah untuk mencegah tindak kejahatan.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah memberikan akses masuk ke orang yang tidak dikenal.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Keamanan di Jalan',
-    image: '/api/img/keamananjalan.png',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hindari berjalan sendirian di tempat sepi, terutama pada malam hari.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Simpan barang berharga di tempat yang aman saat bepergian.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan jalur yang ramai dan terang saat pulang malam.</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Keamanan Kendaraan',
-    image: '/api/img/keamanankendaraan.png',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Gunakan kunci ganda saat memarkir kendaraan, terutama di tempat umum.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Parkir di tempat yang terang dan mudah diawasi.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan meninggalkan barang berharga di dalam kendaraan.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Keamanan Sosial',
-    image: '/api/img/mencurigakan.png',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Laporkan kejadian mencurigakan kepada Pecalang atau perangkat desa.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jangan mudah percaya terhadap informasi yang belum jelas sumbernya.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ikuti program sosialisasi keamanan yang diadakan oleh desa.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    image: '/api/img/securitydigital.png',
-    deskripsi: <List>
-      <ListItem>Jangan mudah membagikan informasi pribadi di media sosial.</ListItem>
-      <ListItem>Waspada terhadap penipuan online dan telepon yang mengatasnamakan instansi resmi.</ListItem>
-      <ListItem>Gunakan kata sandi yang kuat untuk akun digital dan ganti secara berkala.</ListItem>
-    </List>
-  },
-  {
-    id: 6,
-    judul: 'Nomor Darurat yang Bisa Dihubungi',
-    image: '/api/img/kontakpecalang.png',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pecalang: 08125651052</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ambulans: 08125651052</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Polisi: 110</ListItem>
-    </List>
-  }
-]
 
 function Page() {
+  const state = useProxy(tipsKeamananState)
+  const [search, setSearch] = useState('')
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Tips Keamanan
-        </Text>
-        <Text px={{ base: 20, md: 150 }} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-          Desa Darmasaba berkomitmen untuk menjaga keamanan dan kenyamanan seluruh warganya. Berikut beberapa tips yang dapat membantu meningkatkan keamanan di lingkungan desa.
+        <Grid align='center' px={{ base: 'md', md: 100 }}>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Tips Keamanan
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Tips'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text px={{ base: 'md', md: 100 }} ta={"justify"} fz={{ base: "h4", md: "h3" }} >
+          Keamanan dan ketertiban lingkungan di Desa Darmasaba dijaga melalui peran aktif Pecalang dan Patwal (Patroli Pengawal). Mereka bertugas memastikan desa tetap aman, tertib, dan kondusif bagi seluruh warga.
         </Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
@@ -88,21 +67,21 @@ function Page() {
               base: 1,
               md: 3,
             }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
               return (
                 <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                   <Stack gap={'xs'}>
                     <Center p={10}>
-                      <Image src={v.image} radius={10}
-                     alt='' />
+                      <Image src={v.image?.link} radius={10}
+                        alt='' />
                     </Center>
                     <Box px={'xl'}>
                       <Box pb={20}>
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
                           {v.judul}
                         </Text>
-                        <Box pr={10}>
-                          {v.deskripsi}
+                        <Box>
+                          <Text pb={10} fz={"md"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                         </Box>
                       </Box>
                     </Box>
@@ -113,6 +92,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)/kesehatan/data-kesehatan-warga/(tambahan)/artikel-kesehatan/page.tsx

@@ -1,277 +0,0 @@
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Flex, Group, Image, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-
-const dataMitos = [
-  {
-    id: 1,
-    mitos: 'Daun pepaya dan daun jambu biji bisa menyembuhkan DBD',
-    fakta: 'Belum ada bukti ilmiah yang kuat. Namun dapat dikonsumsi sebagai pendamping terapi medis',
-  },
-  {
-    id: 2,
-    mitos: 'DBD hanya menyerang anak-anak',
-    fakta: 'DBD dapat menyerang siapa saja terlepas dari usia',
-  },
-  {
-    id: 3,
-    mitos: 'Nyamuk DBD hanya aktif pada malam hari',
-    fakta: 'Nyamuk Aedes aegypti aktif pada pagi dan sore hari',
-  },
-  {
-    id: 4,
-    mitos: 'Sekali terkena DBD, tidak akan terkena lagi',
-    fakta: 'Seseorang bisa terkena DBD hingga 4 kali karena terdapat 4 serotipe virus dengue',
-  },
-]
-function Page() {
-  const rows = dataMitos.map((element) => (
-    <TableTr key={element.mitos}>
-      <TableTd fz={'h4'}>{element.mitos}</TableTd>
-      <TableTd fz={'h4'}>{element.fakta}</TableTd>
-    </TableTr>
-  ));
-  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 }}>
-        <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'}>
-                <Center bg={'#DEE3E3FF'}>
-                  <Image
-                    w={'100%'}
-                    src={'/api/img/dbd.png'}
-                    alt='' />
-                </Center>
-                <Flex gap={'xs'}>
-                  <Box>
-                    <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
-                      12 Februari 2025
-                    </Text>
-                  </Box>
-                  <Divider size="1" orientation="vertical" />
-                  <Box>
-                    <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
-                      Dinas Kesehatan
-                    </Text>
-                  </Box>
-                  <Divider size="1" orientation="vertical" />
-                  <Box>
-                    <Text c={'#9A9D9DFF'} fz={{ base: 'h6', md: 'h5' }}>
-                      Kategori: Kesehatan Masyarakat
-                    </Text>
-                  </Box>
-                </Flex>
-                {/* Pendahuluan */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Pendahuluan
-                </Text>
-                <Divider />
-                <Text pb={10} fz={'h4'} ta={'justify'}>
-                  Demam Berdarah Dengue (DBD) adalah penyakit yang disebabkan oleh virus dengue yang ditularkan melalui gigitan nyamuk Aedes aegypti. Selama musim hujan, risiko penyebaran DBD meningkat karena genangan air menjadi tempat berkembang biaknya nyamuk. Artikel ini akan membahas cara efektif untuk mencegah dan menangani DBD di musim hujan.
-                </Text>
-                {/* Kenali Gejala DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Kenali Gejala DBD
-                </Text>
-                <Divider />
-                <Text fz={'h4'}>
-                  Gejala awal DBD seringkali mirip dengan flu biasa, namun ada beberapa tanda khas yang perlu diwaspadai:
-                </Text>
-                <List pb={10}>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Demam tinggi mendadak <Text span fz={'h4'}>(38-40°C) yang berlangsung 2-7 hari</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Nyeri pada sendi, otot, dan tulang <Text span fz={'h4'}>yang sangat mengganggu</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Ruam kemerahan <Text span fz={'h4'}>pada kulit yang muncul 3-4 hari setelah demam</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Nyeri di belakang mata <Text span fz={'h4'}>yang bertambah parah saat menggerakkan mata</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Pendarahan <Text span fz={'h4'}>seperti mimisan, gusi berdarah, atau lebam pada kulit</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Penurunan jumlah trombosit <Text span fz={'h4'}>dalam pemeriksaan darah</Text>
-                    </Text>
-                  </ListItem>
-                </List>
-                {/* Cara Mencegah DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Cara Mencegah DBD
-                </Text>
-                <Divider />
-                <List pb={10} type='ordered'>
-                  <ListItem >
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      3M Plus:
-                    </Text>
-                    <List pb={5}>
-                      <ListItem>
-                        <Text pb={10} fz={'h4'} fw={"bold"}>
-                          Menguras <Text span fz={'h4'}>tempat penampungan air minimal seminggu sekali</Text>
-                        </Text>
-                      </ListItem>
-                      <ListItem>
-                        <Text pb={10} fz={'h4'} fw={"bold"}>
-                          Menutup <Text span fz={'h4'}>rapat tempat penampungan air</Text>
-                        </Text>
-                      </ListItem>
-                      <ListItem>
-                        <Text pb={10} fz={'h4'} fw={"bold"}>
-                          Mengubur <Text span fz={'h4'}>atau mendaur ulang barang bekas yang dapat menampung air</Text>
-                        </Text>
-                      </ListItem>
-                      <ListItem>
-                        <Text pb={10} fz={'h4'} fw={"bold"}>
-                          Plus: <Text span fz={'h4'}>menanam tanaman pengusir nyamuk, memelihara ikan pemakan jentik, dan menggunakan kelambu saat tidur</Text>
-                        </Text>
-                      </ListItem>
-                    </List>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Penggunaan repellent atau lotion anti nyamuk <Text span fz={'h4'}>terutama pada pagi dan sore hari saat nyamuk DBD aktif</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Pemasangan kawat kasa <Text span fz={'h4'}>pada ventilasi rumah</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Fogging atau pengasapan <Text span fz={'h4'}>pada area dengan kasus DBD tinggi (dilakukan oleh petugas kesehatan)</Text>
-                    </Text>
-                  </ListItem>
-                  <ListItem>
-                    <Text pb={10} fz={'h4'} fw={"bold"}>
-                      Bubuk abate <Text span fz={'h4'}>yang ditaburkan pada penampungan air yang sulit dikuras</Text>
-                    </Text>
-                  </ListItem>
-                </List>
-                {/* Pertolongan Pertama Pada Penderita DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Pertolongan Pertama Pada Penderita DBD
-                </Text>
-                <Divider />
-                <List pb={10} type='ordered'>
-                  <ListItem fz={'h4'}>
-                    Berikan banyak cairan untuk mencegah dehidrasi
-                  </ListItem>
-                  <ListItem fz={'h4'}>
-                    Kompres hangat untuk menurunkan demam (hindari kompres dingin)
-                  </ListItem>
-                  <ListItem fz={'h4'}>
-                    Istirahat yang cukup dan pemberian paracetamol untuk meredakan demam (hindari obat aspirin dan ibuprofen)
-                  </ListItem>
-                  <ListItem fz={'h4'}>
-                    Pantau gejala penurunan trombosit seperti bintik merah pada kulit
-                  </ListItem>
-                  <ListItem fz={'h4'}>
-                    Segera bawa ke fasilitas kesehatan jika demam tidak turun setelah 2 hari
-                  </ListItem>
-                </List>
-                {/* Mitos dan Fakta tentang DBD */}
-                <Text fz={'h4'} fw={"bold"}>
-                  Mitos dan Fakta tentang DBD
-                </Text>
-                <Divider />
-                <Table pb={10} highlightOnHover withTableBorder withColumnBorders>
-                  <TableThead>
-                    <TableTr>
-                      <TableTh fz={'h4'}>Mitos</TableTh>
-                      <TableTh fz={'h4'}>Fakta</TableTh>
-                    </TableTr>
-                  </TableThead>
-                  <TableTbody>{rows}</TableTbody>
-                </Table>
-                {/* 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>
-                <List pb={10}>
-                  <ListItem fz={'h4'}>Demam tinggi yang tidak turun setelah 2 hari</ListItem>
-                  <ListItem fz={'h4'}>Muntah terus-menerus</ListItem>
-                  <ListItem fz={'h4'}>Nyeri perut yang hebat</ListItem>
-                  <ListItem fz={'h4'}>Perdarahan dari hidung atau gusi</ListItem>
-                  <ListItem fz={'h4'}>Bintik merah pada kulit (petekie)</ListItem>
-                  <ListItem fz={'h4'}>Sulit bernapas</ListItem>
-                  <ListItem fz={'h4'}>Gelisah atau letargi</ListItem>
-                  <ListItem fz={'h4'}>Penurunan kesadaran</ListItem>
-                </List>
-                {/* 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>
-                  </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>
-            </Box>
-          </Paper>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-
-export default Page;

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

@@ -0,0 +1,166 @@
+'use client'
+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 { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function Page() {
+  const state = useProxy(artikelKesehatanState)
+  const params = useParams()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [])
+
+  if (!state.findUnique.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 }}>
+        <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'}>
+                <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>
+                  </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>
+            </Box>
+          </Paper>
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -0,0 +1,55 @@
+'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 { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function ArtikelKesehatanPage() {
+  const state = useProxy(artikelKesehatanState)
+  const router = useRouter()
+
+  useShallowEffect(()=> {
+    state.findMany.load()
+  }, [])
+
+  if(!state.findMany.data){
+    return (
+      <Box py={10}>
+        <Skeleton h={500}/>
+      </Box>
+    )
+  }
+  return (
+    <Box>
+      <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
+        <Stack gap={'xs'}>
+          {state.findMany.data.map((item) => (
+            <Box key={item.id}>
+              <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
+              <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'} />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default ArtikelKesehatanPage;

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

@@ -1,65 +1,27 @@
+'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, Button, Divider, Group, List, ListItem, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-
-const dataDokter = [
-  {
-    id: 1,
-    nama: 'dr. Adi Putra',
-    spesilisasi: 'Dokter Umum',
-    jadwal: 'Senin-Jumat, 08:00-12:00'
-  },
-  {
-    id: 2,
-    nama: 'drg. Ratna Dewi',
-    spesilisasi: 'Dokter Gigi',
-    jadwal: 'Senin, Rabu, Jumat 08:00-14:00'
-  },
-  {
-    id: 3,
-    nama: 'Bidan Komang',
-    spesilisasi: 'Kebidanan',
-    jadwal: 'Setiap hari, 08:00-16:00'
-  },
-]
-const dataBiaya = [
-  {
-    id: 1,
-    layanan: 'Poli Umum',
-    tarif: '15.000',
-  },
-  {
-    id: 2,
-    layanan: 'Poli Gigi',
-    tarif: '20.000',
-  },
-  {
-    id: 3,
-    layanan: 'Imunisasi Dasar',
-    tarif: 'Gratis',
-  },
-  {
-    id: 4,
-    layanan: 'Konsultasi KB',
-    tarif: 'Gratis',
-  },
-]
+import { Box, Button, Divider, Group, List, ListItem, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
 
 function Page() {
-  const rows = dataDokter.map((element) => (
-    <TableTr key={element.nama}>
-      <TableTd fz={'h4'}>{element.nama}</TableTd>
-      <TableTd fz={'h4'}>{element.spesilisasi}</TableTd>
-      <TableTd fz={'h4'}>{element.jadwal}</TableTd>
-    </TableTr>
-  ));
+  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
+  const params = useParams()
 
-  const rows2 = dataBiaya.map((element2) => (
-    <TableTr key={element2.layanan}>
-      <TableTd fz={'h4'}>{element2.layanan}</TableTd>
-      <TableTd fz={'h4'}>{element2.tarif}</TableTd>
-    </TableTr>
-  ));
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [])
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
 
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -82,59 +44,58 @@ function Page() {
                 </Text>
                 <Divider />
                 <Text fz={'h4'} fw={"bold"}>
-                  Nama Fasilitas : <Text span fz={'h4'}>UPTD Puskesmas Abiansemal III</Text>
+                  Nama Fasilitas : <Text span fz={'h4'}>{state.findUnique.data?.name}</Text>
                 </Text>
                 <Text fz={'h4'} fw={"bold"}>
-                  Alamat : <Text span fz={'h4'}>Jl. Ratna, Sibang Kaja</Text>
+                  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'}>08:00-16:00 WITA (Senin-Sabtu)</Text>
+                  Jam Operasional: : <Text span fz={'h4'}>{state.findUnique.data?.informasiumum.jamOperasional}</Text>
                 </Text>
                 {/* Layanan Unggulan */}
                 <Text fz={'h4'} fw={"bold"}>
                   Layanan Unggulan
                 </Text>
                 <Divider />
-                <List pb={10}>
-                  <ListItem fz={'h4'}>Poli Umum</ListItem>
-                  <ListItem fz={'h4'}>Poli Gigi</ListItem>
-                  <ListItem fz={'h4'}>Imunisasi</ListItem>
-                  <ListItem fz={'h4'}>Ibu/KB</ListItem>
-                  <ListItem fz={'h4'}>Laboratorium Dasar</ListItem>
-                  <ListItem fz={'h4'}>Farmasi</ListItem>
-                  <ListItem fz={'h4'}>Konsultasi Gizi</ListItem>
-                </List>
+
                 {/* Tenaga Medis */}
                 <Text fz={'h4'} fw={"bold"}>
                   Dokter & Tenaga Medis
                 </Text>
                 <Divider />
-                <Table pb={10} highlightOnHover withTableBorder withColumnBorders>
-                  <TableThead>
-                    <TableTr>
-                      <TableTh fz={'h4'}>Nama</TableTh>
-                      <TableTh fz={'h4'}>Spesialisasi</TableTh>
-                      <TableTh fz={'h4'}>Jadwal</TableTh>
-                    </TableTr>
-                  </TableThead>
-                  <TableTbody>{rows}</TableTbody>
-                </Table>
+                <Box pb={10}>
+                  <Table highlightOnHover withTableBorder withColumnBorders>
+                    <TableThead>
+                      <TableTr>
+                        <TableTh fz={'h4'}>Nama</TableTh>
+                        <TableTh fz={'h4'}>Spesialisasi</TableTh>
+                        <TableTh fz={'h4'}>Jadwal</TableTh>
+                      </TableTr>
+                    </TableThead>
+                    <TableTbody>
+                      {state.findUnique.data?.dokterdantenagamedis ? (
+                        <TableTr>
+                          <TableTd>{state.findUnique.data.dokterdantenagamedis.name}</TableTd>
+                          <TableTd>{state.findUnique.data.dokterdantenagamedis.specialist}</TableTd>
+                          <TableTd>{state.findUnique.data.dokterdantenagamedis.jadwal}</TableTd>
+                        </TableTr>
+                      ) : (
+                        <TableTr>
+                          <TableTd colSpan={3} style={{ textAlign: 'center' }}>Tidak ada data dokter/tenaga medis</TableTd>
+                        </TableTr>
+                      )}
+                    </TableTbody>
+                  </Table>
+                </Box>
                 {/* Fasilitas Pendukung */}
                 <Text fz={'h4'} fw={"bold"}>
                   Fasilitas Pendukung
                 </Text>
                 <Divider />
-                <List pb={10}>
-                  <ListItem fz={'h4'}>Apotek dengan ketersediaan obat lengkap</ListItem>
-                  <ListItem fz={'h4'}>Ruang tunggu ber-AC</ListItem>
-                  <ListItem fz={'h4'}>Area bermain anak</ListItem>
-                  <ListItem fz={'h4'}>Ambulans 24 jam</ListItem>
-                  <ListItem fz={'h4'}>Toilet khusus disabilitas</ListItem>
-                  <ListItem fz={'h4'}>Tempat parkir luas</ListItem>
-                </List>
+                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.fasilitaspendukung?.content }} />
                 {/* Dokter */}
                 <Text fz={'h4'} fw={"bold"}>
-                 Layanan & Tarif
+                  Layanan & Tarif
                 </Text>
                 <Divider />
                 <Table highlightOnHover withTableBorder withColumnBorders>
@@ -144,7 +105,12 @@ function Page() {
                       <TableTh fz={'h4'}>Tarif</TableTh>
                     </TableTr>
                   </TableThead>
-                  <TableTbody>{rows2}</TableTbody>
+                  <TableTbody>
+                    <TableTr>
+                      <TableTd>{state.findUnique?.data?.tarifdanlayanan.layanan}</TableTd>
+                      <TableTd>{state.findUnique?.data?.tarifdanlayanan.tarif}</TableTd>
+                    </TableTr>
+                  </TableTbody>
                 </Table>
                 <Text fz={'h6'} pb={10} fw={"bold"}>
                   * Gratis dengan BPJS Kesehatan
@@ -174,7 +140,7 @@ function Page() {
                   </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>
+                  <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>
                 <Group>
                   <Button fz={'lg'} bg={colors['blue-button']}>

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

@@ -0,0 +1,54 @@
+'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 { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function FasilitasKesehatanPage() {
+  const state = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    state.findMany.load()
+  }, [])
+
+  if(!state.findMany.data){
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </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'} />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default FasilitasKesehatanPage;

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

@@ -1,10 +1,14 @@
 'use client'
+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, List, ListItem, Paper, Stack, Text, Textarea, TextInput, useCombobox } from '@mantine/core';
+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 { DateInput } from '@mantine/dates';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconCalendar } from '@tabler/icons-react';
+import { useParams } from 'next/navigation';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
 const layanan = [
   'Penimbangan',
@@ -42,6 +46,21 @@ function Page() {
       <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>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -63,62 +82,41 @@ function Page() {
                 </Text>
                 <Divider />
                 <Text fz={'h4'} fw={"bold"}>
-                  Nama Kegiatan : <Text span fz={'h4'}>Posyandu Balita</Text>
+                  Nama Kegiatan : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.name}</Text>
                 </Text>
                 <Text fz={'h4'} fw={"bold"}>
-                  Tanggal : <Text span fz={'h4'}>21 Februari 2025</Text>
+                  Tanggal : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.tanggal}</Text>
                 </Text>
                 <Text fz={'h4'} fw={"bold"}>
-                  Waktu : <Text span fz={'h4'}>08:00-12:00 WITA</Text>
+                  Waktu : <Text span fz={'h4'}>{state.findUnique.data.informasijadwalkegiatan.waktu}</Text>
                 </Text>
                 <Text pb={10} fz={'h4'} fw={"bold"}>
-                  Lokasi : <Text span fz={'h4'}>Banjar Gulingan</Text>
+                  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'}>
-                  Posyandu balita adalah program kesehatan rutin untuk memantau tumbuh kembang balita. Kegiatan ini meliputi penimbangan berat badan, pengukuran tinggi badan, pemeriksaan kesehatan dasar, imunisasi, dan konsultasi gizi.
-                </Text>
+                <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 />
-                <List pb={10}>
-                  <ListItem fz={'h4'}>Penimbangan berat badan</ListItem>
-                  <ListItem fz={'h4'}>Pengukuran tinggi badan</ListItem>
-                  <ListItem fz={'h4'}>Imunisasi rutin</ListItem>
-                  <ListItem fz={'h4'}>Pemberian vitamin A</ListItem>
-                  <ListItem fz={'h4'}>Konsultasi pertumbuhan dan gizi</ListItem>
-                  <ListItem fz={'h4'}>Pemeriksaan kesehatan dasar</ListItem>
-                </List>
+                <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 />
-                <List pb={10}>
-                  <ListItem fz={'h4'}>Balita berusia 0-5 tahun</ListItem>
-                  <ListItem fz={'h4'}>Membawa KMS (Kartu Menuju Sehat)</ListItem>
-                  <ListItem fz={'h4'}>Membawa buku KIA (Kesehatan Ibu dan Anak)</ListItem>
-                  <ListItem fz={'h4'}>Orang tua/wali wajib mendampingi</ListItem>
-                  <ListItem fz={'h4'}>Balita dalam kondisi sehat (tidak demam)</ListItem>
-                </List>
+                <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 />
-                <List pb={10}>
-                  <ListItem fz={'h4'}>KMS (Kartu Menuju Sehat)</ListItem>
-                  <ListItem fz={'h4'}>Buku KIA (Kesehatan Ibu dan Anak)</ListItem>
-                  <ListItem fz={'h4'}>KTP orang tua/wali</ListItem>
-                  <ListItem fz={'h4'}>Kartu Keluarga</ListItem>
-                  <ListItem fz={'h4'}>Kartu BPJS (jika ada)</ListItem>
-                </List>
+                <Text pb={10} ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.dokumenjadwalkegiatan.content }} />
                 {/* Pendaftaran */}
                 <Text fz={'h4'} fw={"bold"}>
                   Pendaftaran

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

@@ -0,0 +1,57 @@
+'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 { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+function JadwalKegiatanPage() {
+  const state = useProxy(jadwalkegiatanState)
+  const router = useRouter();
+
+  useShallowEffect(()=> {
+    state.findMany.load()
+  }, [])
+
+  if(!state.findMany.data){
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </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}
+              </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'} />
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default JadwalKegiatanPage;

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

@@ -2,17 +2,20 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import colors from '@/con/colors';
 import { BarChart as MantineBarChart } from '@mantine/charts';
-import { Anchor, Box, Center, ColorSwatch, Divider, Flex, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Center, ColorSwatch, Flex, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
-import Link from 'next/link';
 // import { useRouter } from 'next/navigation';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 
 import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import { useProxy } from 'valtio/utils';
+
+import FasilitasKesehatan from './fasilitas-kesehatan-page/page';
 import GrafikPenyakit from './grafik-penyakit/page';
+import JadwalKegiatan from './jadwal-kegiatan-page/page';
+import ArtikelKesehatanPage from './artikel-kesehatan-page/page';
 
 
 function Page() {
@@ -160,167 +163,11 @@ function Page() {
               }}
             >
               {/* Fasilitas Kesehatan */}
-              <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>
-                    <Box>
-                      <Text fz={'h4'}>
-                        UPTD Puskesmas Abiansemal III
-                      </Text>
-                      <Text fz={'h4'}>
-                        Jl. Ratna, Sibang Kaja
-                      </Text>
-                      <Text fz={'h4'}>
-                        08:00-16:00 WITA
-                        (Senin-Sabtu)
-                      </Text>
-                      <Text fz={'h4'}>
-                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
-                      </Text>
-                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
-                        <Text c={colors['blue-button']} fz={'h4'}>
-                          Detail Lengkap {'>>'}
-                        </Text>
-                      </Anchor>
-                    </Box>
-                    <Divider color={colors['blue-button']} px={'xl'} />
-                    <Box>
-                      <Text fz={'h4'}>
-                        UPTD Puskesmas Abiansemal III
-                      </Text>
-                      <Text fz={'h4'}>
-                        Jl. Ratna, Sibang Kaja
-                      </Text>
-                      <Text fz={'h4'}>
-                        08:00-16:00 WITA
-                        (Senin-Sabtu)
-                      </Text>
-                      <Text fz={'h4'}>
-                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
-                      </Text>
-                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
-                        <Text c={colors['blue-button']} fz={'h4'}>
-                          Detail Lengkap {'>>'}
-                        </Text>
-                      </Anchor>
-                    </Box>
-                    <Divider color={colors['blue-button']} px={'xl'} />
-                    <Box>
-                      <Text fz={'h4'}>
-                        UPTD Puskesmas Abiansemal III
-                      </Text>
-                      <Text fz={'h4'}>
-                        Jl. Ratna, Sibang Kaja
-                      </Text>
-                      <Text fz={'h4'}>
-                        08:00-16:00 WITA
-                        (Senin-Sabtu)
-                      </Text>
-                      <Text fz={'h4'}>
-                        Layanan Unggulan: Poli Umum, Poli Gigi, Imunisasi, Ibu/KB
-                      </Text>
-                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/fasilitas-kesehatan'} c={'black'} variant='transparent'>
-                        <Text c={colors['blue-button']} fz={'h4'}>
-                          Detail Lengkap {'>>'}
-                        </Text>
-                      </Anchor>
-                    </Box>
-                    <Divider color={colors['blue-button']} px={'xl'} />
-                  </Stack>
-                </Paper>
-              </Box>
+              <FasilitasKesehatan/>
               {/* Jadwal Kegiatan */}
-              <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>
-                    <Box>
-                      <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
-                        21 Februari 2025
-                      </Text>
-                      <Text fz={'h4'} fw={'bold'}>
-                        Posyandu Balita
-                      </Text>
-                      <Text fz={'h4'}>
-                        08:00-12:00 WITA
-                      </Text>
-                      <Text fz={'h4'}>
-                        Banjar Gulingan
-                      </Text>
-                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan'} 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'} />
-                    <Box>
-                      <Text fz={'h4'} fw={'bold'} c={colors['blue-button']}>
-                        23 Februari 2025
-                      </Text>
-                      <Text fz={'h4'} fw={'bold'}>
-                        Donor Darah
-                      </Text>
-                      <Text fz={'h4'}>
-                        09:00-14:00 WITA
-                      </Text>
-                      <Text fz={'h4'}>
-                        Puskesmas Abiansemal III
-                      </Text>
-                      <Anchor component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/jadwal-kegiatan'} c={colors['blue-button']} variant='transparent'>
-                        <Text c={colors['blue-button']} fz={'h4'} >
-                          Detail & Pendaftaran
-                        </Text>
-                      </Anchor>
-                    </Box>
-                  </Stack>
-                </Paper>
-              </Box>
+              <JadwalKegiatan/>
               {/* Artikel Kesehatan */}
-              <Box>
-                <Paper p={'xl'} h={'112vh'} bg={colors['white-trans-1']}>
-                  <Stack gap={'xs'}>
-                    <Box>
-                      <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
-                      <Image pt={5} src={'/api/img/dbd.png'} alt="" />
-                      <Text fz={'h4'} fw={'bold'} >
-                        Tips Mencegah Demam Berdarah Saat Musim Hujan
-                      </Text>
-                      <Text fz={'h6'} pb={10}>
-                        Diposting: 12 Februari 2025 | Dinas Kesehatan
-                      </Text>
-                      <Text fz={'h4'} pb={10}>
-                        Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
-                      </Text>
-                      <Anchor c={'black'} component={Link} href={'/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan'} variant='transparent'>
-                        <Text c={colors['blue-button']} fz={'h4'} >
-                          Baca Selengkapnya {'>>'}
-                        </Text>
-                      </Anchor>
-                    </Box>
-                    <Divider color={colors['blue-button']} px={'xl'} />
-                    <Box>
-                      <Text ta={'center'} fw={"bold"} fz={'h3'} c={colors['blue-button']}>Artikel Kesehatan</Text>
-                      <Image pt={5} src={'/api/img/dbd.png'} alt="" />
-                      <Text fz={'h4'} fw={'bold'} >
-                        Tips Mencegah Demam Berdarah Saat Musim Hujan
-                      </Text>
-                      <Text fz={'h6'} pb={10}>
-                        Diposting: 12 Februari 2025 | Dinas Kesehatan
-                      </Text>
-                      <Text fz={'h4'} pb={10}>
-                        Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
-                      </Text>
-                      <Anchor c={'black'} href={'/darmasaba/kesehatan/data-kesehatan-warga/artikel-kesehatan'} variant='transparent'>
-                        <Text c={colors['blue-button']} fz={'h4'} >
-                          Baca Selengkapnya {'>>'}
-                        </Text>
-                      </Anchor>
-                    </Box>
-                  </Stack>
-                </Paper>
-              </Box>
+              <ArtikelKesehatanPage/>
             </SimpleGrid>
           </Box>
         </Stack>

src/app/darmasaba/(pages)/kesehatan/info-wabah-penyakit/page.tsx

@@ -1,16 +1,58 @@
+'use client'
+import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 import colors from '@/con/colors';
-import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, 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';
 
 function Page() {
+  const state = useProxy(infoWabahPenyakit)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-        Info Wabah / Penyakit
-      </Text>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Info Wabah / Penyakit
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Info Wabah / Penyakit'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <SimpleGrid
@@ -19,101 +61,41 @@ function Page() {
               md: 3,
             }}
           >
-            <Box>
-              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
-                <Stack gap={'xs'}>
-                  <Box>
-                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Demam Berdarah Dengue (DBD)</Text>
-                    <Image pt={5} src={'/api/img/dbd.png'} alt="" />
-                    <Text fz={'h4'} fw={'bold'} >
-                      Apa itu DBD penyebab, gejala dan cara penanganannya?
-                    </Text>
-                    <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
-                    </Text>
-                    <Text fz={'h4'} pb={10}>
-                      Yuk Kenali gelaja dan cara penanganan DBD yang efektif untuk melindungi keluarga anda selama musim hujan.
-                    </Text>
-                    <List>
-                      <ListItem>
-                        Penyebab: Virus dengue yang ditularkan oleh nyamuk Aedes aegypti.
-                      </ListItem>
-                      <ListItem>
-                        Gejala: Demam tinggi, nyeri sendi, ruam kulit, dan pendarahan ringan.
-                      </ListItem>
-                      <ListItem>
-                        Pencegahan: Menguras tempat air, menutup wadah air, fogging, dan menggunakan lotion anti-nyamuk.
-                      </ListItem>
-                    </List>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
-            <Box>
-              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
-                <Stack gap={'xs'}>
-                  <Box>
-                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>TBC (Tuberkulosis)</Text>
-                    <Image pt={5} src={'/api/img/tbc-1.png'} alt="" />
-                    <Text fz={'h4'} fw={'bold'} >
-                      Apa itu TBC penyebab, gejala dan cara penanganannya?
-                    </Text>
-                    <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
-                    </Text>
-                    <Text fz={'h4'} pb={10}>
-                      Yuk Kenali gelaja dan cara penanganan TBC yang efektif untuk melindungi keluarga anda.
-                    </Text>
-                    <List>
-                      <ListItem>
-                        Penyebab: Bakteri Mycobacterium tuberculosis yang menyebar melalui udara.
-                      </ListItem>
-                      <ListItem>
-                        Gejala: Batuk lebih dari 2 minggu, berkeringat di malam hari, dan berat badan turun.
-                      </ListItem>
-                      <ListItem>
-                        Pencegahan: Vaksin BCG, pola hidup sehat, dan pengobatan bagi penderita agar tidak menular.
-                      </ListItem>
-                    </List>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
-            <Box>
-              <Paper p={'xl'} h={'80vh'} bg={colors['white-trans-1']}>
-                <Stack gap={'xs'}>
-                  <Box>
-                    <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>Diare dan Kolera</Text>
-                    <Image pt={5} src={'/api/img/diare.png'} alt="" />
-                    <Text fz={'h4'} fw={'bold'} >
-                      Apa itu Diare dan Kolera penyebab, gejala dan cara penanganannya?
-                    </Text>
-                    <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
-                    </Text>
-                    <Text fz={'h4'} pb={10}>
-                      Yuk Kenali gelaja dan cara penanganan Diare dan Kolera yang efektif untuk melindungi keluarga anda.
-                    </Text>
-                    <List>
-                      <ListItem>
-                        Penyebab: Bakteri Vibrio cholerae (Kolera) atau Escherichia coli (diare) akibat makanan/minuman yang terkontaminasi.
-                      </ListItem>
-                      <ListItem>
-                        Gejala: Buang air besar cair terus-menerus, dehidrasi, dan lemas.
-                      </ListItem>
-                      <ListItem>
-                        Pencegahan: Menjaga kebersihan makanan dan air, serta mencuci tangan dengan sabun.
-                      </ListItem>
-                    </List>
-                  </Box>
-                </Stack>
-              </Paper>
-            </Box>
+            {data.map((v, k) => {
+              return (
+                <Paper key={k} p={'xl'} bg={colors['white-trans-1']}>
+                  <Stack gap={'xs'}>
+                    <Box>
+                      <Text fw={"bold"} fz={'h3'} c={colors['blue-button']}>{v.name}</Text>
+                      <Image w={330} h={200} fit='contain' pt={5} src={v.image.link} alt={v.name} />
+                      <Text fz={'h4'} fw={'bold'} >
+                        {v.name}
+                      </Text>
+                      <Text fz={'h6'} pb={10}>
+                        Diposting: 12 Februari 2025 | Dinas Kesehatan
+                      </Text>
+                      <Text fz={'h4'} pb={10}>
+                        {v.deskripsiSingkat}
+                      </Text>
+                      <Text fz={'h4'} pb={10} dangerouslySetInnerHTML={{ __html: v.deskripsiLengkap }} />
+                    </Box>
+                  </Stack>
+                </Paper>
+              )
+            })}
           </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)/kesehatan/kontak-darurat/page.tsx

@@ -1,72 +1,59 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-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';
+import { useState } from 'react';
 
-const data1 = [
-  {
-    id: 1,
-    judul: 'Layanan Medis Cepat',
-    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Nomor Darurat',
-    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Posko Kesehatan & Evakuasi',
-    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan & Sosialisasi',
-    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    icon: <IconReport size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
-    </List>
-  }
-]
+import { useShallowEffect } from '@mantine/hooks';
+import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
+import { IconSearch } from '@tabler/icons-react';
 
 function Page() {
+  const state = useProxy(kontakDarurat)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Kontak Darurat
-        </Text>
-        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-        Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
-        </Text>
-      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Penanganan Darurat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Penanganan Darurat'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <SimpleGrid
@@ -75,20 +62,26 @@ function Page() {
               base: 1,
               md: 3,
             }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
               return (
                 <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                   <Stack gap={'xs'}>
                     <Center py={40}>
-                      {v.icon}
+                      <Image
+                        src={v.image.link}
+                        alt={v.name}
+                        w={200}
+                        h={200}
+                        fit='contain'
+                      />
                     </Center>
                     <Box px={'lg'}>
                       <Box pb={20}>
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                         </Text>
                         <Box px={10}>
-                        {v.deskripsi}
+                          <Text fz={"h4"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                         </Box>
                       </Box>
                     </Box>
@@ -99,6 +92,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)/kesehatan/page.tsx

@@ -1,7 +0,0 @@
-import { Stack } from "@mantine/core";
-
-export default function Page() {
-    return <Stack>
-        kesehatan
-    </Stack>
-}

src/app/darmasaba/(pages)/kesehatan/penanganan-darurat/page.tsx

@@ -1,72 +1,59 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconHospitalCircle, IconPhone, IconReport, IconReportMedical, IconSpeakerphone } from '@tabler/icons-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';
+import { useState } from 'react';
 
-const data1 = [
-  {
-    id: 1,
-    judul: 'Layanan Medis Cepat',
-    icon: <IconHospitalCircle size={80} color={colors["blue-button"]} />,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    judul: 'Nomor Darurat',
-    icon: <IconPhone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos Kesehatan: 08125651052</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pemadam Kebakaran: 113</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Polisi: 110</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    judul: 'Posko Kesehatan & Evakuasi',
-    icon: <IconReportMedical size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Ambulans desa siap siaga 24 jam untuk keadaan darurat medis.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Pos kesehatan desa menyediakan layanan pertolongan pertama dan perawatan dasar.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    judul: 'Pelatihan & Sosialisasi',
-    icon: <IconSpeakerphone size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Setiap bulan, desa mengadakan pelatihan P3K (Pertolongan Pertama pada Kecelakaan) bagi masyarakat.</ListItem>
-      <ListItem fz={{base: 'h4', md: 'lg'}}>Edukasi tentang tindakan saat bencana seperti gempa bumi dan banjir.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    judul: 'Sistem Laporan Kejadian',
-    icon: <IconReport size={80} color={colors["blue-button"]}/>,
-    deskripsi: <List>
-      <ListItem>Warga bisa melaporkan kejadian darurat melalui aplikasi desa atau menghubungi perangkat desa.</ListItem>
-      <ListItem>Laporan akan segera ditindaklanjuti oleh tim penanganan darurat.</ListItem>
-    </List>
-  }
-]
+import { useShallowEffect } from '@mantine/hooks';
+import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
+import { IconSearch } from '@tabler/icons-react';
 
 function Page() {
+  const state = useProxy(penangananDarurat)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Penanganan Darurat
-        </Text>
-        <Text px={{base: 20, md: 150}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-          Program kesehatan di Desa Darmasaba memiliki peran penting dalam meningkatkan kesejahteraan masyarakat. Kami berkomitmen untuk memberikan layanan darurat yang cepat, responsif, dan mudah diakses oleh seluruh warga.
-        </Text>
-      </Box>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Penanganan Darurat
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Penanganan Darurat'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <SimpleGrid
@@ -75,20 +62,26 @@ function Page() {
               base: 1,
               md: 3,
             }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
               return (
                 <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                   <Stack gap={'xs'}>
                     <Center py={40}>
-                      {v.icon}
+                      <Image
+                        src={v.image.link}
+                        alt={v.name}
+                        w={200}
+                        h={200}
+                        fit='contain'
+                      />
                     </Center>
                     <Box px={'lg'}>
                       <Box pb={20}>
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                         </Text>
                         <Box px={10}>
-                        {v.deskripsi}
+                          <Text fz={"h4"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                         </Box>
                       </Box>
                     </Box>
@@ -99,6 +92,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)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
+import colors from '@/con/colors';
+import { Box, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconCalendar, IconUser } from '@tabler/icons-react';
+import { useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../desa/layanan/_com/BackButto';
+
+function Page() {
+  const state = useProxy(programKesehatan)
+  const params = useParams()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params.id as string)
+  }, [params.id])
+
+  if (!state.findUnique.data) {
+    return (
+      <div>
+        <Skeleton h={500} />
+      </div>
+    )
+  }
+  return (
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Paper px={{ base: 'md', md: 100 }} radius={10} bg={colors["white-trans-1"]}>
+        <Stack gap={'xs'}>
+          <Center my={20}>
+            <Image radius={"lg"} src={state.findUnique.data.image?.link} alt="" />
+          </Center>
+          <Box px={'lg'}>
+            <Box>
+              <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
+                {state.findUnique.data.name}
+              </Text>
+              <Text ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: state.findUnique.data.deskripsi }}></Text>
+            </Box>
+            <Group py={20}>
+              <Group gap="xs">
+                <IconCalendar size={18} />
+                <Text size="sm">
+                  {state.findUnique.data.createdAt ? new Date(state.findUnique.data.createdAt).toLocaleDateString('id-ID', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                  }) : 'No date available'}
+                </Text>
+              </Group>
+              <Group gap="xs">
+                <IconUser size={18} />
+                <Text size="sm">Admin Desa</Text>
+              </Group>
+            </Group>
+          </Box>
+        </Stack>
+      </Paper>
+    </Stack>
+  );
+}
+
+export default Page;

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

@@ -1,28 +1,14 @@
+'use client'
 import colors from "@/con/colors";
-import { Box, Button, Center, Group, Image, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
-import { IconBarbell, IconCalendar, IconOld, IconUser, IconUsersGroup } from "@tabler/icons-react";
+import { Box, Button, Center, Grid, GridCol, Group, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from "@mantine/core";
+import { IconBarbell, IconCalendar, IconOld, IconSearch, IconUser, IconUsersGroup } from "@tabler/icons-react";
 import BackButton from "../../desa/layanan/_com/BackButto";
+import { useProxy } from "valtio/utils";
+import programKesehatan from "@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan";
+import { useState } from "react";
+import { useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
 
-const data1 = [
-  {
-    id: 1,
-    judul: 'Posyandu Terintegrasi',
-    image: '/api/img/pk-1.png',
-    deskripsi: 'Program pemantauan kesehatan terpadu untuk balita, ibu hamil, dan lansia di Banjar Gulingan dengan sistem pencatatan digital. Layanan meliputi penimbangan, imunisasi, dan konsultasi kesehatan'
-  },
-  {
-    id: 2,
-    judul: 'Senam Lansia',
-    image: '/api/img/pk-2.png',
-    deskripsi: 'Kegiatan olahraga teratur untuk warga lanjut usia dengan gerakan yang disesuaikan untuk menjaga kebugaran dan kesehatan. Program ini didampingi oleh instruktur profesional dan pemantauan kesehatan rutin.'
-  },
-  {
-    id: 3,
-    judul: 'Vaksinasi & Sterilasi HPR',
-    image: '/api/img/pk-3.png',
-    deskripsi: 'Program pengendalian hewan penular rabies melalui vaksinasi dan sterilisasi untuk mencegah penyebaran penyakit zoonosis. Dilengkapi dengan sistem pendataan digital untuk memantau cakupan dan efektivitas program.'
-  }
-]
 const data2 = [
   {
     id: 1,
@@ -44,21 +30,49 @@ const data2 = [
   },
 ]
 export default function Page() {
+  const state = useProxy(programKesehatan)
+  const router = useRouter()
+  const [search, setSearch] = useState('')
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Program Kesehatan Unggulan
-        </Text>
-        <Text px={{base: 20, md: 90}} ta={"center"} fz={{ base: "h4", md: "h3" }} >
-          Desa Darmasaba mengembangkan berbagai program kesehatan terpadu untuk meningkatkan kualitas
-          hidup masyarakat, dengan pendekatan preventif dan promotif bebrbasis teknologi serta prtisipasi aktif
-          warga.
-        </Text>
-      </Box>
+      <Grid px={{ base: 'md', md: 100 }} align="center">
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Program Kesehatan Unggulan
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            placeholder='Cari Program Kesehatan'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'}>
           <SimpleGrid
@@ -67,27 +81,33 @@ export default function Page() {
               base: 1,
               md: 3,
             }}>
-            {data1.map((v, k) => {
+            {data.map((v, k) => {
               return (
                 <Paper radius={10} key={k} bg={colors["white-trans-1"]}>
                   <Stack gap={'xs'}>
                     <Center>
-                      <Image src={v.image} alt="" style={{ borderRadius: '14px 14px 0 0' }} />
+                      <Image src={v.image?.link} alt="" style={{ borderRadius: '14px 14px 0 0' }} />
                     </Center>
                     <Box px={'lg'}>
                       <Box>
                         <Text pb={10} c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                          {v.judul}
+                          {v.name}
                         </Text>
-                        <Text ta={'justify'} fz={'h4'}>{v.deskripsi}</Text>
+                        <Text ta={'justify'} fz={'h4'} dangerouslySetInnerHTML={{ __html: v.deskripsi }}></Text>
                       </Box>
-                      <Box py={15}>
+                      <Box py={15} onClick={() => router.push(`/darmasaba/kesehatan/program-kesehatan/${v.id}`)}>
                         <Button fw={'bold'} fz={'h5'} c={colors["blue-button"]} bg={colors["BG-trans"]}>Detail Program</Button>
                       </Box>
                       <Group py={20}>
                         <Group gap="xs">
                           <IconCalendar size={18} />
-                          <Text size="sm">Selasa, 11 Januari 2025</Text>
+                          <Text size="sm">
+                            {v.createdAt ? new Date(v.createdAt).toLocaleDateString('id-ID', {
+                              day: 'numeric',
+                              month: 'long',
+                              year: 'numeric',
+                            }) : 'No date available'}
+                          </Text>
                         </Group>
                         <Group gap="xs">
                           <IconUser size={18} />
@@ -100,6 +120,15 @@ export default function Page() {
               )
             })}
           </SimpleGrid>
+          <Center>
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)} // ini penting!
+              total={totalPages}
+              mt="md"
+              mb="md"
+            />
+          </Center>
         </Stack>
       </Box>
       <Box py={10} px={{ base: "md", md: 100 }}>
@@ -141,6 +170,5 @@ export default function Page() {
         </SimpleGrid>
       </Box>
     </Stack>
-
   )
-}
+}

src/app/darmasaba/(pages)/kesehatan/puskesmas/[id]/page.tsx

@@ -0,0 +1,114 @@
+'use client'
+import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas';
+import colors from '@/con/colors';
+import { BackgroundImage, Box, Grid, GridCol, Paper, SimpleGrid, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../desa/layanan/_com/BackButto';
+
+function Page() {
+  const state = useProxy(puskesmasState)
+  const params = useParams()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params.id as string)
+  }, [])
+
+  if (!state.findUnique.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>
+      <Stack gap={'lg'} px={{ base: 'md', md: 100 }}>
+        <Box>
+          <Paper p={"xl"} bg={colors['white-trans-1']}>
+            <Box pb={30}>
+              <BackgroundImage
+                pb={30}
+                radius={16}
+                h={{ base: 250, md: 500 }}
+                src={state.findUnique.data.image.link}
+                style={{ position: 'relative' }}
+              >
+                <Box
+                  style={{
+                    borderRadius: 16,
+                    zIndex: 0
+                  }}
+                  pos={"absolute"}
+                  w={"100%"}
+                  h={"100%"}
+                  bg={colors.trans.dark[2]}
+                />
+                <Text style={{
+                  position: 'absolute',
+                  bottom: 35,
+                  left: 15,
+                }} fw={'bold'} fz={{ base: 'md', md: 'h3' }} c={colors['white-1']}>{state.findUnique.data.name}</Text>
+                <Text style={{
+                  position: 'absolute',
+                  bottom: 10,
+                  left: 15,
+                }} fw={'bold'} fz={{ base: 'md', md: 'h4' }} c={colors['white-1']}>{state.findUnique.data.alamat}</Text>
+              </BackgroundImage>
+              <Grid
+                py={20}>
+                <GridCol span={{ base: 12, md: 6 }}>
+                  <Box>
+                    <Stack>
+                      <Title order={3}>Informasi</Title>
+                      <Box>
+                        <Text>Alamat: {state.findUnique.data.alamat}</Text>
+                        <Text>Telepon: {state.findUnique.data.kontak.kontakPuskesmas}</Text>
+                        <Text>Email: {state.findUnique.data.kontak.email}</Text>
+                      </Box>
+                      <Title order={3}>Jam Operasional</Title>
+                      <Box>
+                        <Text pb={10} fz={'h4'} fw={"bold"}>
+                          Senin - Kamis: <Text span fz={'h4'}>{state.findUnique.data?.jam.workDays} - {state.findUnique.data?.jam.weekDays}</Text>
+                        </Text>
+                      </Box>
+                    </Stack>
+                  </Box>
+                </GridCol>
+                <GridCol span={{ base: 12, md: 6 }}>
+                  <Box>
+                    <Paper p={"xl"} bg={'#B1C5F2'}>
+                      <SimpleGrid
+                        cols={{
+                          base: 1,
+                          md: 2
+                        }}>
+                        <Paper p={"xl"} bg={colors['white-trans-1']}>
+                          <Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
+                          <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
+                        </Paper>
+                        <Paper p={"xl"} bg={colors['white-trans-1']}>
+                          <Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text>
+                          <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
+                        </Paper>
+                      </SimpleGrid>
+                    </Paper>
+                  </Box>
+                </GridCol>
+                <Box>
+                </Box>
+              </Grid>
+            </Box>
+
+          </Paper>
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/darmasaba/(pages)/kesehatan/puskesmas/page.tsx

@@ -1,125 +1,97 @@
+'use client'
+import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas';
 import colors from '@/con/colors';
-import { Stack, Box, Paper, Text, BackgroundImage, SimpleGrid, Title, Flex } from '@mantine/core';
-import React from 'react';
+import { Anchor, Box, Center, Grid, GridCol, Image, Pagination, Paper, 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';
 
+
 function Page() {
+  const state = useProxy(puskesmasState)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 3, search)
+  }, [page, search])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-        Puskesmas Darmasaba
-      </Text>
+      <Grid align='center' px={{ base: 'md', md: 100 }}>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Puskesmas Darmasaba
+          </Text>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <TextInput
+            radius={"lg"}
+            placeholder='Cari Puskesmas'
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            leftSection={<IconSearch size={20} />}
+            w={{ base: "50%", md: "100%" }}
+          />
+        </GridCol>
+      </Grid>
       <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={'lg'}>
-          <Box>
-            <Paper p={"xl"} bg={colors['white-trans-1']}>
-              <Box pb={30}>
-                <BackgroundImage
-                  pb={30}
-                  radius={16}
-                  h={{ base: 250, md: 500 }}
-                  src='/api/img/posyandu.png'
-                  style={{ position: 'relative' }}
-                >
-                  <Box
-                    style={{
-                      borderRadius: 16,
-                      zIndex: 0
-                    }}
-                    pos={"absolute"}
-                    w={"100%"}
-                    h={"100%"}
-                    bg={colors.trans.dark[2]}
+        <SimpleGrid
+          cols={{
+            base: 1,
+            md: 3,
+          }}
+        >
+          {data.map((v, k) => {
+            return (
+              <Paper p={"xl"} bg={colors['white-trans-1']} key={k}>
+                <Stack gap={"xs"}>
+                  <Text fw={"bold"} fz={"h3"}>{v.name}</Text>
+                  <Image
+                    src={v.image.link}
+                    alt={v.name}
                   />
-                  <Text style={{
-                    position: 'absolute',
-                    bottom: 35,
-                    left: 15,
-                  }} fw={'bold'} fz={{ base: 'md', md: 'h3' }} c={colors['white-1']}>Puskesmas Darmasaba</Text>
-                  <Text style={{
-                    position: 'absolute',
-                    bottom: 10,
-                    left: 15,
-                  }} fw={'bold'} fz={{ base: 'md', md: 'h4' }} c={colors['white-1']}>Jl. Raya Darmasaba No.45, Badung, Bali</Text>
-                </BackgroundImage>
-                <SimpleGrid
-                  py={20}
-                  cols={{
-                    base: 1,
-                    md: 2
-                  }}>
                   <Box>
-                    <Stack>
-                      <Title order={3}>Jam Operasional</Title>
-                      <Box>
-                        <Flex justify={'space-between'} align={'center'}>
-                          <Box>
-                            <Text>Senin - Kamis</Text>
-                            <Text>Jumat</Text>
-                            <Text>Sabtu</Text>
-                            <Text> Minggu & Libur</Text>
-                          </Box>
-                          <Box>
-                            <Text>08:00 - 15:00 WITA</Text>
-                            <Text>08:00 - 15:00 WITA</Text>
-                            <Text>08:00 - 15:00 WITA</Text>
-                            <Text>Tutp (UGD 24 JAM)</Text>
-                          </Box>
-                        </Flex>
-                      </Box>
-                    </Stack>
+                    <Text>Alamat: {v.alamat}</Text>
+                    <Text>Telepon: {v.kontak.kontakPuskesmas}</Text>
+                    <Text>Email: {v.kontak.email}</Text>
                   </Box>
-                  <Box>
-                    <Stack>
-                      <Title order={3}>Jam Operasional</Title>
-                      <Box>
-                        <Flex justify={'space-between'} align={'center'}>
-                          <Box>
-                            <Text>Senin - Kamis</Text>
-                            <Text>Jumat</Text>
-                            <Text>Sabtu</Text>
-                            <Text> Minggu & Libur</Text>
-                          </Box>
-                          <Box>
-                            <Text>08:00 - 15:00 WITA</Text>
-                            <Text>08:00 - 15:00 WITA</Text>
-                            <Text>08:00 - 15:00 WITA</Text>
-                            <Text>Tutp (UGD 24 JAM)</Text>
-                          </Box>
-                        </Flex>
-                      </Box>
-                    </Stack>
-                  </Box>
-                  <Box>
-
-                  </Box>
-                </SimpleGrid>
-              </Box>
-              <Box>
-                <Paper p={"xl"} bg={'#B1C5F2'}>
-                  <SimpleGrid
-                    cols={{
-                      base: 1,
-                      md: 2
-                    }}>
-                    <Paper p={"xl"} bg={colors['white-trans-1']}>
-                      <Text fw={"bold"} fz={'h3'} ta={'center'}>Poliklinik Umum</Text>
-                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
-                    </Paper>
-                    <Paper p={"xl"} bg={colors['white-trans-1']}>
-                      <Text ta={'center'} fz={'h3'} fw={"bold"}>Poli Gigi</Text>
-                      <Text ta={'center'} fz={{ base: 45, md: 65 }} fw={'bold'} c={colors['blue-button']}>26</Text>
-                    </Paper>
-                  </SimpleGrid>
-                </Paper>
-              </Box>
-            </Paper>
-          </Box>
-        </Stack>
+                  <Anchor c={colors['blue-button']} href={`/darmasaba/kesehatan/puskesmas/${v.id}`}>Lihat Detail &gt;</Anchor>
+                </Stack>
+              </Paper>
+            )
+          })}
+        </SimpleGrid>
       </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/ppid/daftar-informasi-publik-desa-darmasaba/page.tsx

@@ -1,23 +1,37 @@
 'use client'
+
 import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 import colors from '@/con/colors';
-import { Box, Center, Image, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput } from '@mantine/core';
+import { Box, Center, Image, Pagination, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, 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';
 
 function Page() {
   const listData = useProxy(daftarInformasiPublik)
+  const [search, setSearch] = useState('')
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = listData.findMany
+
+
   useShallowEffect(() => {
-    listData.findMany.load()
-  }, [])
-  if (!listData.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    load(page, 5, search)
+  }, [page, search])
+
+  if (loading || !data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
     <Box px={{ base: 'md', md: 100 }}>
       <Skeleton h={40} />
     </Box>
-    <Skeleton h={40}/>
-    <Skeleton h={40}/>
+    <Skeleton h={40} />
+    <Skeleton h={40} />
     <Box px={{ base: 'md', md: 100 }}>
       <Skeleton h={40} />
     </Box>
@@ -40,6 +54,9 @@ function Page() {
           <TextInput
             placeholder='Cari Informasi...'
             leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            style={{ marginBottom: 16 }}
           />
           <Table withRowBorders withColumnBorders withTableBorder>
             <TableThead bg={colors['blue-button']}>
@@ -54,14 +71,33 @@ function Page() {
               {listData.findMany.data?.map((item, index) => (
                 <TableTr key={item.id}>
                   <TableTd ta={'center'}>{index + 1}</TableTd>
-                  <TableTd>{item.jenisInformasi}</TableTd>
-                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-                  <TableTd>{item.tanggal}</TableTd>
+                  <TableTd>
+                    <Text fz={'md'}>
+                      {item.jenisInformasi}
+                    </Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text
+                      fz={'md'}
+                      dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                    />
+                  </TableTd>
+                  <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
+                    ? new Date(item.tanggal).toLocaleDateString('id-ID')
+                    : '-'}</TableTd>
                 </TableTr>
               ))}
             </TableTbody>
           </Table>
         </Stack>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            my={"md"}
+          />
+        </Center>
         <Text pt={20} fz={'h4'} fw={"bold"}>Kontak PPID</Text>
         <Text fz={'sm'}>Email: ppid@desadarmasaba.id  |  WhatsApp: 081-xxx-xxx-xxx</Text>
       </Box>

src/app/darmasaba/_com/main-page/kepuasan/index.tsx

@@ -153,10 +153,262 @@ function Kepuasan() {
 
   if (data.length === 0) {
     return (
-      <Stack py={10}>
-        <Text c="dimmed" ta="center" my="md">
-          Belum ada data untuk ditampilkan
-        </Text>
+      <Stack p="sm">
+        <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
+          <Center>
+            <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+          </Center>
+          <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+          <Center mt={10}>
+            <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
+          </Center>
+        </Container>
+        <Box px={"xl"}>
+          <Paper p={"lg"} bg={colors.Bg}>
+            <Paper p={"lg"}>
+              <Stack gap={"xs"}>
+                <Flex justify={"space-between"} align={"center"}>
+                  <Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
+                  <Box>
+                    <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
+                    <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
+                      {state.findMany.total.toLocaleString('id-ID')}
+                    </Text>
+                  </Box>
+                </Flex>
+                <BarChart
+                  h={300}
+                  data={barChartData}
+                  dataKey="month"
+                  series={[{ name: 'count', color: colors['blue-button'] }]}
+                  tickLine="y"
+                  xAxisLabel="Bulan"
+                  yAxisLabel="Jumlah Responden"
+                  withTooltip
+                  tooltipAnimationDuration={200}
+                />
+              </Stack>
+            </Paper>
+            <Box py={"xl"}>
+              <SimpleGrid
+                cols={{
+                  base: 1,
+                  md: 1,
+                  lg: 1,
+                  xl: 3
+                }}
+              >
+                {/* Chart Jenis Kelamin */}
+                <Paper bg={colors['white-1']} p="md" radius="md">
+                  <Stack>
+                    <Title order={4}>Jenis Kelamin</Title>
+                    {donutDataJenisKelamin.every(item => item.value === 0) ? (
+                      <Text c="dimmed" ta="center" my="md">
+                        Belum ada data untuk ditampilkan dalam grafik
+                      </Text>
+                    ) : (
+                      <Paper p="md" radius="md" withBorder>
+                        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                          <Box style={{ position: 'relative', width: '100%' }}>
+                            <Center>
+                              <PieChart
+                                withLabels
+                                withTooltip
+                                labelsType="percent"
+                                size={200}
+                                data={donutDataJenisKelamin}
+                              />
+                            </Center>
+                          </Box>
+                          <Stack gap="sm" mt="md">
+                            {donutDataJenisKelamin.map((entry) => (
+                              <Flex key={entry.name} gap="md" align="center">
+                                <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                                <Text size="sm">{entry.name}: {entry.value}</Text>
+                              </Flex>
+                            ))}
+                          </Stack>
+                        </Box>
+                      </Paper>
+                    )}
+                  </Stack>
+                </Paper>
+
+                {/* Chart Rating */}
+                <Paper bg={colors['white-1']} p="md" radius="md">
+                  <Stack>
+                    <Title order={4}>Pilihan</Title>
+                    {donutDataRating.every(item => item.value === 0) ? (
+                      <Text c="dimmed" ta="center" my="md">
+                        Belum ada data untuk ditampilkan dalam grafik
+                      </Text>
+                    ) : (
+                      <Paper p="md" radius="md" withBorder>
+                        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                          <Box style={{ position: 'relative', width: '100%' }}>
+                            <Center>
+                              <PieChart
+                                withTooltip
+                                tooltipAnimationDuration={200}
+                                withLabels
+                                labelsPosition="outside"
+                                labelsType="percent"
+                                withLabelsLine
+                                size={200}
+                                data={donutDataRating}
+                              />
+                            </Center>
+                          </Box>
+                          <Box mt="md" style={{ width: '100%' }}>
+                            <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                              {donutDataRating.map((entry) => (
+                                <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
+                                  <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
+                                  <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                    {entry.name}: {entry.value}
+                                  </Text>
+                                </Flex>
+                              ))}
+                            </SimpleGrid>
+                          </Box>
+                        </Box>
+                      </Paper>
+                    )}
+                  </Stack>
+                </Paper>
+
+                {/* Chart Kelompok Umur */}
+                <Paper bg={colors['white-1']} p="md" radius="md">
+                  <Stack>
+                    <Title order={4}>Umur</Title>
+                    {donutDataKelompokUmur.every(item => item.value === 0) ? (
+                      <Text c="dimmed" ta="center" my="md">
+                        Belum ada data untuk ditampilkan dalam grafik
+                      </Text>
+                    ) : (
+                      <Paper p="md" radius="md" withBorder>
+                        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                          <Box style={{ position: 'relative', width: '100%' }}>
+                            <Center>
+                              <PieChart
+                                withTooltip
+                                tooltipAnimationDuration={200}
+                                withLabels
+                                labelsPosition="outside"
+                                labelsType="percent"
+                                withLabelsLine
+                                size={190}
+                                data={donutDataKelompokUmur}
+                              />
+                            </Center>
+                          </Box>
+                          <Box mt="md" style={{ width: '100%' }}>
+                            <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                              {donutDataKelompokUmur.map((entry) => (
+                                <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
+                                  <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
+                                  <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                    {entry.name}: {entry.value}
+                                  </Text>
+                                </Flex>
+                              ))}
+                            </SimpleGrid>
+                          </Box>
+                        </Box>
+                      </Paper>
+                    )}
+                  </Stack>
+                </Paper>
+              </SimpleGrid>
+            </Box>
+          </Paper>
+        </Box>
+        {/* Modal */}
+        <Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <TextInput
+                label="Nama"
+                type='text'
+                placeholder="masukkan nama"
+                value={state.create.form.name}
+                onChange={(val) => {
+                  state.create.form.name = val.currentTarget.value;
+                }}
+              />
+              <TextInput
+                label="Tanggal"
+                type="date"
+                placeholder="masukkan tanggal"
+                value={state.create.form.tanggal}
+                onChange={(val) => {
+                  state.create.form.tanggal = val.currentTarget.value;
+                }}
+              />
+              <Select
+                key={"jenisKelamin"}
+                label={"Jenis Kelamin"}
+                placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
+                value={state.create.form.jenisKelaminId || ""}
+                onChange={(val) => {
+                  state.create.form.jenisKelaminId = val ?? "";
+                }}
+                data={
+                  (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                    .filter(Boolean) // Hapus null, undefined, dll
+                    .map((item) => ({
+                      value: item.id,
+                      label: item.name || 'Tanpa Nama',
+                    }))
+                }
+                disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
+              />
+              <Select
+                key={"rating_responden"}
+                label={"Rating"}
+                placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
+                value={state.create.form.ratingId || ""}
+                onChange={(val) => {
+                  state.create.form.ratingId = val ?? "";
+                }}
+                data={
+                  (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                    .filter(Boolean) // Hapus null, undefined, dll
+                    .map((item) => ({
+                      value: item.id,
+                      label: item.name || 'Tanpa Nama',
+                    }))
+                }
+                disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+              />
+              <Select
+                key={"kelompokUmur"}
+                label={"Kelompok Umur"}
+                placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
+                value={state.create.form.kelompokUmurId || ""}
+                onChange={(val) => {
+                  state.create.form.kelompokUmurId = val ?? "";
+                }}
+                data={
+                  (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                    .filter(Boolean) // Hapus null, undefined, dll
+                    .map((item) => ({
+                      value: item.id,
+                      label: item.name || 'Tanpa Nama',
+                    }))
+                }
+                disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+              />
+              <Button
+                mt={10}
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+              >
+                Submit
+              </Button>
+            </Stack>
+          </Paper>
+        </Modal>
       </Stack>
     );
   }

src/app/percobaan/index.html

@@ -0,0 +1,705 @@
+
+<!DOCTYPE html>
+<html lang="id">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Desa Darmasaba Feature Checklist</title>
+    <style>
+      body {
+        font-family: Arial, sans-serif;
+        line-height: 1.6;
+        max-width: 800px;
+        margin: 0 auto;
+        padding: 20px;
+        background-color: #f4f4f4;
+      }
+      h1 {
+        color: #333;
+        text-align: center;
+        border-bottom: 2px solid #333;
+        padding-bottom: 10px;
+      }
+      h3 {
+        color: #444;
+        margin-top: 20px;
+        background-color: #e0e0e0;
+        padding: 10px;
+        border-radius: 5px;
+      }
+      h4 {
+        color: #4e4242;
+        margin-top: 20px;
+        background-color: #e0e0e0;
+        padding: 10px;
+        border-radius: 5px;
+      }
+      ul {
+        list-style-type: none;
+        padding-left: 0;
+      }
+      li {
+        background-color: #fff;
+        margin: 5px 0;
+        padding: 10px;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        transition: background-color 0.3s ease;
+      }
+      input[type="checkbox"] {
+        margin-right: 10px;
+        transform: scale(1.2);
+      }
+      li:hover {
+        background-color: #f0f0f0;
+      }
+      li.checked {
+        text-decoration: line-through;
+        color: #888;
+        background-color: #f0f0f0;
+      }
+      #progress-bar {
+        width: 100%;
+        background-color: #e0e0e0;
+        padding: 10px;
+        margin-top: 20px;
+        border-radius: 5px;
+      }
+      #progress {
+        width: 0%;
+        height: 20px;
+        background-color: #4caf50;
+        border-radius: 5px;
+        transition: width 0.5s ease;
+      }
+      #reset-btn {
+        display: block;
+        width: 100%;
+        padding: 10px;
+        background-color: #f44336;
+        color: white;
+        border: none;
+        border-radius: 5px;
+        margin-top: 20px;
+        cursor: pointer;
+      }
+      #reset-btn:hover {
+        background-color: #d32f2f;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Desa Darmasaba Feature Checklist</h1>
+
+    <!-- <div id="progress-bar">
+      <div id="progress"></div>
+    </div> -->
+    <!-- <div id="progress-percentage" style="text-align: center; font-weight: bold; margin-top: 5px; font-size: 1.2em;">0%</div> -->
+
+    <div id="checklist">
+      <!-- Menu Landing Page -->
+      <h3>Menu Landing Page</h3>
+      <!-- SubMenu Profile -->
+      <h4>Profile</h4>
+      <!-- Program Inovasi -->
+      <h4>Program Inovasi :</h4>
+      <ul>
+        <li>
+            <input type="checkbox" id="1" /> <label for="1">Search sudah berfungsi</label>
+          </li>
+        <li>
+          <input type="checkbox" id="2" /> <label for="2">Data tampil di halaman list</label>
+        </li>
+        <li>
+          <input type="checkbox" id="3" />
+          <label for="3">Create Program Inovasi</label>
+        </li>
+        <li>
+            <input type="checkbox" id="4" />
+            <label for="4">Detail mau tampil datanya</label>
+          </li>
+        <li>
+          <input type="checkbox" id="5" />
+          <label for="5">Hapus program inovasi bekerja</label>
+        </li>
+        <li>
+            <input type="checkbox" id="6" />
+            <label for="6">Edit / Update program inovasi bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="6_1" />
+            <label for="6_1">Pagination bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="6_2" />
+            <label for="6_2">Sinkronisasi ke UI</label>
+          </li>
+      </ul>
+     <!-- Pejabat Desa -->
+      <h4>Pejabat Desa : </h4>
+      <ul>
+        <li>
+          <input type="checkbox" id="8" /> <label for="8">Data tampil di halaman list</label>
+        </li>
+        <li>
+          <input type="checkbox" id="9" />
+          <label for="9">Data seed pejabat desa berfungsi</label>
+        </li>
+        <li>
+            <input type="checkbox" id="10" />
+            <label for="10">Detail mau tampil datanya</label>
+          </li>
+        <li>
+            <input type="checkbox" id="12" />
+            <label for="12">Edit / Update pejabat desa bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="12_1" />
+            <label for="12_1">Sinkronisasi ke UI</label>
+          </li>
+      </ul>
+
+       <!-- media sosial -->
+       <h4>Media Sosial : </h4>
+       <ul>
+         <li>
+             <input type="checkbox" id="13" /> <label for="13">Search sudah berfungsi</label>
+           </li>
+         <li>
+           <input type="checkbox" id="14" /> <label for="14">Data tampil di halaman list</label>
+         </li>
+         <li>
+           <input type="checkbox" id="15" />
+           <label for="15">Create media sosial</label>
+         </li>
+         <li>
+             <input type="checkbox" id="16" />
+             <label for="16">Detail mau tampil datanya</label>
+           </li>
+         <li>
+           <input type="checkbox" id="17" />
+           <label for="17">Hapus media sosial bekerja</label>
+         </li>
+         <li>
+             <input type="checkbox" id="18" />
+             <label for="18">Edit / Update media sosial bekerja</label>
+           </li>
+           <li>
+            <input type="checkbox" id="18_1" />
+            <label for="18_1">Pagination bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="18_2" />
+            <label for="18_2">Sinkronisasi ke UI</label>
+          </li>
+       </ul>
+
+    <!-- SubMenu Desa Anti Korupsi -->
+      <h4>Desa Anti Korupsi</h4>
+      <!-- List Desa Anti Korupsi -->
+      <h4>List Desa Anti Korupsi</h4>
+      <ul>
+        <li>
+            <input type="checkbox" id="19" /> <label for="19">Search sudah berfungsi</label>
+          </li>
+        <li>
+          <input type="checkbox" id="20" /> <label for="20">Data tampil di halaman list</label>
+        </li>
+        <li>
+          <input type="checkbox" id="21" />
+          <label for="21">Create list desa anti korupsi</label>
+        </li>
+        <li>
+            <input type="checkbox" id="22" />
+            <label for="22">Detail mau tampil datanya</label>
+          </li>
+        <li>
+          <input type="checkbox" id="23" />
+          <label for="23">Hapus list desa anti korupsi bekerja</label>
+        </li>
+        <li>
+            <input type="checkbox" id="24" />
+            <label for="24">Edit / Update list desa anti korupsi bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="25" />
+            <label for="25">Pagination bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="25_1" />
+            <label for="25_1">Sinkronisasi ke UI</label>
+          </li>
+      </ul>
+      <!-- kategori desa Anti Korupsi -->
+      <h4>Kategori Desa Anti Korupsi</h4>
+      <ul>
+        <li>
+            <input type="checkbox" id="26" /> <label for="26">Search sudah berfungsi</label>
+          </li>
+        <li>
+          <input type="checkbox" id="27" /> <label for="27">Data tampil di halaman list</label>
+        </li>
+        <li>
+          <input type="checkbox" id="28" />
+          <label for="28">Create kategori desa anti korupsi</label>
+        </li>
+        <li>
+            <input type="checkbox" id="29" />
+            <label for="29">Detail mau tampil datanya</label>
+          </li>
+        <li>
+          <input type="checkbox" id="30" />
+          <label for="30">Hapus kategori desa anti korupsi bekerja</label>
+        </li>
+        <li>
+            <input type="checkbox" id="31" />
+            <label for="31">Edit / Update kategori desa anti korupsi bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="32" />
+            <label for="32">Pagination bekerja</label>
+          </li>
+          <li>
+            <input type="checkbox" id="32_1" />
+            <label for="32_1">Sinkronisasi ke UI</label>
+          </li>
+      </ul>
+
+      <!-- SubMenu Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID) -->
+     <h4>Indeks Kepuasan Masayarakat (IKM) (Landing Page - PPID)</h4>
+     <!-- List Responden -->
+     <h4>List Responden</h4>
+     <ul>
+       <li>
+           <input type="checkbox" id="33" /> 
+           <label for="33">Search sudah berfungsi</label>
+         </li>
+       <li>
+         <input type="checkbox" id="34" /> 
+         <label for="34">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="35" />
+         <label for="35">Create list responden</label>
+       </li>
+       <li>
+           <input type="checkbox" id="36" />
+           <label for="36">Detail mau tampil datanya</label>
+         </li>
+       <li>
+         <input type="checkbox" id="37" />
+         <label for="37">Hapus list responden bekerja</label>
+       </li>
+       <li>
+           <input type="checkbox" id="38" />
+           <label for="38">Edit / Update list responden bekerja</label>
+         </li>
+        <li>
+           <input type="checkbox" id="39" />
+           <label for="39">Pagination bekerja</label>
+         </li>
+         <li>
+          <input type="checkbox" id="40" />
+          <label for="40">Sinkronisasi ke UI</label>
+        </li>
+
+    </ul>
+
+    <!-- SubMenu SDGs Desa -->
+    <h4>SDGs Desa</h4>
+    <!-- List SDGs Desa -->
+    <h4>List SDGs Desa</h4>
+    <ul>
+      <li>
+        <input type="checkbox" id="41" />
+        <label for="41">Search sudah berfungsi</label>
+      </li>
+      <li>
+        <input type="checkbox" id="42" />
+        <label for="42">Data tampil di halaman list</label>
+      </li>
+      <li>
+        <input type="checkbox" id="43" />
+        <label for="43">Create list SDGs Desa</label>
+      </li>
+      <li>
+        <input type="checkbox" id="44" />
+        <label for="44">Detail mau tampil datanya</label>
+      </li>
+      <li>
+        <input type="checkbox" id="45" />
+        <label for="45">Hapus list SDGs Desa bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="46" />
+        <label for="46">Edit / Update list SDGs Desa bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="47" />
+        <label for="47">Pagination bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="48" />
+        <label for="48">Sinkronisasi ke UI</label>
+      </li>
+    </ul>
+
+     <!-- SubMenu APBDes -->
+     <h4>APBDes</h4>
+     <!-- List APBDes -->
+     <h4>List APBDes</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="49" />
+         <label for="49">Search sudah berfungsi</label>
+       </li>
+       <li>
+         <input type="checkbox" id="50" />
+         <label for="50">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="51" />
+         <label for="51">Create list APBDes</label>
+       </li>
+       <li>
+         <input type="checkbox" id="52" />
+         <label for="52">Detail mau tampil datanya</label>
+       </li>
+       <li>
+         <input type="checkbox" id="53" />
+         <label for="53">Hapus list APBDes bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="54" />
+         <label for="54">Edit / Update list APBDes bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="55" />
+         <label for="55">Pagination bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="56" />
+         <label for="56">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
+
+      <!-- SubMenu Prestasi Desa -->
+      <h4>Prestasi Desa</h4>
+      <!-- List Prestasi Desa -->
+      <h4>List Prestasi Desa</h4>
+      <ul>
+        <li>
+          <input type="checkbox" id="57" />
+          <label for="57">Search sudah berfungsi</label>
+        </li>
+        <li>
+          <input type="checkbox" id="58" />
+          <label for="58">Data tampil di halaman list</label>
+        </li>
+        <li>
+          <input type="checkbox" id="59" />
+          <label for="59">Create list Prestasi Desa</label>
+        </li>
+        <li>
+          <input type="checkbox" id="60" />
+          <label for="60">Detail mau tampil datanya</label>
+        </li>
+        <li>
+          <input type="checkbox" id="61" />
+          <label for="61">Hapus list Prestasi Desa bekerja</label>
+        </li>
+        <li>
+          <input type="checkbox" id="62" />
+          <label for="62">Edit / Update list Prestasi Desa bekerja</label>
+        </li>
+        <li>
+          <input type="checkbox" id="63" />
+          <label for="63">Pagination bekerja</label>
+        </li>
+        <li>
+          <input type="checkbox" id="64" />
+          <label for="64">Sinkronisasi ke UI</label>
+        </li>
+      </ul>
+
+       <!-- Menu PPID -->
+     <h3>Menu PPID</h3>
+
+     <!-- SubMenu Profile PPID -->
+     <h4>Profile PPID</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="65" />
+         <label for="65">Data tampil di halaman</label>
+       </li>
+       <li>
+         <input type="checkbox" id="66" />
+         <label for="66">Edit / Update Profile PPID</label>
+       </li>
+       <li>
+         <input type="checkbox" id="67" />
+         <label for="67">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
+
+     <!-- SubMenu Struktur PPID -->
+     <h4>Struktur PPID</h4>
+     <h4>Pegawai</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="68" />
+         <label for="68">Search sudah berfungsi</label>
+       </li>
+       <li>
+         <input type="checkbox" id="69" />
+         <label for="69">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="70" />
+         <label for="70">Create list Pegawai</label>
+       </li>
+       <li>
+         <input type="checkbox" id="71" />
+         <label for="71">Detail mau tampil datanya</label>
+       </li>
+       <li>
+         <input type="checkbox" id="72" />
+         <label for="72">Hapus list Pegawai bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="73" />
+         <label for="73">Edit / Update list Pegawai bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="74" />
+         <label for="74">Pagination bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="75" />
+         <label for="75">Sinkronisasi ke UI</label>
+        </li>
+      </ul>
+
+      <h4>Posisi Organisasi PPID</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="76" />
+         <label for="76">Search sudah berfungsi</label>
+       </li>
+       <li>
+         <input type="checkbox" id="77" />
+         <label for="77">Data tampil di halaman list</label>
+       </li>
+       <li>
+         <input type="checkbox" id="78" />
+         <label for="78">Create list Posisi Organisasi PPID</label>
+       </li>
+       <li>
+         <input type="checkbox" id="79" />
+         <label for="79">Detail mau tampil datanya</label>
+       </li>
+       <li>
+         <input type="checkbox" id="80" />
+         <label for="80">Hapus list Posisi Organisasi PPID bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="81" />
+         <label for="81">Edit / Update list Posisi Organisasi PPID bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="82" />
+         <label for="82">Pagination bekerja</label>
+       </li>
+       <li>
+         <input type="checkbox" id="83" />
+         <label for="83">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
+
+      <!-- SubMenu Visi Misi PPID -->
+      <h4>Visi Misi PPID</h4>
+      <ul>
+        <li>
+          <input type="checkbox" id="84" />
+          <label for="84">Data tampil di halaman</label>
+        </li>
+        <li>
+          <input type="checkbox" id="85" />
+          <label for="85">Edit / Update Visi Misi PPID</label>
+        </li>
+        <li>
+          <input type="checkbox" id="86" />
+          <label for="86">Sinkronisasi ke UI</label>
+        </li>
+      </ul>
+
+      <!-- SubMenu Dasar Hukum PPID -->
+     <h4>Dasar Hukum PPID</h4>
+     <ul>
+       <li>
+         <input type="checkbox" id="87" />
+         <label for="87">Data tampil di halaman</label>
+       </li>
+       <li>
+         <input type="checkbox" id="88" />
+         <label for="88">Edit / Update Dasar Hukum PPID</label>
+       </li>
+       <li>
+         <input type="checkbox" id="89" />
+         <label for="89">Sinkronisasi ke UI</label>
+       </li>
+     </ul>
+
+      <!-- SubMenu Permohonan Informasi Publik -->
+      <h4>Permohonan Informasi Publik</h4>
+      <ul>
+         <li>
+           <input type="checkbox" id="90" />
+           <label for="90">Data tampil di halaman</label>
+         </li>
+         <li>
+           <input type="checkbox" id="91" />
+           <label for="91">Create Permohonan Informasi Publik</label>
+         </li>
+         <li>
+           <input type="checkbox" id="92" />
+           <label for="92">Sinkronisasi ke UI</label>
+         </li>
+       </ul>
+
+       <!-- SubMenu Permohonan Keberatan Informasi Publik -->
+     <h4>Permohonan Keberatan Informasi Publik</h4>
+     <ul>
+        <li>
+          <input type="checkbox" id="93" />
+          <label for="93">Data tampil di halaman</label>
+        </li>
+        <li>
+          <input type="checkbox" id="94" />
+          <label for="94">Create Permohonan Keberatan Informasi Publik</label>
+        </li>
+        <li>
+          <input type="checkbox" id="95" />
+          <label for="95">Sinkronisasi ke UI</label>
+        </li>
+      </ul>
+
+       <!-- SubMenu Daftar Informasi Publik -->
+     <h4>Daftar Informasi Publik</h4>
+     <ul>
+      <li>
+        <input type="checkbox" id="96" />
+        <label for="96">Search sudah berfungsi</label>
+      </li>
+      <li>
+        <input type="checkbox" id="97" />
+        <label for="97">Data tampil di halaman list</label>
+      </li>
+      <li>
+        <input type="checkbox" id="98" />
+        <label for="98">Create list daftar informasi publik</label>
+      </li>
+      <li>
+        <input type="checkbox" id="99" />
+        <label for="99">Detail mau tampil datanya</label>
+      </li>
+      <li>
+        <input type="checkbox" id="100" />
+        <label for="100">Hapus list daftar informasi publik bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="101" />
+        <label for="101">Edit / Update list daftar informasi publik bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="102" />
+        <label for="102">Pagination bekerja</label>
+      </li>
+      <li>
+        <input type="checkbox" id="103" />
+        <label for="103">Sinkronisasi ke UI</label>
+      </li>
+    </ul>
+ 
+
+     
+
+ 
+
+
+
+    </div>
+
+    <button id="reset-btn">Reset Semua Checklist</button>
+
+    <div id="progress-bar">
+      <div id="progress"></div>
+      <span id="progress-percentage"></span>
+    </div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", () => {
+        const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+        const progressBar = document.getElementById("progress");
+        const progressPercentage = document.getElementById("progress-percentage");
+        const resetBtn = document.getElementById("reset-btn");
+
+        // Load saved state from localStorage
+        checkboxes.forEach((checkbox) => {
+          const savedState = localStorage.getItem(checkbox.id);
+          if (savedState === "checked") {
+            checkbox.checked = true;
+            checkbox.parentElement.classList.add("checked");
+          }
+        });
+
+        // Update progress
+        function updateProgress() {
+          const totalCheckboxes = checkboxes.length;
+          const checkedCheckboxes = document.querySelectorAll(
+            'input[type="checkbox"]:checked'
+          ).length;
+          const progressPercentage = Math.round((checkedCheckboxes / totalCheckboxes) * 100);
+          progressBar.style.width = progressPercentage + "%";
+          document.getElementById('progress-percentage').textContent = progressPercentage + '%';
+        }
+
+        // Initial progress update
+        updateProgress();
+
+        // Add event listeners to checkboxes
+        checkboxes.forEach((checkbox) => {
+          checkbox.addEventListener("change", () => {
+            // Toggle 'checked' class on parent li
+            checkbox.parentElement.classList.toggle(
+              "checked",
+              checkbox.checked
+            );
+
+            // Save state to localStorage
+            localStorage.setItem(
+              checkbox.id,
+              checkbox.checked ? "checked" : "unchecked"
+            );
+
+            // Update progress bar
+            updateProgress();
+          });
+        });
+
+        // Reset button functionality
+        resetBtn.addEventListener("click", () => {
+          checkboxes.forEach((checkbox) => {
+            checkbox.checked = false;
+            checkbox.parentElement.classList.remove("checked");
+            localStorage.removeItem(checkbox.id);
+          });
+          updateProgress();
+        });
+      });
+    </script>
+  </body>
+</html>
+`