Add Detail Semua Polsek, Submenu Polsek Terdekat, Menu Keamanan

-Dibagian Tanggal Gak Auto Ngambil Tanggal Yang Udah Dipakai
-Dibagian fasilitas kesehatan : data dokter dan tarif rencananya mau pakai select

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])
@@ -951,13 +951,16 @@ model Kematian {
 
 // ========================================= GRAFIK KEPUASAN ========================================= //
 model GrafikKepuasan {
-  id        String   @id @default(cuid())
-  label     String
-  jumlah    String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id           String   @id @default(cuid())
+  nama         String
+  tanggal      DateTime
+  jenisKelamin String
+  alamat       String
+  penyakit     String
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+  deletedAt    DateTime @default(now())
+  isActive     Boolean  @default(true)
 }
 
 // ========================================= ARTIKEL KESEHATAN ========================================= //

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/kesehatan/data_kesehatan_warga/fasilitasKesehatan.ts

@@ -5,6 +5,7 @@ import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
+//fasilitas kesehatan aja
 // Validasi form
 const templateForm = z.object({
   name: z.string().min(1, "Nama harus diisi"),
@@ -61,7 +62,7 @@ const defaultForm = {
   },
 };
 
-const fasilitasKesehatanState = proxy({
+const fasilitasKesehatan = proxy({
   create: {
     form: { ...defaultForm },
     loading: false,
@@ -86,7 +87,7 @@ const fasilitasKesehatanState = proxy({
         if (res.status === 200) {
           toast.success("Berhasil menambahkan fasilitas kesehatan");
           this.resetForm();
-          await fasilitasKesehatanState.findMany.load();
+          await fasilitasKesehatan.findMany.load();
           return res.data;
         }
       } catch (err: any) {
@@ -102,7 +103,6 @@ const fasilitasKesehatanState = proxy({
       this.form = { ...defaultForm };
     },
   },
-
   findMany: {
     data: null as
       | Prisma.FasilitasKesehatanGetPayload<{
@@ -156,7 +156,7 @@ const fasilitasKesehatanState = proxy({
       const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/${id}`);
       if (res.ok) {
         const data = await res.json();
-        fasilitasKesehatanState.findUnique.data = data.data ?? null;
+        fasilitasKesehatan.findUnique.data = data.data ?? null;
       } else {
         toast.error("Gagal load data fasilitas kesehatan");
       }
@@ -176,8 +176,8 @@ const fasilitasKesehatanState = proxy({
       const result = await res.json();
       const data = result.data;
 
-      fasilitasKesehatanState.edit.id = data.id;
-      fasilitasKesehatanState.edit.form = {
+      fasilitasKesehatan.edit.id = data.id;
+      fasilitasKesehatan.edit.form = {
         name: data.name,
         informasiUmum: {
           fasilitas: data.informasiumum.fasilitas,
@@ -205,7 +205,7 @@ const fasilitasKesehatanState = proxy({
       };
     },
     async submit() {
-      const cek = templateForm.safeParse(fasilitasKesehatanState.edit.form);
+      const cek = templateForm.safeParse(fasilitasKesehatan.edit.form);
       if (!cek.success) {
         const errMsg = cek.error.issues
           .map((v) => `${v.path.join(".")}: ${v.message}`)
@@ -215,42 +215,38 @@ const fasilitasKesehatanState = proxy({
       }
 
       try {
-        fasilitasKesehatanState.edit.loading = true;
+        fasilitasKesehatan.edit.loading = true;
         const payload = {
-          name: fasilitasKesehatanState.edit.form.name,
+          name: fasilitasKesehatan.edit.form.name,
           informasiUmum: {
-            fasilitas:
-              fasilitasKesehatanState.edit.form.informasiUmum.fasilitas,
-            alamat: fasilitasKesehatanState.edit.form.informasiUmum.alamat,
+            fasilitas: fasilitasKesehatan.edit.form.informasiUmum.fasilitas,
+            alamat: fasilitasKesehatan.edit.form.informasiUmum.alamat,
             jamOperasional:
-              fasilitasKesehatanState.edit.form.informasiUmum.jamOperasional,
+              fasilitasKesehatan.edit.form.informasiUmum.jamOperasional,
           },
           layananUnggulan: {
-            content: fasilitasKesehatanState.edit.form.layananUnggulan.content,
+            content: fasilitasKesehatan.edit.form.layananUnggulan.content,
           },
           dokterdanTenagaMedis: {
-            name: fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.name,
+            name: fasilitasKesehatan.edit.form.dokterdanTenagaMedis.name,
             specialist:
-              fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.specialist,
-            jadwal:
-              fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.jadwal,
+              fasilitasKesehatan.edit.form.dokterdanTenagaMedis.specialist,
+            jadwal: fasilitasKesehatan.edit.form.dokterdanTenagaMedis.jadwal,
           },
           fasilitasPendukung: {
-            content:
-              fasilitasKesehatanState.edit.form.fasilitasPendukung.content,
+            content: fasilitasKesehatan.edit.form.fasilitasPendukung.content,
           },
           prosedurPendaftaran: {
-            content:
-              fasilitasKesehatanState.edit.form.prosedurPendaftaran.content,
+            content: fasilitasKesehatan.edit.form.prosedurPendaftaran.content,
           },
           tarifDanLayanan: {
-            layanan: fasilitasKesehatanState.edit.form.tarifDanLayanan.layanan,
-            tarif: fasilitasKesehatanState.edit.form.tarifDanLayanan.tarif,
+            layanan: fasilitasKesehatan.edit.form.tarifDanLayanan.layanan,
+            tarif: fasilitasKesehatan.edit.form.tarifDanLayanan.tarif,
           },
         };
 
         const res = await fetch(
-          `/api/kesehatan/fasilitas-kesehatan/${fasilitasKesehatanState.edit.id}`,
+          `/api/kesehatan/fasilitas-kesehatan/${fasilitasKesehatan.edit.id}`,
           {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
@@ -264,7 +260,7 @@ const fasilitasKesehatanState = proxy({
         }
 
         toast.success("Berhasil update fasilitas kesehatan");
-        await fasilitasKesehatanState.findMany.load();
+        await fasilitasKesehatan.findMany.load();
         return true;
       } catch (err) {
         toast.error(
@@ -272,37 +268,297 @@ const fasilitasKesehatanState = proxy({
         );
         return false;
       } finally {
-        fasilitasKesehatanState.edit.loading = false;
+        fasilitasKesehatan.edit.loading = false;
       }
     },
     resetForm() {
-      fasilitasKesehatanState.edit.id = "";
-      fasilitasKesehatanState.edit.form = { ...defaultForm };
+      fasilitasKesehatan.edit.id = "";
+      fasilitasKesehatan.edit.form = { ...defaultForm };
     },
   },
   delete: {
     loading: false,
-    async byId(id: string){
+    async byId(id: string) {
       try {
-        fasilitasKesehatanState.delete.loading = true;
-        const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/del/${id}`, {
-          method: "DELETE",
-        });
+        fasilitasKesehatan.delete.loading = true;
+        const res = await fetch(
+          `/api/kesehatan/fasilitas-kesehatan/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
 
         const result = await res.json();
         if (res.ok && result.success) {
           toast.success("Fasilitas kesehatan berhasil dihapus");
-          await fasilitasKesehatanState.findMany.load();
+          await fasilitasKesehatan.findMany.load();
         } else {
           toast.error(result.message || "Gagal menghapus");
         }
       } catch {
         toast.error("Terjadi kesalahan saat menghapus");
       } finally {
-        fasilitasKesehatanState.delete.loading = false;
+        fasilitasKesehatan.delete.loading = false;
       }
-    }
+    },
   },
 });
 
+//dokter & tenaga medis
+const templateDokterForm = z.object({
+  name: z.string().min(1, "Nama tidak boleh kosong"),
+  specialist: z.string().min(1, "Spesialis tidak boleh kosong"),
+  jadwal: z.string().min(1, "Jadwal tidak boleh kosong"),
+});
+
+const defaultDokterForm = {
+  name: "",
+  specialist: "",
+  jadwal: "",
+};
+
+const dokter = proxy({
+  create: {
+    create: {
+      form: defaultDokterForm,
+      loading: false,
+      async create() {
+        const cek = templateDokterForm.safeParse(dokter.create.create.form);
+        if (!cek.success) {
+          const err = `[${cek.error.issues
+            .map((v) => `${v.path.join(".")}`)
+            .join("\n")}] required`;
+          toast.error(err);
+          return null;
+        }
+        try {
+          dokter.create.create.loading = true;
+          const res = await ApiFetch.api.kesehatan.doktertenagamedis[
+            "create"
+          ].post(dokter.create.create.form);
+
+          if (res.status === 200) {
+            const id = res.data?.data;
+            if (id) {
+              toast.success("Success create");
+              dokter.create.create.form = { ...defaultDokterForm };
+              dokter.findMany.load();
+              return id;
+            }
+          }
+          toast.error("failed create");
+          return null;
+        } catch (error) {
+          console.log((error as Error).message);
+          return null;
+        } finally {
+          dokter.create.create.loading = false;
+        }
+      },
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DokterdanTenagaMedisGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      dokter.findMany.loading = true; // ✅ Akses langsung via nama path
+      dokter.findMany.page = page;
+      dokter.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.doktertenagamedis[
+          "findMany"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          dokter.findMany.data = res.data.data ?? [];
+          dokter.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          dokter.findMany.data = [];
+          dokter.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch dokter tenaga medis paginated:", err);
+        dokter.findMany.data = [];
+        dokter.findMany.totalPages = 1;
+      } finally {
+        dokter.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DokterdanTenagaMedisGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/doktertenagamedis/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          dokter.findUnique.data = data.data ?? null;
+        } else {
+          console.error(
+            "Failed to fetch dokter dan tenaga medis",
+            res.statusText
+          );
+          dokter.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching dokter dan tenaga medis", error);
+        dokter.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultDokterForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/doktertenagamedis/${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,
+            specialist: data.specialist,
+            jadwal: data.jadwal,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading dokter dan tenaga medis:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const formData = {
+        name: this.form.name,
+        specialist: this.form.specialist,
+        jadwal: this.form.jadwal,
+      };
+
+      const cek = templateDokterForm.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(`/api/kesehatan/doktertenagamedis/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await dokter.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data dokter dan tenaga medis");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) {
+        return toast.warn("ID tidak valid");
+      }
+      try {
+        dokter.delete.loading = true;
+
+        const response = await fetch(
+          `/api/kesehatan/doktertenagamedis/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Dokter dan tenaga medis berhasil dihapus"
+          );
+          await dokter.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus dokter dan tenaga medis"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus dokter dan tenaga medis");
+      } finally {
+        dokter.delete.loading = false;
+      }
+    },
+  },
+});
+
+const fasilitasKesehatanState = proxy({
+  fasilitasKesehatan,
+  dokter
+});
+
 export default fasilitasKesehatanState;

src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan.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,20 +6,19 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateGrafikKepuasan = z.object({
-  label: z.string().min(2, "Label harus diisi"),
-  jumlah: z.string().min(1, "Jumlah harus diisi"),
+  nama: z.string().min(2, "Nama harus diisi"),
+  tanggal: z.string().min(1, "Tanggal harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+  penyakit: z.string().min(1, "Penyakit harus diisi"),
 });
 
-type GrafikKepuasan = Prisma.GrafikKepuasanGetPayload<{
-  select: {
-    label: true;
-    jumlah: true;
-  };
-}>;
-
-const defaultForm: GrafikKepuasan = {
-  label: "",
-  jumlah: ""
+const defaultForm = {
+  nama: "",
+  tanggal: "",
+  jenisKelamin: "",
+  alamat: "",
+  penyakit: "",
 };
 
 const grafikkepuasan = proxy({
@@ -36,16 +36,15 @@ const grafikkepuasan = proxy({
       }
       try {
         grafikkepuasan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(grafikkepuasan.create.form);
-    
+        const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(
+          grafikkepuasan.create.form
+        );
+
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          const id = res.data?.data;
           if (id) {
             toast.success("Success create");
-            grafikkepuasan.create.form = {
-              label: "",
-              jumlah: "",
-            };
+            grafikkepuasan.create.form = { ...defaultForm };
             grafikkepuasan.findMany.load();
             return id;
           }
@@ -62,21 +61,49 @@ const grafikkepuasan = proxy({
   },
   findMany: {
     data: null as
-      | Prisma.GrafikKepuasanGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.GrafikKepuasanGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.grafikkepuasan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikkepuasan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      grafikkepuasan.findMany.loading = true; // ✅ Akses langsung via nama path
+      grafikkepuasan.findMany.page = page;
+      grafikkepuasan.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.grafikkepuasan[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          grafikkepuasan.findMany.data = res.data.data ?? [];
+          grafikkepuasan.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          grafikkepuasan.findMany.data = [];
+          grafikkepuasan.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        grafikkepuasan.findMany.data = [];
+        grafikkepuasan.findMany.totalPages = 1;
+      } finally {
+        grafikkepuasan.findMany.loading = false;
       }
     },
   },
   findUnique: {
     data: null as Prisma.GrafikKepuasanGetPayload<{
-       omit: { isActive: true } 
-      }> | null,
+      omit: { isActive: true };
+    }> | null,
     async load(id: string) {
       try {
         const res = await fetch(`/api/kesehatan/grafikkepuasan/${id}`);
@@ -95,88 +122,137 @@ const grafikkepuasan = proxy({
   },
   update: {
     id: "",
-    form: {...defaultForm},
+    form: { ...defaultForm },
     loading: false,
-    async byId() {
-    },
-  async submit() {
-    const id = this.id;
-    if (!id) {
-      toast.warn("ID tidak valid");
-      return null;
-    }
-    const cek = templateGrafikKepuasan.safeParse(grafikkepuasan.update.form);
-    if (!cek.success) {
-      const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
-      return toast.error(err);
-    }
-    try {
-      this.loading = true;
-      const response = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(this.form),
-      });
-      const result = await response.json();
-
-      if (!response.ok || !result?.success) {
-        throw new Error(result?.message || "Gagal update data");
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
       }
 
-      toast.success("Berhasil update data!");
+      try {
+        const response = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
-      // ✅ Optional: refresh list kalau kamu langsung ke halaman list
-      await grafikkepuasan.findMany.load();
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
 
-      return result.data;
-    } catch (error) {
-      console.error("Error update data:", error);
-      toast.error("Gagal update data grafik kepuasan");
-    } finally {
-      this.loading = false;
-    }
-  },
-},
-delete: {
-  loading: false,
-  async byId(id: string) {
-    if (!id) {
-      return toast.warn("ID tidak valid");
-    }
-    try {
-      grafikkepuasan.delete.loading = true;
+        const result = await response.json();
 
-      const response = await fetch(`/api/kesehatan/grafikkepuasan/del/${id}`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const result = await response.json();
-
-      if (response.ok && result?.success) {
-        toast.success(
-          result.message || "Grafik kepuasan berhasil dihapus"
-        );
-        await grafikkepuasan.findMany.load(); // refresh list
-      } else {
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            tanggal: data.tanggal,
+            jenisKelamin: data.jenisKelamin,
+            alamat: data.alamat,
+            penyakit: data.penyakit,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading grafik kepuasan:", error);
         toast.error(
-          result?.message || "Gagal menghapus grafik kepuasan"
+          error instanceof Error ? error.message : "Gagal memuat data"
         );
+        return null;
       }
-    } catch (error) {
-      console.error("Gagal delete:", error);
-      toast.error("Terjadi kesalahan saat menghapus grafik kepuasan");
-    } finally {
-      grafikkepuasan.delete.loading = false;
-    }
-  }
-}
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const formData = {
+        nama: this.form.nama,
+        tanggal: this.form.tanggal,
+        jenisKelamin: this.form.jenisKelamin,
+        alamat: this.form.alamat,
+        penyakit: this.form.penyakit,
+      };
+
+      const cek = templateGrafikKepuasan.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await grafikkepuasan.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data grafik kepuasan");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) {
+        return toast.warn("ID tidak valid");
+      }
+      try {
+        grafikkepuasan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/kesehatan/grafikkepuasan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik kepuasan berhasil dihapus");
+          await grafikkepuasan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik kepuasan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik kepuasan");
+      } finally {
+        grafikkepuasan.delete.loading = false;
+      }
+    },
+  },
 });
 
 export default grafikkepuasan;

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)/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)/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/[id]/edit/page.tsx

@@ -39,7 +39,7 @@ interface FasilitasKesehatanFormBase {
 }
 
 function EditFasilitasKesehatan() {
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState);
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan);
   const router = useRouter();
   const params = useParams();
 

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

@@ -2,7 +2,7 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Flex, Grid, GridCol, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,7 +12,7 @@ import { useProxy } from 'valtio/utils';
 function DetailFasilitasKesehatan() {
   const params = useParams()
   const router = useRouter();
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null)
 
@@ -45,9 +45,23 @@ function DetailFasilitasKesehatan() {
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Fasilitas Kesehatan</Text>
+          <Grid>
+            <GridCol span={12}>
+            <Text fz={"xl"} fw={"bold"}>Detail Fasilitas Kesehatan</Text>
+            </GridCol>
+            <GridCol span={12}>
+              <Flex gap={"xs"}>
+                <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${params?.id}/dokter-tenaga-medis`)}>
+                  Tambah Dokter
+                </Button>
+                <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${params?.id}/layanan-unggulan/create`)}>
+                  Tambah Layanan
+                </Button>
+              </Flex>
+            </GridCol>
+          </Grid>
           {stateFasilitasKesehatan.findUnique.data ? (
             <Paper bg={colors['BG-trans']} p={'md'}>
               <Stack gap={"xs"}>
@@ -68,6 +82,14 @@ function DetailFasilitasKesehatan() {
                   <Text fz={"md"} fw={"bold"}>Layanan Unggulan</Text>
                   <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.layananunggulan.content }} />
                 </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Fasilitas Pendukung</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.fasilitaspendukung.content }} />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Prosedur Pendaftaran</Text>
+                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.prosedurpendaftaran.content }} />
+                </Box>
                 <Box>
                   <Text fz={"md"} fw={"bold"}>Dokter dan Tenaga Medis</Text>
                   <Text fz={"md"} fw={"bold"}>Nama Dokter</Text>
@@ -77,14 +99,6 @@ function DetailFasilitasKesehatan() {
                   <Text fz={"md"} fw={"bold"}>Jadwal</Text>
                   <Text fz={"md"}>{stateFasilitasKesehatan.findUnique.data.dokterdantenagamedis.jadwal}</Text>
                 </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Fasilitas Pendukung</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.fasilitaspendukung.content }} />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Prosedur Pendaftaran</Text>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: stateFasilitasKesehatan.findUnique.data.prosedurpendaftaran.content }} />
-                </Box>
                 <Box>
                   <Text fz={"lg"} fw={"bold"}>Tarif dan Layanan</Text>
                   <Text fz={"md"} fw={"bold"}>Layanan</Text>
@@ -111,6 +125,7 @@ function DetailFasilitasKesehatan() {
             </Paper>
           ) : null}
         </Stack>
+
       </Paper>
 
       {/* Modal Hapus */}

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

@@ -10,7 +10,7 @@ import { useProxy } from 'valtio/utils';
 
 
 function CreateFasilitasKesehatan() {
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
   const router = useRouter();
 
 

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/[id]/edit/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/[id]/page.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis/create/page.tsx

@@ -0,0 +1,75 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import fasilitasKesehatanState from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+function CreateDokter() {
+  const params = useParams()
+  const createState = useProxy(fasilitasKesehatanState.dokter)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.create.form = {
+      name: "",
+      specialist: "",
+      jadwal: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create.create();
+    resetForm();
+    router.push(`/admin/kesehatan/fasilitas-kesehatan/${params?.id}/dokter-tenaga-medis`)
+  };
+  return (
+    <Box component="form" onSubmit={handleSubmit}>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Dokter</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Dokter</Text>}
+            placeholder="masukkan nama dokter"
+            value={createState.create.create.form.name}
+            onChange={(e) => {
+              createState.create.create.form.name = e.target.value;
+            }}
+          />
+          <Text fz="md" fw="bold">Specialist</Text>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Specialist</Text>}
+            placeholder="masukkan specialist"
+            value={createState.create.create.form.specialist}
+            onChange={(e) => {
+              createState.create.create.form.specialist = e.target.value;
+            }}
+          />
+          <Box>
+            <Text fz="md" fw="bold">Jadwal</Text>
+            <CreateEditor
+              value={createState.create.create.form.jadwal}
+              onChange={(htmlContent) => {
+                createState.create.create.form.jadwal = htmlContent;
+              }}
+            />
+          </Box>
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateDokter;

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

@@ -0,0 +1,112 @@
+'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';
+
+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 DokterTenagaMedis() {
+  const [search, setSearch] = useState("");
+  const router = useRouter();
+  return (
+    <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)}
+      />
+      <ListDokterTenagaMedis search={search} />
+    </Box>
+  );
+}
+
+function ListDokterTenagaMedis({ 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 DokterTenagaMedis;

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

@@ -4,17 +4,39 @@ import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableT
 import { useShallowEffect } from '@mantine/hooks';
 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();
   return (
     <Box>
+      {/* <Grid>
+        <GridCol span={12}>
+          <HeaderSearch
+            title='Fasilitas Kesehatan'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
+        </GridCol>
+        <GridCol span={12}>
+          <Flex gap={"xs"}>
+            <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/dokter-tenaga-medis`)}>
+              <IconList size={20} /> List Dokter
+            </Button>
+            <Button color={colors['blue-button']} onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/tarif-layanan`)}>
+              <IconList size={20} /> List Layanan
+            </Button>
+          </Flex>
+        </GridCol>
+      </Grid> */}
       <HeaderSearch
         title='Fasilitas Kesehatan'
         placeholder='pencarian'
@@ -22,13 +44,13 @@ function FasilitasKesehatan() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListFasilitasKesehatan search={search}/>
+      <ListFasilitasKesehatan search={search} />
     </Box>
   );
 }
 
 function ListFasilitasKesehatan({ search }: { search: string }) {
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
   const router = useRouter();
 
   useShallowEffect(() => {
@@ -47,47 +69,47 @@ function ListFasilitasKesehatan({ search }: { search: string }) {
   if (!stateFasilitasKesehatan.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 Fasilitas Kesehatan'
-          href='/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/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.informasiumum.alamat}</TableTd>
-                  <TableTd>{item.informasiumum.jamOperasional}</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Fasilitas Kesehatan'
+            href='/admin/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Fasilitas Kesehatan</TableTh>
+                  <TableTh>Dokter</TableTh>
+                  <TableTh>Layanan</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.dokterdantenagamedis.name}</TableTd>
+                    <TableTd>{item.tarifdanlayanan.layanan}</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>
+    </Box>
   )
 }
 

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

@@ -0,0 +1,112 @@
+'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';
+
+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 (
+    <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>
+  );
+}
+
+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/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/edit/page.tsx

@@ -0,0 +1,116 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditGrafikHasilKepuasan() {
+  const editState = useProxy(grafikkepuasan)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+    nama: editState.update.form.nama || '',
+    tanggal: editState.update.form.tanggal || '',
+    jenisKelamin: editState.update.form.jenisKelamin || '',
+    alamat: editState.update.form.alamat || '',
+    penyakit: editState.update.form.penyakit || '',
+  });
+
+  useEffect(() => {
+    const loadKelahiran = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            tanggal: data.tanggal || '',
+            jenisKelamin: data.jenisKelamin || '',
+            alamat: data.alamat || '',
+            penyakit: data.penyakit || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading grafik hasil kepuasan:", error);
+        toast.error("Gagal memuat data grafik hasil kepuasan");
+      }
+    };
+
+    loadKelahiran();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.update.form = {
+        ...editState.update.form,
+        nama: formData.nama,
+        tanggal: formData.tanggal,
+        jenisKelamin: formData.jenisKelamin,
+        alamat: formData.alamat,
+        penyakit: formData.penyakit,
+      };
+      await editState.update.submit();
+      toast.success('grafik hasil kepuasan berhasil diperbarui!');
+      router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan');
+    } catch (error) {
+      console.error('Error updating grafik hasil kepuasan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui grafik hasil kepuasan');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit grafik hasil kepuasan</Title>
+          <TextInput
+            value={formData.nama}
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
+            placeholder="masukkan nama"
+          />
+          <TextInput
+            type='date'
+            value={formData.tanggal}
+            onChange={(e) => setFormData({ ...formData, tanggal: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Tanggal</Text>}
+            placeholder="masukkan tanggal"
+          />
+          <TextInput
+            value={formData.jenisKelamin}
+            onChange={(e) => setFormData({ ...formData, jenisKelamin: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Jenis Kelamin</Text>}
+            placeholder="masukkan jenis kelamin"
+          />
+          <TextInput
+            value={formData.alamat}
+            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Alamat</Text>}
+            placeholder="masukkan alamat"
+          />
+          <TextInput
+            value={formData.penyakit}
+            onChange={(e) => setFormData({ ...formData, penyakit: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Penyakit</Text>}
+            placeholder="masukkan penyakit"
+          />
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditGrafikHasilKepuasan;

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/[id]/page.tsx

@@ -1,80 +1,125 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-
-import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 
-function EditGrafikHasilKepuasan() {
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import grafikkepuasan from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
+import colors from '@/con/colors';
+
+
+function DetailGrafikHasilKepuasan() {
+  const state = useProxy(grafikkepuasan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
   const router = useRouter()
-  const params = useParams() as { id: string }
-  const stateGrafikKepuasan = useProxy(grafikkepuasan)
 
-  const id = params.id
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [])
 
-  // Load data saat komponen mount
-  useEffect(() => {
-    if (id) {
-      stateGrafikKepuasan.findUnique.load(id).then(() => {
-        const data = stateGrafikKepuasan.findUnique.data
-        if (data) {
-          stateGrafikKepuasan.update.form = {
-            label: data.label || '',
-            jumlah: data.jumlah || '',
-          }
-        }
-      })
+
+  const handleHapus = () => {
+    if (selectedId) {
+      state.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan")
     }
-  }, [id])
-
-  const handleSubmit = async () => {
-    // Set the ID before submitting
-    stateGrafikKepuasan.update.id = id;
-    await stateGrafikKepuasan.update.submit();
-    router.push('/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan')
   }
-return (
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
     <Box>
       <Box mb={10}>
         <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
         <Stack>
-          <Title order={3}>Edit Grafik Hasil Kepuasan</Title>
-          <TextInput
-            label="Label"
-            placeholder="masukkan label"
-            value={stateGrafikKepuasan.update.form.label}
-            onChange={(val) => {
-              stateGrafikKepuasan.update.form.label = val.currentTarget.value;
-            }}
-          />
-          <TextInput
-            label="Jumlah"
-            type="number"
-            placeholder="masukkan jumlah"
-            value={stateGrafikKepuasan.update.form.jumlah}
-            onChange={(val) => {
-              stateGrafikKepuasan.update.form.jumlah = val.currentTarget.value;
-            }}
-          />
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Simpan
-          </Button>
+          <Text fz={"xl"} fw={"bold"}>Detail Data Grafik Hasil Kepuasan</Text>
+          {state.findUnique.data ? (
+            <Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
+                  <Text fz={"lg"}>
+                    {new Date(state.findUnique.data?.tanggal).toLocaleDateString('id-ID', {
+                      day: '2-digit',
+                      month: 'long',
+                      year: 'numeric'
+                    })}
+                  </Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jenis Kelamin</Text>
+                  <Text fz={"lg"} >{state.findUnique.data?.jenisKelamin}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Alamat</Text>
+                  <Text fz={"lg"} >{state.findUnique.data?.alamat}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Penyakit</Text>
+                  <Text fz={"lg"} >{state.findUnique.data?.penyakit}</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (state.findUnique.data) {
+                        setSelectedId(state.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={state.delete.loading || !state.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (state.findUnique.data) {
+                        router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${state.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!state.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
         </Stack>
       </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus data ini?'
+      />
     </Box>
-  )
+  );
 }
 
-export default EditGrafikHasilKepuasan;
+export default DetailGrafikHasilKepuasan;

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

@@ -16,20 +16,16 @@ function CreateGrafikHasilKepuasanMasyarakat() {
 
   const resetForm = () => {
     stateGrafikKepuasan.create.form = {
-      label: "",
-      jumlah: "",
+      nama: "",
+      tanggal: "",
+      jenisKelamin: "",
+      alamat: "",
+      penyakit: "",
     }
   }
 
   const handleSubmit = async () => {
-    const id = await stateGrafikKepuasan.create.create();
-    if (id) {
-      const idStr = String(id);
-      await stateGrafikKepuasan.findUnique.load(idStr);
-      if (stateGrafikKepuasan.findUnique.data) {
-        setChartData([stateGrafikKepuasan.findUnique.data]);
-      }
-    }
+    await stateGrafikKepuasan.create.create();
     resetForm();
     router.push("/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan");
   }
@@ -45,21 +41,48 @@ function CreateGrafikHasilKepuasanMasyarakat() {
           <Title order={4}>Tambah Grafik Hasil Kepuasan Masyarakat</Title>
           <Stack gap={"xs"}>
             <TextInput
-              label="Label"
+              label="Nama"
               type="text"
-              value={stateGrafikKepuasan.create.form.label}
-              placeholder="Masukkan label"
+              value={stateGrafikKepuasan.create.form.nama}
+              placeholder="Masukkan nama"
               onChange={(val) => {
-                stateGrafikKepuasan.create.form.label = val.currentTarget.value;
+                stateGrafikKepuasan.create.form.nama = val.currentTarget.value;
               }}
             />
             <TextInput
-              label="Jumlah"
-              type="number"
-              value={stateGrafikKepuasan.create.form.jumlah}
-              placeholder="Masukkan jumlah"
+              label="Tanggal"
+              type="date"
+              value={stateGrafikKepuasan.create.form.tanggal}
+              placeholder="Masukkan tanggal"
               onChange={(val) => {
-                stateGrafikKepuasan.create.form.jumlah = val.currentTarget.value;
+                stateGrafikKepuasan.create.form.tanggal = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Jenis Kelamin"
+              type="text"
+              value={stateGrafikKepuasan.create.form.jenisKelamin}
+              placeholder="Masukkan jenis kelamin"
+              onChange={(val) => {
+                stateGrafikKepuasan.create.form.jenisKelamin = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Alamat"
+              type="text"
+              value={stateGrafikKepuasan.create.form.alamat}
+              placeholder="Masukkan alamat"
+              onChange={(val) => {
+                stateGrafikKepuasan.create.form.alamat = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Penyakit"
+              type="text"
+              value={stateGrafikKepuasan.create.form.penyakit}
+              placeholder="Masukkan penyakit"
+              onChange={(val) => {
+                stateGrafikKepuasan.create.form.penyakit = val.currentTarget.value;
               }}
             />
             <Group>

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

@@ -1,16 +1,16 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../../_com/judulListTab';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import grafikkepuasan from '../../../_state/kesehatan/data_kesehatan_warga/grafikKepuasan';
 
 function GrafikHasilKepuasanMasyarakat() {
   const [search, setSearch] = useState("");
@@ -30,53 +30,79 @@ function GrafikHasilKepuasanMasyarakat() {
 function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
   type PDKMGrafik = {
     id: string;
-    label: string;
-    jumlah: number;
+    nama: string;
+    tanggal: string | Date; // Allow both string and Date types
+    jenisKelamin: string;
+    alamat: string;
+    penyakit: string;
+    createdAt?: Date;     // Add optional fields that might come from the API
+    updatedAt?: Date;
+    deletedAt?: Date | null;
   }
   const stateGrafikKepuasan = useProxy(grafikkepuasan);
   const [chartData, setChartData] = useState<PDKMGrafik[]>([]);
   const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
   const isTablet = useMediaQuery('(max-width: 1024px)')
   const isMobile = useMediaQuery('(max-width: 768px)')
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter();
 
-  const handleDelete = () => {
-    if (selectedId) {
-      stateGrafikKepuasan.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      stateGrafikKepuasan.findMany.load()
-    }
-  }
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load
+  } = stateGrafikKepuasan.findMany;
 
   useShallowEffect(() => {
     setMounted(true)
-    stateGrafikKepuasan.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
   useEffect(() => {
     setMounted(true);
-    if (stateGrafikKepuasan.findMany.data) {
-      setChartData(stateGrafikKepuasan.findMany.data.map((item) => ({
+    if (data) {
+      setChartData(data.map((item) => ({
         id: item.id,
-        label: item.label,
-        jumlah: Number(item.jumlah),
+        nama: item.nama,
+        tanggal: item.tanggal instanceof Date ? item.tanggal.toISOString() : item.tanggal,
+        jenisKelamin: item.jenisKelamin,
+        alamat: item.alamat,
+        penyakit: item.penyakit,
       })));
     }
-  }, [stateGrafikKepuasan.findMany.data]);
+  }, [data]);
 
-  const filteredData = (stateGrafikKepuasan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.label.toLowerCase().includes(keyword) ||
-      item.jumlah.toString().toLowerCase().includes(keyword)
-    );
-  });
+  // Add this function to process the data
+  const processDiseaseData = (data: PDKMGrafik[]) => {
+    const diseaseCount: Record<string, number> = {};
 
-  if (!stateGrafikKepuasan.findMany.data) {
+    data.forEach(item => {
+      const penyakit = item.penyakit.trim();
+      if (penyakit) {
+        diseaseCount[penyakit] = (diseaseCount[penyakit] || 0) + 1;
+      }
+    });
+
+    return Object.entries(diseaseCount).map(([name, count]) => ({
+      name,
+      count
+    }));
+  };
+
+  // Add this state to store the processed chart data
+  const [diseaseChartData, setDiseaseChartData] = useState<{ name: string, count: number }[]>([]);
+
+  // Update the chart data when data changes
+  useEffect(() => {
+    if (data && data.length > 0) {
+      setDiseaseChartData(processDiseaseData(data));
+    }
+  }, [data]);
+
+  const filteredData = data || [];
+
+  if (loading || !data) {
     return (
       <Stack>
         <Skeleton h={500} />
@@ -89,40 +115,36 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
       <Stack gap={"xs"}>
         {/* Form Input */}
         <Paper bg={colors['white-1']} p={'md'}>
-          <JudulListTab
+          <JudulList
             title='List Grafik Hasil Kepuasan Masyarakat'
             href='/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Label</TableTh>
-                <TableTh>Jumlah</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Tanggal</TableTh>
+                <TableTh>Jenis Kelamin</TableTh>
+                <TableTh>Penyakit</TableTh>
+                <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.map((item) => (
                 <TableTr key={item.id}>
-                  <TableTd>{item.label}</TableTd>
-                  <TableTd>{item.jumlah}</TableTd>
+                  <TableTd>{item.nama}</TableTd>
+                  <TableTd>
+                    {new Date(item.tanggal).toLocaleDateString('id-ID', {
+                      day: '2-digit',
+                      month: 'long',
+                      year: 'numeric'
+                    })}
+                  </TableTd>
+                  <TableTd>{item.jenisKelamin}</TableTd>
+                  <TableTd>{item.penyakit}</TableTd>
                   <TableTd>
                     <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/grafik_hasil_kepuasan/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button
-                      color='red'
-                      disabled={stateGrafikKepuasan.delete.loading}
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}>
-                      <IconTrash size={20} />
+                      <IconDeviceImacCog size={20} />
                     </Button>
                   </TableTd>
                 </TableTr>
@@ -130,6 +152,15 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)} // ini penting!
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
 
         {/* Chart */}
@@ -141,30 +172,29 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
             </Paper>
           </Box>
         ) : (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Box style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
             <Paper bg={colors['white-1']} p={'md'}>
               <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
-              {mounted && chartData.length > 0 && (
-                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
-                  <XAxis dataKey="label" />
+              {mounted && diseaseChartData.length > 0 && (
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={diseaseChartData} >
+                  <XAxis
+                    dataKey="name"
+                    tick={{ fontSize: 12 }}
+                    interval={0}
+                    angle={-45}
+                    textAnchor="end"
+                    height={70}
+                  />
                   <YAxis />
                   <Tooltip />
                   <Legend />
-                  <Bar dataKey="jumlah" fill={colors['blue-button']} name="Jumlah" />
+                  <Bar dataKey="count" fill={colors['blue-button']} name="Jumlah Kasus" />
                 </BarChart>
               )}
             </Paper>
           </Box>
         )}
       </Stack>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik hasil kepuasan masyarakat ini?'
-      />
     </Box>
   );
 }

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

@@ -5,7 +5,7 @@ import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_k
 import colors from '@/con/colors';
 import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconSearch } from '@tabler/icons-react';
+import { IconArrowBack, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -47,7 +47,7 @@ function ListKelahiran({ search }: { search: string }) {
 
   useShallowEffect(() => {
     load(page, 10, search)
-  }, [search])
+  }, [page, search])
 
   const filteredData = data || []
 
@@ -93,7 +93,7 @@ function ListKelahiran({ search }: { search: string }) {
                   <TableTd>{item.alamat}</TableTd>
                   <TableTd>
                     <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`)}>
-                      <IconEdit size={20} />
+                      <IconDeviceImacCog size={20} />
                     </Button>
                   </TableTd>
                 </TableTr>

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

@@ -2,7 +2,7 @@
 'use client'
 import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Center, Flex, Paper, Skeleton, Stack, Table, Text, Title } from '@mantine/core';
+import { ActionIcon, Box, Center, Flex, Paper, Select, Skeleton, Stack, Table, Text, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IconBabyCarriage, IconGrave2 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -157,20 +157,18 @@ function GrafikPersentaseKelahiranKematian() {
       ) : (
         <>
           {/* Year Selector */}
-          <Box mb="md">
-            <Text mb="xs" fw={500}>Pilih Tahun:</Text>
-            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-              {chartData.map(({ tahun }) => (
-                <Button
-                  key={tahun}
-                  variant={selectedYear === tahun ? 'filled' : 'outline'}
-                  onClick={() => setSelectedYear(tahun)}
-                  size="xs"
-                >
-                  {tahun}
-                </Button>
-              ))}
-            </div>
+          <Box mb="md" style={{ maxWidth: '200px' }}>
+            <Select
+              label="Pilih Tahun"
+              placeholder="Pilih Tahun"
+              data={chartData.map((item) => ({
+                value: item.tahun,
+                label: item.tahun
+              }))}
+              value={selectedYear}
+              onChange={(value) => setSelectedYear(value || '')}
+              size="xs"
+            />
           </Box>
 
           {/* Main Chart */}

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/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/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis/create.ts

@@ -0,0 +1,31 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  name: string;
+  specialist: string;
+  jadwal: string;
+};
+
+export default async function dokterTenagaMedisCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  const created = await prisma.dokterdanTenagaMedis.create({
+    data: {
+      name: body.name,
+      specialist: body.specialist,
+      jadwal: body.jadwal,
+    },
+    select: {
+      name: true,
+      specialist: true,
+      jadwal: true,
+    }
+  });
+
+  return {
+    success: true,
+    message: "Success create dokter tenaga medis",
+    data: created,
+  };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis/del.ts

@@ -0,0 +1,37 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function dokterTenagaMedisDelete(context: Context) {
+
+  const id = context.params?.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID tidak ditemukan",
+    };
+  }
+
+  const existing = await prisma.dokterdanTenagaMedis.findUnique({
+    where: {
+      id: id,
+    },
+  });
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Data tidak ditemukan",
+    };
+  }
+
+  const deleted = await prisma.dokterdanTenagaMedis.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Data berhasil dihapus",
+    data: deleted,
+  };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis/findMany.ts

@@ -0,0 +1,55 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function dokterTenagaMedisFindMany(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' } },
+      { specialist: { contains: search, mode: 'insensitive' } },
+      { jadwal: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.dokterdanTenagaMedis.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { name: 'asc' },
+      }),
+      prisma.dokterdanTenagaMedis.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data dokter tenaga medis 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 dokter tenaga medis",
+    };
+  }
+}
+
+export default dokterTenagaMedisFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis/findUnique.ts

@@ -0,0 +1,47 @@
+import prisma from "@/lib/prisma";
+
+export default async function dokterTenagaMedisFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json({
+            success: false,
+            message: 'ID tidak boleh kosong',
+        }, {status: 400})
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, { status: 400 });
+        }
+
+        const data = await prisma.dokterdanTenagaMedis.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Data tidak ditemukan",
+            }, { status: 404 });
+        }
+
+        return Response.json({
+            success: true,
+            message: "Berhasil mengambil data berdasarkan ID",
+            data,
+        }, { status: 200 });
+    } catch (error) {
+        console.error("Error fetching data:", error);
+        return Response.json({
+            success: false,
+            message: "Terjadi kesalahan saat mengambil data",
+        }, { status: 500 });
+    }
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis/index.ts

