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

prisma/schema.prisma

@@ -99,6 +99,7 @@ model FileStorage {
   PrestasiDesa                   PrestasiDesa[]
   DataPerpustakaan               DataPerpustakaan[]
   PegawaiPPID                    PegawaiPPID[]
+  PerbekelDariMasaKeMasa         PerbekelDariMasaKeMasa[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -220,48 +221,48 @@ model KategoriPrestasiDesa {
 
 //========================================= INDEKS KEPUASAAN MASYARAKAT ========================================= //
 model Responden {
-  id           String      @id @default(cuid())
-  name         String      @unique
-  tanggal      DateTime    // misal: 2025-05-01
-  jenisKelamin JenisKelaminResponden @relation(fields: [jenisKelaminId], references: [id])
+  id             String                 @id @default(cuid())
+  name           String                 @unique
+  tanggal        DateTime // misal: 2025-05-01
+  jenisKelamin   JenisKelaminResponden  @relation(fields: [jenisKelaminId], references: [id])
   jenisKelaminId String
-  rating       PilihanRatingResponden @relation(fields: [ratingId], references: [id])
-  ratingId     String
-  kelompokUmur UmurResponden @relation(fields: [kelompokUmurId], references: [id])
+  rating         PilihanRatingResponden @relation(fields: [ratingId], references: [id])
+  ratingId       String
+  kelompokUmur   UmurResponden          @relation(fields: [kelompokUmurId], references: [id])
   kelompokUmurId String
-  createdAt    DateTime    @default(now())
-  updatedAt    DateTime    @updatedAt
-  deletedAt    DateTime    @default(now())
-  isActive     Boolean     @default(true)
+  createdAt      DateTime               @default(now())
+  updatedAt      DateTime               @updatedAt
+  deletedAt      DateTime               @default(now())
+  isActive       Boolean                @default(true)
 }
 
 model JenisKelaminResponden {
-  id           String      @id @default(cuid())
-  name         String      @unique
-  createdAt    DateTime    @default(now())
-  updatedAt    DateTime    @updatedAt
-  deletedAt    DateTime    @default(now())
-  isActive     Boolean     @default(true)
+  id        String      @id @default(cuid())
+  name      String      @unique
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
   Responden Responden[]
 }
 
 model PilihanRatingResponden {
-  id           String      @id @default(cuid())
-  name         String      @unique
-  createdAt    DateTime    @default(now())
-  updatedAt    DateTime    @updatedAt
-  deletedAt    DateTime    @default(now())
-  isActive     Boolean     @default(true)
+  id        String      @id @default(cuid())
+  name      String      @unique
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
   Responden Responden[]
 }
 
 model UmurResponden {
-  id           String      @id @default(cuid())
-  name         String      @unique
-  createdAt    DateTime    @default(now())
-  updatedAt    DateTime    @updatedAt
-  deletedAt    DateTime    @default(now())
-  isActive     Boolean     @default(true)
+  id        String      @id @default(cuid())
+  name      String      @unique
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
   Responden Responden[]
 }
 
@@ -552,6 +553,19 @@ model ProfilPerbekel {
   isActive             Boolean      @default(true)
 }
 
+model PerbekelDariMasaKeMasa {
+  id        String       @id @default(cuid())
+  nama      String       @db.Text
+  periode   String       @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  daerah    String
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
+}
+
 // ========================================= BERITA ========================================= //
 model Berita {
   id               String          @id @default(cuid())
@@ -897,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 ========================================= //
@@ -1013,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/desa/profile.ts

@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 import { Prisma } from "@prisma/client";
+import ApiFetch from "@/lib/api-fetch";
 
 // ========================================= SEJARAH DESA ========================================= //
 const sejarahDesaForm = z.object({
@@ -106,16 +108,13 @@ const sejarahDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
-          `/api/desa/profile/sejarah/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(this.form),
-          }
-        );
+        const response = await fetch(`/api/desa/profile/sejarah/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -409,16 +408,13 @@ const lambangDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
-          `/api/desa/profile/lambang/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(this.form),
-          }
-        );
+        const response = await fetch(`/api/desa/profile/lambang/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -588,14 +584,11 @@ const maskotDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
-          `/api/desa/profile/maskot/${this.id}`,
-          {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(this.form),
-          }
-        );
+        const response = await fetch(`/api/desa/profile/maskot/${this.id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(this.form),
+        });
 
         const result = await response.json();
 
@@ -818,12 +811,247 @@ const profilPerbekel = proxy({
   },
 });
 
+//========================================= MANTAN PERBEKEL ========================================= //
+const mantanPerbekelForm = z.object({
+  nama: z.string().min(3, "Nama minimal 3 karakter"),
+  daerah: z.string().min(3, "Daerah minimal 3 karakter"),
+  periode: z.string().min(3, "Periode minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});
+
+const mantanPerbekelDefaultForm = {
+  nama: "",
+  daerah: "",
+  periode: "",
+  imageId: "",
+};
+
+const mantanPerbekel = proxy({
+  create: {
+    form: { ...mantanPerbekelDefaultForm },
+    loading: false,
+    async create() {
+      const cek = mantanPerbekelForm.safeParse(mantanPerbekel.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mantanPerbekel.create.loading = true;
+        const res = await ApiFetch.api.desa.mantanperbekel["create"].post(
+          mantanPerbekel.create.form
+        );
+        if (res.status === 200) {
+          mantanPerbekel.findMany.load();
+          return toast.success("Foto berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan foto");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mantanPerbekel.create.loading = false;
+      }
+    },
+    resetForm() {
+      mantanPerbekel.create.form = { ...mantanPerbekelDefaultForm };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PerbekelDariMasaKeMasaGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      mantanPerbekel.findMany.loading = true; // ✅ Akses langsung via nama path
+      mantanPerbekel.findMany.page = page;
+      mantanPerbekel.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.desa.mantanperbekel["findMany"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          mantanPerbekel.findMany.data = res.data.data ?? [];
+          mantanPerbekel.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          mantanPerbekel.findMany.data = [];
+          mantanPerbekel.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch mantan perbekel paginated:", err);
+        mantanPerbekel.findMany.data = [];
+        mantanPerbekel.findMany.totalPages = 1;
+      } finally {
+        mantanPerbekel.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PerbekelDariMasaKeMasaGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/mantanperbekel/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          mantanPerbekel.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch mantan perbekel:", res.statusText);
+          mantanPerbekel.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching mantan perbekel:", error);
+        mantanPerbekel.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        mantanPerbekel.delete.loading = true;
+        const response = await fetch(`/api/desa/mantanperbekel/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Mantan perbekel berhasil dihapus");
+          await mantanPerbekel.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus mantan perbekel");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus mantan perbekel");
+      } finally {
+        mantanPerbekel.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...mantanPerbekelDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/desa/mantanperbekel/${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,
+            daerah: data.daerah,
+            periode: data.periode,
+            imageId: data.imageId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading foto:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = mantanPerbekelForm.safeParse(mantanPerbekel.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        mantanPerbekel.update.loading = true;
+        const response = await fetch(`/api/desa/mantanperbekel/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            nama: this.form.nama,
+            daerah: this.form.daerah,
+            periode: this.form.periode,
+            imageId: this.form.imageId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Mantan perbekel berhasil diupdate");
+          await mantanPerbekel.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate mantan perbekel");
+        }
+      } catch (error) {
+        console.error("Error updating mantan perbekel:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate mantan perbekel"
+        );
+        return false;
+      } finally {
+        mantanPerbekel.update.loading = false;
+      }
+    },
+    reset() {
+      mantanPerbekel.update.id = "";
+      mantanPerbekel.update.form = { ...mantanPerbekelDefaultForm };
+    },
+  },
+});
+
 const stateProfileDesa = proxy({
   lambangDesa,
   maskotDesa,
   profilPerbekel,
   visiMisiDesa,
   sejarahDesa,
+  mantanPerbekel,
 });
 
 export default stateProfileDesa;

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)/_state/landing-page/indeks-kepuasan.ts

@@ -117,8 +117,48 @@ const responden = proxy({
     id: "",
     form: { ...defaultFormResponden },
     loading: false,
-    async byId() {
-      // Method implementation if needed
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        responden.update.loading = true;
+
+        const response = await fetch(`/api/landingpage/responden/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        responden.update.loading = false;
+      }
     },
     async submit() {
       const id = this.id;

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/_lib/layoutTabsDetail.tsx

@@ -18,6 +18,11 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
             label: "Profile Perbekel",
             value: "profileperbekel",
             href: "/admin/desa/profile/profile-perbekel"
+        },
+        {
+            label: "Profile Perbekel Dari Masa Ke Masa",
+            value: "profile-perbekel-dari-masa-ke-masa",
+            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa"
         }
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)

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

@@ -0,0 +1,170 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function EditPerbekelDariMasaKeMasa() {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const router = useRouter();
+  const params = useParams();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    nama: state.update.form.nama || '',
+    daerah: state.update.form.daerah || '',
+    periode: state.update.form.periode || '',
+    imageId: state.update.form.imageId || ''
+  });
+
+  useEffect(() => {
+    const loadFoto = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await state.update.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            daerah: data.daerah || '',
+            periode: data.periode || '',
+            imageId: data.imageId || ''
+          });
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading foto:', error);
+        toast.error('Gagal memuat data foto');
+      }
+    };
+    loadFoto();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      state.update.form = {
+        ...state.update.form,
+        nama: formData.nama,
+        daerah: formData.daerah,
+        periode: formData.periode,
+        imageId: formData.imageId
+      };
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+        state.update.form.imageId = uploaded.id;
+      }
+      await state.update.update();
+      toast.success('Perbekel dari masa ke masa berhasil diperbarui!');
+      router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
+    } catch (error) {
+      console.error('Error updating perbekel dari masa ke masa:', error);
+      toast.error('Terjadi kesalahan saat memperbarui perbekel dari masa ke masa');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Perbekel Dari Masa Ke Masa</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+            value={formData.nama}
+            onChange={(e) =>
+              (formData.nama = e.target.value)
+            }
+          />
+          <Box>
+            <Text>Upload Foto</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0]; // Ambil file pertama
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2} // Maks 5MB
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg={"gray"}>
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Daerah</Text>}
+            placeholder='Masukkan daerah'
+            value={formData.daerah}
+            onChange={(e) =>
+              (formData.daerah = e.target.value)
+            }
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
+            placeholder='Masukkan periode'
+            value={formData.periode}
+            onChange={(e) =>
+              (formData.periode = e.target.value)
+            }
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPerbekelDariMasaKeMasa;

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

