Sinkronisasi UI & API Admin - User Submenu Data Kesehatan Warga

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

prisma/schema.prisma

@@ -911,26 +911,56 @@ model PendaftaranJadwalKegiatan {
 
 // ========================================= PERSENTASE KELAHIRAN & KEMATIAN ========================================= //
 model DataKematian_Kelahiran {
-  id             String   @id @default(cuid())
-  tahun          String
-  kematianKasar  String
-  kematianBayi   String
-  kelahiranKasar String
-  createdAt      DateTime @default(now())
-  updatedAt      DateTime @updatedAt
-  deletedAt      DateTime @default(now())
-  isActive       Boolean  @default(true)
+  id          String    @id @default(cuid())
+  kematian    Kematian  @relation(fields: [kematianId], references: [id])
+  kematianId  String
+  kelahiran   Kelahiran @relation(fields: [kelahiranId], references: [id])
+  kelahiranId String
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  deletedAt   DateTime  @default(now())
+  isActive    Boolean   @default(true)
+}
+
+model Kelahiran {
+  id                     String                   @id @default(cuid())
+  nama                   String
+  tanggal                DateTime
+  jenisKelamin           String
+  alamat                 String
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime                 @default(now())
+  isActive               Boolean                  @default(true)
+  DataKematian_Kelahiran DataKematian_Kelahiran[]
+}
+
+model Kematian {
+  id                     String                   @id @default(cuid())
+  nama                   String
+  tanggal                DateTime
+  jenisKelamin           String
+  alamat                 String
+  penyebab               String
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime                 @default(now())
+  isActive               Boolean                  @default(true)
+  DataKematian_Kelahiran DataKematian_Kelahiran[]
 }
 
 // ========================================= 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 ========================================= //
@@ -1027,16 +1057,17 @@ model DoctorSign {
 
 // ========================================= POSYANDU ========================================= //
 model Posyandu {
-  id        String      @id @default(cuid())
-  name      String
-  nomor     String
-  deskripsi String
-  image     FileStorage @relation(fields: [imageId], references: [id])
-  imageId   String
-  createdAt DateTime    @default(now())
-  updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
-  isActive  Boolean     @default(true)
+  id              String      @id @default(cuid())
+  name            String
+  nomor           String
+  deskripsi       String
+  jadwalPelayanan String
+  image           FileStorage @relation(fields: [imageId], references: [id])
+  imageId         String
+  createdAt       DateTime    @default(now())
+  updatedAt       DateTime    @updatedAt
+  deletedAt       DateTime    @default(now())
+  isActive        Boolean     @default(true)
 }
 
 // ========================================= PUSKESMAS ========================================= //

prisma/seed.ts

@@ -125,8 +125,8 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("penghargaan success ...");
 
-   // =========== LAYANAN DESA ===========
-   for (const p of pelayananSuratKeterangan) {
+  // =========== LAYANAN DESA ===========
+  for (const p of pelayananSuratKeterangan) {
     await prisma.pelayananSuratKeterangan.upsert({
       where: { id: p.id },
       update: {
@@ -317,63 +317,42 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("visi misi desa success ...");
 
-  // Flatten the nested array structure for posisiOrganisasiPPID
-  const flattenedPosisiOrganisasiPPID = posisiOrganisasiPPID.flat();
+  const flattenedPosisi = posisiOrganisasiPPID.flat();
+
+  // ✅ Urutkan berdasarkan hierarki
+  const sortedPosisi = flattenedPosisi.sort((a, b) => a.hierarki - b.hierarki);
+
+  for (const p of sortedPosisi) {
+    console.log(`Seeding: ${p.nama} (id: ${p.id}, parent: ${p.parentId})`);
+
+    if (p.parentId) {
+      const parentExists = flattenedPosisi.some((pos) => pos.id === p.parentId);
+      if (!parentExists) {
+        console.warn(
+          `⚠️ Parent tidak ditemukan: ${p.parentId} untuk ${p.nama}`
+        );
+        continue;
+      }
+    }
 
-  for (const p of flattenedPosisiOrganisasiPPID) {
     await prisma.posisiOrganisasiPPID.upsert({
-      where: {
-        id: p.id,
-      },
-      update: {
-        nama: p.nama,
-        deskripsi: p.deskripsi,
-        hierarki: p.hierarki,
-        parentId: p.parentId,
-      },
-      create: {
-        id: p.id,
-        nama: p.nama,
-        deskripsi: p.deskripsi,
-        hierarki: p.hierarki,
-        parentId: p.parentId,
-      },
+      where: { id: p.id },
+      update: p,
+      create: p,
     });
   }
-  console.log("posisi organisasi success ...");
+  console.log("✅ Posisi organisasi berhasil");
 
-  // Flatten the nested array structure for pegawaiPPID
-  const flattenedPegawaiPPID = pegawaiPPID.flat();
-
-  for (const p of flattenedPegawaiPPID) {
+  // 2. Seed Pegawai
+  const flattenedPegawai = pegawaiPPID.flat();
+  for (const p of flattenedPegawai) {
     await prisma.pegawaiPPID.upsert({
-      where: {
-        id: p.id,
-      },
-      update: {
-        namaLengkap: p.namaLengkap,
-        tanggalMasuk: new Date(p.tanggalMasuk),
-        email: p.email,
-        gelarAkademik: p.gelarAkademik,
-        telepon: p.telepon,
-        alamat: p.alamat,
-        posisiId: p.posisiId,
-        isActive: p.isActive,
-      },
-      create: {
-        id: p.id,
-        namaLengkap: p.namaLengkap,
-        tanggalMasuk: new Date(p.tanggalMasuk),
-        email: p.email,
-        gelarAkademik: p.gelarAkademik,
-        telepon: p.telepon,
-        alamat: p.alamat,
-        posisiId: p.posisiId,
-        isActive: p.isActive,
-      },
+      where: { id: p.id },
+      update: p,
+      create: p,
     });
   }
-  console.log("pegawai success ...");
+  console.log("✅ Pegawai berhasil");
 
   for (const l of pelayananPerizinanBerusaha) {
     await prisma.pelayananPerizinanBerusaha.upsert({

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

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
-const templatePersentase = z.object({
+//persentase kelahiran kematian
+
+const templatePersentaseKelahiran = z.object({
   tahun: z.string().min(4, "Tahun harus diisi"),
   kematianKasar: z.string().min(1, "Kematian kasar harus diisi"),
   kelahiranKasar: z.string().min(1, "Kelahiran kasar harus diisi"),
@@ -13,18 +16,14 @@ const templatePersentase = z.object({
 
 type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
   select: {
-    tahun: true;
-    kematianKasar: true;
-    kelahiranKasar: true;
-    kematianBayi: true;
+    kematianId: true;
+    kelahiranId: true;
   };
 }>;
 
 const defaultForm: Persentase = {
-  tahun: "",
-  kematianKasar: "",
-  kelahiranKasar: "",
-  kematianBayi: "",
+  kematianId: "",
+  kelahiranId: "",
 };
 
 const persentasekelahiran = proxy({
@@ -32,7 +31,9 @@ const persentasekelahiran = proxy({
     form: defaultForm,
     loading: false,
     async create() {
-      const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
+      const cek = templatePersentaseKelahiran.safeParse(
+        persentasekelahiran.create.form
+      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -47,7 +48,7 @@ const persentasekelahiran = proxy({
         ].post(persentasekelahiran.create.form);
 
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          const id = res.data?.data;
           if (id) {
             toast.success("Success create");
             persentasekelahiran.create.form = { ...defaultForm };
@@ -69,21 +70,51 @@ const persentasekelahiran = proxy({
   findMany: {
     data: null as
       | Prisma.DataKematian_KelahiranGetPayload<{
-          omit: { isActive: true };
+          include: {
+            kematian: true;
+            kelahiran: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.persentasekelahiran[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        persentasekelahiran.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      persentasekelahiran.findMany.loading = true; // ✅ Akses langsung via nama path
+      persentasekelahiran.findMany.page = page;
+      persentasekelahiran.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.persentasekelahiran[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          persentasekelahiran.findMany.data = res.data.data ?? [];
+          persentasekelahiran.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          persentasekelahiran.findMany.data = [];
+          persentasekelahiran.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        persentasekelahiran.findMany.data = [];
+        persentasekelahiran.findMany.totalPages = 1;
+      } finally {
+        persentasekelahiran.findMany.loading = false;
       }
     },
   },
   findUnique: {
     data: null as Prisma.DataKematian_KelahiranGetPayload<{
-      omit: { isActive: true };
+      include: {
+        kematian: true;
+        kelahiran: true;
+      };
     }> | null,
     async load(id: string) {
       try {
@@ -114,13 +145,11 @@ const persentasekelahiran = proxy({
       }
 
       const formData = {
-        tahun: this.form.tahun,
-        kematianKasar: this.form.kematianKasar,
-        kelahiranKasar: this.form.kelahiranKasar,
-        kematianBayi: this.form.kematianBayi,
+        kematianId: this.form.kematianId,
+        kelahiranId: this.form.kelahiranId,
       };
 
-      const cek = templatePersentase.safeParse(formData);
+      const cek = templatePersentaseKelahiran.safeParse(formData);
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -197,4 +226,521 @@ const persentasekelahiran = proxy({
   },
 });
 
-export default persentasekelahiran;
+// data kelahiran
+
+const templateKelahiran = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  tanggal: z.string().min(4, "Tahun harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+});
+
+const defaultKelahiran = {
+  nama: "",
+  tanggal: "",
+  jenisKelamin: "",
+  alamat: "",
+};
+
+const kelahiran = proxy({
+  create: {
+    form: { ...defaultKelahiran }, // ✅ ini kunci fix-nya
+    loading: false,
+    async create() {
+      const cek = templateKelahiran.safeParse(kelahiran.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kelahiran.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kelahiran["create"].post(
+          kelahiran.create.form
+        );
+        if (res.status === 200) {
+          kelahiran.findMany.load();
+          return toast.success("Kelahiran berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kelahiran");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kelahiran.create.loading = false;
+      }
+    },
+    resetForm() {
+      kelahiran.create.form = { ...defaultKelahiran };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KelahiranGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kelahiran.findMany.loading = true; // ✅ Akses langsung via nama path
+      kelahiran.findMany.page = page;
+      kelahiran.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kelahiran["findMany"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kelahiran.findMany.data = res.data.data ?? [];
+          kelahiran.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kelahiran.findMany.data = [];
+          kelahiran.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kelahiran paginated:", err);
+        kelahiran.findMany.data = [];
+        kelahiran.findMany.totalPages = 1;
+      } finally {
+        kelahiran.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KelahiranGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kelahiran/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kelahiran.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch kelahiran:", res.statusText);
+          kelahiran.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching kelahiran:", error);
+        kelahiran.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kelahiran.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kelahiran/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kelahiran berhasil dihapus");
+          await kelahiran.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kelahiran");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kelahiran");
+      } finally {
+        kelahiran.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultKelahiran },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kelahiran/${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 = {
+            nama: data.nama,
+            tanggal: data.tanggal,
+            jenisKelamin: data.jenisKelamin,
+            alamat: data.alamat,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading data kelahiran:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateKelahiran.safeParse(kelahiran.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kelahiran.edit.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kelahiran/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            nama: this.form.nama,
+            tanggal: this.form.tanggal,
+            jenisKelamin: this.form.jenisKelamin,
+            alamat: this.form.alamat,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kelahiran");
+          await kelahiran.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data kelahiran");
+        }
+      } catch (error) {
+        console.error("Error updating data kelahiran:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kelahiran"
+        );
+        return false;
+      } finally {
+        kelahiran.edit.loading = false;
+      }
+    },
+
+    reset() {
+      kelahiran.edit.id = "";
+      kelahiran.edit.form = { ...defaultKelahiran };
+    },
+  },
+});
+
+
+// data kematian
+
+const templateKematian = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  tanggal: z.string().min(4, "Tahun harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+  penyebab: z.string().min(1, "Penyebab harus diisi"),
+});
+
+const defaultKematian = {
+  nama: "",
+  tanggal: "",
+  jenisKelamin: "",
+  alamat: "",
+  penyebab: "",
+};
+
+const kematian = proxy({
+  create: {
+    form: { ...defaultKematian }, // ✅ ini kunci fix-nya
+    loading: false,
+    async create() {
+      const cek = templateKematian.safeParse(kematian.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kematian.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kematian["create"].post(
+          kematian.create.form
+        );
+        if (res.status === 200) {
+          kematian.findMany.load();
+          return toast.success("Kematian berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kematian");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kematian.create.loading = false;
+      }
+    },
+    resetForm() {
+      kematian.create.form = { ...defaultKematian };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KematianGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kematian.findMany.loading = true; // ✅ Akses langsung via nama path
+      kematian.findMany.page = page;
+      kematian.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kematian["findMany"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kematian.findMany.data = res.data.data ?? [];
+          kematian.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kematian.findMany.data = [];
+          kematian.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kematian paginated:", err);
+        kematian.findMany.data = [];
+        kematian.findMany.totalPages = 1;
+      } finally {
+        kematian.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KematianGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kematian/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kematian.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch kematian:", res.statusText);
+          kematian.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching kematian:", error);
+        kematian.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kematian.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kematian/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kematian berhasil dihapus");
+          await kematian.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kematian");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kematian");
+      } finally {
+        kematian.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultKematian },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kematian/${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 = {
+            nama: data.nama,
+            tanggal: data.tanggal,
+            jenisKelamin: data.jenisKelamin,
+            alamat: data.alamat,
+            penyebab: data.penyebab,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading data kematian:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateKematian.safeParse(kematian.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kematian.edit.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kematian/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            nama: this.form.nama,
+            tanggal: this.form.tanggal,
+            jenisKelamin: this.form.jenisKelamin,
+            alamat: this.form.alamat,
+            penyebab: this.form.penyebab,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kematian");
+          await kematian.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data kematian");
+        }
+      } catch (error) {
+        console.error("Error updating data kematian:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kematian"
+        );
+        return false;
+      } finally {
+        kematian.edit.loading = false;
+      }
+    },
+
+    reset() {
+      kematian.edit.id = "";
+      kematian.edit.form = { ...defaultKematian };
+    },
+  },
+});
+
+const persentaseKelahiranKematian = proxy({
+  persentasekelahiran,
+  kelahiran,
+  kematian
+});
+
+export default persentaseKelahiranKematian;

src/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu.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";
@@ -9,6 +10,7 @@ const templateForm = z.object({
   nomor: z.string().min(1, { message: "Nomor is required" }),
   deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
   imageId: z.string().nonempty(),
+  jadwalPelayanan: z.string().min(1, { message: "Jadwal Pelayanan is required" }),
 });
 
 const defaultForm = {
@@ -16,6 +18,7 @@ const defaultForm = {
   nomor: "",
   deskripsi: "",
   imageId: "",
+  jadwalPelayanan: "",
 };
 
 const posyandustate = proxy({
@@ -50,19 +53,43 @@ const posyandustate = proxy({
     }
   },
   findMany: {
-    data: null as 
-    | Prisma.PosyanduGetPayload<{
-        include: {
+    data: null as
+      | Prisma.PosyanduGetPayload<{
+          include: {
             image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      posyandustate.findMany.loading = true; // ✅ Akses langsung via nama path
+      posyandustate.findMany.page = page;
+      posyandustate.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.posyandu["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          posyandustate.findMany.data = res.data.data ?? [];
+          posyandustate.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          posyandustate.findMany.data = [];
+          posyandustate.findMany.totalPages = 1;
         }
-    }>[]
-    | null,
-    async load() {
-        const res = await ApiFetch.api.kesehatan.posyandu["find-many"].get();
-        if (res.status === 200) {
-            posyandustate.findMany.data = res.data?.data ?? [];
-        }
-    }
+      } catch (err) {
+        console.error("Gagal fetch posyandu paginated:", err);
+        posyandustate.findMany.data = [];
+        posyandustate.findMany.totalPages = 1;
+      } finally {
+        posyandustate.findMany.loading = false;
+      }
+    },
   },
   findUnique: {
     data: null as 
@@ -148,6 +175,7 @@ const posyandustate = proxy({
                     nomor: data.nomor,
                     deskripsi: data.deskripsi,
                     imageId: data.imageId || "",
+                    jadwalPelayanan: data.jadwalPelayanan || "",
                 };
                 return data;
             } else {
@@ -181,6 +209,7 @@ const posyandustate = proxy({
                     nomor: this.form.nomor,
                     deskripsi: this.form.deskripsi,
                     imageId: this.form.imageId,
+                    jadwalPelayanan: this.form.jadwalPelayanan,
                 }),
             });
             

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

@@ -1,28 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
 import {
   Box,
   Button,
-  Center,
+  Group,
   Image,
   Paper,
   Select,
   Stack,
   Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
-import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { Dropzone } from "@mantine/dropzone";
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
-import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
-import colors from "@/con/colors";
-import ApiFetch from "@/lib/api-fetch";
-import { FileInput } from "@mantine/core";
-import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
 
 
 function EditBerita() {
@@ -130,27 +130,62 @@ function EditBerita() {
             placeholder="masukkan deskripsi"
           />
 
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <EditEditor

src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx

@@ -3,9 +3,10 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -113,25 +114,62 @@ export default function CreateBerita() {
             placeholder="masukkan deskripsi"
           />
 
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <CreateEditor

src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx

@@ -47,7 +47,7 @@ function ListBerita({ search }: { search: string }) {
   if (loading || !data) {
     return <Skeleton h={500} />;
   }
-  
+
   const filteredData = data || [];
 
   return (

src/app/admin/(dashboard)/desa/penghargaan/[id]/edit/page.tsx

@@ -4,10 +4,11 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Paper, Stack, Title, TextInput, FileInput, Center, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -105,26 +106,62 @@ function EditPenghargaan() {
             label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
             placeholder="masukkan juara"
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
 
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>

src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import penghargaanState from '../../../_state/desa/penghargaan';
-import ApiFetch from '@/lib/api-fetch';
 import CreateEditor from '../../../_com/createEditor';
+import penghargaanState from '../../../_state/desa/penghargaan';
 
 
 function CreatePenghargaan() {
@@ -85,25 +86,62 @@ function CreatePenghargaan() {
               }}
             />
           </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

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

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -44,21 +45,7 @@ function ProfilePerbekel() {
       perbekelState.findUnique.reset(); // opsional: reset juga data lama
     };
   }, [params?.id, router]);
-  
-    const handleFileChange = (newFile: File | null) => {
-      if (!newFile) {
-        setFile(null);
-        return;
-      }
-  
-      setFile(newFile);
-  
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        setPreviewImage(event.target?.result as string);
-      };
-      reader.readAsDataURL(newFile);
-    };
+
 
   const handleSubmit = async () => {
     if (isSubmitting || !perbekelState.edit.form.biodata.trim()) {
@@ -128,27 +115,61 @@ function ProfilePerbekel() {
                     value={perbekelState.edit.form.biodata}
                     onChange={(val) => perbekelState.edit.form.biodata = val}
                   />
-                  {/* File Upload */}
-                  <FileInput
-                    label={<Text fz="sm" fw="bold">Upload Gambar Baru (Opsional)</Text>}
-                    value={file}
-                    onChange={handleFileChange}
-                    accept="image/*"
-                  />
-
-                  {/* Preview Gambar */}
                   <Box>
-                    <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
-                    {previewImage ? (
-                      <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
-                    ) : (
-                      <Center w={200} h={200} bg="gray.2">
-                        <Stack align="center" gap="xs">
-                          <IconImageInPicture size={48} color="gray" />
-                          <Text size="sm" c="gray">Tidak ada gambar</Text>
-                        </Stack>
-                      </Center>
-                    )}
+                    <Text fz={"md"} fw={"bold"}>Gambar</Text>
+                    <Box>
+                      <Dropzone
+                        onDrop={(files) => {
+                          const selectedFile = files[0]; // Ambil file pertama
+                          if (selectedFile) {
+                            setFile(selectedFile);
+                            setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                          }
+                        }}
+                        onReject={() => toast.error('File tidak valid.')}
+                        maxSize={5 * 1024 ** 2} // Maks 5MB
+                        accept={{ 'image/*': [] }}
+                      >
+                        <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                          <Dropzone.Accept>
+                            <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                          </Dropzone.Accept>
+                          <Dropzone.Reject>
+                            <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                          </Dropzone.Reject>
+                          <Dropzone.Idle>
+                            <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                          </Dropzone.Idle>
+
+                          <div>
+                            <Text size="xl" inline>
+                              Drag gambar ke sini atau klik untuk pilih file
+                            </Text>
+                            <Text size="sm" c="dimmed" inline mt={7}>
+                              Maksimal 5MB dan harus format gambar
+                            </Text>
+                          </div>
+                        </Group>
+                      </Dropzone>
+
+                      {/* Tampilkan preview kalau ada */}
+                      {previewImage && (
+                        <Box mt="sm">
+                          <Image
+                            src={previewImage}
+                            alt="Preview"
+                            style={{
+                              maxWidth: '100%',
+                              maxHeight: '200px',
+                              objectFit: 'contain',
+                              borderRadius: '8px',
+                              border: '1px solid #ddd',
+                            }}
+                          />
+                        </Box>
+                      )}
+
+                    </Box>
                   </Box>
 
                   <Box>

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/page.tsx

@@ -116,14 +116,14 @@ function ListDetailDataPengangguran() {
         {!mounted && !chartData ? (
           <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
             <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+              <Title pb={10} order={3}>Data Pengangguran Terdidik dan Tidak Terdidik</Title>
               <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
             </Paper>
           </Box>
         ) : (
           <Box style={{ width: '100%', minWidth: 300, height: 550, minHeight: 300 }}>
             <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+              <Title pb={10} order={4}>Data Pengangguran Terdidik dan Tidak Terdidik</Title>
               {mounted && chartData.length > 0 && (
                 <Box w={{ base: '100%', md: '70%' }}>
                   <BarChart

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -95,27 +96,61 @@ function EditPenghargaan() {
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
             <EditEditor

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import desaDigitalState from '../../../_state/inovasi/desa-digital';
+import { Dropzone } from '@mantine/dropzone';
 
 
 function CreateDesaDigital() {
@@ -49,7 +50,7 @@ function CreateDesaDigital() {
 
       // Submit the form
       const success = await stateDesaDigital.create.create()
-      
+
       if (success) {
         resetForm()
         router.push("/admin/inovasi/desa-digital-smart-village")
@@ -87,25 +88,61 @@ function CreateDesaDigital() {
               }}
             />
           </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

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

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import infoTeknoState from '@/app/admin/(dashboard)/_state/inovasi/info-tekno';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -94,27 +95,61 @@ function EditInfoTeknologiTepatGuna() {
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
             <EditEditor

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

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import infoTeknoState from '../../../_state/inovasi/info-tekno';
+import { Dropzone } from '@mantine/dropzone';
 
 
 function CreateInfoTeknologiTepatGuna() {
@@ -49,7 +50,7 @@ function CreateInfoTeknologiTepatGuna() {
 
       // Submit the form
       const success = await stateInfoTekno.create.create()
-      
+
       if (success) {
         resetForm()
         router.push("/admin/inovasi/info-teknologi-tepat-guna")
@@ -87,25 +88,61 @@ function CreateInfoTeknologiTepatGuna() {
               }}
             />
           </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

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

@@ -1,8 +1,8 @@
 '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, Flex, Grid, GridCol, 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 { IconDeviceImacCog, IconList, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import fasilitasKesehatanState from '../../../_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan';
@@ -13,22 +13,37 @@ import { useState } from 'react';
 
 function FasilitasKesehatan() {
   const [search, setSearch] = useState("");
+  const router = useRouter();
   return (
     <Box>
-      <HeaderSearch
-        title='Fasilitas Kesehatan'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListFasilitasKesehatan search={search}/>
+      <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>
+      <ListFasilitasKesehatan search={search} />
     </Box>
   );
 }
 
 function ListFasilitasKesehatan({ search }: { search: string }) {
-  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState)
+  const stateFasilitasKesehatan = useProxy(fasilitasKesehatanState.fasilitasKesehatan)
   const router = useRouter();
 
   useShallowEffect(() => {
@@ -47,47 +62,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,11 @@
+import React from 'react';
+
+function Page() {
+  return (
+    <div>
+      Page
+    </div>
+  );
+}
+
+export default Page;

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

@@ -1,113 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-
-import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
-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 { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-function EditPersentaseDataKelahiranKematian() {
-  const router = useRouter()
-  const params = useParams() as { id: string }
-  const statePresentase = useProxy(persentasekelahiran)
-
-  const id = params.id
-
-  // Load data saat komponen mount
-// Di file page.tsx, ubah useEffect-nya menjadi:
-useEffect(() => {
-  if (!id) return;
-  statePresentase.update.id = id;
-  statePresentase.findUnique.load(id)
-    .then(() => {
-      const data = statePresentase.findUnique.data;
-      if (data) {
-        statePresentase.update.form = {
-          tahun: String(data.tahun || ''),
-          kematianKasar: String(data.kematianKasar || ''),
-          kelahiranKasar: String(data.kelahiranKasar || ''),
-          kematianBayi: String(data.kematianBayi || '')
-        };
-      }
-    })
-    .catch(error => {
-      console.error('Error loading data:', error);
-      toast.error('Gagal memuat data');
-    });
-}, [id]);
-
-// Di handleSubmit, ubah menjadi:
-const handleSubmit = async () => {
-  try {
-    statePresentase.update.id = id;
-    await statePresentase.update.submit();
-    toast.success('Data berhasil diperbarui');
-    router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian');
-  } catch (error) {
-    console.error('Error updating data:', error);
-    toast.error('Gagal memperbarui data');
-  }
-};
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-        <Stack>
-          <Title order={3}>Edit Persentase Data Kelahiran & Kematian</Title>
-          <TextInput
-            label="Tahun"
-            placeholder="masukkan tahun"
-            value={statePresentase.update.form.tahun}
-            onChange={(val) => {
-              statePresentase.update.form.tahun = val.currentTarget.value;
-            }}
-          />
-          <TextInput
-            label="Kematian Kasar"
-            type="number"
-            placeholder="masukkan kematian kasar"
-            value={statePresentase.update.form.kematianKasar}
-            onChange={(val) => {
-              statePresentase.update.form.kematianKasar = val.currentTarget.value;
-            }}
-          />
-          <TextInput
-            label="Kematian Bayi"
-            type="number"
-            placeholder="masukkan kematian bayi"
-            value={statePresentase.update.form.kematianBayi}
-            onChange={(val) => {
-              statePresentase.update.form.kematianBayi = val.currentTarget.value;
-            }}
-          />
-          <TextInput
-            label="Kelahiran Kasar"
-            type="number"
-            placeholder="masukkan kelahiran kasar"
-            value={statePresentase.update.form.kelahiranKasar}
-            onChange={(val) => {
-              statePresentase.update.form.kelahiranKasar = val.currentTarget.value;
-            }}
-          />
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Simpan Perubahan
-          </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default EditPersentaseDataKelahiranKematian;

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

@@ -1,101 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-function CreatePersentaseDataKelahiranKematian() {
-  const statePersentase = useProxy(persentasekelahiran);
-  const [chartData, setChartData] = useState<any[]>([]);
-  const router = useRouter()
-
-  const resetForm = () => {
-    statePersentase.create.form = {
-      tahun: "",
-      kematianBayi: "",
-      kematianKasar: "",
-      kelahiranKasar: "",
-    }
-  }
-
-  const handleSubmit = async () => {
-    const id = await statePersentase.create.create();
-    if (id) {
-      const idStr = String(id);
-      await statePersentase.findUnique.load(idStr);
-      if (statePersentase.findUnique.data) {
-        setChartData([statePersentase.findUnique.data]);
-      }
-    }
-    resetForm();
-    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian");
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Box>
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Title order={4}>Tambah Persentase Data Kelahiran & Kematian</Title>
-          <Stack gap={"xs"}>
-            <TextInput
-              label="Tahun"
-              type="number"
-              value={statePersentase.create.form.tahun}
-              placeholder="Masukkan tahun"
-              onChange={(val) => {
-                statePersentase.create.form.tahun = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Kematian Kasar"
-              type="number"
-              value={statePersentase.create.form.kematianKasar}
-              placeholder="Masukkan kematian kasar"
-              onChange={(val) => {
-                statePersentase.create.form.kematianKasar = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Kematian Bayi"
-              type="number"
-              value={statePersentase.create.form.kematianBayi}
-              placeholder="Masukkan kematian bayi"
-              onChange={(val) => {
-                statePersentase.create.form.kematianBayi = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Kelahiran Kasar"
-              type="number"
-              value={statePersentase.create.form.kelahiranKasar}
-              placeholder="Masukkan kelahiran kasar"
-              onChange={(val) => {
-                statePersentase.create.form.kelahiranKasar = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                mt={10}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default CreatePersentaseDataKelahiranKematian;

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

@@ -0,0 +1,107 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+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 EditKelahiran() {
+  const editState = useProxy(persentaseKelahiranKematian.kelahiran)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+    nama: editState.edit.form.nama || '',
+    tanggal: editState.edit.form.tanggal || '',
+    jenisKelamin: editState.edit.form.jenisKelamin || '',
+    alamat: editState.edit.form.alamat || '',
+  });
+
+  useEffect(() => {
+    const loadKelahiran = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            tanggal: data.tanggal || '',
+            jenisKelamin: data.jenisKelamin || '',
+            alamat: data.alamat || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading data kelahiran:", error);
+        toast.error("Gagal memuat data data kelahiran");
+      }
+    };
+
+    loadKelahiran();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.edit.form = {
+        ...editState.edit.form,
+        nama: formData.nama,
+        tanggal: formData.tanggal,
+        jenisKelamin: formData.jenisKelamin,
+        alamat: formData.alamat,
+      };
+      await editState.edit.update();
+      toast.success('data kelahiran berhasil diperbarui!');
+      router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
+    } catch (error) {
+      console.error('Error updating data kelahiran:', error);
+      toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
+    }
+  };
+
+  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 data kelahiran</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"
+          />
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKelahiran;

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

@@ -0,0 +1,121 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+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 persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+
+
+function DetailKelahiran() {
+  const state = useProxy(persentaseKelahiranKematian.kelahiran)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      state.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
+    }
+  }
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Data Kelahiran</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>
+                <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/persentase_data_kelahiran_kematian/kelahiran/${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 DetailKelahiran;

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

@@ -0,0 +1,83 @@
+'use client'
+import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateKelahiran() {
+  const createState = useProxy(persentaseKelahiranKematian.kelahiran)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.form = {
+      nama: "",
+      tanggal: "",
+      jenisKelamin: "",
+      alamat: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create();
+    resetForm();
+    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kelahiran</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+            value={createState.create.form.nama}
+            onChange={(val) => {
+              createState.create.form.nama = val.target.value;
+            }}
+          />
+          <TextInput
+            type='date'
+            label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
+            placeholder='Masukkan tanggal'
+            value={createState.create.form.tanggal}
+            onChange={(val) => {
+              createState.create.form.tanggal = val.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
+            placeholder='Masukkan jenis kelamin'
+            value={createState.create.form.jenisKelamin}
+            onChange={(val) => {
+              createState.create.form.jenisKelamin = val.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
+            placeholder='Masukkan alamat'
+            value={createState.create.form.alamat}
+            onChange={(val) => {
+              createState.create.form.alamat = val.target.value;
+            }}
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKelahiran;

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

@@ -0,0 +1,118 @@
+'use client'
+import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import JudulList from '@/app/admin/(dashboard)/_com/judulList';
+import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+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, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+function Kelahiran() {
+  const router = useRouter();
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <HeaderSearch
+        title='Data Kelahiran'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKelahiran search={search} />
+    </Box>
+  );
+}
+function ListKelahiran({ search }: { search: string }) {
+  const statePersentase = useProxy(persentasekelahiran.kelahiran);
+  const router = useRouter();
+
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load
+  } = statePersentase.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        {/* Form Input */}
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Data Kelahiran'
+            href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Tanggal</TableTh>
+                <TableTh>Jenis Kelamin</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <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.alamat}</TableTd>
+                  <TableTd>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`)}>
+                      <IconDeviceImacCog size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+      </Stack>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default Kelahiran;

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

@@ -0,0 +1,121 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+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 EditKematian() {
+  const editState = useProxy(persentaseKelahiranKematian.kematian)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+    nama: editState.edit.form.nama || '',
+    tanggal: editState.edit.form.tanggal || '',
+    jenisKelamin: editState.edit.form.jenisKelamin || '',
+    alamat: editState.edit.form.alamat || '',
+    penyebab: editState.edit.form.penyebab || '',
+  });
+
+  useEffect(() => {
+    const loadKelahiran = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            tanggal: data.tanggal || '',
+            jenisKelamin: data.jenisKelamin || '',
+            alamat: data.alamat || '',
+            penyebab: data.penyebab || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading data kelahiran:", error);
+        toast.error("Gagal memuat data data kelahiran");
+      }
+    };
+
+    loadKelahiran();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.edit.form = {
+        ...editState.edit.form,
+        nama: formData.nama,
+        tanggal: formData.tanggal,
+        jenisKelamin: formData.jenisKelamin,
+        alamat: formData.alamat,
+        penyebab: formData.penyebab,
+      };
+      await editState.edit.update();
+      toast.success('data kelahiran berhasil diperbarui!');
+      router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran');
+    } catch (error) {
+      console.error('Error updating data kelahiran:', error);
+      toast.error('Terjadi kesalahan saat memperbarui data kelahiran');
+    }
+  };
+
+  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 data kelahiran</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"
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Penyebab</Text>
+            <EditEditor
+              value={formData.penyebab}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, penyebab: htmlContent }));
+                editState.edit.form.penyebab = htmlContent;
+              }}
+            />
+          </Box>
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKematian;

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

@@ -0,0 +1,126 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+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 persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+
+
+function DetailKematian() {
+  const state = useProxy(persentaseKelahiranKematian.kematian)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      state.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran")
+    }
+  }
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Data Kematian</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"}>
+                    {state.findUnique.data?.tanggal instanceof Date
+                      ? state.findUnique.data.tanggal.toLocaleDateString('id-ID', {
+                          day: '2-digit',
+                          month: 'long',
+                          year: 'numeric'
+                        })
+                      : state.findUnique.data?.tanggal}
+                  </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"}>Penyebab</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: state.findUnique.data?.penyebab || '' }} />
+                </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/persentase_data_kelahiran_kematian/kelahiran/${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 DetailKematian;

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

@@ -0,0 +1,94 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import persentaseKelahiranKematian from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateKematian() {
+  const createState = useProxy(persentaseKelahiranKematian.kematian)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.form = {
+      nama: "",
+      tanggal: "",
+      jenisKelamin: "",
+      alamat: "",
+      penyebab: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create();
+    resetForm();
+    router.push("/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kematian</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+            value={createState.create.form.nama}
+            onChange={(val) => {
+              createState.create.form.nama = val.target.value;
+            }}
+          />
+          <TextInput
+            type='date'
+            label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
+            placeholder='Masukkan tanggal'
+            value={createState.create.form.tanggal}
+            onChange={(val) => {
+              createState.create.form.tanggal = val.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
+            placeholder='Masukkan jenis kelamin'
+            value={createState.create.form.jenisKelamin}
+            onChange={(val) => {
+              createState.create.form.jenisKelamin = val.target.value;
+            }}
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Alamat</Text>}
+            placeholder='Masukkan alamat'
+            value={createState.create.form.alamat}
+            onChange={(val) => {
+              createState.create.form.alamat = val.target.value;
+            }}
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Penyebab</Text>
+            <CreateEditor
+              value={createState.create.form.penyebab}
+              onChange={(htmlContent) => {
+                createState.create.form.penyebab = htmlContent;
+              }}
+            />
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKematian;

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

@@ -0,0 +1,118 @@
+'use client'
+import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
+import JudulList from '@/app/admin/(dashboard)/_com/judulList';
+import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
+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 { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+function Kematian() {
+  const [search, setSearch] = useState("");
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <HeaderSearch
+        title='Data Kematian'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKematian search={search} />
+    </Box >
+  );
+}
+function ListKematian({ search }: { search: string }) {
+  const statePersentase = useProxy(persentasekelahiran.kematian);
+  const router = useRouter();
+
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load
+  } = statePersentase.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        {/* Form Input */}
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Data Kematian'
+            href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Tanggal</TableTh>
+                <TableTh>Jenis Kelamin</TableTh>
+                <TableTh>Alamat</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <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.alamat}</TableTd>
+                  <TableTd>
+                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran/${item.id}`)}>
+                      <IconEdit size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+      </Stack>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default Kematian;

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

@@ -1,183 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import persentasekelahiran from '@/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/persentaseKelahiran';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, 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 { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { IconBabyCarriage, IconGrave2 } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { Bar, BarChart, Legend, Tooltip, TooltipProps, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../../_com/judulListTab';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import HeaderSearch from '../../../_com/header';
+
+type TooltipPayload = {
+  name: string;
+  value: number;
+  payload: any;
+  color: string;
+  dataKey: string;
+};
+
+type CustomTooltipProps = TooltipProps<number, string> & {
+  active?: boolean;
+  payload?: TooltipPayload[];
+  label?: string;
+};
 
 function PersentaseDataKelahiranKematian() {
-  const [search, setSearch] = useState("");
   return (
-    <Box>
-      <HeaderSearch
-        title='Persentase Data Kelahiran & Kematian'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListPersentaseDataKelahiranKematian search={search} />
-    </Box>
+    <Stack gap={"xs"}>
+      <GrafikPersentaseKelahiranKematian />
+    </Stack>
   );
 }
-function ListPersentaseDataKelahiranKematian({ search }: { search: string }) {
-  type PDKMGrafik = {
-    id: string;
-    tahun: string;
-    kematianKasar: number;
-    kematianBayi: number;
-    kelahiranKasar: number;
-  }
-  const statePersentase = useProxy(persentasekelahiran);
-  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)
+function GrafikPersentaseKelahiranKematian() {
   const router = useRouter();
+  type DataTahunan = {
+    tahun: string;
+    totalKelahiran: number;
+    totalKematian: number;
+    data: Array<{
+      id: string;
+      bulan: string;
+      kelahiran: number;
+      kematian: number;
+    }>;
+  };
 
-  const handleDelete = () => {
-    if (selectedId) {
-      statePersentase.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
+  // 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;
+  };
 
-      statePersentase.findMany.load()
+  const statePersentase = useProxy(persentasekelahiran);
+  const [chartData, setChartData] = useState<DataTahunan[]>([]);
+  const isTablet = useMediaQuery('(max-width: 1024px)');
+  const isMobile = useMediaQuery('(max-width: 768px)');
+  const [selectedYear, setSelectedYear] = useState<string | null>(null);
+
+  // Format number to Indonesian locale
+  const formatNumber = (num: number) => {
+    return new Intl.NumberFormat('id-ID').format(num);
+  };
+
+  // Format tooltip
+  const CustomTooltip = ({ active, payload, label }: CustomTooltipProps) => {
+    if (active && payload && payload.length) {
+      return (
+        <Paper p="md" shadow="md" withBorder>
+          <Text size="sm" fw={500} mb={5}>Tahun {label}</Text>
+          <Text size="sm" c="blue">Kelahiran: {formatNumber(payload[0].value)}</Text>
+          <Text size="sm" c="red">Kematian: {formatNumber(payload[1].value)}</Text>
+        </Paper>
+      );
     }
-  }
+    return null;
+  };
 
   useShallowEffect(() => {
-    setMounted(true)
-    statePersentase.findMany.load()
-  }, [])
+    statePersentase.kelahiran.findMany.load(1, 1000); // Load all kelahiran data
+    statePersentase.kematian.findMany.load(1, 1000); // Load all kematian data
+  }, []);
 
   useEffect(() => {
-    setMounted(true);
-    if (statePersentase.findMany.data) {
-      setChartData(statePersentase.findMany.data.map((item) => ({
-        id: item.id,
-        tahun: item.tahun,
-        kematianKasar: Number(item.kematianKasar),
-        kematianBayi: Number(item.kematianBayi),
-        kelahiranKasar: Number(item.kelahiranKasar),
-      })));
+    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);
+      setSelectedYear(sortedData[0]?.tahun || '');
     }
-  }, [statePersentase.findMany.data]);
+  }, [
+    statePersentase.kelahiran.findMany.data,
+    statePersentase.kematian.findMany.data,
+  ]);
 
-  const filteredData = (statePersentase.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.tahun.toLowerCase().includes(keyword) ||
-      item.kematianKasar.toString().toLowerCase().includes(keyword) ||
-      item.kematianBayi.toString().toLowerCase().includes(keyword) ||
-      item.kelahiranKasar.toString().toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!statePersentase.findMany.data) {
+  if (!statePersentase.kelahiran.findMany.data || !statePersentase.kematian.findMany.data) {
     return (
       <Stack>
         <Skeleton h={500} />
       </Stack>
-    )
+    );
   }
 
+  const selectedYearData = chartData.find(d => d.tahun === selectedYear);
+
   return (
-    <Box>
+    <Paper bg={colors['white-1']} p="md">
       <Stack gap={"xs"}>
-        {/* Form Input */}
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulListTab
-            title='List Persentase Data Kelahiran & Kematian'
-            href='/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh>Tahun</TableTh>
-                <TableTh>Kematian Kasar</TableTh>
-                <TableTh>Kematian Bayi</TableTh>
-                <TableTh>kelahiran Kasar</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.tahun}</TableTd>
-                  <TableTd>{item.kematianKasar}</TableTd>
-                  <TableTd>{item.kematianBayi}</TableTd>
-                  <TableTd>{item.kelahiranKasar}</TableTd>
-                  <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button
-                      color='red'
-                      disabled={statePersentase.delete.loading}
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}>
-                      <IconTrash size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
-        </Paper>
-
-
-        {/* Chart */}
-        {!mounted && !chartData ? (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
-              <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-            </Paper>
-          </Box>
-        ) : (
-          <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
-              {mounted && chartData.length > 0 && (
-                <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData} >
-                  <XAxis dataKey="tahun" />
-                  <YAxis />
-                  <Tooltip />
-                  <Legend />
-                  <Bar dataKey="kematianKasar" fill="#f03e3e" name="Kematian Kasar" />
-                  <Bar dataKey="kematianBayi" fill="#ff922b" name="Kematian Bayi" />
-                  <Bar dataKey="kelahiranKasar" fill="#4dabf7" name="Kelahiran Kasar" />
-                </BarChart>
-              )}
-            </Paper>
-          </Box>
-        )}
+        <Title order={3} mb="md">Statistik Kelahiran & Kematian</Title>
+        <Box>
+          <Flex gap={"xs"}>
+            <Box>
+              <ActionIcon size={30} color={colors['blue-button']} onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kelahiran')}>
+                <IconBabyCarriage size={30} color={colors['white-1']} />
+              </ActionIcon>
+            </Box>
+            <Box>
+              <ActionIcon size={30} color={colors['blue-button']} onClick={() => router.push('/admin/kesehatan/data-kesehatan-warga/persentase_data_kelahiran_kematian/kematian')} >
+                <IconGrave2 size={30} color={colors['white-1']} />
+              </ActionIcon>
+            </Box>
+          </Flex>
+        </Box>
       </Stack>
 
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus persentase data kelahiran & kematian ini?'
-      />
-    </Box>
+      {chartData.length === 0 ? (
+        <Text c="dimmed" ta="center" py="xl">
+          Belum ada data yang tersedia untuk ditampilkan
+        </Text>
+      ) : (
+        <>
+          {/* Year Selector */}
+          <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 */}
+          <Center>
+            <Box h={400}>
+              <BarChart
+                width={isMobile ? window.innerWidth * 0.9 : isTablet ? 700 : 800}
+                height={350}
+                data={chartData}
+                margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+              >
+                <XAxis dataKey="tahun" />
+                <YAxis />
+                <Tooltip content={<CustomTooltip />} />
+                <Legend />
+                <Bar dataKey="totalKelahiran" name="Total Kelahiran" fill="#4dabf7" />
+                <Bar dataKey="totalKematian" name="Total Kematian" fill="#f03e3e" />
+              </BarChart>
+            </Box>
+          </Center>
+
+          {/* Yearly Breakdown */}
+          {selectedYearData && (
+            <Box mt="xl">
+              <Title order={4} mb="md">Rincian Tahun {selectedYear}</Title>
+              <Table striped withTableBorder>
+                <Table.Thead>
+                  <Table.Tr>
+                    <Table.Th>Bulan</Table.Th>
+                    <Table.Th ta="right">Kelahiran</Table.Th>
+                    <Table.Th ta="right">Kematian</Table.Th>
+                  </Table.Tr>
+                </Table.Thead>
+                <Table.Tbody>
+                  {selectedYearData.data.map((item) => (
+                    <Table.Tr key={item.id}>
+                      <Table.Td>{item.bulan}</Table.Td>
+                      <Table.Td ta="right">{formatNumber(item.kelahiran)}</Table.Td>
+                      <Table.Td ta="right">{formatNumber(item.kematian)}</Table.Td>
+                    </Table.Tr>
+                  ))}
+                  <Table.Tr style={{ fontWeight: 'bold' }}>
+                    <Table.Td>Total</Table.Td>
+                    <Table.Td ta="right">{formatNumber(selectedYearData.totalKelahiran)}</Table.Td>
+                    <Table.Td ta="right">{formatNumber(selectedYearData.totalKematian)}</Table.Td>
+                  </Table.Tr>
+                </Table.Tbody>
+              </Table>
+            </Box>
+          )}
+        </>
+      )}
+    </Paper>
   );
 }
 

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import infoWabahPenyakit from '@/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -91,57 +92,91 @@ function EditInfoWabahPenyakit() {
         </Button>
       </Box>
       <Stack gap={"xs"}>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Info Wabah Penyakit</Title>
-          <TextInput
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-
-          <TextInput
-            value={formData.deskripsiSingkat}
-            onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <Box>
-            <Text fz="sm" fw="bold">Deskripsi</Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Info Wabah Penyakit</Title>
+            <TextInput
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
             />
-          </Box>
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
+            <TextInput
+              value={formData.deskripsiSingkat}
+              onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+              label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+              placeholder="masukkan deskripsi"
+            />
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
+            <Box>
+              <Text fz="sm" fw="bold">Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              />
+            </Box>
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Dropzone
+                  onDrop={(files) => {
+                    const selectedFile = files[0]; // Ambil file pertama
+                    if (selectedFile) {
+                      setFile(selectedFile);
+                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    }
+                  }}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
+
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
+                )}
+
+              </Box>
+            </Box>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
       </Stack>
     </Box >
   );

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

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import infoWabahPenyakit from '../../../_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit';
+import { Dropzone } from '@mantine/dropzone';
 
 function CreateInfoWabahPenyakit() {
   const router = useRouter();
@@ -94,28 +95,62 @@ function CreateInfoWabahPenyakit() {
               }}
             />
           </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
 
+            </Box>
+          </Box>
           <Button onClick={handleSubmit} bg={colors['blue-button']}>
             Simpan
           </Button>

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import kontakDarurat from '@/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -89,49 +90,82 @@ function EditKontakDarurat() {
         </Button>
       </Box>
       <Stack gap={"xs"}>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Kontak Darurat</Title>
-          <TextInput
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-          <Box>
-            <Text fz="sm" fw="bold">Deskripsi</Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Kontak Darurat</Title>
+            <TextInput
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
             />
-          </Box>
+            <Box>
+              <Text fz="sm" fw="bold">Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              />
+            </Box>
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Dropzone
+                  onDrop={(files) => {
+                    const selectedFile = files[0]; // Ambil file pertama
+                    if (selectedFile) {
+                      setFile(selectedFile);
+                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    }
+                  }}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
-
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
+                )}
+              </Box>
+            </Box>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
       </Stack>
     </Box >
   );

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

@@ -1,113 +1,147 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
-import ApiFetch from '@/lib/api-fetch';
+import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
+import kontakDarurat from '../../../_state/kesehatan/kontak-darurat/kontakDarurat';
+import { Dropzone } from '@mantine/dropzone';
 
 
 function CreateKontakDarurat() {
-    const router = useRouter();
-    const kontakDaruratState = useProxy(kontakDarurat)
-    const [previewImage, setPreviewImage] = useState<string | null>(null);
-    const [file, setFile] = useState<File | null>(null);
-  
-    const resetForm = () => {
-      kontakDaruratState.create.form = {
-        name: "",
-        deskripsi: "",
-        imageId: "",
-      };
-      setPreviewImage(null);
-      setFile(null);
+  const router = useRouter();
+  const kontakDaruratState = useProxy(kontakDarurat)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    kontakDaruratState.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
     };
-  
-    const handleSubmit = async () => {
-      if (!file) {
-        return toast.warn("Pilih file gambar terlebih dahulu");
-      }
-  
-      const res = await ApiFetch.api.fileStorage.create.post({
-        file,
-        name: file.name,
-      });
-  
-      const uploaded = res.data?.data;
-      if (!uploaded?.id) {
-        return toast.error("Gagal upload gambar");
-      }
-  
-      kontakDaruratState.create.form.imageId = uploaded.id;
-  
-      await kontakDaruratState.create.create();
-  
-      resetForm();
-      router.push("/admin/kesehatan/kontak-darurat")
+    setPreviewImage(null);
+    setFile(null);
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
     }
-    return (
-      <Box>
-        <Box mb={10}>
-          <Button variant="subtle" onClick={() => router.back()}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
-          </Button>
-        </Box>
-  
-        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-          <Stack gap="xs">
-            <Title order={3}>Create Kontak Darurat</Title>
-  
-            <TextInput
-              value={kontakDaruratState.create.form.name}
-              onChange={(val) => {
-                kontakDaruratState.create.form.name = val.target.value;
-              }}
-              label={<Text fz="sm" fw="bold">Judul</Text>}
-              placeholder="masukkan judul"
-            />
-  
-            <Box>
-              <Text fz="sm" fw="bold">Deskripsi</Text>
-              <CreateEditor
-                value={kontakDaruratState.create.form.deskripsi}
-                onChange={(val) => {
-                  kontakDaruratState.create.form.deskripsi = val;
-                }}
-              />
-            </Box>
-  
-              <FileInput
-                label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-                value={file}
-                onChange={async (e) => {
-                  if (!e) return;
-                  setFile(e);
-                  const base64 = await e.arrayBuffer().then((buf) =>
-                    'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                  );
-                  setPreviewImage(base64);
-                }}
-              />
-  
-              {previewImage ? (
-                <Image alt="" src={previewImage} w={200} h={200} />
-              ) : (
-                <Center w={200} h={200} bg="gray">
-                  <IconImageInPicture />
-                </Center>
-              )}
-  
-              <Button onClick={handleSubmit} bg={colors['blue-button']}>
-                Simpan 
-              </Button>
-          </Stack>
-        </Paper>
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    kontakDaruratState.create.form.imageId = uploaded.id;
+
+    await kontakDaruratState.create.create();
+
+    resetForm();
+    router.push("/admin/kesehatan/kontak-darurat")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
       </Box>
-    );
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Kontak Darurat</Title>
+
+          <TextInput
+            value={kontakDaruratState.create.form.name}
+            onChange={(val) => {
+              kontakDaruratState.create.form.name = val.target.value;
+            }}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <Box>
+            <Text fz="sm" fw="bold">Deskripsi</Text>
+            <CreateEditor
+              value={kontakDaruratState.create.form.deskripsi}
+              onChange={(val) => {
+                kontakDaruratState.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }
 
 export default CreateKontakDarurat;

src/app/admin/(dashboard)/kesehatan/penanganan-darurat/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import penangananDarurat from '@/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -105,28 +106,61 @@ function EditPenangananDarurat() {
                 onChange={(val) => setFormData({ ...formData, deskripsi: val })}
               />
             </Box>
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Dropzone
+                  onDrop={(files) => {
+                    const selectedFile = files[0]; // Ambil file pertama
+                    if (selectedFile) {
+                      setFile(selectedFile);
+                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    }
+                  }}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-            <FileInput
-              label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-              value={file}
-              onChange={async (e) => {
-                if (!e) return;
-                setFile(e);
-                const base64 = await e.arrayBuffer().then((buf) =>
-                  'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                );
-                setPreviewImage(base64);
-              }}
-            />
-
-            {previewImage ? (
-              <Image alt="" src={previewImage} w={200} h={200} />
-            ) : (
-              <Center w={200} h={200} bg="gray">
-                <IconImageInPicture />
-              </Center>
-            )}
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
 
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
+                )}
+              </Box>
+            </Box>
             <Button onClick={handleSubmit} bg={colors['blue-button']}>
               Simpan
             </Button>

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

@@ -1,8 +1,9 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -79,31 +80,65 @@ function CreatePenangananDarurat() {
               }}
             />
           </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-            <FileInput
-              label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-              value={file}
-              onChange={async (e) => {
-                if (!e) return;
-                setFile(e);
-                const base64 = await e.arrayBuffer().then((buf) =>
-                  'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                );
-                setPreviewImage(base64);
-              }}
-            />
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
-            {previewImage ? (
-              <Image alt="" src={previewImage} w={200} h={200} />
-            ) : (
-              <Center w={200} h={200} bg="gray">
-                <IconImageInPicture />
-              </Center>
-            )}
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
 
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>
-              Simpan 
-            </Button>
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit} bg={colors['blue-button']}>
+            Simpan
+          </Button>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import posyandustate from '@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -24,6 +25,7 @@ function EditPosyandu() {
     nomor: statePosyandu.edit.form.nomor || '',
     deskripsi: statePosyandu.edit.form.deskripsi || '',
     imageId: statePosyandu.edit.form.imageId || '',
+    jadwalPelayanan: statePosyandu.edit.form.jadwalPelayanan || '',
   });
 
   useEffect(() => {
@@ -39,6 +41,7 @@ function EditPosyandu() {
             nomor: data.nomor || '',
             deskripsi: data.deskripsi || '',
             imageId: data.imageId || '',
+            jadwalPelayanan: data.jadwalPelayanan || '',
           });
 
           if (data?.image?.link) {
@@ -61,6 +64,7 @@ function EditPosyandu() {
         nomor: formData.nomor,
         deskripsi: formData.deskripsi,
         imageId: formData.imageId,
+        jadwalPelayanan: formData.jadwalPelayanan,
       }
 
       if (file) {
@@ -94,25 +98,62 @@ function EditPosyandu() {
       <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Edit Posyandu</Title>
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <TextInput
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
@@ -135,6 +176,16 @@ function EditPosyandu() {
               }}
             />
           </Box>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Jadwal Pelayanan</Text>
+            <EditEditor
+              value={formData.jadwalPelayanan}
+              onChange={(htmlContent) => {
+                setFormData({ ...formData, jadwalPelayanan: htmlContent });
+                statePosyandu.edit.form.jadwalPelayanan = htmlContent;
+              }}
+            />
+          </Box>
           <Group>
             <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>

src/app/admin/(dashboard)/kesehatan/posyandu/[id]/page.tsx

@@ -63,6 +63,10 @@ function DetailPosyandu() {
                   <Text fz={"lg"} fw={"bold"}>Deskripsi Posyandu</Text>
                   <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePosyandu.findUnique.data.deskripsi }} />
                 </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Jadwal Pelayanan</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePosyandu.findUnique.data.jadwalPelayanan }} />
+                </Box>
                 <Box>
                   <Text fz={"lg"} fw={"bold"}>Gambar</Text>
                   <Image src={statePosyandu.findUnique.data.image?.link} alt="gambar" />

src/app/admin/(dashboard)/kesehatan/posyandu/create/page.tsx

@@ -1,8 +1,9 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -22,6 +23,7 @@ function CreatePosyandu() {
       nomor: "",
       deskripsi: "",
       imageId: "",
+      jadwalPelayanan: "",
     };
 
     setFile(null);
@@ -65,25 +67,62 @@ function CreatePosyandu() {
       <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Posyandu</Title>
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
             placeholder='Masukkan nama posyandu'
@@ -109,6 +148,15 @@ function CreatePosyandu() {
               }}
             />
           </Box>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Jadwal Pelayanan</Text>
+            <CreateEditor
+              value={statePosyandu.create.form.jadwalPelayanan}
+              onChange={(htmlContent) => {
+                statePosyandu.create.form.jadwalPelayanan = htmlContent;
+              }}
+            />
+          </Box>
           <Group>
             <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, 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 ListPosyandu({ search }: { search: string }) {
   const statePosyandu = useProxy(posyandustate)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = statePosyandu.findMany;
+
   useShallowEffect(() => {
-    statePosyandu.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (statePosyandu.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.nomor.toString().toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || [];
 
-  if (!statePosyandu.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
@@ -70,10 +72,20 @@ function ListPosyandu({ search }: { search: string }) {
             <TableTbody>
               {filteredData.map((item) => (
                 <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>{item.nomor}</TableTd>
                   <TableTd>
-                    <Text fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    <Box w={100}>
+                      <Text truncate="end" lineClamp={1} fz={"sm"}>{item.name}</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" lineClamp={1} fz={"sm"}>{item.nomor}</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                    </Box>
                   </TableTd>
                   <TableTd>
                     <Button onClick={() => router.push(`/admin/kesehatan/posyandu/${item.id}`)}>
@@ -86,6 +98,15 @@ function ListPosyandu({ search }: { search: string }) {
           </Table>
         </Box>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import programKesehatan from '@/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -91,57 +92,90 @@ function EditProgramKesehatan() {
         </Button>
       </Box>
       <Stack gap={"xs"}>
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Edit Program Kesehatan</Title>
-          <TextInput
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-
-          <TextInput
-            value={formData.deskripsiSingkat}
-            onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <Box>
-            <Text fz="sm" fw="bold">Deskripsi</Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Program Kesehatan</Title>
+            <TextInput
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              label={<Text fz="sm" fw="bold">Judul</Text>}
+              placeholder="masukkan judul"
             />
-          </Box>
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
+            <TextInput
+              value={formData.deskripsiSingkat}
+              onChange={(e) => setFormData({ ...formData, deskripsiSingkat: e.target.value })}
+              label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+              placeholder="masukkan deskripsi"
+            />
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
+            <Box>
+              <Text fz="sm" fw="bold">Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              />
+            </Box>
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Dropzone
+                  onDrop={(files) => {
+                    const selectedFile = files[0]; // Ambil file pertama
+                    if (selectedFile) {
+                      setFile(selectedFile);
+                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    }
+                  }}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-          <Button onClick={handleSubmit} bg={colors['blue-button']}>
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
+
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
+                )}
+              </Box>
+            </Box>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
       </Stack>
     </Box >
   );

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

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import programKesehatan from '../../../_state/kesehatan/program-kesehatan/programKesehatan';
+import { Dropzone } from '@mantine/dropzone';
 
 function CreateProgramKesehatan() {
   const router = useRouter();
@@ -94,28 +95,61 @@ function CreateProgramKesehatan() {
               }}
             />
           </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
-
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Button onClick={handleSubmit} bg={colors['blue-button']}>
             Simpan
           </Button>

src/app/admin/(dashboard)/kesehatan/puskesmas/[id]/edit/page.tsx

@@ -4,8 +4,9 @@
 import puskesmasState from '@/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { ChangeEvent, useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -141,22 +142,6 @@ function EditPuskesmas() {
     }
   };
 
-  const handleFileChange = (selectedFile: File | null) => {
-    if (selectedFile) {
-      setFile(selectedFile);
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        if (e.target?.result) {
-          setPreviewImage(e.target.result as string);
-        }
-      };
-      reader.readAsDataURL(selectedFile);
-    } else {
-      setFile(null);
-      setPreviewImage(null);
-    }
-  };
-
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData(prev => ({
@@ -186,7 +171,7 @@ function EditPuskesmas() {
         <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
           <Stack gap="xs">
             <Title order={3}>Edit Puskesmas</Title>
-            
+
             <TextInput
               label={<Text fz="sm" fw="bold">Nama Puskesmas</Text>}
               placeholder="masukkan nama puskesmas"
@@ -252,26 +237,66 @@ function EditPuskesmas() {
               onChange={(e) => handleNestedChange('kontak', 'kontakUGD', e.target.value)}
             />
 
-            <FileInput
-              placeholder="Pilih gambar"
-              label="Gambar"
-              accept="image/*"
-              leftSection={<IconImageInPicture size={16} />}
-              value={file}
-              onChange={handleFileChange}
-            />
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Dropzone
+                  onDrop={(files) => {
+                    const selectedFile = files[0]; // Ambil file pertama
+                    if (selectedFile) {
+                      setFile(selectedFile);
+                      setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                    }
+                  }}
+                  onReject={() => toast.error('File tidak valid.')}
+                  maxSize={5 * 1024 ** 2} // Maks 5MB
+                  accept={{ 'image/*': [] }}
+                >
+                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                    <Dropzone.Accept>
+                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                    </Dropzone.Accept>
+                    <Dropzone.Reject>
+                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                    </Dropzone.Reject>
+                    <Dropzone.Idle>
+                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                    </Dropzone.Idle>
 
-            {previewImage ? (
-              <Image alt="Preview" src={previewImage} w={200} h={200} />
-            ) : (
-              <Center w={200} h={200} bg="gray">
-                <IconImageInPicture />
-              </Center>
-            )}
+                    <div>
+                      <Text size="xl" inline>
+                        Drag gambar ke sini atau klik untuk pilih file
+                      </Text>
+                      <Text size="sm" c="dimmed" inline mt={7}>
+                        Maksimal 5MB dan harus format gambar
+                      </Text>
+                    </div>
+                  </Group>
+                </Dropzone>
 
-            <Button 
-              onClick={handleSubmit} 
-              bg={colors['blue-button']} 
+                {/* Tampilkan preview kalau ada */}
+                {previewImage && (
+                  <Box mt="sm">
+                    <Image
+                      src={previewImage}
+                      alt="Preview"
+                      style={{
+                        maxWidth: '100%',
+                        maxHeight: '200px',
+                        objectFit: 'contain',
+                        borderRadius: '8px',
+                        border: '1px solid #ddd',
+                      }}
+                    />
+                  </Box>
+                )}
+
+              </Box>
+            </Box>
+
+            <Button
+              onClick={handleSubmit}
+              bg={colors['blue-button']}
               loading={statePuskesmas.edit.loading}
             >
               Simpan Perubahan

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

@@ -1,8 +1,9 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -38,7 +39,7 @@ function CreatePuskesmas() {
     setFile(null);
     setPreviewImage(null);
   };
-  
+
 
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -144,7 +145,7 @@ function CreatePuskesmas() {
               statePuskesmas.create.form.kontak.facebook = e.target.value;
             }}
           />
-           <TextInput
+          <TextInput
             label={<Text fz="sm" fw="bold">Kontak UGD</Text>}
             placeholder="masukkan kontak ugd"
             value={statePuskesmas.create.form.kontak.kontakUGD}
@@ -153,27 +154,61 @@ function CreatePuskesmas() {
             }}
           />
 
-          <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg="gray">
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Button onClick={handleSubmit} bg={colors['blue-button']}>
             Simpan Puskesmas
           </Button>

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/indeks-kepuasan-masyarakat/page.tsx

@@ -36,6 +36,10 @@ function Page() {
   const [barChartData, setBarChartData] = useState<Array<{ month: string; count: number }>>([]);
 
   useShallowEffect(() => {
+    if (!data && !loading) {
+      state.findMany.load();
+      return;
+    }
     if (data) {
       // Hitung total berdasarkan jenis kelamin
       const totalLaki = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'laki-laki').length;

src/app/admin/(dashboard)/ppid/profile-ppid/[id]/page.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Alert, Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Alert, Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
 
 import ApiFetch from '@/lib/api-fetch';
-import { IconAlertCircle, IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Dropzone } from '@mantine/dropzone';
+import { IconAlertCircle, IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { toast } from 'react-toastify';
 import Biodata from './biodata/biodataForm';
@@ -58,21 +59,6 @@ function EditProfilePPID() {
     stateProfilePPID.editForm.updateField(field as any, value);
   };
 
-  const handleFileChange = (newFile: File | null) => {
-    if (!newFile) {
-      setFile(null);
-      return;
-    }
-
-    setFile(newFile);
-
-    const reader = new FileReader();
-    reader.onload = (event) => {
-      setPreviewImage(event.target?.result as string);
-    };
-    reader.readAsDataURL(newFile);
-  };
-
   const handleSubmit = async () => {
     if (isSubmitting || !stateProfilePPID.editForm.form.name.trim()) {
       toast.error("Nama wajib diisi");
@@ -183,26 +169,61 @@ function EditProfilePPID() {
               />
 
               {/* File Upload */}
-              <FileInput
-                label={<Text fz="sm" fw="bold">Upload Gambar Baru (Opsional)</Text>}
-                value={file}
-                onChange={handleFileChange}
-                accept="image/*"
-              />
-
-              {/* Preview Gambar */}
               <Box>
-                <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
-                {previewImage ? (
-                  <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
-                ) : (
-                  <Center w={200} h={200} bg="gray.2">
-                    <Stack align="center" gap="xs">
-                      <IconImageInPicture size={48} color="gray" />
-                      <Text size="sm" c="gray">Tidak ada gambar</Text>
-                    </Stack>
-                  </Center>
-                )}
+                <Text fz={"md"} fw={"bold"}>Gambar</Text>
+                <Box>
+                  <Dropzone
+                    onDrop={(files) => {
+                      const selectedFile = files[0]; // Ambil file pertama
+                      if (selectedFile) {
+                        setFile(selectedFile);
+                        setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                      }
+                    }}
+                    onReject={() => toast.error('File tidak valid.')}
+                    maxSize={5 * 1024 ** 2} // Maks 5MB
+                    accept={{ 'image/*': [] }}
+                  >
+                    <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                      <Dropzone.Accept>
+                        <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                      </Dropzone.Accept>
+                      <Dropzone.Reject>
+                        <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                      </Dropzone.Reject>
+                      <Dropzone.Idle>
+                        <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                      </Dropzone.Idle>
+
+                      <div>
+                        <Text size="xl" inline>
+                          Drag gambar ke sini atau klik untuk pilih file
+                        </Text>
+                        <Text size="sm" c="dimmed" inline mt={7}>
+                          Maksimal 5MB dan harus format gambar
+                        </Text>
+                      </div>
+                    </Group>
+                  </Dropzone>
+
+                  {/* Tampilkan preview kalau ada */}
+                  {previewImage && (
+                    <Box mt="sm">
+                      <Image
+                        src={previewImage}
+                        alt="Preview"
+                        style={{
+                          maxWidth: '100%',
+                          maxHeight: '200px',
+                          objectFit: 'contain',
+                          borderRadius: '8px',
+                          border: '1px solid #ddd',
+                        }}
+                      />
+                    </Box>
+                  )}
+
+                </Box>
               </Box>
 
               {/* Rich Components */}

src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/[id]/page.tsx

@@ -93,12 +93,15 @@ function EditPosisiOrganisasiPPID() {
             label={<Text fw={"bold"} fz={"sm"}>Nama Posisi Organisasi</Text>}
             placeholder='Masukkan nama posisi organisasi'
           />
-          <EditEditor
-            value={formData.deskripsi}
-            onChange={(htmlContent) => {
-              setFormData({ ...formData, deskripsi: htmlContent });
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData({ ...formData, deskripsi: htmlContent });
+              }}
+            />
+          </Box>
           <TextInput
             value={formData.hierarki}
             onChange={(e) => setFormData({ ...formData, hierarki: parseInt(e.target.value) })}

src/app/admin/(dashboard)/ppid/struktur-ppid/posisi-organisasi/create/page.tsx

@@ -3,7 +3,7 @@
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -46,12 +46,15 @@ function CreatePosisiOrganisasiPPID() {
                         value={stateOrganisasi.create.form.nama}
                         onChange={(e) => (stateOrganisasi.create.form.nama = e.currentTarget.value)}
                     />
-                    <CreateEditor
-                        value={stateOrganisasi.create.form.deskripsi}
-                        onChange={(htmlContent) => {
-                            stateOrganisasi.create.form.deskripsi = htmlContent;
-                        }}
-                    />
+                    <Box>
+                        <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+                        <CreateEditor
+                            value={stateOrganisasi.create.form.deskripsi}
+                            onChange={(htmlContent) => {
+                                stateOrganisasi.create.form.deskripsi = htmlContent;
+                            }}
+                        />
+                    </Box>
                     <TextInput
                         label="Hierarki"
                         type="number"

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/data_kesehatan_warga/persentase_kelahiran_kematian/create.ts

@@ -1,32 +1,22 @@
 import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
-type FormCreate = Prisma.DataKematian_KelahiranGetPayload<{
-    select: {
-        tahun: true;
-        kematianKasar: true;
-        kematianBayi: true;
-        kelahiranKasar: true;
-    };
-}>;
+type FormCreate = {
+    kematianId: string;
+    kelahiranId: string;
+};
 
 export default async function persentaseKelahiranKematianCreate(context: Context) {
     const body = context.body as FormCreate
 
     const created = await prisma.dataKematian_Kelahiran.create({
         data: {
-            tahun: body.tahun,
-            kematianKasar: body.kematianKasar,
-            kematianBayi: body.kematianBayi,
-            kelahiranKasar: body.kelahiranKasar,
+            kematianId: body.kematianId,
+            kelahiranId: body.kelahiranId,
         },
         select: {
-            id: true,
-            tahun: true,
-            kematianKasar: true,
-            kematianBayi: true,
-            kelahiranKasar: true,
+            kematianId: true,
+            kelahiranId: true,
         }
     })
     return{

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

@@ -1,9 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function persentaseKelahiranKematianFindMany(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 = [
+      { kematian: { nama: { contains: search, mode: 'insensitive' } } },
+      { kelahiran: { nama: { contains: search, mode: 'insensitive' } } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.dataKematian_Kelahiran.findMany({
+        where,
+        include: {
+          kematian: true,
+          kelahiran: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.dataKematian_Kelahiran.count({ where }),
+    ]);
 
-export default async function persentaseKelahiranKematianFindMany() {
-    const res = await prisma.dataKematian_Kelahiran.findMany();
     return {
-        data: res
-    }
+      success: true,
+      message: "Berhasil ambil data persentase kelahiran kematian 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 persentase kelahiran kematian",
+    };
+  }
 }
-    
+
+export default persentaseKelahiranKematianFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/findUnique.ts

@@ -22,6 +22,10 @@ export default async function persentaseKelahiranKematianFindUnique(request: Req
 
         const data = await prisma.dataKematian_Kelahiran.findUnique({
             where: { id },
+            include: {
+                kematian: true,
+                kelahiran: true,
+            },
         });
 
         if (!data) {

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

@@ -16,10 +16,8 @@ const PersentaseKelahiranKematian = new Elysia({
   .get("/find-many", persentaseKelahiranKematianFindMany)
   .post("/create", persentaseKelahiranKematianCreate, {
     body: t.Object({
-      tahun: t.String(),
-      kematianKasar: t.String(),
-      kematianBayi: t.String(),
-      kelahiranKasar: t.String(),
+      kematianId: t.String(),
+      kelahiranId: t.String(),
     }),
   })
   .put("/:id", persentaseKelahiranKematianUpdate, {
@@ -27,10 +25,8 @@ const PersentaseKelahiranKematian = new Elysia({
       id: t.String(),
     }),
     body: t.Object({
-      tahun: t.String(),
-      kematianKasar: t.String(),
-      kematianBayi: t.String(),
-      kelahiranKasar: t.String(),
+      kematianId: t.String(),
+      kelahiranId: t.String(),
     }),
   })
   .delete("/del/:id", persentaseKelahiranKematianDelete, {

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

@@ -0,0 +1,34 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    nama: string;
+    tanggal: string;
+    jenisKelamin: string;
+    alamat: string;
+}
+
+export default async function kelahiranCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    const created = await prisma.kelahiran.create({
+        data: {
+            nama: body.nama,
+            tanggal: new Date(body.tanggal),
+            jenisKelamin: body.jenisKelamin,
+            alamat: body.alamat,
+        },
+        select: {
+            nama: true,
+            tanggal: true,
+            jenisKelamin: true,
+            alamat: true,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create kelahiran",
+        data: created,
+    };
+}
+    

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/kelahiran/del.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/kelahiran/findMany.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function kelahiranFindMany(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' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.kelahiran.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kelahiran.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data kelahiran 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 kelahiran",
+    };
+  }
+}
+
+export default kelahiranFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/kelahiran/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function kelahiranFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.kelahiran.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get data kelahiran",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

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

@@ -0,0 +1,39 @@
+import Elysia, { t } from "elysia";
+import kelahiranCreate from "./create";
+import kelahiranDelete from "./del";
+import kelahiranFindMany from "./findMany";
+import kelahiranFindUnique from "./findUnique";
+import kelahiranUpdate from "./updt";
+
+const Kelahiran = new Elysia({
+    prefix: "/kelahiran",
+    tags: ["Kesehatan / Data Kesehatan Warga / Persentase Kelahiran Kematian / Kelahiran"],
+})
+
+ .post("/create", kelahiranCreate, {
+    body: t.Object({
+      nama: t.String(),
+      tanggal: t.String(),
+      jenisKelamin: t.String(),
+      alamat: t.String(),
+    }),
+  })
+
+  .get("/findMany", kelahiranFindMany)
+  .get("/:id", async (context) => {
+    const response = await kelahiranFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", kelahiranUpdate, {
+    body: t.Object({
+      nama: t.String(),
+      tanggal: t.String(),
+      jenisKelamin: t.String(),
+      alamat: t.String(),
+    }),
+  })
+  .delete("/del/:id", kelahiranDelete);
+
+export default Kelahiran;

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

@@ -0,0 +1,34 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    nama: string;
+    tanggal: string;
+    jenisKelamin: string;
+    alamat: string;
+}
+
+export default async function kelahiranUpdate(context: Context) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.kelahiran.update({
+            where: { id },
+            data: {
+                nama: body.nama,
+                tanggal: new Date(body.tanggal),
+                jenisKelamin: body.jenisKelamin,
+                alamat: body.alamat,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil mengupdate data kelahiran",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating data kelahiran:", error);
+        throw new Error("Gagal mengupdate data kelahiran: " + (error as Error).message);
+    }
+}

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

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  nama: string;
+  tanggal: string;
+  jenisKelamin: string;
+  alamat: string;
+  penyebab: string;
+};
+
+export default async function kematianCreate(context: Context) {
+  const body = context.body as FormCreate;
+
+  const created = await prisma.kematian.create({
+    data: {
+      nama: body.nama,
+      tanggal: new Date(body.tanggal),
+      jenisKelamin: body.jenisKelamin,
+      alamat: body.alamat,
+      penyebab: body.penyebab,
+    },
+    select: {
+      nama: true,
+      tanggal: true,
+      jenisKelamin: true,
+      alamat: true,
+      penyebab: true,
+    },
+  });
+  return {
+    success: true,
+    message: "Success create kematian",
+    data: created,
+  };
+}

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/kematian/del.ts

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

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/kematian/findMany.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function kematianFindMany(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' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.kematian.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kematian.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil data kematian 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 kematian",
+    };
+  }
+}
+
+export default kematianFindMany;

src/app/api/[[...slugs]]/_lib/kesehatan/data_kesehatan_warga/persentase_kelahiran_kematian/kematian/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function kematianFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.kematian.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get data kematian",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

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

@@ -0,0 +1,41 @@
+import Elysia, { t } from "elysia";
+import kematianCreate from "./create";
+import kematianDelete from "./del";
+import kematianFindMany from "./findMany";
+import kematianFindUnique from "./findUnique";
+import kematianUpdate from "./updt";
+
+const Kematian = new Elysia({
+    prefix: "/kematian",
+    tags: ["Kesehatan / Data Kesehatan Warga / Persentase Kelahiran Kematian / Kematian"],
+})
+
+ .post("/create", kematianCreate, {
+    body: t.Object({
+      nama: t.String(),
+      tanggal: t.String(),
+      jenisKelamin: t.String(),
+      alamat: t.String(),
+      penyebab: t.String(),
+    }),
+  })
+
+  .get("/findMany", kematianFindMany)
+  .get("/:id", async (context) => {
+    const response = await kematianFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", kematianUpdate, {
+    body: t.Object({
+      nama: t.String(),
+      tanggal: t.String(),
+      jenisKelamin: t.String(),
+      alamat: t.String(),
+      penyebab: t.String(),
+    }),
+  })
+  .delete("/del/:id", kematianDelete);
+
+export default Kematian;

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

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    nama: string;
+    tanggal: string;
+    jenisKelamin: string;
+    alamat: string;
+    penyebab: string;
+}
+
+export default async function kematianUpdate(context: Context) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.kematian.update({
+            where: { id },
+            data: {
+                nama: body.nama,
+                tanggal: new Date(body.tanggal),
+                jenisKelamin: body.jenisKelamin,
+                alamat: body.alamat,
+                penyebab: body.penyebab,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil mengupdate data kematian",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating data kematian:", error);
+        throw new Error("Gagal mengupdate data kematian: " + (error as Error).message);
+    }
+}

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

@@ -11,11 +11,9 @@ export default async function persentaseKelahiranKematianUpdate(context: Context
         }
     }
 
-    const {tahun, kematianKasar, kematianBayi, kelahiranKasar} = context.body as {
-        tahun: string;
-        kematianKasar: string;
-        kematianBayi: string;
-        kelahiranKasar: string;
+    const {kematianId, kelahiranId} = context.body as {
+        kematianId: string;
+        kelahiranId: string;
     }
 
     const existing = await prisma.dataKematian_Kelahiran.findUnique({
@@ -34,10 +32,8 @@ export default async function persentaseKelahiranKematianUpdate(context: Context
     const updated = await prisma.dataKematian_Kelahiran.update({
         where: { id },
         data: {
-            tahun,
-            kematianKasar,
-            kematianBayi,
-            kelahiranKasar,
+            kematianId,
+            kelahiranId,
         },
     })
 

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

@@ -16,6 +16,9 @@ import Puskesmas from "./puskesmas";
 import FasilitasKesehatan from "./data_kesehatan_warga/fasilitas_kesehatan";
 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({
@@ -38,5 +41,8 @@ const Kesehatan = new Elysia({
 .use(InfoWabahPenyakit)
 .use(FasilitasKesehatan)
 .use(JadwalKegiatan)
-.use(ArtikelKesehatan);
+.use(ArtikelKesehatan)
+.use(Kelahiran)
+.use(Kematian)
+.use(DokterTenagaMedis)
 export default Kesehatan;

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

@@ -8,6 +8,7 @@ type FormCreate = Prisma.PosyanduGetPayload<{
         nomor: true;
         deskripsi: true;
         imageId: true;
+        jadwalPelayanan: true;
     };
 }>;
 export default async function posyanduCreate(context: Context) {
@@ -19,6 +20,7 @@ export default async function posyanduCreate(context: Context) {
             nomor: body.nomor,
             deskripsi: body.deskripsi,
             imageId: body.imageId,
+            jadwalPelayanan: body.jadwalPelayanan,
         }
     })
     return {

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

@@ -1,26 +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 posyanduFindMany() {
-try {
-    const data = await prisma.posyandu.findMany({
-        where: {
-            isActive: true,
-        },
+async function posyanduFindMany(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' } },
+      { nomor: { contains: search, mode: 'insensitive' } },
+      { jadwalPelayanan: { contains: search, mode: 'insensitive' } }
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.posyandu.findMany({
+        where,
         include: {
-            image: true,
-        }
-    })
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.posyandu.count({ where }),
+    ]);
+
     return {
-        success: true,
-        message: "Success fetch posyandu",
-        data,
-    }
-} catch (error) {
-    console.error("Find many error:", error);
+      success: true,
+      message: "Berhasil ambil posyandu dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di posyanduFindMany paginated:", e);
     return {
-        success: false,
-        message: "Failed fetch posyandu",
-    }
+      success: false,
+      message: "Gagal mengambil data posyandu",
+    };
+  }
 }
 
-}
+export default posyanduFindMany;

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

@@ -15,6 +15,7 @@ const Posyandu = new Elysia({
         nomor: t.String(),
         deskripsi: t.String(),
         imageId: t.String(),
+        jadwalPelayanan: t.String(),
     })
 })
 .get("/find-many", posyanduFindMany)
@@ -35,6 +36,7 @@ const Posyandu = new Elysia({
             nomor: t.String(),
             deskripsi: t.String(),
             imageId: t.String(),
+            jadwalPelayanan: t.String(),
         })
     }
 )

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

@@ -11,6 +11,7 @@ type FormUpdate = Prisma.PosyanduGetPayload<{
         nomor: true;
         deskripsi: true;
         imageId: true;
+        jadwalPelayanan: true;
     }
 }>
 
@@ -24,6 +25,7 @@ export default async function posyanduUpdate(context: Context) {
             nomor,
             deskripsi,
             imageId,
+            jadwalPelayanan,
         } = body;
 
         if(!id) {
@@ -79,6 +81,7 @@ export default async function posyanduUpdate(context: Context) {
                 nomor,
                 deskripsi,
                 imageId,
+                jadwalPelayanan,
             }
         })
 

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

@@ -1,49 +1,95 @@
+'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 { Anchor, Box, Center, ColorSwatch, Divider, Flex, Image, 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 GrafikPenyakit from './grafik-penyakit/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 +107,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
@@ -193,7 +226,7 @@ function Page() {
                         </Text>
                       </Anchor>
                     </Box>
-                    <Divider color={colors['blue-button']} px={'xl'}/>
+                    <Divider color={colors['blue-button']} px={'xl'} />
                   </Stack>
                 </Paper>
               </Box>
@@ -233,7 +266,7 @@ function Page() {
                         09:00-14:00 WITA
                       </Text>
                       <Text fz={'h4'}>
-                      Puskesmas Abiansemal III
+                        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'} >
@@ -249,16 +282,16 @@ function Page() {
                 <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 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
+                        Tips Mencegah Demam Berdarah Saat Musim Hujan
                       </Text>
                       <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                        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.
+                        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'} >
@@ -268,16 +301,16 @@ function Page() {
                     </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 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
+                        Tips Mencegah Demam Berdarah Saat Musim Hujan
                       </Text>
                       <Text fz={'h6'} pb={10}>
-                      Diposting: 12 Februari 2025 | Dinas Kesehatan
+                        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.
+                        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'} >

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

@@ -1,36 +1,58 @@
+'use client'
 import colors from "@/con/colors";
-import { Stack, Box, Text, SimpleGrid, Paper, Center, Image, Flex, List, ListItem } from "@mantine/core";
+import { Box, Center, Flex, Image, List, ListItem, Pagination, Paper, SimpleGrid, Skeleton, Spoiler, Stack, Text, TextInput } from "@mantine/core";
 import BackButton from "../../desa/layanan/_com/BackButto";
+// import { useTransitionRouter } from "next-view-transitions";
+import posyandustate from "@/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu";
+import { useShallowEffect } from "@mantine/hooks";
+import { useProxy } from "valtio/utils";
+import { useState } from "react";
+import { IconSearch } from "@tabler/icons-react";
 
-const data = [
-    {
-        id: 1,
-        judul: 'Posyandu Banjar Bucu',
-        nomor: '082345678910',
-        image: '/api/img/posyandu.png'
-    },
-    {
-        id: 2,
-        judul: 'Posyandu Banjar Bucu',
-        nomor: '082345678910',
-        image: '/api/img/posyandu.png'
-    },
-    {
-        id: 3,
-        judul: 'Posyandu Banjar Bucu',
-        nomor: '082345678910',
-        image: '/api/img/posyandu.png'
-    }
-]
 export default function Page() {
+    const state = useProxy(posyandustate)
+    // const router = useTransitionRouter()
+    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 />
+                <Flex mt={10} justify={"space-between"} align={"center"}>
+                    <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                        Posyandu Darmasaba
+                    </Text>
+                    <TextInput
+                        placeholder="Cari Posyandu"
+                        radius="lg"
+                        leftSection={<IconSearch size={20} />}
+                        w={{ base: "25%", md: "30%" }}
+                        value={search}
+                        onChange={(e) => setSearch(e.currentTarget.value)}
+                    />
+                </Flex>
             </Box>
-            <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-                Posyandu Darmasaba
-            </Text>
             <Box px={{ base: "md", md: 100 }}>
                 <Stack gap={'lg'}>
                     <SimpleGrid
@@ -39,49 +61,46 @@ export default function Page() {
                             base: 1,
                             md: 3,
                         }}>
-                        {data.map((v, k) => {
+                        {data?.map((v, k) => {
                             return (
                                 <Paper key={k} p={"xl"} bg={colors["white-trans-1"]}>
                                     <Stack gap={'xs'}>
                                         <Text c={colors["blue-button"]} fw={"bold"} fz={"h3"}>
-                                            {v.judul}
-                                        </Text>
-                                        <Text fz={'h4'}>
-                                            {v.nomor}
+                                            {v.name}
                                         </Text>
                                         <Center>
-                                            <Image src={v.image} alt="" />
+                                            <Image src={v.image.link} alt="" />
                                         </Center>
                                         <Text fz={'h4'}>
-                                            Jadwal Pelayanan
-                                        </Text>
-                                        <Text fz={'h4'}>
-                                            Setiap tanggal 5, Pukul 09:00 -
-                                            12:00 WITA
+                                            No.Telp : {v.nomor}
                                         </Text>
                                         <Box>
-                                            <Flex justify={'space-between'}>
-                                                <Text fz={'h4'}>Balita</Text>
-                                                <Box>
-                                                    <Text fz={'h4'}>Selasa minggu pertama</Text>
-                                                    <Text fz={'h4'}>(09:00-11:00 WITA)</Text>
-                                                </Box>
-                                            </Flex>
-                                        </Box>
-                                        <Box>
-                                            <Flex justify={'space-between'}>
-                                                <Text fz={'h4'}>Lansia</Text>
-                                                <Box>
-                                                    <Text fz={'h4'}>Selasa minggu pertama</Text>
-                                                    <Text fz={'h4'}>(09:00-11:00 WITA)</Text>
-                                                </Box>
-                                            </Flex>
+                                            <Text fz={'h4'}>
+                                                Jadwal Pelayanan
+                                            </Text>
+                                            <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: v.jadwalPelayanan }} />
                                         </Box>
+                                        <Spoiler
+                                            maxHeight={60} // tinggi maksimum sebelum di-collapse
+                                            showLabel="Read more"
+                                            hideLabel="Read less"
+                                        >
+                                            <Text fz={'h4'} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
+                                        </Spoiler>
                                     </Stack>
                                 </Paper>
                             )
                         })}
                     </SimpleGrid>
+                    <Center>
+                        <Pagination
+                            value={page}
+                            onChange={(newPage) => load(newPage)} // ini penting!
+                            total={totalPages}
+                            mt="md"
+                            mb="md"
+                        />
+                    </Center>
                     <Text fz={'h4'} fw={"bold"}>
                         Pelayanan Posyandu
                     </Text>

src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx

@@ -1,5 +1,5 @@
 import profileLandingPageState from "@/app/admin/(dashboard)/_state/landing-page/profile";
-import { Center, Image, Paper, SimpleGrid } from "@mantine/core";
+import { Center, Image, Paper, SimpleGrid, Text } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { motion } from 'framer-motion';
 import { useTransitionRouter } from 'next-view-transitions';
@@ -25,15 +25,21 @@ function ModuleItem({ data }: { data: ProgramInovasiItem }) {
         <motion.div
           whileHover={{ scale: 1.05 }}
         >
-          <Image src={data.image?.link || ""} alt="icon"
-            fit="contain"
-            sizes="100%"
-            loading="lazy"
+          {data.image?.link ? (
+            <Image src={data.image.link} alt="icon"
+              fit="contain"
+              sizes="100%"
+              loading="lazy"
             style={{
               objectFit: "contain",
               objectPosition: "center"
             }}
           />
+        ) : (
+          <Text>
+            -
+          </Text>
+        )}
         </motion.div>
       </Center>
     </Paper>

src/app/darmasaba/_com/main-page/landing-page/ProfileView.tsx

@@ -23,13 +23,17 @@ function ProfileView({ data }: ProfileViewProps) {
       }}
       px="xl"
     >
-      {data.image?.link && (
+      {data.image?.link ? (
         <Image
           src={data.image.link}
           alt={data.name || "Profile image"}
           sizes="100%"
           fit="contain"
         />
+      ): (
+        <Text>
+          -
+        </Text>
       )}
       <Box
         pos="absolute"

src/app/darmasaba/_com/main-page/landing-page/SosmedView.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Flex, Image } from "@mantine/core";
+import { ActionIcon, Flex, Image, Text } from "@mantine/core";
 import { Prisma } from "@prisma/client";
 import { useTransitionRouter } from "next-view-transitions";
 
@@ -20,7 +20,13 @@ function SosmedView({data} : {data : Prisma.MediaSosialGetPayload<{ include: { i
                 router.push(item.iconUrl || "");
               }}
             >
-              <Image src={item.image?.link || ""} alt="icon" loading="lazy" />
+              {item.image?.link ? (
+                <Image src={item.image.link} alt="icon" loading="lazy" />
+              ) : (
+                <Text>
+                  none
+                </Text>
+              )}
             </ActionIcon>
           );
         })}