@@ -0,0 +1,32 @@
+import Elysia, { t } from "elysia";
+import dokterTenagaMedisCreate from "./create";
+import dokterTenagaMedisFindMany from "./findMany";
+import dokterTenagaMedisFindUnique from "./findUnique";
+import dokterTenagaMedisUpdate from "./updt";
+import dokterTenagaMedisDelete from "./del";
+
+const DokterTenagaMedis = new Elysia({
+    prefix: "/doktertenagamedis",
+    tags: ["Data Kesehatan/Fasilitas Kesehatan/Dokter Tenaga Medis"]
+})
+    .get("/:id", async (context) => {
+        const response = await dokterTenagaMedisFindUnique(new Request(context.request));
+        return response;
+    })
+    .get("/findMany", dokterTenagaMedisFindMany)
+    .post("/create", dokterTenagaMedisCreate, {
+        body: t.Object({
+            name: t.String(),
+            specialist: t.String(),
+            jadwal: t.String(),
+        }),
+    })
+    .put("/:id", dokterTenagaMedisUpdate, {
+        body: t.Object({
+            name: t.String(),
+            specialist: t.String(),
+            jadwal: t.String(),
+        }),
+    })
+    .delete("/del/:id", dokterTenagaMedisDelete)
+export default DokterTenagaMedis

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis/updt.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/grafik_kepuasan/create.ts