@@ -0,0 +1,111 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, 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 { useProxy } from 'valtio/utils';
+
+function DetailPerbekelDariMasa() {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  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/desa/profile/profile-perbekel-dari-masa-ke-masa")
+    }
+  }
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </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 Perbekel Dari Masa Ke Masa</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 Perbekel</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Daerah</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.daerah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Periode</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.periode}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 300, md: 350}} src={state.findUnique.data?.image?.link} alt="gambar" />
+                </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/desa/profile/profile-perbekel-dari-masa-ke-masa/${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 perbekel dari masa ke masa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPerbekelDariMasa;

src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/create/page.tsx

@@ -0,0 +1,155 @@
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateVideo() {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const router = useRouter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    state.create.form = {
+      nama: "",
+      daerah: "",
+      periode: "",
+      imageId: "",
+    };
+    setPreviewImage(null)
+    setFile(null)
+  };
+
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+    state.create.form.imageId = uploaded.id;
+    await state.create.create();
+    resetForm();
+    router.push("/admin/desa/profile/profile-perbekel-dari-masa-ke-masa");
+  };
+
+
+  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 Perbekel Dari Masa Ke Masa</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Perbekel</Text>}
+            placeholder='Masukkan nama perbekel'
+            value={state.create.form.nama}
+            onChange={(val) => {
+              state.create.form.nama = val.target.value;
+            }}
+          />
+          <TextInput
+            label="Daerah"
+            placeholder="Masukkan daerah"
+            value={state.create.form.daerah}
+            onChange={(e) => {
+              state.create.form.daerah = e.currentTarget.value;
+            }}
+            required
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
+            placeholder='Masukkan periode'
+            value={state.create.form.periode}
+            onChange={(e) =>
+              (state.create.form.periode = e.target.value)
+            }
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateVideo;

src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx

@@ -0,0 +1,106 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import stateProfileDesa from '../../../_state/desa/profile';
+
+function PerbekelDariMasaKeMasa() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Perbekel Dari Masa Ke Masa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPerbekelDariMasaKeMasa search={search} />
+    </Box>
+  );
+}
+
+function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const router = useRouter();
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = (data || [])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Perbekel Dari Masa Ke Masa'
+          href='/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Perbekel</TableTh>
+              <TableTh>Periode</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>
+                  <Box w={200}>
+                    <Text lineClamp={1}>{item.nama}</Text>
+                  </Box>
+                </TableTd>
+                
+                <TableTd>
+                <Box w={200}>
+                    <Text lineClamp={1}>{item.periode}</Text>
+                  </Box>  
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default PerbekelDariMasaKeMasa;

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)/desa/profile/profile-perbekel/page.tsx

