Fix UI & API Admin Menu Kesehatan, Submenu Data Kesehatan Warga Bagian ChartBar

prisma/schema.prisma

@@ -911,15 +911,42 @@ 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 ========================================= //
@@ -1027,16 +1054,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/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/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, IconEdit, 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)
+  }, [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}`)}>
+                      <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 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,229 @@
+/* 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, Button, Center, Flex, Paper, 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">
+            <Text mb="xs" fw={500}>Pilih Tahun:</Text>
+            <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
+              {chartData.map(({ tahun }) => (
+                <Button
+                  key={tahun}
+                  variant={selectedYear === tahun ? 'filled' : 'outline'}
+                  onClick={() => setSelectedYear(tahun)}
+                  size="xs"
+                >
+                  {tahun}
+                </Button>
+              ))}
+            </div>
+          </Box>
+
+          {/* 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/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,8 @@ 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";
 
 
 const Kesehatan = new Elysia({
@@ -38,5 +40,7 @@ const Kesehatan = new Elysia({
 .use(InfoWabahPenyakit)
 .use(FasilitasKesehatan)
 .use(JadwalKegiatan)
-.use(ArtikelKesehatan);
+.use(ArtikelKesehatan)
+.use(Kelahiran)
+.use(Kematian)
 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/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>
           );
         })}