@@ -1,25 +1,31 @@
 import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
-type FormCreate = Prisma.GrafikKepuasanGetPayload<{
-  select: {
-    label: true;
-    jumlah: true
-  };
-}>;
+type FormCreate = {
+  nama: string;
+  tanggal: string;
+  jenisKelamin: string;
+  alamat: string;
+  penyakit: string;
+};
+
 export default async function grafikKepuasanCreate(context: Context) {
   const body = context.body as FormCreate;
 
   const created = await prisma.grafikKepuasan.create({
     data: {
-      label: body.label,
-      jumlah: body.jumlah,
+      nama: body.nama,
+      tanggal: new Date(body.tanggal),
+      jenisKelamin: body.jenisKelamin,
+      alamat: body.alamat,
+      penyakit: body.penyakit,
     },
     select: {
-      id: true,
-      label: true,
-      jumlah: true,
+      nama: true,
+      tanggal: true,
+      jenisKelamin: true,
+      alamat: true,
+      penyakit: true,
     }
   });
   return {

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

@@ -1,8 +1,56 @@
-import prisma from "@/lib/prisma"
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function grafikKepuasanFindMany(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 = [
+      { nama: { contains: search, mode: 'insensitive' } },
+      { alamat: { contains: search, mode: 'insensitive' } },
+      { jenisKelamin: { contains: search, mode: 'insensitive' } },
+      { penyakit: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.grafikKepuasan.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { nama: 'asc' },
+      }),
+      prisma.grafikKepuasan.count({ where }),
+    ]);
 
-export default async function grafikKepuasanFindMany() {
-    const res = await prisma.grafikKepuasan.findMany()
     return {
-        data: res
-    }
-}    
+      success: true,
+      message: "Berhasil ambil data grafik kepuasan 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 grafik kepuasan",
+    };
+  }
+}
+
+export default grafikKepuasanFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/grafik_kepuasan/index.ts