@@ -33,7 +33,7 @@ function Page() {
           </GridCol>
         </Grid>
         {perbekel && (
-          <Box  >
+          <Box>
             <Paper p={"xl"} bg={colors['BG-trans']}>
               <Box px={{ base: "md", md: 100 }}>
                 <Grid>

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import colors from '@/con/colors';
-import { PieChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
+import { PieChart, BarChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
 import {
   Box,
   Center,
@@ -25,14 +25,21 @@ interface ChartDataItem {
   label?: string;
 }
 
+
+
 function Page() {
   const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
   const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
   const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
   const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
+  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;
@@ -69,6 +76,41 @@ function Page() {
         { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
         { name: 'Lansia', value: totalLansia, color: '#FFA500' },
       ]);
+
+      // Process data for bar chart (group by month)
+      const monthYearMap = new Map<string, number>();
+
+      data.forEach((item: any) => {
+        // Try both createdAt and tanggal fields
+        const dateValue = item.tanggal || item.createdAt;
+        if (!dateValue) return;
+
+        const parsedDate = new Date(dateValue);
+        if (isNaN(parsedDate.getTime())) return;
+
+        const month = parsedDate.getMonth() + 1;
+        const year = parsedDate.getFullYear();
+        const monthYearKey = `${year}-${String(month).padStart(2, '0')}`;
+
+        monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
+      });
+
+      // Convert map to array and sort by date
+      const barData = Array.from(monthYearMap.entries())
+        .map(([key, count]) => {
+          const [year, month] = key.split('-');
+          const monthName = new Date(Number(year), Number(month) - 1, 1)
+            .toLocaleString('id-ID', { month: 'long' });
+          return {
+            month: `${monthName} ${year}`,
+            count,
+            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
+          };
+        })
+        .sort((a, b) => a.sortKey - b.sortKey)
+        .map(({ month, count }) => ({ month, count }));
+
+      setBarChartData(barData);
     }
   }, [data]);
 
@@ -92,105 +134,120 @@ function Page() {
 
   return (
     <Stack gap="xs">
-
-
+      {/* Bar Chart - Data per Tanggal */}
+      <Paper bg={colors['white-1']} p="md" radius="md" mb="md">
+        <Title order={4} mb="md" ta="center">Jumlah Responden per Bulan</Title>
+        <Box h={300}>
+          <BarChart
+            h={300}
+            data={barChartData}
+            dataKey="month"
+            series={[{ name: 'count', color: colors['blue-button'] }]}
+            tickLine="y"
+            xAxisLabel="Bulan"
+            yAxisLabel="Jumlah Responden"
+            withTooltip
+            tooltipAnimationDuration={200}
+          />
+        </Box>
+      </Paper>
 
       <SimpleGrid cols={{ base: 1, md: 3 }}>
-      {/* Chart Jenis Kelamin */}
-      <Paper bg={colors['white-1']} p="md" radius="md">
-        <Stack>
-          <Title order={4}>Jenis Kelamin</Title>
-          {donutDataJenisKelamin.every(item => item.value === 0) ? (
-            <Text c="dimmed" ta="center" my="md">
-              Belum ada data untuk ditampilkan dalam grafik
-            </Text>
-          ) : (
-            <Box>
-              <Center>
-                <PieChart
-                  withLabels
-                  withTooltip
-                  labelsType="percent"
-                  size={250}
-                  data={donutDataJenisKelamin}
-                />
-              </Center>
-              <Stack gap="sm" mt="md">
-                {donutDataJenisKelamin.map((entry) => (
-                  <Flex key={entry.name} gap="md" align="center">
-                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                    <Text size="sm">{entry.name}: {entry.value}</Text>
-                  </Flex>
-                ))}
-              </Stack>
-            </Box>
-          )}
-        </Stack>
-      </Paper>
+        {/* Chart Jenis Kelamin */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Jenis Kelamin</Title>
+            {donutDataJenisKelamin.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataJenisKelamin}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataJenisKelamin.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
 
-      {/* Chart Rating */}
-      <Paper bg={colors['white-1']} p="md" radius="md">
-        <Stack>
-          <Title order={4}>Pilihan</Title>
-          {donutDataRating.every(item => item.value === 0) ? (
-            <Text c="dimmed" ta="center" my="md">
-              Belum ada data untuk ditampilkan dalam grafik
-            </Text>
-          ) : (
-            <Box>
-              <Center>
-                <PieChart
-                  withLabels
-                  withTooltip
-                  labelsType="percent"
-                  size={250}
-                  data={donutDataRating}
-                />
-              </Center>
-              <Stack gap="sm" mt="md">
-                {donutDataRating.map((entry) => (
-                  <Flex key={entry.name} gap="md" align="center">
-                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                    <Text size="sm">{entry.name}: {entry.value}</Text>
-                  </Flex>
-                ))}
-              </Stack>
-            </Box>
-          )}
-        </Stack>
-      </Paper>
+        {/* Chart Rating */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Pilihan</Title>
+            {donutDataRating.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataRating}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataRating.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
 
-      {/* Chart Kelompok Umur */}
-      <Paper bg={colors['white-1']} p="md" radius="md">
-        <Stack>
-          <Title order={4}>Umur</Title>
-          {donutDataKelompokUmur.every(item => item.value === 0) ? (
-            <Text c="dimmed" ta="center" my="md">
-              Belum ada data untuk ditampilkan dalam grafik
-            </Text>
-          ) : (
-            <Box>
-              <Center>
-                <PieChart
-                  withLabels
-                  withTooltip
-                  labelsType="percent"
-                  size={250}
-                  data={donutDataKelompokUmur}
-                />
-              </Center>
-              <Stack gap="sm" mt="md">
-                {donutDataKelompokUmur.map((entry) => (
-                  <Flex key={entry.name} gap="md" align="center">
-                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                    <Text size="sm">{entry.name}: {entry.value}</Text>
-                  </Flex>
-                ))}
-              </Stack>
-            </Box>
-          )}
-        </Stack>
-      </Paper>
+        {/* Chart Kelompok Umur */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Umur</Title>
+            {donutDataKelompokUmur.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataKelompokUmur}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataKelompokUmur.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
       </SimpleGrid>
     </Stack>
   );

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

@@ -1,35 +1,78 @@
 'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import colors from '@/con/colors';
 import { Box, Button, Paper, Stack, Title, TextInput, Text, Select } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
+import { toast } from 'react-toastify';
+
+interface FormResponden {
+  name: string;
+  tanggal: string;
+  jenisKelaminId: string;
+  ratingId: string;
+  kelompokUmurId: string;
+}
 
 function EditResponden() {
   const router = useRouter()
   const params = useParams() as { id: string }
   const state = useProxy(indeksKepuasanState.responden)
   const id = params.id
-
+  const [formData, setFormData] = useState<FormResponden>({
+    name: '',
+    tanggal: '',
+    jenisKelaminId: '',
+    ratingId: '',
+    kelompokUmurId: '',
+  })
   useEffect(() => {
-    if (id) {
-      state.findUnique.load(id).then(() => {
-        const data = state.findUnique.data
+    indeksKepuasanState.jenisKelaminResponden.findMany.load();
+    indeksKepuasanState.pilihanRatingResponden.findMany.load();
+    indeksKepuasanState.kelompokUmurResponden.findMany.load();
+
+    const loadResponden = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await state.update.load(id);
         if (data) {
+          const formattedDate = data.tanggal && !isNaN(new Date(data.tanggal).getTime())
+            ? new Date(data.tanggal).toISOString().split('T')[0]
+            : '';
+          // ⬇️ FIX PENTING: tambahkan ini
+          state.update.id = id;
+
           state.update.form = {
-            name: data.name || '',
-            tanggal: data.tanggal ? new Date(data.tanggal).toISOString() : new Date().toISOString(),
-            jenisKelaminId: data.jenisKelaminId || '',
-            ratingId: data.ratingId || '',
-            kelompokUmurId: data.kelompokUmurId || '',
-          }
+            name: data.name,
+            tanggal: formattedDate,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          };
+
+          setFormData({
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          });
+
+
         }
-      })
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error("Gagal memuat data program penghijauan");
+      }
     }
-  }, [id])
+
+    loadResponden();
+  }, [params?.id]);
 
   const handleSubmit = async () => {
     state.update.id = id;
@@ -51,74 +94,84 @@ function EditResponden() {
             label="Nama"
             type='text'
             placeholder="masukkan nama"
-            value={state.update.form.name}
+            value={formData.name}
             onChange={(val) => {
-              state.update.form.name = val.currentTarget.value;
+              setFormData({
+                ...formData,
+                name: val.currentTarget.value
+              })
             }}
           />
           <TextInput
-            label="Tanggal"
             type="date"
-            placeholder="masukkan tanggal"
-            value={state.update.form.tanggal}
-            onChange={(val) => {
-              state.update.form.tanggal = val.currentTarget.value;
+            value={formData.tanggal}
+            onChange={(e) => {
+              setFormData({
+                ...formData,
+                tanggal: e.currentTarget.value, // ✅ sudah format YYYY-MM-DD
+              });
             }}
           />
           <Select
-            value={state.update.form.jenisKelaminId}
-            onChange={(val) => {
-              state.update.form.jenisKelaminId = val || "";
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
-            placeholder='Pilih jenis kelamin'
+            key={"jenisKelamin"}
+            label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+            placeholder="Pilih jenis kelamin"
+            value={formData.jenisKelaminId}
+            onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
             data={
-              indeksKepuasanState.jenisKelaminResponden.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.nama
-              })) || []
+              (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null/undefined
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
             }
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading} // ✅ disable saat loading
             clearable
             searchable
             required
-            error={!state.update.form.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
+            error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
           />
-           <Select
-            value={state.update.form.ratingId}
-            onChange={(val) => {
-              state.update.form.ratingId = val || "";
-            }}
+          <Select
+            key={"rating"}
+            value={formData.ratingId}
+            onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
             label={<Text fw={"bold"} fz={"sm"}>Rating</Text>}
             placeholder='Pilih rating'
             data={
-              indeksKepuasanState.pilihanRatingResponden.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.nama
-              })) || []
+              (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                .filter(Boolean)
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
             }
+            disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
             clearable
             searchable
             required
-            error={!state.update.form.ratingId ? "Pilih rating" : undefined}
+            error={!formData.ratingId ? "Pilih rating" : undefined}
           />
 
           <Select
-            value={state.update.form.kelompokUmurId}
-            onChange={(val) => {
-              state.update.form.kelompokUmurId = val || "";
-            }}
+            key={"kelompokUmur"}
+            value={formData.kelompokUmurId}
+            onChange={(val) => setFormData({ ...formData, kelompokUmurId: val || "" })}
             label={<Text fw={"bold"} fz={"sm"}>Kelompok Umur</Text>}
             placeholder='Pilih kelompok umur'
             data={
-              indeksKepuasanState.kelompokUmurResponden.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.nama
-              })) || []
+              (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                .filter(Boolean)
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
             }
+            disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
             clearable
             searchable
             required
-            error={!state.update.form.kelompokUmurId ? "Pilih kelompok umur" : undefined}
+            error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
           />
 
           <Button

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

@@ -3,14 +3,14 @@
 import { ModalKonfirmasiHapus } from "@/app/admin/(dashboard)/_com/modalKonfirmasiHapus"
 import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan"
 import colors from "@/con/colors"
-import { Box, Button, Paper, Skeleton, Stack, Text } from "@mantine/core"
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from "@mantine/core"
 import { useShallowEffect } from "@mantine/hooks"
-import { IconArrowBack } from "@tabler/icons-react"
+import { IconArrowBack, IconEdit, IconX } from "@tabler/icons-react"
 import { useRouter, useParams } from "next/navigation"
 import { useState } from "react"
 import { useProxy } from "valtio/utils"
 
-export default function DetailResponden(){
+export default function DetailResponden() {
   const [modalHapus, setModalHapus] = useState(false)
   const stateDetail = useProxy(indeksKepuasanState.responden)
   const router = useRouter()
@@ -30,17 +30,17 @@ export default function DetailResponden(){
     }
   }
 
-  if(!stateDetail.findUnique.data){
-    return(
+  if (!stateDetail.findUnique.data) {
+    return (
       <Stack>
         <Skeleton h={500} />
       </Stack>
     )
   }
-  return(
+  return (
     <Box>
       <Box mb={10}>
-      <Button variant="subtle" onClick={() => router.back()}>
+        <Button variant="subtle" onClick={() => router.back()}>
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
@@ -57,9 +57,9 @@ export default function DetailResponden(){
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Tanggal</Text>
                 <Text fz={"lg"}>{
-                  stateDetail.findUnique.data?.tanggal 
+                  stateDetail.findUnique.data?.tanggal
                     ? new Date(stateDetail.findUnique.data.tanggal).toLocaleDateString('id-ID')
-                    : '-' 
+                    : '-'
                 }</Text>
               </Box>
               <Box>
@@ -74,6 +74,31 @@ export default function DetailResponden(){
                 <Text fz={"lg"} fw={"bold"}>Kelompok Umur</Text>
                 <Text fz={"lg"}>{stateDetail.findUnique.data?.kelompokUmur?.name}</Text>
               </Box>
+              <Flex gap={"xs"} mt={10}>
+                <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      setSelectedId(stateDetail.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
+                  color={"red"}
+                >
+                  <IconX size={20} />
+                </Button>
+                <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${stateDetail.findUnique.data.id}/edit`);
+                    }
+                  }}
+                  disabled={!stateDetail.findUnique.data}
+                  color={"green"}
+                >
+                  <IconEdit size={20} />
+                </Button>
+              </Flex>
             </Stack>
           </Paper>
         </Stack>
@@ -85,7 +110,7 @@ export default function DetailResponden(){
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
         text="Apakah anda yakin ingin menghapus responden ini?"
-      /> 
+      />
     </Box>
   )
 }

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/desa/index.ts

@@ -10,6 +10,7 @@ import Penghargaan from "./penghargaan";
 import KategoriPotensi from "./potensi/kategori-potensi";
 import KategoriBerita from "./berita/kategori-berita";
 import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
+import MantanPerbekel from "./profile/profile-mantan-perbekel";
 
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -19,10 +20,12 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(PotensiDesa)
   .use(GalleryFoto)
   .use(GalleryVideo)
+  .use(MantanPerbekel)
   .use(LayananDesa)
   .use(Penghargaan)
   .use(KategoriPotensi)
   .use(KategoriBerita)
   .use(KategoriPengumuman)
+  
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/create.ts

@@ -0,0 +1,29 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    nama: string;
+    periode: string;
+    imageId: string;
+    daerah: string;
+}
+
+export default async function profileMantanPerbekelCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.perbekelDariMasaKeMasa.create({
+        data: {
+            nama: body.nama,
+            periode: body.periode,
+            imageId: body.imageId,
+            daerah: body.daerah,
+        },
+    });
+    return {
+        success: true,
+        message: "Success create profile mantan perbekel",
+        data: {
+            ...body,
+        },
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/del.ts

@@ -0,0 +1,53 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+const profileMantanPerbekelDelete = async (context: Context) => {
+    const id = context.params?.id as string;
+
+    if (!id) {
+        return {
+            status: 400,
+            body: "ID tidak diberikan",
+        };
+    }
+
+    const foto = await prisma.perbekelDariMasaKeMasa.findUnique({
+        where: { id },
+        include: {
+            image: true,
+        },
+    });
+
+    if (!foto) {
+        return {
+            status: 404,
+            body: "Foto tidak ditemukan",
+        };
+    }
+
+    // Hapus file gambar dari filesystem jika ada
+    if (foto.image) {
+        try {
+            const filePath = path.join(foto.image.path, foto.image.name);
+            await fs.unlink(filePath);
+            await prisma.fileStorage.delete({
+                where: { id: foto.image.id },
+            });
+        } catch (err) {
+            console.error("Gagal hapus gambar lama:", err);
+        }
+    }
+
+    await prisma.perbekelDariMasaKeMasa.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        body: "Foto berhasil dihapus",
+    };
+}
+
+export default profileMantanPerbekelDelete

src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/findMany.ts

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

src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/index.ts

@@ -0,0 +1,44 @@
+import Elysia, { t } from "elysia";
+import profileMantanPerbekelCreate from "./create";
+import profileMantanPerbekelDelete from "./del";
+import profileMantanPerbekelFindMany from "./findMany";
+import profileMantanPerbekelUpdate from "./updt";
+import profileMantanPerbekelFindUnique from "./findUnique";
+
+const MantanPerbekel = new Elysia({
+  prefix: "mantanperbekel",
+  tags: ["Desa/Profile/MantanPerbekel"],
+})
+  .get("/findMany", profileMantanPerbekelFindMany)
+  .get("/:id", async (context) => {
+    const response = await profileMantanPerbekelFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .post("/create", profileMantanPerbekelCreate, {
+    body: t.Object({
+      nama: t.String(),
+      daerah: t.String(),
+      periode: t.String(),
+      imageId: t.String(),
+    }),
+  })
+  .delete("/del/:id", profileMantanPerbekelDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await profileMantanPerbekelUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        nama: t.String(),
+        daerah: t.String(),
+        periode: t.String(),
+        imageId: t.String(),
+      }),
+    }
+  );
+
+export default MantanPerbekel;

src/app/api/[[...slugs]]/_lib/desa/profile/profile-mantan-perbekel/updt.ts

@@ -0,0 +1,82 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+type FormUpdate = Prisma.PerbekelDariMasaKeMasaGetPayload<{
+  select: {
+    id: true;
+    nama: true;
+    periode: true;
+    imageId: true;
+    daerah: true;
+  };
+}>;
+
+export default async function profileMantanPerbekelUpdate(context: Context) {
+  try {
+    const id = context.params?.id;
+    const body = (await context.body) as Omit<FormUpdate, "id">;
+
+    const { nama, periode, imageId, daerah } = body;
+
+    if (!id) {
+      return {
+        success: false,
+        message: "ID tidak diberikan",
+      };
+    }
+
+    const existing = await prisma.perbekelDariMasaKeMasa.findUnique({
+      where: { id },
+      include: {
+        image: true,
+      },
+    });
+
+    if (!existing) {
+      return {
+        success: false,
+        message: "Profile mantan perbekel tidak ditemukan",
+      };
+    }
+
+    if (existing.imageId && existing.imageId !== imageId) {
+      const oldImage = existing.image;
+      if (oldImage) {
+        try {
+          const filePath = path.join(oldImage.path, oldImage.name);
+          await fs.unlink(filePath);
+          await prisma.fileStorage.delete({
+            where: { id: oldImage.id },
+          });
+        } catch (err) {
+          console.error("Gagal hapus gambar lama:", err);
+        }
+      }
+    }
+
+    const updated = await prisma.perbekelDariMasaKeMasa.update({
+      where: { id },
+      data: {
+        nama,
+        periode,
+        imageId,
+        daerah,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Success update profile mantan perbekel",
+      data: updated,
+    };
+  } catch (error) {
+    console.error("Error updating profile mantan perbekel:", error);
+    return {
+      success: false,
+      message: "Terjadi kesalahan saat mengupdate profile mantan perbekel",
+    };
+  }
+}

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

@@ -31,7 +31,6 @@ function Page() {
         <LambangDesa />
         <MaskotDesa />
         <ProfilPerbekel />
-        {/* <LembagaDesa /> */}
         <MotoDesa />
         <SemuaPerbekel/>
       </Box>

src/app/darmasaba/(pages)/desa/profile/ui/lambangDesa.tsx

@@ -1,8 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Paper, Image, Text, Center } from '@mantine/core';
-import React from 'react';
+import { Box, Stack, Paper, Image, Text, Center, Skeleton } from '@mantine/core';
+import React, { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 
 function LambangDesa() {
+  const state = useProxy(stateProfileDesa.lambangDesa)
+
+  useEffect(() => {
+    state.findUnique.load("edit")
+  }, [])
+
+  const { data, loading } = state.findUnique
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Box pb={70}>
       <Stack align='center' gap={0}>
@@ -13,46 +32,8 @@ function LambangDesa() {
           <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
         </Box>
         <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
-            Simbul atau lambang bukanlah suatu gambar bentuk tanpa mengandung makna, namun segala yang terdapat di dalamnya mengandung makna filosofi yang mendalam dan kepribadian, setidaknya mengandung suatu pengharapan atau tujuan yang ingin dicapai oleh yang empunya lambang tersebut.
-          </Text>
-          <Text fz={{ base: "md", md: "h3"}} py={10} ta={"justify"}>
-            Lambang Desa Darmasaba berbentuk persegi lima sama sisi dengan dasar warna biru yang di dalamnya terdapat bangunan Padmasana dengan rong tiga, di dasarnya terdapat bunga Padma berwarna merah muda yang dikelilingi oleh padi dan kapas serta rantai sebagai pengikatnya, terdapat pula pita berwarna putih bertuliskan “Dharma Temaja”.
-          </Text>
-          <Box>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
-              Bentuk Dasar Persegi Lima
-            </Text>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
-              Melambangkan Pancasila yang menjadi dasar Negara Republik Indonesia yang harus dihayati dan diamalkan oleh masyarakat Indonesia termasuk masyarakat Desa Darmaaba merupakan bagian dari Bangsa Indonesia.
-            </Text>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
-            Dasar Persegi Lima Yang Berwarna Biru
-            </Text>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
-            Mengandung makna wilayah Desa Darmasaba yang luas, tanahnya yg subur dan masyarakatnya memiliki berbagai macam mata pencaharian.
-            </Text>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
-            Bangunan Pelinggih Padmasana Rong Tiga
-            </Text>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
-            Merupakan perlambang wilayah Desa Darmasaba terdiri dari tiga Desa Adat antara lain Desa Adat Aban, Desa Adat Tegal dan Desa Adat Darmasaba yang dengan rasa persatuan dan kesatuan dilandasi semangat segalak segilik seguluk sebayantaka membangun Desa Darmasaba.
-            </Text>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"} fw={"bold"}>
-            Bunga Padma Merah Muda
-            </Text>
-            <Text fz={{ base: "md", md: "h3"}} ta={"justify"}>
-              Memiliki arti kemuliaan.
-            </Text>
-          </Box>
+          <Text fz={{ base: "md", md: "h3"}} ta={"justify"} dangerouslySetInnerHTML={{__html: data.deskripsi}} />
         </Paper>
-
       </Stack>
     </Box >
   );

src/app/darmasaba/(pages)/desa/profile/ui/lembagaDesa.tsx

@@ -1,39 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Center, Image, Paper, Stack, Text } from '@mantine/core';
-
-function LembagaDesa() {
-  return (
-    <Box pb={70}>
-      <Stack align='center' gap={0}>
-        <Box pb={30}>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Lembaga Desa</Text>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h4", md: "h2"}}>Badan Permusyawaratan Desa (BPD)</Text>
-        </Box>
-        <Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Center pb={10}>
-            <Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 390, md: 1000 }} />
-          </Center>
-        </Paper>
-        <Box pb={30}>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Lembaga pemberdayaan Masyarakat (LPM)</Text>
-        </Box>
-        <Paper mb={50} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Center pb={10}>
-            <Image src={"/api/img/bpddarmasaba.png"} alt='' w={{ base: 390, md: 1000 }} />
-          </Center>
-        </Paper>
-        <Box pb={30}>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h1", md: "2.5rem" }}>Perangkat Desa</Text>
-          <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={{ base: "h4", md: "h2"}}>Struktur Organisasi Tata Kerja Pemerintahan Desa Darmasaba</Text>
-        </Box>
-        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Center pb={10}>
-            <Image src={"/api/img/pernagkatdesa.png"} alt='' w={{ base: 390, md: 1000 }} />
-          </Center>
-        </Paper>
-      </Stack>
-    </Box >
-  );
-}
-
-export default LembagaDesa;

src/app/darmasaba/(pages)/desa/profile/ui/maskotDesa.tsx

@@ -1,7 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Card, Center, Group, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
 
 function MaskotDesa() {
+  const state = useProxy(stateProfileDesa.maskotDesa)
+
+  useEffect(() => {
+    state.findUnique.load("edit")
+  }, [])
+
+  const { data, loading } = state.findUnique
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Box pb={70}>
       <Stack align='center' gap={0}>
@@ -11,83 +31,24 @@ function MaskotDesa() {
           </Center>
           <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
         </Box>
-        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-          <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
-            Pudak adalah bunga dari tanaman sejenis pandan <Text span fz={{ base: "md", md: "h3" }} fs={"italic"}>(Pandanaceae)</Text>. Bentuk bunga ini tersusun dalam beberapa lapisan, terbungkus oleh kelopak warna putih <Text span fz={{ base: "md", md: "h3" }} fs={"italic"}>(semacam daun lonjong)</Text> yang ujungnya meruncing.
-          </Text>
-          <Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
-            Bunga Pudak berwarna kuning dan akan terlihat jika kelopak atau pelepahnya telah mekar. Kekhasan dari bunga pudak, yaitu mempunyai aroma wangi yang semerbak nan lembut <Text span fz={{ base: "md", md: "h3" }} fs={"italic"}>(tidak menyengat)</Text>, dan dapat menebar keharuman sepanjang pagi atau pun sore hari. Tanaman ini dapat tumbuh di sepanjang pantai, aliran sungai, di atas batu-batu karang, dan juga di tanah ladang.
-          </Text>
-          {/* Pohon dan Bunga Pudak */}
-          <Box py={20}>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: 2,
-              }}
-            >
-              <Center>
-                <Box>
-                  <Paper p={"lg"}>
-                    <Image src={"/pohonpudak.png"} alt="" w={{ base: 150, md: 250 }} />
-                    <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pohon Pudak</Text>
-                  </Paper>
-                </Box>
-              </Center>
-              <Center>
-                <Box>
-                  <Paper p={"lg"}>
-                    <Image src={"/bungapudak.png"} alt="" w={{ base: 150, md: 250 }} />
-                    <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Bunga Pudak</Text>
-                  </Paper>
-                </Box>
-              </Center>
-            </SimpleGrid>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
-              Dalam Kamus Jawa Kuna- Indonesia kata “Pudak” berarti bunga pandan atau Pandanus Moschatus (Mardiwarsito: 1981: 442). Selain itu bunga pudak juga dapat disebut ketaka atau ketaki (Mardiwarsito, 1981: 276). Sedangkan kata “Sategal” berasal dari kata dasar “Tegal” yang berarti ladang (Mardiwarsito, 1981: 593). Jadi Pudak Sategal dapat diartikan sebagai satu ladang luas yang dipenuhi bunga pudak dan menabar keharuman.
-            </Text>
-            <Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
-              Pada sebuah kesempatan, Ida Pedanda Putu Pemaron menjelaskan mengenai makna dari istilah Pudak Sategal dengan sebuah analogi bahwa, sekuntum bunga pudak memiliki aroma wangi atau keharuman yang sangat kuat, apalagi jika satu ladang penuh bunga pudak, maka dapat dipastikan aroma keharumannya akan membumbung menyebar ke segala penjuru (Wawancara, 18 Mei 2019 di Geria Putra Mandara Kenderan, Tegallalang).
-              “Pudak” ialah sebuah bunga yang memiliki aroma wangi atau keharuman yang semerbak, lembut, dan khas.
-            </Text>
-          </Box>
-          {/* Tari dan Pose Klimaks Sekar Pudak */}
-          <Box py={20}>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: 2,
-              }}
-            >
-              <Box>
-                <Center>
-                  <Paper p={"lg"}>
-                    <Image src={"/tarisekar.png"} alt="" w={{ base: 150, md: 250 }} />
-                    <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Tari Sekar Pudak</Text>
-                  </Paper>
-                </Center>
-              </Box>
-              <Box>
-                <Center>
-                  <Paper p={"lg"}>
-                    <Image src={"/klimakstari.png"} alt="" w={{ base: 150, md: 250 }} />
-                    <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Pose Klimaks Tari </Text>
-                    <Text ta={"center"} fw={"bold"} c={colors["blue-button"]} fz={{ base: "md", md: "h3" }}>Sekar Pudak </Text>
-                  </Paper>
-                </Center>
-              </Box>
-            </SimpleGrid>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
-              Garapan Tari Maskot Desa Darmasaba Sekar Pudak diwujudkan ke dalam bentuk tari kreasi yang ditarikan secara berkelompok dengan jumlah lima orang penari perempuan (putri).
-            </Text>
-            <Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
-              Pemilihan penari perempuan dimaksudkan untuk mempresentasikan keindahan, keluwesan, dan keharuman dari bunga pudak. Sedangkan penetapan jumlah penari lima orang didasarkan atas pertimbangan kebutuhan koreografi agar dapat membentuk desain-desain komposisi lantai yang menarik dan dinamis, baik ketika ditarikan di area panggung yang luas atau pun area panggung yang kecil. Penyajian tari maskot ini dirancang dengan durasi waktu 9 menit.
-            </Text>
-          </Box>
+        <Paper p={"xl"} bg={colors['white-trans-1']}>
+          <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
+          <Group wrap="wrap" gap="md">
+            {data.images.map((img, index) => (
+              <Card key={index} p="xs" w={220}>
+                <Image
+                  src={img.image.link}
+                  alt={img.label}
+                  w={200}
+                  h={200}
+                  fit="cover"
+                  radius="md"
+                  style={{ border: '1px solid #ccc', objectFit: 'cover' }}
+                />
+                <Text ta="center" mt="xs" fw="bold">{img.label}</Text>
+              </Card>
+            ))}
+          </Group>
         </Paper>
       </Stack>
     </Box >

src/app/darmasaba/(pages)/desa/profile/ui/profilPerbekel.tsx

@@ -1,7 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Image, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
 
 function ProfilPerbekel() {
+  const state = useProxy(stateProfileDesa.profilPerbekel)
+
+  useEffect(() => {
+    state.findUnique.load("edit")
+  }, [])
+
+  const { data, loading } = state.findUnique
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
   return (
     <Box pb={70}>
       <Stack align='center' gap={0}>
@@ -19,7 +39,16 @@ function ProfilPerbekel() {
         <Box>
           <Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
             <Stack gap={0}>
-              <Image pt={{ base: 0, md: 120 }} px={"lg"} src={"/api/img/perbekel.png"} sizes='100%' alt='' />
+              <Image
+                pt={{ base: 0, md: 120 }}
+                px={"lg"}
+                src={data.image?.link || "/perbekel.png"}
+                sizes='100%'
+                alt=''
+                onError={(e) => {
+                  e.currentTarget.src = "/perbekel.png";
+                }}
+              />
               <Paper
                 bg={colors['blue-button']}
                 px={"lg"}
@@ -35,101 +64,30 @@ function ProfilPerbekel() {
             </Stack>
           </Paper>
         </Box>
-        <Box>
-          <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-            <Text fz={"h2"} fw={"bold"}>
-              Biodata
-            </Text>
-            <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
-              I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel  Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.
-            </Text>
-            <Text py={10} fz={"h2"} fw={"bold"}>
-              Pengalaman
-            </Text>
-            <List>
-              <Box px={20}>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2021 - 2027: Perbekel Desa Darmasaba</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2015 - Sekarang: Founder & Managing Director Mantra
-                  Legal Consultants & Advocates</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2020 - Sekarang: Founder Ugawa Record Music Studio</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} >2010 - 2016: Dosen Fakultas Hukum Universitas
-                  Mahasaraswati Denpasar</ListItem>
-              </Box>
-            </List>
-            <Text py={10} fz={"h2"} fw={"bold"}>
-              Pengalaman Organisasi
-            </Text>
-            <List>
-              <Box px={20}>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1996 - 1997: Ketua OSIS SMP Negeri 1 Abiansemal</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>1999 - 2000: Ketua OSIS SMA Negeri 1 Mengwi</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>2008 - 2009: Ketua BEM Universitas Mahasaraswati Denpasar</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} >2008 - 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} >2020 - Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} >2021 - Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} >2023 - 2028: Komite Tetap Advokasi - Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</ListItem>
-              </Box>
-            </List>
-          </Paper>
-        </Box>
-
-      </SimpleGrid>
+        <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+          <Box>
+            <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
+            <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.biodata }} />
+          </Box>
+          <Box>
+            <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman</Text>
+            <Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: data.pengalaman }} />
+          </Box>
+        </Paper>
+      </SimpleGrid >
       <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-        <Text py={10} fz={{ base: "md", md: "h1" }} fw={"bold"} >
-          Program Kerja Unggulan
-        </Text>
-        <Stack>
-          <Box>
-            <Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
-              Pemberdayaan Ekonomi dan UMKM
-            </Text>
-            <List>
-              <Box px={10}>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pelatihan dan pendampingan UMKM lokal</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program bantuan modal usaha bagi pelaku usaha kecil</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</ListItem>
-              </Box>
-            </List>
+        <Box>
+          <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
+          <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.pengalamanOrganisasi }} />
+        </Box>
+        <Box pb={20}>
+          <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
+          <Box px={20}>
+            <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.programUnggulan }} />
           </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
-            Peningkatan Infrastruktur Desa
-            </Text>
-            <List>
-              <Box px={10}>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pembangunan dan perbaikan jalan desa</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Penyediaan fasilitas umum dan ruang terbuka hijau</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Optimalisasi layanan publik berbasis digital</ListItem>
-              </Box>
-            </List>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
-            Pendidikan dan Pengembangan SDM
-            </Text>
-            <List>
-              <Box px={10}>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Beasiswa pendidikan bagi siswa berprestasi dari keluarga kurang mampu</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Program kursus dan pelatihan kerja bagi pemuda desa</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Peningkatan kualitas pendidikan melalui kerja sama dengan perguruan tinggi</ListItem>
-              </Box>
-            </List>
-          </Box>
-          <Box>
-            <Text fz={{ base: "md", md: "h3" }} fw={"bold"} ta={"justify"}>
-            Pelestarian Budaya dan Pariwisata
-            </Text>
-            <List>
-              <Box px={10}>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Revitalisasi pura dan tempat bersejarah di Darmasaba</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Pengembangan desa wisata berbasis budaya dan seni lokal</ListItem>
-                <ListItem fz={{ base: "md", md: "h3" }} ta={"justify"}>Festival budaya dan seni sebagai daya tarik wisata</ListItem>
-              </Box>
-            </List>
-          </Box>
-        </Stack>
+        </Box>
       </Paper>
-    </Box>
+    </Box >
   );
 }
 

src/app/darmasaba/(pages)/desa/profile/ui/sejarahDesa.tsx

@@ -1,7 +1,28 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Center, Image, Paper, Stack, Text } from '@mantine/core';
+import { Box, Center, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
 
 function SejarahDesa() {
+  const state = useProxy(stateProfileDesa.sejarahDesa)
+
+  useEffect(() => {
+    state.findUnique.load("edit")
+  }, [])
+
+  const { data, loading } = state.findUnique
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
   return (
     <>
       <Box pb={70}>
@@ -12,16 +33,8 @@ function SejarahDesa() {
             </Center>
             <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Sejarah Desa</Text>
           </Box>
-          <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-            <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
-              Asal –usul nama Darmasaba tertuang dalam lontar Usada Bali. Seperti di tulis dalam monografi Desa Darmasaba tahun 1980 silam, nama Darmasaba berkaitan dengan keturunan Danghyang Nirarta diceritakan, Sang kawi-wiku asal Daha (Jawa Timur) itu memiliki cucu bernama Ida Pedanda Sakti Manuaba yang tigggal di Desa Kendran Tegalalang Gianyar.
-            </Text>
-            <Text fz={{ base: "md", md: "h3" }} py={10} ta={"justify"}>
-              Merasa tidak disenangi sang ayah, Ida Pedanda Sakti Manuaba pergi mengembara bersama dua orang pengiringnya. Pengembaraan sang pendeta sampai di pura Sarin Buana di Jimbaran. Saat mengadakan semedi di tempat ini sang pendeta melihat sinar api. Yang sangat jauh di utara. Timbul keinginan Ida Pedanda Manuaba untuk mengunjungi tempat itu.
-            </Text>
-            <Text fz={{ base: "md", md: "h3" }} ta={"justify"}>
-              Sampailah sang Pedanda di pura Batan Bila Peguyangan. Disini Ida Pedanda Manuaba singgah menghadap Ida Pedanda Budha yang tinggal disana. Selanjutnya, kedua pendeta bersama-sama menuju arah utara dan singgah di Taman Cang Ana, sebuah taman milik Arya Lanang Blusung. Di tempat ini kedua pendeta bersama-sama melaksanakan semedi dan menetap untuk sementara waktu.
-            </Text>
+          <Paper p={"xl"} bg={colors['white-trans-1']}>
+            <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: data.deskripsi }} />
           </Paper>
 
         </Stack>

src/app/darmasaba/(pages)/desa/profile/ui/semuaPerbekel.tsx

@@ -1,73 +1,25 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Center, Image, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-
-const data = [
-  {
-    id: 1,
-    nama: "SI GEDE KANIA",
-    wilayah: "PERBEKEL TEGAL",
-    periode: "Tahun 1943 - 1946",
-    foto: "/api/img/perbekel-1.png"
-  },
-  {
-    id: 2,
-    nama: "SI GEDE GANDEM",
-    wilayah: "PERBEKEL TEGAL",
-    periode: "Tahun 1946 - 1950",
-    foto: "/api/img/perbekel-2.png"
-  },
-  {
-    id: 3,
-    nama: "I WAYAN SAMA",
-    wilayah: "PERBEKEL TEGAL",
-    periode: "Tahun 1950 - 1953",
-    foto: "/api/img/perbekel-3.png"
-  },
-  {
-    id: 4,
-    nama: "I WAYAN NAMBREG",
-    wilayah: "PERBEKEL DARMASABA",
-    periode: "Tahun 1950 - 1960",
-    foto: "/api/img/perbekel-4.png"
-  },
-  {
-    id: 5,
-    nama: "IDA BAGUS PUTU OKA",
-    wilayah: "PERBEKEL TEGAL/DARMASABA",
-    periode: "Tahun 1953 - 1974",
-    foto: "/api/img/perbekel-5.png"
-  },
-  {
-    id: 6,
-    nama: "I NYOMAN PATRA",
-    wilayah: "PERBEKEL DARMASABA",
-    periode: "Tahun 1974 - 1991",
-    foto: "/api/img/perbekel-6.png"
-  },
-  {
-    id: 7,
-    nama: "I MADE RUDJA",
-    wilayah: "PERBEKEL DARMASABA",
-    periode: "Tahun 1991 - 2007",
-    foto: "/api/img/perbekel-7.png"
-  },
-  {
-    id: 8,
-    nama: "I WAYAN KALER, SH.MH.",
-    wilayah: "PERBEKEL DARMASABA",
-    periode: "Tahun 2007 - 2013",
-    foto: "/api/img/perbekel-8.png"
-  },
-  {
-    id: 9,
-    nama: "I MADE TARAM, SH.",
-    wilayah: "PERBEKEL DARMASABA",
-    periode: "Tahun 2013 - 2019",
-    foto: "/api/img/perbekel-9.png"
-  },
-]
+import { Box, Center, Image, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
 function SemuaPerbekel() {
+const state = useProxy(stateProfileDesa.mantanPerbekel)
+
+useShallowEffect(() => {
+  state.findMany.load()
+}, [])
+
+const {data, loading} = state.findMany
+
+if (loading || !data) {
+  return (
+    <Box py={10}>
+      <Skeleton h={500} />
+    </Box>
+  )
+}
 
   return (
     <Box pb={50}>
@@ -84,16 +36,16 @@ function SemuaPerbekel() {
           {data.map((v, k) => {
             return (
               <Box key={k}>
-                <Paper mb={50} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
+                <Paper h={620} mb={50} radius={26} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
                   <Box>
                     <Center>
-                      <Image src={v.foto} alt='' />
+                      <Image src={v.image?.link} alt='' />
                     </Center>
                   </Box>
                   <Box>
                     <Stack gap={"sm"} py={10}>
                       <Text ta={"center"} fw={"bold"} fz={{ base: "h3", md: "h3" }}>{v.nama}</Text>
-                      <Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.wilayah}</Text>
+                      <Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.daerah}</Text>
                       <Text ta={"center"} fz={{ base: "h5", md: "h4" }}>{v.periode}</Text>
                     </Stack>
                   </Box>

src/app/darmasaba/(pages)/desa/profile/ui/visimisiDesa.tsx

@@ -1,8 +1,27 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Stack, Paper, Image, Text, ListItem, List } from '@mantine/core';
-import React from 'react';
+import { Box, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
 
 function VisimisiDesa() {
+    const state = useProxy(stateProfileDesa.visiMisiDesa)
+
+    useEffect(() => {
+        state.findUnique.load("edit")
+    }, [])
+
+    const { data, loading } = state.findUnique
+
+    if (loading || !data) {
+        return (
+            <Box py={10}>
+                <Skeleton h={500} />
+            </Box>
+        )
+    }
     return (
         <>
             <Box pb={30}>
@@ -12,24 +31,12 @@ function VisimisiDesa() {
                     </Box>
                     <Paper p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
                         <Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Visi Desa</Text>
-                        <Text fz={"1.5rem"} ta={"center"} fw={"bold"}>
-                            “Mewujudkan Desa Darmasaba yang sejahtera, unggul, religius, berbudaya, dan aman dengan berlandaskan Tri Hita Karana”
-                        </Text>
+                        <Text fz={"1.5rem"} ta={"center"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.visi }} />
                     </Paper>
                     <Paper my={20} p={"xl"} bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
                         <Text c={colors['blue-button']} ta={"center"} fw={"lighter"} fz={"2.5rem"}>Misi Desa</Text>
-                        <Box >
-                            <List type='ordered'>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Memperkokoh kerukunan hidup masyarakat dalam jalinan adat, budaya, olahraga, dan agama.</ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan kualitas pelayanan publik dengan menerapkan teknologi informasi dan komunikasi terintegrasi.</ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan tata kelola pemerintah desa dengan menerapkan prinsip good governance dan good clean goverment.</ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan kualitas pendidikan, kesehatan, Keluarga Berencana serta pengelolaan kependudukan.</ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Memperkuat usaha mikro kecil dan menengah (UMKM) dan BUMDesa sebagai pilar ekonomi masyarakat.</ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Mewujudkan tatanan kehidupan bermasyarakat yang menjunjung tinggi penegakan hukum dan HAM. </ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan perlindungan dan pengelolaan terhadap sumber daya alam dan lingkungan hidup.</ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Memperkuat daya saing desa melalui peningkatan mutu sumber daya manusia dan infrastruktur desa berbasis potensi desa. </ListItem>
-                                <ListItem fz={{ base: "md", md: "h3"}} ta={"justify"}>Meningkatkan sinergisitas potensi budaya, pertanian dalam arti luas dan pariwisata.</ListItem>
-                            </List>
+                        <Box>
+                            <Text fz={"1.5rem"} fw={"bold"} dangerouslySetInnerHTML={{ __html: data.misi }} />
                         </Box>
                     </Paper>
                 </Stack>

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/kepuasan/index.tsx

@@ -1,109 +1,201 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 "use client";
+import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan";
 import colors from "@/con/colors";
 import { BarChart, PieChart } from '@mantine/charts';
-import { Box, Center, Container, Flex, Paper, SimpleGrid, Stack, Text } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
+import { Box, Button, Center, Container, Flex, Modal, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput, Title } from "@mantine/core";
+import { useDisclosure, useShallowEffect } from "@mantine/hooks";
+import { useState } from "react";
+import { useProxy } from "valtio/utils";
 
-const dataBarChart = [
-  {
-    bulan: "Januari",
-    responden: "480"
-  },
-  {
-    bulan: "Februari",
-    responden: "730"
-  },
-  {
-    bulan: "Maret",
-    responden: "740"
-  },
-  {
-    bulan: "April",
-    responden: "80"
-  },
-  {
-    bulan: "Mei",
-    responden: "250"
-  },
-  {
-    bulan: "Juni",
-    responden: "900"
-  },
-  {
-    bulan: "Juli",
-    responden: "230"
-  },
-  {
-    bulan: "Agustus",
-    responden: "255"
-  },
-  {
-    bulan: "September",
-    responden: "650"
-  },
-  {
-    bulan: "Oktober",
-    responden: "730"
-  },
-  {
-    bulan: "November",
-    responden: "800"
-  },
-  {
-    bulan: "Desember",
-    responden: "1000"
-  },
+interface ChartDataItem {
+  name: string;
+  value: number;
+  color: string;
+  label?: string;
+}
 
-]
 
-const dataPieChart = [
-  { name: "Laki-laki", value: 70, color: colors["blue-button"] },
-  { name: "Perempuan", value: 30, color: colors.orange },
-]
-
-const dataPieChart2 = [
-  { name: "Sangat Baik", value: 75, color: colors["blue-button"] },
-  { name: "Buruk", value: 25, color: colors.orange },
-]
-
-const dataPieChart3 = [
-  { name: "Umur 18-44", value: 65, color: colors["blue-button"] },
-  { name: "Umur 44-60+", value: 35, color: colors.orange },
-]
 
 function Kepuasan() {
-  const isMobile = useMediaQuery('(max-width: 768px)');
+  const state = useProxy(indeksKepuasanState.responden);
+  const { data, loading } = state.findMany;
+  const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
+  const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
+  const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
+  const [barChartData, setBarChartData] = useState<Array<{ month: string; count: number }>>([]);
+  const [opened, { open, close }] = useDisclosure(false)
+
+  const resetForm = () => {
+    state.create.form = {
+      ...state.create.form,
+      name: "",
+      tanggal: "",
+      jenisKelaminId: "",
+      ratingId: "",
+      kelompokUmurId: "",
+    }
+  }
+
+  useShallowEffect(() => {
+    indeksKepuasanState.jenisKelaminResponden.findMany.load()
+    indeksKepuasanState.pilihanRatingResponden.findMany.load()
+    indeksKepuasanState.kelompokUmurResponden.findMany.load()
+  })
+
+  const handleSubmit = async () => {
+    try {
+      const id = await state.create.create();
+      if (typeof id !== 'undefined') {
+        const idStr = String(id);
+        await state.findUnique.load(idStr);
+      }
+      resetForm();
+      close()
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+
+  // Load data on component mount
+  useShallowEffect(() => {
+    if (!data && !loading) {
+      state.findMany.load(1, 1000); // Load first page with a large limit to get all data
+      return;
+    }
+
+    if (data && data.length > 0) {
+      // Hitung total berdasarkan jenis kelamin
+      const totalLaki = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'laki-laki').length;
+      const totalPerempuan = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'perempuan').length;
+
+      // Hitung total berdasarkan rating
+      const totalSangatBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat baik').length;
+      const totalBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'baik').length;
+      const totalKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'kurang baik').length;
+      const totalSangatKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat kurang baik').length;
+
+      // Hitung total berdasarkan kelompok umur
+      const totalMuda = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'muda').length;
+      const totalDewasa = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'dewasa').length;
+      const totalLansia = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'lansia').length;
+
+      // Update gender chart data
+      setDonutDataJenisKelamin([
+        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
+        { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
+      ]);
+
+      // Update rating chart data
+      setDonutDataRating([
+        { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
+        { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
+        { name: 'Kurang Baik', value: totalKurangBaik, color: '#FFA500' },
+        { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
+      ]);
+
+      // Update age group chart data
+      setDonutDataKelompokUmur([
+        { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
+        { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
+        { name: 'Lansia', value: totalLansia, color: '#FFA500' },
+      ]);
+
+      // Process data for bar chart (group by month)
+      const monthYearMap = new Map<string, number>();
+
+      data.forEach((item: any) => {
+        // Try both createdAt and tanggal fields
+        const dateValue = item.tanggal || item.createdAt;
+        if (!dateValue) return;
+
+        const parsedDate = new Date(dateValue);
+        if (isNaN(parsedDate.getTime())) return;
+
+        const month = parsedDate.getMonth() + 1;
+        const year = parsedDate.getFullYear();
+        const monthYearKey = `${year}-${String(month).padStart(2, '0')}`;
+
+        monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
+      });
+
+      // Convert map to array and sort by date
+      const barData = Array.from(monthYearMap.entries())
+        .map(([key, count]) => {
+          const [year, month] = key.split('-');
+          const monthName = new Date(Number(year), Number(month) - 1, 1)
+            .toLocaleString('id-ID', { month: 'long' });
+          return {
+            month: `${monthName} ${year}`,
+            count,
+            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
+          };
+        })
+        .sort((a, b) => a.sortKey - b.sortKey)
+        .map(({ month, count }) => ({ month, count }));
+
+      setBarChartData(barData);
+    }
+  }, [data]);
+
+  if ((loading && !data) || !data) {
+    return (
+      <Stack py={10} px="xl">
+        <Skeleton height={300} mb="md" />
+        <SimpleGrid cols={{ base: 1, md: 3 }}>
+          <Skeleton height={300} />
+          <Skeleton height={300} />
+          <Skeleton height={300} />
+        </SimpleGrid>
+      </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Stack py={10}>
+        <Text c="dimmed" ta="center" my="md">
+          Belum ada data untuk ditampilkan
+        </Text>
+      </Stack>
+    );
+  }
   return (
     <Stack p={"sm"}>
       <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
         <Center>
-          <Text ta={"center"} fz={{base: "2.4rem", md: "3.4rem"}}>Indeks Kepuasan Masyarakat</Text>
+          <Text ta={"center"} fz={{ base: "2.4rem", md: "3.4rem" }}>Indeks Kepuasan Masyarakat</Text>
+        </Center>
+        <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
+        <Center mt={10}>
+          <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
         </Center>
-        <Text fz={{base: "1.2rem", md: "1.4rem"}} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
       </Container>
       <Box px={"xl"}>
         <Paper p={"lg"} bg={colors.Bg}>
           <Paper p={"lg"}>
-            <Flex justify={"space-between"} align={"center"}>
-              <Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
-              <Box>
-                <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
-                <Text fz={"h1"} fw={"bold"} c={colors["blue-button"]}>2500</Text>
-              </Box>
-            </Flex>
-            <BarChart
-              py={"xl"}
-              h={300}
-              data={dataBarChart}
-              dataKey="bulan"
-              tickLine="y"
-              series={[
-                {
-                  name: "responden",
-                  color: colors["blue-button"],
-                },
-              ]}
-            />
+            <Stack gap={"xs"}>
+              <Flex justify={"space-between"} align={"center"}>
+                <Text fw={"bold"}>Pelayanan Terhadap Publik Desa Darmasaba</Text>
+                <Box>
+                  <Text fz={"sm"} fw={"bold"} c={colors["blue-button"]}>Total Responden</Text>
+                  <Text ta={"end"} fz={"h1"} fw={"bold"} c={colors["blue-button"]}>
+                    {state.findMany.total.toLocaleString('id-ID')}
+                  </Text>
+                </Box>
+              </Flex>
+              <BarChart
+                h={300}
+                data={barChartData}
+                dataKey="month"
+                series={[{ name: 'count', color: colors['blue-button'] }]}
+                tickLine="y"
+                xAxisLabel="Bulan"
+                yAxisLabel="Jumlah Responden"
+                withTooltip
+                tooltipAnimationDuration={200}
+              />
+            </Stack>
           </Paper>
           <Box py={"xl"}>
             <SimpleGrid
@@ -114,61 +206,217 @@ function Kepuasan() {
                 xl: 3
               }}
             >
-              <Box>
-                <Paper p={"lg"}>
-                  <Text fw={"bold"}>Jenis Kelamin</Text>
-                  <Box py={"xl"}>
-                    <PieChart
-                      size={isMobile ? 100 : 220}
-                      withLabelsLine
-                      labelsPosition="outside"
-                      labelsType="percent"
-                      withLabels
-                      data={dataPieChart}
-                      withTooltip tooltipDataSource="segment" mx="auto"
+              {/* Chart Jenis Kelamin */}
+              <Paper bg={colors['white-1']} p="md" radius="md">
+                <Stack>
+                  <Title order={4}>Jenis Kelamin</Title>
+                  {donutDataJenisKelamin.every(item => item.value === 0) ? (
+                    <Text c="dimmed" ta="center" my="md">
+                      Belum ada data untuk ditampilkan dalam grafik
+                    </Text>
+                  ) : (
+                    <Paper p="md" radius="md" withBorder>
+                      <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                        <Box style={{ position: 'relative', width: '100%' }}>
+                          <Center>
+                            <PieChart
+                              withLabels
+                              withTooltip
+                              labelsType="percent"
+                              size={200}
+                              data={donutDataJenisKelamin}
+                            />
+                          </Center>
+                        </Box>
+                        <Stack gap="sm" mt="md">
+                          {donutDataJenisKelamin.map((entry) => (
+                            <Flex key={entry.name} gap="md" align="center">
+                              <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                              <Text size="sm">{entry.name}: {entry.value}</Text>
+                            </Flex>
+                          ))}
+                        </Stack>
+                      </Box>
+                    </Paper>
+                  )}
+                </Stack>
+              </Paper>
 
-                    />
-                  </Box>
-                </Paper>
-              </Box>
-              <Box>
-                <Paper p={"lg"}>
-                  <Text fw={"bold"}>Pilihan</Text>
-                  <Box py={"xl"}>
-                    <PieChart
-                      size={isMobile ? 100 : 220}
-                      withLabelsLine
-                      labelsPosition="outside"
-                      labelsType="percent"
-                      withLabels
-                      data={dataPieChart2}
-                      withTooltip tooltipDataSource="segment" mx="auto"
+              {/* Chart Rating */}
+              <Paper bg={colors['white-1']} p="md" radius="md">
+                <Stack>
+                  <Title order={4}>Pilihan</Title>
+                  {donutDataRating.every(item => item.value === 0) ? (
+                    <Text c="dimmed" ta="center" my="md">
+                      Belum ada data untuk ditampilkan dalam grafik
+                    </Text>
+                  ) : (
+                    <Paper p="md" radius="md" withBorder>
+                      <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                        <Box style={{ position: 'relative', width: '100%' }}>
+                          <Center>
+                            <PieChart
+                              withTooltip
+                              tooltipAnimationDuration={200}
+                              withLabels
+                              labelsPosition="outside"
+                              labelsType="percent"
+                              withLabelsLine
+                              size={200}
+                              data={donutDataRating}
+                            />
+                          </Center>
+                        </Box>
+                        <Box mt="md" style={{ width: '100%' }}>
+                          <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                            {donutDataRating.map((entry) => (
+                              <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
+                                <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
+                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  {entry.name}: {entry.value}
+                                </Text>
+                              </Flex>
+                            ))}
+                          </SimpleGrid>
+                        </Box>
+                      </Box>
+                    </Paper>
+                  )}
+                </Stack>
+              </Paper>
 
-                    />
-                  </Box>
-                </Paper>
-              </Box>
-              <Box>
-                <Paper p={"lg"}>
-                  <Text fw={"bold"}>Umur</Text>
-                  <Box py={"xl"}>
-                    <PieChart
-                      size={isMobile ? 100 : 220}
-                      withLabelsLine
-                      labelsPosition="outside"
-                      labelsType="percent"
-                      withLabels
-                      data={dataPieChart3}
-                      withTooltip tooltipDataSource="segment" mx="auto"
-                    />
-                  </Box>
-                </Paper>
-              </Box>
+              {/* Chart Kelompok Umur */}
+              <Paper bg={colors['white-1']} p="md" radius="md">
+                <Stack>
+                  <Title order={4}>Umur</Title>
+                  {donutDataKelompokUmur.every(item => item.value === 0) ? (
+                    <Text c="dimmed" ta="center" my="md">
+                      Belum ada data untuk ditampilkan dalam grafik
+                    </Text>
+                  ) : (
+                    <Paper p="md" radius="md" withBorder>
+                      <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+                        <Box style={{ position: 'relative', width: '100%' }}>
+                          <Center>
+                            <PieChart
+                              withTooltip
+                              tooltipAnimationDuration={200}
+                              withLabels
+                              labelsPosition="outside"
+                              labelsType="percent"
+                              withLabelsLine
+                              size={190}
+                              data={donutDataKelompokUmur}
+                            />
+                          </Center>
+                        </Box>
+                        <Box mt="md" style={{ width: '100%' }}>
+                          <SimpleGrid cols={2} spacing="xs" verticalSpacing="xs">
+                            {donutDataKelompokUmur.map((entry) => (
+                              <Flex key={entry.name} gap="sm" align="center" style={{ overflow: 'hidden' }}>
+                                <Box bg={entry.color} w={16} h={16} style={{ flexShrink: 0 }} />
+                                <Text size="xs" lineClamp={1} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                                  {entry.name}: {entry.value}
+                                </Text>
+                              </Flex>
+                            ))}
+                          </SimpleGrid>
+                        </Box>
+                      </Box>
+                    </Paper>
+                  )}
+                </Stack>
+              </Paper>
             </SimpleGrid>
-
           </Box>
         </Paper>
       </Box>
+      {/* Modal */}
+      <Modal opened={opened} onClose={close} title="Ajukan Responden" centered>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <Stack>
+            <TextInput
+              label="Nama"
+              type='text'
+              placeholder="masukkan nama"
+              value={state.create.form.name}
+              onChange={(val) => {
+                state.create.form.name = val.currentTarget.value;
+              }}
+            />
+            <TextInput
+              label="Tanggal"
+              type="date"
+              placeholder="masukkan tanggal"
+              value={state.create.form.tanggal}
+              onChange={(val) => {
+                state.create.form.tanggal = val.currentTarget.value;
+              }}
+            />
+            <Select
+              key={"jenisKelamin"}
+              label={"Jenis Kelamin"}
+              placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
+              value={state.create.form.jenisKelaminId || ""}
+              onChange={(val) => {
+                state.create.form.jenisKelaminId = val ?? "";
+              }}
+              data={
+                (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                  .filter(Boolean) // Hapus null, undefined, dll
+                  .map((item) => ({
+                    value: item.id,
+                    label: item.name || 'Tanpa Nama',
+                  }))
+              }
+              disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
+            />
+            <Select
+              key={"rating_responden"}
+              label={"Rating"}
+              placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
+              value={state.create.form.ratingId || ""}
+              onChange={(val) => {
+                state.create.form.ratingId = val ?? "";
+              }}
+              data={
+                (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                  .filter(Boolean) // Hapus null, undefined, dll
+                  .map((item) => ({
+                    value: item.id,
+                    label: item.name || 'Tanpa Nama',
+                  }))
+              }
+              disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+            />
+            <Select
+              key={"kelompokUmur"}
+              label={"Kelompok Umur"}
+              placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
+              value={state.create.form.kelompokUmurId || ""}
+              onChange={(val) => {
+                state.create.form.kelompokUmurId = val ?? "";
+              }}
+              data={
+                (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                  .filter(Boolean) // Hapus null, undefined, dll
+                  .map((item) => ({
+                    value: item.id,
+                    label: item.name || 'Tanpa Nama',
+                  }))
+              }
+              disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+            />
+            <Button
+              mt={10}
+              bg={colors['blue-button']}
+              onClick={handleSubmit}
+            >
+              Submit
+            </Button>
+          </Stack>
+        </Paper>
+      </Modal>
     </Stack>
   );
 }

src/app/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>
           );
         })}

src/app/percobaan/page.tsx

@@ -53,7 +53,7 @@ function Page() {
           {gambar && <Image w={400} src={gambar || null} alt="gambar" />}
         </Card>
 
-
+        <Text>Test</Text>
         <SimpleGrid cols={6} p={"lg"}>
           {listFile.map((v) => (
             <Image key={v} src={v} alt="gambar" />