@@ -16,22 +16,21 @@ const GrafikKepuasan = new Elysia({
     .get("/find-many", grafikKepuasanFindMany)
     .post("/create", grafikKepuasanCreate, {
         body: t.Object({
-            label: t.String(),
-            jumlah: t.String(),
+            nama: t.String(),
+            tanggal: t.String(),
+            jenisKelamin: t.String(),
+            alamat: t.String(),
+            penyakit: t.String(),
         }),
     })
     .put("/:id", grafikKepuasanUpdate, {
-        params: t.Object({
-            id: t.String(),
-        }),
         body: t.Object({
-            label: t.String(),
-            jumlah: t.String(),
-        }),
-    })
-    .delete("/del/:id", grafikKepuasanDelete, {
-        params: t.Object({
-            id: t.String(),
+            nama: t.String(),
+            tanggal: t.String(),
+            jenisKelamin: t.String(),
+            alamat: t.String(),
+            penyakit: t.String(),
         }),
     })
+    .delete("/del/:id", grafikKepuasanDelete)
 export default GrafikKepuasan

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/grafik_kepuasan/updt.ts

@@ -1,45 +1,36 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
+type FormUpdate = {
+    nama: string;
+    tanggal: string;
+    jenisKelamin: string;
+    alamat: string;
+    penyakit: string;
+}
+
 export default async function grafikKepuasanUpdate(context: Context) {
-    const id = context.params?.id;
-    
-    if (!id) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.grafikKepuasan.update({
+            where: { id },
+            data: {
+                nama: body.nama,
+                tanggal: new Date(body.tanggal),
+                jenisKelamin: body.jenisKelamin,
+                alamat: body.alamat,
+                penyakit: body.penyakit,
+            },
+        });
         return {
-            success: false,
-            message: "ID tidak ditemukan"
-        }
-    }
-
-    const {label, jumlah} = context.body as {
-        label: string;
-        jumlah: string;
-    }
-    
-    const existing = await prisma.grafikKepuasan.findUnique({
-        where: {
-            id: id,
-        },
-    })
-
-    if (!existing) {
-        return {
-            success: false,
-            message: "Data tidak ditemukan",
-        }
-    }
-
-    const updated = await prisma.grafikKepuasan.update({
-        where: { id },
-        data: {
-            label,
-            jumlah,
-        },
-    })
-
-    return {
-        success: true,
-        message: "Data berhasil diupdate",
-        data: updated,
+            success: true,
+            message: "Berhasil mengupdate data grafik kepuasan",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating data grafik kepuasan:", error);
+        throw new Error("Gagal mengupdate data grafik kepuasan: " + (error as Error).message);
     }
 }

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

@@ -18,6 +18,7 @@ import JadwalKegiatan from "./data_kesehatan_warga/jadwal_kegiatan";
 import ArtikelKesehatan from "./data_kesehatan_warga/artikel_kesehatan";
 import Kelahiran from "./data_kesehatan_warga/persentase_kelahiran_kematian/kelahiran";
 import Kematian from "./data_kesehatan_warga/persentase_kelahiran_kematian/kematian";
+import DokterTenagaMedis from "./data_kesehatan_warga/fasilitas_kesehatan/dokter-tenaga-medis";
 
 
 const Kesehatan = new Elysia({
@@ -43,4 +44,5 @@ const Kesehatan = new Elysia({
 .use(ArtikelKesehatan)
 .use(Kelahiran)
 .use(Kematian)
+.use(DokterTenagaMedis)
 export default Kesehatan;

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)/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>
@@ -100,6 +89,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)/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)/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/grafik-penyakit/page.tsx

@@ -0,0 +1,132 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import grafikkepuasan from "@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/grafikKepuasan";
+import colors from "@/con/colors";
+import { Box, Center, Paper, Skeleton, Stack, Text, Title } from "@mantine/core";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { useEffect, useState } from "react";
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from "recharts";
+import { useProxy } from "valtio/utils";
+
+
+
+function GrafikPenyakit() {
+  type PDKMGRAFIK = {
+    id: string;
+    nama: string;
+    tanggal: string | Date; // Allow both string and Date types
+    jenisKelamin: string;
+    alamat: string;
+    penyakit: string;
+    createdAt?: Date;     // Add optional fields that might come from the API
+    updatedAt?: Date;
+    deletedAt?: Date | null;
+  }
+  const statePenyakit = useProxy(grafikkepuasan)
+  const [chartData, setChartData] = useState<PDKMGRAFIK[]>([])
+  const [mounted, setMounted] = useState(false)
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+
+  const {
+    data,
+    page,
+    loading,
+    load,
+  } = statePenyakit.findMany
+
+  useShallowEffect(() => {
+    setMounted(true)
+    load(page, 10)
+  }, [page])
+
+  useEffect(() => {
+    setMounted(true)
+    if (data) {
+      setChartData(data.map((item) => ({
+        id: item.id,
+        nama: item.nama,
+        tanggal: item.tanggal instanceof Date ? item.tanggal.toISOString() : item.tanggal,
+        jenisKelamin: item.jenisKelamin,
+        alamat: item.alamat,
+        penyakit: item.penyakit,
+      })))
+    }
+  }, [data])
+
+  const processDiseaseData = (data: PDKMGRAFIK[]) => {
+    const diseaseCount: Record<string, number> = {};
+
+    data.forEach(item => {
+      const penyakit = item.penyakit.trim();
+      if (penyakit) {
+        diseaseCount[penyakit] = (diseaseCount[penyakit] || 0) + 1;
+      }
+    });
+
+    return Object.entries(diseaseCount).map(([name, count]) => ({
+      name,
+      count
+    }));
+  };
+
+  // Add this state to store the processed chart data
+  const [diseaseChartData, setDiseaseChartData] = useState<{ name: string, count: number }[]>([]);
+
+  // Update the chart data when data changes
+  useEffect(() => {
+    if (data && data.length > 0) {
+      setDiseaseChartData(processDiseaseData(data));
+    }
+  }, [data]);
+
+  if (loading || !data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+
+  return (
+    <Box>
+      {!mounted && !chartData ? (
+        <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Center>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
+              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+            </Center>
+          </Paper>
+        </Box>
+      ) : (
+        <Box style={{ width: '100%', minWidth: 300, height: 420, minHeight: 300 }}>
+          <Paper bg={colors["white-trans-1"]} p={'md'}>
+            <Title pb={10} order={4}>Grafik Hasil Kepuasan Masyarakat</Title>
+            {mounted && diseaseChartData.length > 0 && (
+              <Center>
+                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={diseaseChartData} >
+                  <XAxis
+                    dataKey="name"
+                    tick={{ fontSize: 12 }}
+                    interval={0}
+                    angle={-45}
+                    textAnchor="end"
+                    height={70}
+                  />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="count" fill={colors['blue-button']} name="Jumlah Penderita" />
+                </BarChart>
+              </Center>
+            )}
+          </Paper>
+        </Box>
+      )}
+    </Box>
+  );
+}
+
+export default GrafikPenyakit;

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

@@ -1,49 +1,98 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import colors from '@/con/colors';
-import { Stack, Box, Text, Paper, Center, Flex, ColorSwatch, SimpleGrid, Anchor, Divider, Image } from '@mantine/core';
-import React from 'react';
+import { BarChart as MantineBarChart } from '@mantine/charts';
+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 { BarChart } from '@mantine/charts';
-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';
 
 
-const dataKematian = [
-  {
-    id: 1,
-    tahun: '2023',
-    kematianKasar: '1.7',
-    kematianBayi: '1.4',
-    kelahiranKasar: '0.5'
-  },
-  {
-    id: 2,
-    tahun: '2024',
-    kematianKasar: '1.4',
-    kematianBayi: '1.8',
-    kelahiranKasar: '1.5'
-  },
-  {
-    id: 3,
-    tahun: '2025',
-    kematianKasar: '2.0',
-    kematianBayi: '1.5',
-    kelahiranKasar: '1.2'
-  },
-
-]
-
-const dataPenyakit = [
-  { penyakit: 'Covid', penderita: 335 },
-  { penyakit: 'Tuli', penderita: 105 },
-  { penyakit: 'Bisul', penderita: 98 },
-  { penyakit: 'Panas', penderita: 96 },
-  { penyakit: 'Batuk', penderita: 87 },
-  { penyakit: 'Sembelit', penderita: 72 },
-  { penyakit: 'Demam', penderita: 51 },
-  { penyakit: 'Gred', penderita: 36 },
-  { penyakit: 'Magh', penderita: 34 },
-  { penyakit: 'Farangitis Akut', penderita: 17 },
-]
 function Page() {
+  type DataTahunan = {
+    tahun: string;
+    totalKelahiran: number;
+    totalKematian: number;
+    data: Array<{
+      id: string;
+      bulan: string;
+      kelahiran: number;
+      kematian: number;
+    }>;
+  };
+
+  // Count occurrences per year
+  const countByYear = (data: any[], dateField: string) => {
+    const counts: Record<string, number> = {};
+    data?.forEach(item => {
+      const year = new Date(item[dateField]).getFullYear().toString();
+      counts[year] = (counts[year] || 0) + 1;
+    });
+    return counts;
+  };
+
+  const statePersentase = useProxy(persentasekelahiran);
+  const [chartData, setChartData] = useState<DataTahunan[]>([]);
+  const isTablet = useMediaQuery('(max-width: 1024px)');
+  const isMobile = useMediaQuery('(max-width: 768px)');
+
+
+  useShallowEffect(() => {
+    statePersentase.kelahiran.findMany.load(1, 1000); // Load all kelahiran data
+    statePersentase.kematian.findMany.load(1, 1000); // Load all kematian data
+  }, []);
+
+  useEffect(() => {
+    if (statePersentase.kelahiran.findMany.data && statePersentase.kematian.findMany.data) {
+      // Count kelahiran and kematian by year
+      const kelahiranByYear = countByYear(statePersentase.kelahiran.findMany.data, 'tanggal');
+      const kematianByYear = countByYear(statePersentase.kematian.findMany.data, 'tanggal');
+
+      // Get all unique years
+      const allYears = new Set([
+        ...Object.keys(kelahiranByYear),
+        ...Object.keys(kematianByYear)
+      ]);
+
+      // Create data structure for the chart
+      const dataByYear = Array.from(allYears).reduce<Record<string, DataTahunan>>((acc, year) => {
+        acc[year] = {
+          tahun: year,
+          totalKelahiran: kelahiranByYear[year] || 0,
+          totalKematian: kematianByYear[year] || 0,
+          data: []
+        };
+        return acc;
+      }, {});
+
+      const sortedData = Object.values(dataByYear).sort((a, b) =>
+        parseInt(a.tahun) - parseInt(b.tahun)
+      );
+
+      setChartData(sortedData);
+    }
+  }, [
+    statePersentase.kelahiran.findMany.data,
+    statePersentase.kematian.findMany.data,
+  ]);
+
+  if (!statePersentase.kelahiran.findMany.data || !statePersentase.kematian.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    );
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -61,63 +110,50 @@ function Page() {
                 <Flex pb={30} justify={'flex-end'} gap={'xl'} align={'center'}>
                   <Box>
                     <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Kasar</Text>
-                      <ColorSwatch color="#26308A" size={30} />
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian</Text>
+                      <ColorSwatch color="#EF3E3E" size={30} />
                     </Flex>
                   </Box>
                   <Box>
                     <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kematian Bayi</Text>
-                      <ColorSwatch color="#135A9B" size={30} />
-                    </Flex>
-                  </Box>
-                  <Box>
-                    <Flex gap={{ base: 0, md: 5 }} align={'center'}>
-                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran Kasar</Text>
+                      <Text fw={'bold'} fz={{ base: 'md', md: 'h4' }}>Angka Kelahiran</Text>
                       <ColorSwatch color="#3290CA" size={30} />
                     </Flex>
                   </Box>
                 </Flex>
-                <Center>
-                  <BarChart
-                    h={400}
-                    data={dataKematian}
-                    dataKey="tahun"
-                    series={[
-                      { name: 'kematianKasar', color: '#26308A' },
-                      { name: 'kematianBayi', color: '#135A9B' },
-                      { name: 'kelahiranKasar', color: '#3290CA' },
-                    ]}
-                    tickLine="y"
-                  />
-                </Center>
-              </Box>
-            </Paper>
-          </Box>
-          {/* Bar Chart Penyakit */}
-          <Box>
-            <Paper p={"xl"} bg={colors['white-trans-1']}>
-              <Box pb={30}>
-                <Text pb={30} fw={"bold"} fz={{ base: 'h4', md: 'h3' }} ta={"center"}>
-                  Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
-                </Text>
-                <Center>
-                  <BarChart
-                    p={20}
-                    mb={30}
-                    h={500}
-                    data={dataPenyakit}
-                    dataKey='penyakit'
-                    orientation='vertical'
-                    yAxisProps={{ width: 80 }}
-                    barProps={{ radius: 10 }}
-                    series={[{ name: 'penderita', color: colors['blue-button'] }]}
-                  />
-                </Center>
-                <Text ta={"center"} fw={"bold"} fz={"h4"}>Jumlah Penderita</Text>
+                {chartData.length === 0 ? (
+                  <Text c="dimmed" ta="center" py="xl">
+                    Belum ada data yang tersedia untuk ditampilkan
+                  </Text>
+                ) : (
+                  <>
+                    {/* Main Chart */}
+                    <Center>
+                      <Box h={400}>
+                        <Box style={{
+                          width: isMobile ? '90vw' : isTablet ? '700px' : '800px',
+                          maxWidth: '100%',
+                          margin: '0 auto'
+                        }}>
+                          <MantineBarChart
+                            h={350}
+                            data={chartData}
+                            dataKey="tahun"
+                            series={[
+                              { name: 'totalKelahiran', label: 'Total Kelahiran', color: '#3290CA' },
+                              { name: 'totalKematian', label: 'Total Kematian', color: '#f03e3e' }
+                            ]}
+                            tickLine="y"
+                          />
+                        </Box>
+                      </Box>
+                    </Center>
+                  </>
+                )}
               </Box>
             </Paper>
           </Box>
+          <GrafikPenyakit />
           {/* Artikel Kesehatan */}
           <Box>
             <SimpleGrid
@@ -127,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>
+`