Tampilan UI Admin PPID IKM & API

Profile PPID clear

package.json

@@ -24,6 +24,7 @@
     "@mantine/core": "^7.17.4",
     "@mantine/dates": "^7.17.4",
     "@mantine/dropzone": "^7.17.0",
+    "@mantine/form": "^8.1.0",
     "@mantine/hooks": "^7.17.4",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",

prisma/data/ppid/profile-ppid/profilePPid.json

@@ -5,7 +5,6 @@
     "biodata": "<p>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.</p>",
     "riwayat": "<ul> <li>2021 - 2027: Perbekel Desa Darmasaba</li> <li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li> <li>2020 - Sekarang: Founder Ugawa Record Music Studio</li> <li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li> </ul>",
     "pengalaman": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
-    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>",
-    "imageUrl": "/uploads/seeded-images/profile-ppid/perbekel.png"
+    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>"
   }
 ]

prisma/data/ppid/struktur-ppid/strukturPPID.json

@@ -0,0 +1,6 @@
+[
+    {
+        "id" : "1",
+        "name" : "Struktur PPID"
+    }
+]

prisma/schema.prisma

@@ -62,11 +62,24 @@ model FileStorage {
   link        String
   Berita      Berita[]
   PotensiDesa PotensiDesa[]
-
   Posyandu Posyandu[]
+  ProfilePPID ProfilePPID[]
+  StrukturPPID StrukturPPID[]
 }
 
 //========================================= MENU PPID ========================================= //
+
+//========================================= STRUKTUR PPID ========================================= //
+model StrukturPPID {
+  id        String   @id @default(cuid())
+  name      String   @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
   id        String   @id @default(cuid())
@@ -91,23 +104,23 @@ model DasarHukumPPID {
 
 // ========================================= PROFILE PPID ========================================= //
 model ProfilePPID {
-  id         String   @id @default(cuid())
-  name       String   @db.Text
-  biodata    String   @db.Text
-  riwayat    String   @db.Text
-  pengalaman String   @db.Text
-  unggulan   String   @db.Text
-  imageUrl   String?
-  createdAt  DateTime @default(now())
-  updatedAt  DateTime @updatedAt
-  deletedAt  DateTime @default(now())
-  isActive   Boolean  @default(true)
+  id         String      @id @default(cuid())
+  name       String      @db.Text
+  biodata    String      @db.Text
+  riwayat    String      @db.Text
+  pengalaman String      @db.Text
+  unggulan   String      @db.Text
+  image      FileStorage? @relation(fields: [imageId], references: [id])
+  imageId    String?
+  createdAt  DateTime    @default(now())
+  updatedAt  DateTime    @updatedAt
+  deletedAt  DateTime    @default(now())
+  isActive   Boolean     @default(true)
 }
 
 // ========================================= DAFTAR INFORMASI PUBLIK ========================================= //
 model DaftarInformasiPublik {
   id             String   @id @default(cuid())
-  nomor          Int      @default(autoincrement())
   jenisInformasi String
   deskripsi      String
   tanggal        String
@@ -183,7 +196,7 @@ model FormulirPermohonanKeberatan {
 
 // ========================================= IKM ========================================= //
 model IndeksKepuasanMasyarakat {
-  id        Int      @id @default(autoincrement())
+  id        String   @id @default(cuid())
   label     String
   kepuasan  String
   createdAt DateTime @default(now())

prisma/seed.ts

@@ -6,13 +6,10 @@ import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInf
 import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
 import layanan from "./data/list-layanan.json";
 import potensi from "./data/list-potensi.json";
-import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
 import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
-import path from "path";
-import fs from "fs";
-import { mkdir, writeFile } from "fs/promises";
-import { v4 as uuid } from "uuid";
+import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
+import strukturPPID from "./data/ppid/struktur-ppid/strukturPPID.json";
 
 (async () => {
   for (const l of layanan) {
@@ -31,6 +28,22 @@ import { v4 as uuid } from "uuid";
 
   console.log("layanan success ...");
 
+  for (const s of strukturPPID) {
+    await prisma.strukturPPID.upsert({
+      where: {
+        id: s.id,
+      },
+      update: {
+        name: s.name,
+      },
+      create: {
+        id: s.id,
+        name: s.name,
+      },
+    });
+  }
+  console.log("struktur ppid success ...");
+
   for (const p of potensi) {
     await prisma.potensi.upsert({
       where: {
@@ -124,56 +137,29 @@ import { v4 as uuid } from "uuid";
   }
   console.log("cara memperoleh salinan informasi success ...");
 
-  const seedProfilePPID = async () => {
-    const targetDir = path.resolve("public", "uploads", "seeded-images", "profile-ppid")
-  
-    // Buat folder hanya jika belum ada
-    if (!fs.existsSync(targetDir)) {
-      await mkdir(targetDir, { recursive: true })
-    }
-  
-    for (const c of profilePPID) {
-      let finalImageUrl = c.imageUrl
-  
-      if (c.imageUrl.startsWith("/uploads/seeded-images/")) {
-        const filename = path.basename(c.imageUrl)
-        const seedImagePath = path.resolve("prisma", "seed-images", filename)
-  
-        const targetFilename = `${uuid()}_${filename}`
-        const targetPath = path.join(targetDir, targetFilename)
-  
-        const buffer = fs.readFileSync(seedImagePath)
-        await writeFile(targetPath, buffer)
-  
-        finalImageUrl = `/uploads/seeded-images/profile-ppid/${targetFilename}`
-      }
-  
-      await prisma.profilePPID.upsert({
-        where: { id: c.id },
-        update: {
-          name: c.name,
-          biodata: c.biodata,
-          riwayat: c.riwayat,
-          pengalaman: c.pengalaman,
-          unggulan: c.unggulan,
-          imageUrl: finalImageUrl,
-        },
-        create: {
-          id: c.id,
-          name: c.name,
-          biodata: c.biodata,
-          riwayat: c.riwayat,
-          pengalaman: c.pengalaman,
-          unggulan: c.unggulan,
-          imageUrl: finalImageUrl,
-        },
-      })
-    }
-  
-    console.log("✅ profilePPID seeded from JSON with image copying")
+  for (const c of profilePPID) {
+    await prisma.profilePPID.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-update
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-create
+      },
+    });
   }
-  
-  await seedProfilePPID()
+  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
 
   for (const v of visiMisiPPID) {
     await prisma.visiMisiPPID.upsert({
@@ -210,8 +196,6 @@ import { v4 as uuid } from "uuid";
     });
   }
   console.log("dasar hukum PPID success ...");
-
-
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

src/app/admin/(dashboard)/_com/modalKonfirmasiHapus.tsx

@@ -21,7 +21,7 @@ export function ModalKonfirmasiHapus({
     <Modal
       opened={opened}
       onClose={onClose}
-      title="Konfirmasi Hapus"
+      title={<Text fw={"bold"} fz={"xl"}>Konfirmasi Hapus</Text>}
       centered
     >
       <Text mb="md">{text}</Text>

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

@@ -5,61 +5,239 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateDaftarInformasi = z.object({
-    jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
-    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
-    tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
-})
+  jenisInformasi: z.string().min(3, "Jenis Informasi minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  tanggal: z.string().min(3, "Tanggal minimal 3 karakter"),
+});
+
+const defaultForm = {
+  jenisInformasi: "",
+  deskripsi: "",
+  tanggal: "",
+};
 
 type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
-    select: {
-        jenisInformasi: true;
-        deskripsi: true;
-        tanggal: true;
-    };
+  select: {
+    jenisInformasi: true;
+    deskripsi: true;
+    tanggal: true;
+  };
 }>;
 
-const daftarInformasi = proxy({
-    create: {
-        form: {} as DaftarInformasi,
-        loading: false,
-        async create() {
-            const cek = templateDaftarInformasi.safeParse(daftarInformasi.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                daftarInformasi.create.loading = true;
-                const res = await ApiFetch.api.ppid.daftarinformasipublik["create"].post(daftarInformasi.create.form);
-                if (res.status === 200) {
-                    daftarInformasi.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                daftarInformasi.create.loading = false;
-            }
-        },
-    },
-    findMany: {
-        data: null as
-        | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
-        | null,
-        async load() {
-            const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get();
-            if (res.status === 200) {
-                daftarInformasi.findMany.data = res.data?.data ?? [];
-            }
+const daftarInformasiPublik = proxy({
+  create: {
+    form: {} as DaftarInformasi,
+    loading: false,
+    async create() {
+      const cek = templateDaftarInformasi.safeParse(
+        daftarInformasiPublik.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        daftarInformasiPublik.create.loading = true;
+        const res = await ApiFetch.api.ppid.daftarinformasipublik[
+          "create"
+        ].post(daftarInformasiPublik.create.form);
+        if (res.status === 200) {
+          daftarInformasiPublik.findMany.load();
+          return toast.success("success create");
         }
-    }
-    });
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        daftarInformasiPublik.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DaftarInformasiPublikGetPayload<{ omit: { isActive: true } }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.ppid.daftarinformasipublik[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        daftarInformasiPublik.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DaftarInformasiPublikGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ppid/daftarinformasipublik/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          daftarInformasiPublik.findUnique.data = data.data ?? null;
+        } else {
+          console.error(
+            "Failed to fetch daftar informasi publik:",
+            res.statusText
+          );
+          daftarInformasiPublik.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching daftar informasi publik:", error);
+        daftarInformasiPublik.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
 
-    const stateDaftarInformasiPublik = proxy({
-        daftarInformasi
-    })
+      try {
+        daftarInformasiPublik.delete.loading = true;
 
-    export default stateDaftarInformasiPublik;
+        const response = await fetch(
+          `/api/ppid/daftarinformasipublik/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Daftar Informasi Publik berhasil dihapus"
+          );
+          await daftarInformasiPublik.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus daftar informasi publik"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus daftar informasi publik");
+      } finally {
+        daftarInformasiPublik.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/ppid/daftarinformasipublik/${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 = {
+            jenisInformasi: data.jenisInformasi,
+            deskripsi: data.deskripsi,
+            tanggal: data.tanggal,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi publik:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateDaftarInformasi.safeParse(
+        daftarInformasiPublik.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        daftarInformasiPublik.edit.loading = true;
+
+        const response = await fetch(
+          `/api/ppid/daftarinformasipublik/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              jenisInformasi: this.form.jenisInformasi,
+              deskripsi: this.form.deskripsi,
+              tanggal: this.form.tanggal,
+            }),
+          }
+        );
+
+        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 daftar informasi publik");
+          await daftarInformasiPublik.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update daftar informasi publik"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating daftar informasi publik:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update daftar informasi publik"
+        );
+        return false;
+      } finally {
+        daftarInformasiPublik.edit.loading = false;
+      }
+    },
+
+    reset() {
+      daftarInformasiPublik.edit.id = "";
+      daftarInformasiPublik.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default daftarInformasiPublik;

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin.ts

@@ -11,12 +11,13 @@ const templateGrafikJenisKelamin = z.object({
 
 type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
   select: {
+    id: true;
     laki: true;
     perempuan: true;
   };
 }>;
 
-const defaultForm: GrafikJenisKelamin = {
+const defaultForm: Omit<GrafikJenisKelamin, 'id'> & { id?: string } = {
   laki: "",
   perempuan: "",
 };
@@ -41,9 +42,16 @@ const grafikBerdasarkanJenisKelamin = proxy({
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          grafikBerdasarkanJenisKelamin.create.form = defaultForm;
-          grafikBerdasarkanJenisKelamin.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanJenisKelamin.create.form = {
+              laki: "",
+              perempuan: "",
+            };
+            grafikBerdasarkanJenisKelamin.findMany.load();
+            return id;
+          }
         }
         return toast.error("failed create");
       } catch (error) {
@@ -69,9 +77,103 @@ const grafikBerdasarkanJenisKelamin = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanJenisKelamin.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanJenisKelamin.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        grafikBerdasarkanJenisKelamin.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultForm},
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateGrafikJenisKelamin.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(
+          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await grafikBerdasarkanJenisKelamin.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik berdasarkan jenis kelamin");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikBerdasarkanJenisKelamin.delete.loading = true;
+
+        const response = await fetch(`/api/ppid/grafikberdasarkanjeniskelamin/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan jenis kelamin berhasil dihapus");
+          await grafikBerdasarkanJenisKelamin.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan jenis kelamin");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan jenis kelamin");
+      } finally {
+        grafikBerdasarkanJenisKelamin.delete.loading = false;
+      }
+    },
+  }
 });
 
-const stateGrafikBerdasarkanJenisKelamin = proxy({
-  grafikBerdasarkanJenisKelamin,
-});
-export default stateGrafikBerdasarkanJenisKelamin;
+export default grafikBerdasarkanJenisKelamin;

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden.ts

@@ -13,6 +13,7 @@ const templateGrafikResponden = z.object({
 
 type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
   select: {
+    id: true;
     sangatbaik: true;
     baik: true;
     kurangbaik: true;
@@ -20,7 +21,7 @@ type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
   };
 }>;
 
-const defaultForm: GrafikResponden = {
+const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
   sangatbaik: "",
   baik: "",
   kurangbaik: "",
@@ -47,9 +48,15 @@ const grafikBerdasarkanResponden = proxy({
           "create"
         ].post(grafikBerdasarkanResponden.create.form);
         if (res.status === 200) {
-          grafikBerdasarkanResponden.create.form = defaultForm;
-          grafikBerdasarkanResponden.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanResponden.create.form = {
+              ...defaultForm
+            };
+            grafikBerdasarkanResponden.findMany.load();
+            return id;
+          }
         }
         return toast.error("failed create");
       } catch (error) {
@@ -75,10 +82,112 @@ const grafikBerdasarkanResponden = proxy({
       }
     },
   },
+  findUnique: {
+    data: null as Prisma.GrafikBerdasarkanRespondenGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/grafikberdasarkanresponden/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan responden:", error);
+        grafikBerdasarkanResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {...defaultForm},
+    loading: false,
+    async byId() {
+      
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const cek = templateGrafikResponden.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      this.loading = true;
+
+      try {
+        const response = await fetch(`/api/ppid/grafikberdasarkanresponden/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+
+        const result = await response.json();
+
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+
+        await grafikBerdasarkanResponden.findMany.load();
+
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik berdasarkan responden");
+      } finally {
+        this.loading = false;
+      }
+    }
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikBerdasarkanResponden.delete.loading = true;
+
+        const response = await fetch(`/api/ppid/grafikberdasarkanresponden/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan responden berhasil dihapus");
+          await grafikBerdasarkanResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan responden");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan responden");
+      } finally {
+        grafikBerdasarkanResponden.delete.loading = false;
+      }
+    }
+  }
 });
 
-const stateGrafikResponden = proxy({
-  grafikBerdasarkanResponden,
-});
-
-export default stateGrafikResponden;
+export default grafikBerdasarkanResponden;

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur.ts

@@ -5,80 +5,182 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateGrafikUmur = z.object({
-    remaja: z.string().min(2, "Data remaja harus diisi"),
-    dewasa: z.string().min(2, "Data dewasa harus diisi"),
-    orangtua: z.string().min(2, "Data orangtua harus diisi"),
-    lansia: z.string().min(2, "Data lansia harus diisi"),
+  remaja: z.string().min(2, "Data remaja harus diisi"),
+  dewasa: z.string().min(2, "Data dewasa harus diisi"),
+  orangtua: z.string().min(2, "Data orangtua harus diisi"),
+  lansia: z.string().min(2, "Data lansia harus diisi"),
 });
 
 type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{
-    select: {
-        remaja: true;
-        dewasa: true;
-        orangtua: true;
-        lansia: true;
-    };
+  select: {
+    id: true;
+    remaja: true;
+    dewasa: true;
+    orangtua: true;
+    lansia: true;
+  };
 }>;
 
-const defaultForm: GrafikUmur = {
-    remaja: "",
-    dewasa: "",
-    orangtua: "",
-    lansia: "",
+const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
+  remaja: "",
+  dewasa: "",
+  orangtua: "",
+  lansia: "",
 };
 
 const grafikBerdasarkanUmur = proxy({
-    create: {
-        form: defaultForm,
-        loading: false,
-        async create() {
-            const cek = templateGrafikUmur.safeParse(
-                grafikBerdasarkanUmur.create.form
-            );
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-            try {
-                grafikBerdasarkanUmur.create.loading = true;
-                const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-                    "create"
-                ].post(grafikBerdasarkanUmur.create.form);
-                if (res.status === 200) {
-                    grafikBerdasarkanUmur.create.form = defaultForm;
-                    grafikBerdasarkanUmur.findMany.load();
-                    return toast.success("success create");
-                }
-                return toast.error("failed create");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                grafikBerdasarkanUmur.create.loading = false;
-            }
-        },
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateGrafikUmur.safeParse(
+        grafikBerdasarkanUmur.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        grafikBerdasarkanUmur.create.loading = true;
+        const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+          "create"
+        ].post(grafikBerdasarkanUmur.create.form);
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikBerdasarkanUmur.create.form = {
+              remaja: "",
+              dewasa: "",
+              orangtua: "",
+              lansia: "",
+            };
+            grafikBerdasarkanUmur.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        grafikBerdasarkanUmur.create.loading = false;
+      }
     },
-    findMany: {
-        data: null as 
-        | Prisma.GrafikBerdasarkanUmurGetPayload<{
-            omit: { isActive: true };
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikBerdasarkanUmurGetPayload<{
+          omit: { isActive: true };
         }>[]
-        | null,
-        loading: false,
-        async load() {
-            const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
-            }
-        },
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
+      }
     },
-})
+  },
+  findUnique: {
+    data: null as Prisma.GrafikBerdasarkanUmurGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ppid/grafikberdasarkanumur/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          grafikBerdasarkanUmur.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikBerdasarkanUmur.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan umur:", error);
+        grafikBerdasarkanUmur.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+        const id = this.id;
+        if (!id) {
+            toast.warn("ID tidak valid");
+            return null;
+        }
+        const cek = templateGrafikUmur.safeParse(this.form);
+        if (!cek.success) {
+            const err = `[${cek.error.issues
+              .map((v) => `${v.path.join(".")}`)
+              .join("\n")}] required`;
+            toast.error(err);
+            return null;
+        }
+        this.loading = true;
+        try {
+            const response = await fetch(`/api/ppid/grafikberdasarkanumur/${id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(this.form),
+            });
+            const result = await response.json();
+            if (!response.ok || !result?.success) {
+                throw new Error(result?.message || "Gagal update data");
+            }
+            toast.success("Berhasil update data!");
+            await grafikBerdasarkanUmur.findMany.load();
+            return result.data;
+        } catch (error) {
+            console.error("Error update data:", error);
+            toast.error("Gagal update data grafik berdasarkan umur");
+        } finally {
+            this.loading = false;
+        }
+    }
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
 
-const stateGrafikBerdasarkanUmur = proxy({
-    grafikBerdasarkanUmur,
-})
+      try {
+        grafikBerdasarkanUmur.delete.loading = true;
 
-export default stateGrafikBerdasarkanUmur;
+        const response = await fetch(`/api/ppid/grafikberdasarkanumur/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik berdasarkan umur berhasil dihapus");
+          await grafikBerdasarkanUmur.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik berdasarkan umur");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan umur");
+      } finally {
+        grafikBerdasarkanUmur.delete.loading = false;
+      }
+    }
+  }
+});
+
+export default grafikBerdasarkanUmur;

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan.ts

@@ -11,12 +11,13 @@ const templateGrafikHasilKepuasanMasyarakat = z.object({
 
 type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{
   select: {
+    id: true;
     label: true;
     kepuasan: true;
   };
 }>;
 
-const defaultForm: GrafikHasilKepuasanMasyarakat = {
+const defaultForm: Omit<GrafikHasilKepuasanMasyarakat, 'id'> & { id?: string } = {
   label: "",
   kepuasan: "",
 };
@@ -41,13 +42,18 @@ const grafikHasilKepuasanMasyarakat = proxy({
           grafikHasilKepuasanMasyarakat.create.form
         );
         if (res.status === 200) {
-          grafikHasilKepuasanMasyarakat.create.form = {
-            label: "",
-            kepuasan: ""
-          };
-          grafikHasilKepuasanMasyarakat.findMany.load();
-          return toast.success("success create");
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            grafikHasilKepuasanMasyarakat.create.form = {
+              label: "",
+              kepuasan: "",
+            };
+            grafikHasilKepuasanMasyarakat.findMany.load();
+            return id;
+          }
         }
+        
         return toast.error("failed create");
       } catch (error) {
         console.log((error as Error).message);
@@ -58,19 +64,127 @@ const grafikHasilKepuasanMasyarakat = proxy({
   },
   findMany: {
     data: null as
-    | Prisma.IndeksKepuasanMasyarakatGetPayload<{ omit: { isActive: true } }>[]
-    | null,
+      | Prisma.IndeksKepuasanMasyarakatGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
     async load() {
-        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["find-many"].get();
-        if (res.status === 200) {
-            grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+      const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        grafikHasilKepuasanMasyarakat.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.IndeksKepuasanMasyarakatGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/grafikhasilkepuasamanmasyarakat/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          grafikHasilKepuasanMasyarakat.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          grafikHasilKepuasanMasyarakat.findUnique.data = null;
         }
+      } catch (error) {
+        console.error("Error loading grafik hasil kepuasan masyarakat:", error);
+        grafikHasilKepuasanMasyarakat.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+    
+      // ✅ Validasi pakai Zod
+      const cek = templateGrafikHasilKepuasanMasyarakat.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+    
+      this.loading = true;
+    
+      try {
+        const response = await fetch(`/api/ppid/grafikhasilkepuasamanmasyarakat/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+    
+        const result = await response.json();
+    
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+    
+        toast.success("Berhasil update data!");
+    
+        // ✅ Optional: refresh list kalau kamu langsung ke halaman list
+        await grafikHasilKepuasanMasyarakat.findMany.load();
+    
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data grafik hasil kepuasan masyarakat");
+      } finally {
+        this.loading = false;
+      }
     }
+    
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        grafikHasilKepuasanMasyarakat.delete.loading = true;
+
+        const response = await fetch(`/api/ppid/grafikhasilkepuasamanmasyarakat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik hasil kepuasan masyarakat berhasil dihapus");
+          await grafikHasilKepuasanMasyarakat.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik hasil kepuasan masyarakat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik hasil kepuasan masyarakat");
+      } finally {
+        grafikHasilKepuasanMasyarakat.delete.loading = false;
+      }
+    },
   }
 });
 
-const stateGrafikHasilKepuasanMasyarakat = proxy({
-  grafikHasilKepuasanMasyarakat,
-});
-
-export default stateGrafikHasilKepuasanMasyarakat;
+export default grafikHasilKepuasanMasyarakat;

src/app/admin/(dashboard)/_state/ppid/profile_ppid/profile_PPID.ts

@@ -1,4 +1,3 @@
-import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
@@ -13,11 +12,18 @@ const templateForm = z.object({
   riwayat: z.string().min(3, "Riwayat minimal 3 karakter"),
   pengalaman: z.string().min(3, "Pengalaman minimal 3 karakter"),
   unggulan: z.string().min(3, "Unggulan minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
 });
 
-/**
- * Tipe data ProfilePPID yang digunakan dalam form dan API, berdasarkan Prisma schema.
- */
+const defaultForm = {
+  name: "",
+  biodata: "",
+  riwayat: "",
+  pengalaman: "",
+  unggulan: "",
+  imageId: "",
+};
+
 type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
   select: {
     id: true;
@@ -26,147 +32,170 @@ type ProfilePPIDForm = Prisma.ProfilePPIDGetPayload<{
     riwayat: true;
     pengalaman: true;
     unggulan: true;
-    imageUrl: true;
+    imageId: true;
+    image?: {
+      select: {
+        link: true;
+      };
+    };
   };
 }>;
 
 /**
- * State utama ProfilePPID yang mencakup fitur:
- * - Ambil data berdasarkan ID
- * - Update data
- * - Upload gambar
+ * Improved State Management - Consolidated and more robust
  */
 const stateProfilePPID = proxy({
-  /**
-   * Bagian untuk ambil data berdasarkan ID
-   */
-  findById: {
+  // Consolidated data management
+  profile: {
     data: null as ProfilePPIDForm | null,
     loading: false,
+    error: null as string | null,
 
-    /**
-     * Inisialisasi data kosong ke dalam state.
-     */
-    initialize() {
-      stateProfilePPID.findById.data = {
-        id: '',
-        name: '',
-        biodata: '',
-        riwayat: '',
-        pengalaman: '',
-        unggulan: '',
-        imageUrl: ''
-      } as ProfilePPIDForm;
-    },
-
-    /**
-     * Mengambil data profil berdasarkan ID.
-     * @param {string} id - ID dari profile yang ingin diambil.
-     */
+    // Single method to load profile data
     async load(id: string) {
-      try {
-        stateProfilePPID.findById.loading = true;
-        const res = await ApiFetch.api.ppid.profileppid["find-by-id"].get({
-          query: { id },
-        });
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
 
-        if (res.status === 200) {
-          stateProfilePPID.findById.data = res.data?.data ?? null;
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/ppid/profileppid/${id}`);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+        
+        if (result.success) {
+          this.data = result.data;
+          return result.data;
         } else {
-          toast.error("Gagal mengambil data profile");
+          throw new Error(result.message || "Gagal mengambil data profile");
         }
       } catch (error) {
-        console.error((error as Error).message);
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load profile error:", errorMessage);
         toast.error("Terjadi kesalahan saat mengambil data profile");
+        return null;
       } finally {
-        stateProfilePPID.findById.loading = false;
+        this.loading = false;
       }
     },
+
+    // Reset profile data
+    reset() {
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    }
   },
 
-  /**
-   * Bagian untuk update data profile
-   */
-  update: {
+  // Edit form management
+  editForm: {
+    id: "",
+    form: { ...defaultForm },
     loading: false,
+    error: null as string | null,
+    isReadOnly: false, // Flag untuk data yang tidak bisa diedit
 
-    /**
-     * Melakukan validasi dan menyimpan perubahan data profile ke server.
-     * @param {ProfilePPIDForm} data - Data profil yang akan disimpan.
-     */
-    async save(data: ProfilePPIDForm) {
-      const cek = templateForm.safeParse(data);
+    // Initialize form with profile data
+    initialize(profileData: ProfilePPIDForm) {
+      this.id = profileData.id;
+      this.isReadOnly = false; // Semua data bisa diedit
+      this.form = {
+        name: profileData.name || "",
+        biodata: profileData.biodata || "",
+        riwayat: profileData.riwayat || "",
+        pengalaman: profileData.pengalaman || "",
+        unggulan: profileData.unggulan || "",
+        imageId: profileData.imageId || "",
+      };
+    },
 
-      if (!cek.success) {
-        const errors = cek.error.issues
+    // Update form field
+    updateField(field: keyof typeof defaultForm, value: string) {
+      this.form[field] = value;
+    },
+
+    // Submit form
+    async submit() {
+      // Validate form
+      const validation = templateForm.safeParse(this.form);
+      
+      if (!validation.success) {
+        const errors = validation.error.issues
           .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
           .join(", ");
         toast.error(`Form tidak valid: ${errors}`);
-        return;
+        return false;
       }
 
-      try {
-        stateProfilePPID.update.loading = true;
-        const res = await ApiFetch.api.ppid.profileppid["update"].post(data);
+      this.loading = true;
+      this.error = null;
 
-        if (res.status === 200) {
+      try {
+        const response = await fetch(`/api/ppid/profileppid/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+
+        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 profile");
-          await stateProfilePPID.findById.load(data.id);
+          // Refresh profile data
+          await stateProfilePPID.profile.load(this.id);
+          return true;
         } else {
-          toast.error("Gagal update profile");
+          throw new Error(result.message || "Gagal update profile");
         }
       } catch (error) {
-        console.error((error as Error).message);
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Update profile error:", errorMessage);
         toast.error("Terjadi kesalahan saat update profile");
+        return false;
       } finally {
-        stateProfilePPID.update.loading = false;
+        this.loading = false;
       }
     },
+
+    // Reset form
+    reset() {
+      this.id = "";
+      this.form = { ...defaultForm };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    }
   },
 
-  /**
-   * Bagian untuk upload gambar profil
-   */
-  uploadImage: {
-    loading: false,
-
-    /**
-     * Mengunggah gambar profil berdasarkan ID.
-     * @param {File} file - File gambar yang akan diunggah.
-     * @param {string} id - ID dari profil yang akan diperbarui gambarnya.
-     */
-    async save(file: File, id: string) {
-      if (!file || !id) {
-        toast.error("File atau ID harus disertakan");
-        return;
-      }
-
-      try {
-        stateProfilePPID.uploadImage.loading = true;
-
-        const form = new FormData();
-        form.append("file", file);
-        form.append("id", id);
-
-        const res = await ApiFetch.api.ppid.profileppid["edit-img"].post(form);
-
-        if (res.status === 200) {
-          toast.success("Berhasil mengunggah gambar");
-          await stateProfilePPID.findById.load(id);
-        } else {
-          toast.error("Gagal mengunggah gambar");
-        }
-      } catch (error) {
-        console.error((error as Error).message);
-        toast.error("Terjadi kesalahan saat mengunggah gambar");
-      } finally {
-        stateProfilePPID.uploadImage.loading = false;
-      }
-    },
+  // Helper methods
+  async loadForEdit(id: string) {
+    const profileData = await this.profile.load(id);
+    if (profileData) {
+      this.editForm.initialize(profileData);
+    }
+    return profileData;
   },
+
+  reset() {
+    this.profile.reset();
+    this.editForm.reset();
+  }
 });
 
-/**
- * Ekspor state utama ProfilePPID untuk digunakan di komponen lain.
- */
-export default stateProfilePPID;
+export default stateProfilePPID;

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -0,0 +1,169 @@
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(3, "Nama minimal 3 karakter"),
+    imageId: z.string().min(1, "Gambar wajib dipilih"),
+})
+
+const defaultForm = {
+    name: "",
+    imageId: "",
+};
+
+type StrukturPPIDForm = Prisma.StrukturPPIDGetPayload<{
+    select: {
+        id: true;
+        name: true;
+        imageId: true;
+        image?: {
+            select: {
+                link: true;
+            };
+        };
+    };
+}>;
+
+const stateStrukturPPID = proxy({
+    struktur: {
+        data: null as StrukturPPIDForm | null,
+        loading: false,
+        error: null as string | null,
+
+        async load(id: string) {
+            if(!id) {
+                toast.warn("ID tidak valid")
+                return null
+            }
+
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const response = await fetch(`/api/ppid/strukturppid/${id}`);
+                
+                if(!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`)
+                }
+
+                const result = await response.json();
+
+                if(result.success) {
+                    this.data = result.data;
+                    return result.data
+                } else {
+                    throw new Error(result.message || "Gagal mengambil data struktur")
+                }
+            } catch (error) {
+                const errorMessage = (error as Error).message;
+                this.error = errorMessage;
+                console.error("Load struktur error:", errorMessage);
+                toast.error("Terjadi kesalahan saat mengambil data struktur");
+                return null;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        reset() {
+            this.data = null;
+            this.error = null;
+            this.loading = false;
+        }
+    },
+
+    editStruktur: {
+        id: "",
+        form: { ...defaultForm },
+        loading: false,
+        error: null as string | null,
+        isReadOnly: false,
+
+        initialize(strukturData: StrukturPPIDForm) {
+            this.id = strukturData.id;
+            this.isReadOnly = false;
+            this.form = {
+                name: strukturData.name || "",
+                imageId: strukturData.imageId || "",
+            };
+        },
+
+        updateField(field: keyof typeof defaultForm, value: string) {
+            this.form[field] = value;
+        },
+
+        async submit() {
+            const validation = templateForm.safeParse(this.form);
+
+            if (!validation.success) {
+                const errors = validation.error.issues
+                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+                .join(", ");
+                toast.error(`Form tidak valid: ${errors}`);
+                return false;
+            }
+
+            this.loading = true;
+            this.error = null;
+            
+            try {
+               const response = await fetch(`/api/ppid/strukturppid/${this.id}`, {
+                method: "PUT",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(this.form),
+               }) 
+
+               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 struktur");
+                await stateStrukturPPID.struktur.load(this.id);
+                return true;
+               } else {
+                throw new Error(result.message || "Gagal update struktur");
+               }
+            } catch (error) {
+                const errorMessage = (error as Error).message;
+                this.error = errorMessage;
+                console.error("Update struktur error:", errorMessage);
+                toast.error("Terjadi kesalahan saat update struktur");
+                return false;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        reset() {
+            this.id = "";
+            this.form = { ...defaultForm };
+            this.error = null;
+            this.loading = false;
+            this.isReadOnly = false;
+        }
+    },
+
+    async loadForEdit(id: string) {
+        const strukturData = await this.struktur.load(id);
+        if (strukturData) {
+            this.editStruktur.initialize(strukturData);
+        }
+        return strukturData;
+    },
+
+    reset() {
+        this.struktur.reset();
+        this.editStruktur.reset();
+    }
+})
+
+export default stateStrukturPPID;
+    

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

@@ -4,9 +4,7 @@ import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Table, Table
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import stateDashboardBerita from '../../_state/desa/berita';
 
 
@@ -34,8 +32,6 @@ function Page() {
 
 function BeritaList() {
   const beritaState = useProxy(stateDashboardBerita)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
 
   useShallowEffect(() => {
     beritaState.berita.findMany.load()
@@ -43,14 +39,6 @@ function BeritaList() {
 
   const router = useRouter()
 
-  const handleHapus = () => {
-    if (selectedId) {
-      beritaState.berita.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-    }
-  }
-
   if (!beritaState.berita.findMany.data) {
     return (
       <Stack py={10}>
@@ -109,13 +97,6 @@ function BeritaList() {
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
-      />
     </Box>
   )
 }

src/app/admin/(dashboard)/pendidikan/beasiswa-desa/page.tsx

@@ -1,11 +1,70 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
 
-function Page() {
+function BeasiswaDesa() {
   return (
-    <div>
-      beasiswa-desa
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Beasiswa Desa'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListBeasiswaDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListBeasiswaDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+          <Title order={4}>List Beasiswa Desa</Title>
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/beasiswa-desa/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default BeasiswaDesa;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function BimbinganBelajarDesa() {
   return (
-    <div>
-      bimbingan-belajar-desa
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Bimbingan Belajar Desa'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListBimbinganBelajarDesa/>
+    </Box>
   );
 }
 
-export default Page;
+function ListBimbinganBelajarDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Bimbingan Belajar Desa'
+          href='/admin/pendidikan/bimbingan-belajar-desa/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default BimbinganBelajarDesa;

src/app/admin/(dashboard)/pendidikan/data-pendidikan/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function DataPendidikan() {
   return (
-    <div>
-      data-pendidikan
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Data Pendidikan'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListDataPendidikan/>
+    </Box>
   );
 }
 
-export default Page;
+function ListDataPendidikan() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Data Pendidikan'
+          href='/admin/pendidikan/data-pendidikan/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/data-pendidikan/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default DataPendidikan;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx

@@ -1,11 +1,69 @@
+'use client'
+import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
+import HeaderSearch from '../../_com/header';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function InfoSekolahPaud() {
   return (
-    <div>
-      info-sekolah-paud
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Info Sekolah & PAUD'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListInfoSekolahPaud/>
+    </Box>
   );
 }
 
-export default Page;
+function ListInfoSekolahPaud() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+          <JudulList
+          title='List Info Sekolah & PAUD'
+          href='/admin/pendidikan/info-sekolah-paud/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Sekolah PAUD</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Sekolah PAUD</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} src={"/"}  alt="image" />
+                  </TableTd>
+                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/info-sekolah-paud/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default InfoSekolahPaud;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function PendidikanNonFormal() {
   return (
-    <div>
-     pendidikan-non-formal
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Pendidikan Non Formal'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListPendidikanNonFormal/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPendidikanNonFormal() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Pendidikan Non Formal'
+          href='/admin/pendidikan/pendidikan-non-formal/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default PendidikanNonFormal;

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/page.tsx

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function PerpustakaanDigital() {
   return (
-    <div>
-    perpustakaan-digital
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Perpustakaan Digital'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListPerpustakaanDigital/>
+    </Box>
   );
 }
 
-export default Page;
+function ListPerpustakaanDigital() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Perpustakaan Digital'
+          href='/admin/pendidikan/perpustakaan-digital/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/perpustakaan-digital/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default PerpustakaanDigital;

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

@@ -1,11 +1,74 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 
-function Page() {
+function ProgramPendidikanAnak() {
   return (
-    <div>
-      program-pendidikan-anak
-    </div>
+    <Box>
+      <HeaderSearch
+      title='Program Pendidikan Anak'
+      placeholder='pencarian'
+      searchIcon={<IconSearch size={20} />}
+      />
+      <ListProgramPendidikanAnak/>
+    </Box>
   );
 }
 
-export default Page;
+function ListProgramPendidikanAnak() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Program Pendidikan Anak'
+          href='/admin/pendidikan/program-pendidikan-anak/create'
+          />
+          <Box style={{overflowX: 'auto'}}>
+            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nomor</TableTh>
+                  <TableTh>Nama Lengkap</TableTh>
+                  <TableTh>Nomor Telepon</TableTh>
+                  <TableTh>Email</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>1</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Text truncate="end" fz={"sm"}>Email</Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default ProgramPendidikanAnak;

src/app/admin/(dashboard)/ppid/_com/PPIDTextEditor.tsx

@@ -40,7 +40,7 @@ export function PPIDTextEditor({ onSubmit, onChange, showSubmit = true, initialC
   }, [initialContent, editor]);
 
   return (
-    <Stack>
+    <Stack >
       <RichTextEditor editor={editor}>
         <RichTextEditor.Toolbar sticky stickyOffset={60}>
           <RichTextEditor.ControlsGroup>

src/app/admin/(dashboard)/ppid/_com/layoutTabs.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Grafik Hasil Kepuasan Masyarakat",
+            value: "grafikhasilkepuasamanmasyarakat",
+            href: "/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat"
+        },
+        {
+            label: "Grafik Berdasarkan Jenis Kelamin Responden",
+            value: "grafikberdasarkanjeniskelaminresponden",
+            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden"
+        },
+        {
+            label: "Grafik Berdasarkan Pilihan Responden",
+            value: "grafikberdasarkanpilihanresponden",
+            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden"
+        },
+        {
+            label: "Grafik Berdasarkan Umur Responden",
+            value: "grafikberdasarkanumurresponden",
+            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur"
+        }
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabs;

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

@@ -0,0 +1,113 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+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 EditDaftarInformasiPublik() {
+  const daftarInformasi = useProxy(daftarInformasiPublik)
+  const router = useRouter()
+  const params = useParams()
+
+  const [formData, setFormData] = useState({
+    jenisInformasi: daftarInformasi.edit.form.jenisInformasi || '',
+    deskripsi: daftarInformasi.edit.form.deskripsi || '',
+    tanggal: daftarInformasi.edit.form.tanggal || '',
+  })
+
+  useEffect(() => {
+    const loadDaftarInformasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await daftarInformasi.edit.load(id);
+        if (data) {
+          setFormData({
+            jenisInformasi: data.jenisInformasi || '',
+            deskripsi: data.deskripsi || '',
+            tanggal: data.tanggal || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi:", error);
+        toast.error("Gagal memuat data daftar informasi");
+      }
+    }
+
+    loadDaftarInformasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      daftarInformasi.edit.form = {
+        ...daftarInformasi.edit.form,
+        jenisInformasi: formData.jenisInformasi,
+        deskripsi: formData.deskripsi,
+        tanggal: formData.tanggal,
+      }
+      await daftarInformasi.edit.update()
+      toast.success("Berita berhasil diperbarui!");
+      router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba");
+    } catch (error) {
+      console.error("Error updating berita:", error);
+      toast.error("Terjadi kesalahan saat memperbarui berita");
+    }
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Daftar Informasi Publik Desa Darmasaba</Title>
+          <TextInput
+            value={formData.jenisInformasi}
+            label="Jenis Informasi"
+            placeholder="masukkan jenis informasi"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                jenisInformasi: val.target.value
+              })
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                daftarInformasi.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <TextInput
+            value={formData.tanggal}
+            label="Tanggal Publikasi"
+            placeholder="masukkan tanggal publikasi"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                tanggal: val.target.value
+              })
+            }}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDaftarInformasiPublik;

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

@@ -0,0 +1,107 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import daftarInformasiPublik from '../../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+import { useShallowEffect } from '@mantine/hooks';
+
+function DetailDaftarInformasiPublik() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateDaftarInformasi = useProxy(daftarInformasiPublik)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateDaftarInformasi.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDaftarInformasi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba")
+    }
+  }
+
+  if (!stateDaftarInformasi.findUnique.data) {
+    return (
+      <Stack>
+        <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 Berita</Text>
+          {stateDaftarInformasi.findUnique.data ? (
+            <Paper key={stateDaftarInformasi.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jenis Informasi</Text>
+                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.jenisInformasi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
+                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.tanggal}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDaftarInformasi.findUnique.data?.deskripsi }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateDaftarInformasi.findUnique.data) {
+                        setSelectedId(stateDaftarInformasi.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDaftarInformasi.delete.loading || !stateDaftarInformasi.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateDaftarInformasi.findUnique.data) {
+                        router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${stateDaftarInformasi.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDaftarInformasi.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 berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailDaftarInformasiPublik;

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

@@ -0,0 +1,72 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import daftarInformasiPublik from '../../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
+
+export default function CreateBerita() {
+  const daftarInformasi = useProxy(daftarInformasiPublik)
+  const router = useRouter()
+
+  const resetForm = () => {
+    // Reset state di valtio
+    daftarInformasi.create.form = {
+      jenisInformasi: "",
+      deskripsi: "",
+      tanggal: "",
+    };
+
+    // Reset state lokal
+  };
+
+  const handleSubmit = async () => {
+    // Submit data berita
+    await daftarInformasi.create.create();
+
+    // Reset form setelah submit
+    resetForm();
+    router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba")
+  };
+
+  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 Daftar Informasi Publik Desa Darmasaba</Title>
+          <TextInput
+            label="Jenis Informasi"
+            placeholder="masukkan jenis informasi"
+            onChange={(val) => {
+              daftarInformasi.create.form.jenisInformasi = val.target.value
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={daftarInformasi.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                daftarInformasi.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <TextInput
+            label="Tanggal Publikasi"
+            placeholder="masukkan tanggal publikasi"
+            onChange={(val) => {
+              daftarInformasi.create.form.tanggal = val.target.value
+            }}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

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

@@ -1,112 +1,97 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, TextInput, Title } from '@mantine/core';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import stateDaftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
-import { PPIDTextEditor } from '../_com/PPIDTextEditor';
+import daftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 
 function Page() {
-  const daftarInformasi = useProxy(stateDaftarInformasiPublik.daftarInformasi)
-  const submit = () => {
-    if (daftarInformasi.create.form.jenisInformasi &&
-      daftarInformasi.create.form.deskripsi &&
-      daftarInformasi.create.form.tanggal) {
-      daftarInformasi.create.create()
-    }
-  }
   return (
     <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title fw={"bold"} order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
-              <TextInput
-                label="Jenis Informasi"
-                placeholder="masukkan jenis informasi"
-                onChange={(val) => {
-                  daftarInformasi.create.form.jenisInformasi = val.target.value
-                }}
-              />
-              <PPIDTextEditor
-                showSubmit={false}
-                onChange={(val) => {
-                  daftarInformasi.create.form.deskripsi = val
-                }}
-              />
-              <TextInput
-                label="Tanggal Publikasi"
-                placeholder="masukkan tanggal publikasi"
-                onChange={(val) => {
-                  daftarInformasi.create.form.tanggal = val.target.value
-                }}
-              />
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={submit}
-                >Submit</Button>
-              </Group>
-            </Stack>
+      <Grid>
+        <GridCol span={{ base: 12, md: 9 }}>
+          <Title order={3}>Daftar Informasi Publik Desa Darmasaba</Title>
+        </GridCol>
+        <GridCol span={{ base: 12, md: 3 }}>
+          <Paper radius={"lg"} bg={colors['white-1']}>
+            <TextInput
+              radius={"lg"}
+              placeholder='pencarian'
+              leftSection={<IconSearch size={20} />}
+            />
           </Paper>
-        </Box>
-        <Box>
-          <ListDaftarInformasi />
-        </Box>
-      </SimpleGrid>
+        </GridCol>
+      </Grid>
+      <ListDaftarInformasi />
     </Box>
   );
 }
 
 function ListDaftarInformasi() {
-  const listData = useProxy(stateDaftarInformasiPublik.daftarInformasi)
+  const listData = useProxy(daftarInformasiPublik)
+
   useShallowEffect(() => {
     listData.findMany.load()
   }, [])
-  if (!listData.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+
+  const router = useRouter()
+
+  if (!listData.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
-    <Box>
+    <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title fw={"bold"} order={3}>List Daftar Informasi Publik Desa Darmasaba</Title>
-          <Table
-            suppressHydrationWarning
-            striped
-            highlightOnHover
-            withTableBorder
-            withColumnBorders
-            bg={colors['white-1']}
-          >
-            <TableThead>
-              <TableTr>
-                <TableTh>
-                  No
-                </TableTh>
-                <TableTh>
-                  Jenis Informasi
-                </TableTh>
-                <TableTh>
-                  Deskripsi
-                </TableTh>
-                <TableTh>
-                  Tanggal Publikasi
-                </TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {listData.findMany.data?.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.nomor}</TableTd>
-                  <TableTd>{item.jenisInformasi}</TableTd>
-                  <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-                  <TableTd>{item.tanggal}</TableTd>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Daftar Informasi Publik Desa Darmasaba</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table
+              striped
+              withTableBorder
+              withRowBorders
+              bg={colors['white-1']}
+              style={{ minWidth: '700px' }}
+            >
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
-              ))}
-            </TableTbody>
-          </Table>
+              </TableThead>
+              <TableTbody>
+                {listData.findMany.data?.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{index + 1}</TableTd>
+                    <TableTd>{item.jenisInformasi}</TableTd>
+                    <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                    <TableTd>
+                      <Button bg={"green"} onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
         </Stack>
       </Paper>
     </Box>

src/app/admin/(dashboard)/ppid/dasar-hukum/create/create.tsx

@@ -1,44 +0,0 @@
-'use client'
-import { Box, Stack, Text } from '@mantine/core';
-import dynamic from 'next/dynamic';
-
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
-  ssr: false,
-});
-
-function CreateDasarHukum({
-  valueJudul,
-  valueContent,
-  onJudulChange,
-  onContentChange,
-  error
-} : {
-  valueJudul: string;
-  valueContent: string;
-  onJudulChange: (val: string) => void;
-  onContentChange: (val: string) => void;
-  error?: string;
-}) {
-  
-  return (
-    <Box>
-     <Stack gap={"xs"}>
-     <Text fw={"bold"}>Judul</Text>
-      <PPIDTextEditor
-        showSubmit={false}
-        onChange={onJudulChange}
-        initialContent={valueJudul}
-      />
-      <Text fw={"bold"}>Content</Text>
-      <PPIDTextEditor
-        showSubmit={false}
-        onChange={onContentChange}
-        initialContent={valueContent}
-      />
-      {error && <Text c="red" size="sm">{error}</Text>}
-     </Stack>
-    </Box>
-  );
-}
-
-export default CreateDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx

@@ -0,0 +1,87 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import dynamic from 'next/dynamic';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
+import { useRouter } from 'next/navigation';
+import { IconArrowBack } from '@tabler/icons-react';
+
+const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+  ssr: false,
+});
+
+function EditDasarHukum() {
+  const router = useRouter()
+  const dasarHukumState = useProxy(stateDasarHukumPPID)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!dasarHukumState.findById.data) {
+      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (dasarHukumState.findById.data) {
+      setJudul(dasarHukumState.findById.data.judul ?? '')
+      setContent(dasarHukumState.findById.data.content ?? '')
+    }
+  }, [dasarHukumState.findById.data])
+
+  const submit = () => {
+    if (dasarHukumState.findById.data) {
+      dasarHukumState.findById.data.judul = judul;
+      dasarHukumState.findById.data.content = content;
+      dasarHukumState.update.save(dasarHukumState.findById.data)
+    }
+    router.push('/admin/ppid/dasar-hukum')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Dasar Hukum PPID</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <PPIDTextEditor
+                showSubmit={false}
+                onChange={setJudul}
+                initialContent={judul}
+              />
+              <Text fw={"bold"}>Content</Text>
+              <PPIDTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={dasarHukumState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/listData/page.tsx

@@ -1,40 +0,0 @@
-'use client'
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
-import { useShallowEffect } from '@mantine/hooks';
-import { Box, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
-import colors from '@/con/colors';
-
-function ListDataDasarHukum() {
-  const dataList = useProxy(stateDasarHukumPPID)
-  useShallowEffect(() => {
-    dataList.findById.load("")
-  }, [])
-
-  if(!dataList.findById.data) return <Stack>
-    {Array.from({length: 10}).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-
-const dataArray = Array.isArray(dataList.findById.data)
-  ? dataList.findById.data
-  : [dataList.findById.data];
-
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-    <Stack gap={"xs"}>
-    <Title order={3}>List Dasar Hukum PPID</Title>
-    {dataArray.map((item) => (
-      <Box key={item.id}>
-        <Text fw={"bold"}>Judul</Text>
-        <Text dangerouslySetInnerHTML={{ __html: item.judul }}></Text>
-        <Text fw={"bold"}>Content</Text>
-        <Text dangerouslySetInnerHTML={{ __html: item.content }}></Text>
-      </Box>
-    ))}
-    </Stack>
-    </Paper>
-  );
-}
-
-export default ListDataDasarHukum;

src/app/admin/(dashboard)/ppid/dasar-hukum/page.tsx

@@ -1,61 +1,53 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import CreateDasarHukum from './create/create';
-import ListDataDasarHukum from './listData/page';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateDasarHukumPPID from '../../_state/ppid/dasar_hukum/dasarHukum';
-import { useEffect, useState } from 'react';
 
 function Page() {
-  const dasarHukumState = useProxy(stateDasarHukumPPID)
-  const [judul, setJudul] = useState('');
-  const [content, setContent] = useState('');
-
+  const router = useRouter()
+  const listDasarHukum = useProxy(stateDasarHukumPPID)
   useShallowEffect(() => {
-    if (!dasarHukumState.findById.data) {
-      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
-    }
-  }, []);
+    listDasarHukum.findById.load('1')
+  }, [])
 
-  useEffect(() => {
-    if (dasarHukumState.findById.data) {
-      setJudul(dasarHukumState.findById.data.judul ?? '')
-      setContent(dasarHukumState.findById.data.content ?? '')
-    }
-  }, [dasarHukumState.findById.data])
-
-  const submit = () => {
-    if (dasarHukumState.findById.data) {
-      dasarHukumState.findById.data.judul = judul;
-      dasarHukumState.findById.data.content = content;
-      dasarHukumState.update.save(dasarHukumState.findById.data)
-    }
+  if (!listDasarHukum.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
   }
-
   return (
-    <Stack gap={"xs"}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Dasar Hukum PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/dasar-hukum/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
         <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10}>
-            <Title order={3}>Dasar Hukum PPID</Title>
-            <CreateDasarHukum onJudulChange={setJudul} onContentChange={setContent} valueJudul={judul} valueContent={content} />
-            <Group>
-              <Button
-                mt={10}
-                bg={colors['blue-button']}
-                onClick={submit}
-                loading={dasarHukumState.update.loading}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Paper>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listDasarHukum.findById.data.content }} />
+              </Box>
+            </Paper>
+          </Stack>
         </Box>
-        <ListDataDasarHukum />
-      </SimpleGrid>
-    </Stack>
+      </Stack>
+    </Paper>
   )
 }
 

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_ui/grafik_berdasarkan_jenis_kelamin_responden/page.tsx

@@ -1,142 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import stateGrafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
-import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { useEffect, useState } from 'react';
-import { Cell, Pie, PieChart } from 'recharts';
-import { useProxy } from 'valtio/utils';
-
-function GrafikBerdasarkanJenisKelamin() {
-  const grafikBerdasarkanJenisKelamin = useProxy(stateGrafikBerdasarkanJenisKelamin.grafikBerdasarkanJenisKelamin)
-  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, [])
-
-  const updateChartData = (data: any) => {
-    if (data && data.length > 0) {
-      const totalLaki = data.reduce((acc: number, cur: any) => acc + Number(cur.laki || 0), 0);
-      const totalPerempuan = data.reduce((acc: number, cur: any) => acc + Number(cur.perempuan || 0), 0);
-
-      setDonutData([
-        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'], key: 'laki-laki' },
-        { name: 'Perempuan', value: totalPerempuan, color: '#FF6384', key: 'perempuan' }
-      ]);
-    }
-  };
-
-  useShallowEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    await grafikBerdasarkanJenisKelamin.findMany.load();
-    if (grafikBerdasarkanJenisKelamin.findMany.data) {
-      updateChartData(grafikBerdasarkanJenisKelamin.findMany.data);
-    }
-  };
-
-  const handleSubmit = async () => {
-    try {
-      // Simpan data baru
-      await grafikBerdasarkanJenisKelamin.create.create();
-
-      // Muat ulang data
-      await grafikBerdasarkanJenisKelamin.findMany.load();
-
-      // Update chart dengan data baru
-      if (grafikBerdasarkanJenisKelamin.findMany.data) {
-        updateChartData(grafikBerdasarkanJenisKelamin.findMany.data);
-      }
-
-      // Reset form setelah submit
-      grafikBerdasarkanJenisKelamin.create.form.laki = '';
-      grafikBerdasarkanJenisKelamin.create.form.perempuan = '';
-    } catch (error) {
-      console.error("Error submitting data:", error);
-    }
-  };
-
-  return (
-    <Box>
-      <Box py={15}>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
-          <TextInput
-            w={{ base: '100%', md: '50%' }}
-            label="Laki-laki"
-            placeholder="masukkan jumlah laki-laki"
-            value={grafikBerdasarkanJenisKelamin.create.form.laki}
-            onChange={(val) => {
-              grafikBerdasarkanJenisKelamin.create.form.laki = val.currentTarget.value;
-            }}
-          />
-          <TextInput
-            w={{ base: '100%', md: '50%' }}
-            label="Perempuan"
-            type="number"
-            placeholder="masukkan jumlah perempuan"
-            value={grafikBerdasarkanJenisKelamin.create.form.perempuan}
-            onChange={(val) => {
-              grafikBerdasarkanJenisKelamin.create.form.perempuan = val.currentTarget.value;
-            }}
-          />
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Submit
-          </Button>
-        </Paper>
-      </Box>
-
-      {/* Chart */}
-      <Box>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack>
-            <Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
-            {mounted && donutData.length > 0 && (
-              <Box style={{ width: '100%', height: 'auto', minHeight: 900 }}>
-                <Center>
-                  <PieChart
-                    width={1000} height={400}
-                    data={donutData}
-                  >
-
-                    <Pie
-                      dataKey="value"
-                      nameKey="name"
-                      data={donutData}
-                      innerRadius={120}
-                      outerRadius={230}
-                      label={true}
-                    >
-                      {donutData.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={entry.color} />
-                      ))}
-                    </Pie>
-                  </PieChart>
-                </Center>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#FF6384'} w={20} h={20} />
-                  <Text>Perempuan: {donutData.find((entry) => entry.name === 'Perempuan')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>Laki-laki: {donutData.find((entry) => entry.name === 'Laki-laki')?.value}</Text>
-                </Flex>
-              </Box>
-            )}
-          </Stack>
-          </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default GrafikBerdasarkanJenisKelamin;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_ui/grafik_berdasarkan_responden/page.tsx

@@ -1,173 +0,0 @@
-'use client'
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import stateGrafikResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
-import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import React, { useEffect, useState } from 'react';
-import { PieChart, Pie, Cell } from 'recharts';
-import { useProxy } from 'valtio/utils';
-
-function GrafikBerdasarkanResponden() {
-  const grafikBerdasarkanResponden = useProxy(stateGrafikResponden.grafikBerdasarkanResponden)
-  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, [])
-
-  const updateChartData = (data: any) => {
-    if (data && data.length > 0) {
-      const totalSangatBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
-      const totalBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
-      const totalKurangBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);
-      const totalTidakBaik = data.reduce((acc: number, cur: any) => acc + Number(cur.tidakbaik || 0), 0);
-      setDonutData([
-        { name: 'sangatbaik', value: totalSangatBaik, color: colors['blue-button'], key: 'sangatbaik' },
-        { name: 'baik', value: totalBaik, color: '#10A85AFF', key: 'baik' },
-        { name: 'kurangbaik', value: totalKurangBaik, color: '#B3AA12FF', key: 'kurangbaik' },
-        { name: 'tidakbaik', value: totalTidakBaik, color: '#B21313FF', key: 'tidakbaik' }
-      ]);
-    }
-  };
-
-  useShallowEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    await grafikBerdasarkanResponden.findMany.load();
-    if (grafikBerdasarkanResponden.findMany.data) {
-      updateChartData(grafikBerdasarkanResponden.findMany.data);
-    }
-  };
-
-  const handleSubmit = async () => {
-    try {
-      // Simpan data baru
-      await grafikBerdasarkanResponden.create.create();
-
-      // Muat ulang data
-      await grafikBerdasarkanResponden.findMany.load();
-
-      // Update chart dengan data baru
-      if (grafikBerdasarkanResponden.findMany.data) {
-        updateChartData(grafikBerdasarkanResponden.findMany.data);
-      }
-
-      // Reset form setelah submit
-      grafikBerdasarkanResponden.create.form.sangatbaik = '';
-      grafikBerdasarkanResponden.create.form.baik = '';
-      grafikBerdasarkanResponden.create.form.kurangbaik = '';
-      grafikBerdasarkanResponden.create.form.tidakbaik = '';
-    } catch (error) {
-      console.error("Error submitting data:", error);
-    }
-  };
-  return (
-    <Box>
-      <Box py={15}>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={3}>Grafik Berdasarkan Responden</Title>
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Sangat Baik"
-              value={grafikBerdasarkanResponden.create.form.sangatbaik}
-              placeholder="masukkan jumlah respon sangat baik"
-              onChange={(val) => {
-                grafikBerdasarkanResponden.create.form.sangatbaik = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Baik"
-              value={grafikBerdasarkanResponden.create.form.baik}
-              placeholder="masukkan jumlah respon baik"
-              onChange={(val) => {
-                grafikBerdasarkanResponden.create.form.baik = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Kurang Baik"
-              value={grafikBerdasarkanResponden.create.form.kurangbaik}
-              placeholder="masukkan jumlah respon kurang baik"
-              onChange={(val) => {
-                grafikBerdasarkanResponden.create.form.kurangbaik = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Tidak Baik"
-              value={grafikBerdasarkanResponden.create.form.tidakbaik}
-              placeholder="masukkan jumlah respon tidak baik"
-              onChange={(val) => {
-                grafikBerdasarkanResponden.create.form.tidakbaik = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
-
-      {/* Chart */}
-      <Box>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack>
-            <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
-            {mounted && donutData.length > 0 && (
-              <Box style={{ width: '100%', height: 'auto', minHeight: 900 }}>
-                <Center>
-                  <PieChart
-                    width={1000} height={400}
-                    data={donutData}
-                  >
-                    <Pie
-                      dataKey="value"
-                      nameKey="name"
-                      data={donutData}
-                      innerRadius={120}
-                      outerRadius={230}
-                      label={true}
-                    >
-                      {donutData.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={entry.color} />
-                      ))}
-                    </Pie>
-                  </PieChart>
-                </Center>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>Sangat Baik: {donutData.find((entry) => entry.name === 'sangatbaik')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#10A85AFF'} w={20} h={20} />
-                  <Text>Baik: {donutData.find((entry) => entry.name === 'baik')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#B3AA12FF'} w={20} h={20} />
-                  <Text>Kurang Baik: {donutData.find((entry) => entry.name === 'kurangbaik')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#B21313FF'} w={20} h={20} />
-                  <Text>Tidak Baik: {donutData.find((entry) => entry.name === 'tidakbaik')?.value}</Text>
-                </Flex>
-              </Box>
-            )}
-          </Stack>
-        </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default GrafikBerdasarkanResponden;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_ui/grafik_berdasarkan_umur/page.tsx

@@ -1,164 +0,0 @@
-'use client'
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import React, { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import stateGrafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
-import { useShallowEffect } from '@mantine/hooks';
-import { PieChart, Pie, Cell } from 'recharts';
-
-function GrafikBerdasarakanUmur() {
-  const grafikBerdasarkanUmur = useProxy(stateGrafikBerdasarkanUmur.grafikBerdasarkanUmur)
-  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-  }, []);
-
-  const updateChartData = (data: any) => {
-    if (data && data.length > 0) {
-      const totalRemaja = data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
-      const totalDewasa = data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
-      const totalOrangtua = data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
-      const totalLansia = data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
-
-      setDonutData([
-        { name: 'Remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
-        { name: 'Dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
-        { name: 'Orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
-        { name: 'Lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
-      ]);
-    }
-  };
-
-  useShallowEffect(() => {
-    fetchData();
-  }, []);
-
-  const fetchData = async () => {
-    await grafikBerdasarkanUmur.findMany.load();
-    if (grafikBerdasarkanUmur.findMany.data) {
-      updateChartData(grafikBerdasarkanUmur.findMany.data);
-    }
-  }
-
-  const handleSubmit = async () => {
-    try {
-      await grafikBerdasarkanUmur.create.create();
-      await grafikBerdasarkanUmur.findMany.load();
-      if (grafikBerdasarkanUmur.findMany.data) {
-        updateChartData(grafikBerdasarkanUmur.findMany.data);
-      }
-    } catch (error) {
-      console.error("Error submitting data:", error);
-    }
-  }
-  return (
-    <Box>
-      <Box py={15}>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={3}>Grafik Berdasarkan Umur Responden</Title>
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Remaja"
-              placeholder="masukkan jumlah responden remaja"
-              value={grafikBerdasarkanUmur.create.form.remaja}
-              onChange={(val) => {
-                grafikBerdasarkanUmur.create.form.remaja = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Dewasa"
-              placeholder="masukkan jumlah responden dewasa"
-              value={grafikBerdasarkanUmur.create.form.dewasa}
-              onChange={(val) => {
-                grafikBerdasarkanUmur.create.form.dewasa = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Orangtua"
-              placeholder="masukkan jumlah responden orangtua"
-              value={grafikBerdasarkanUmur.create.form.orangtua}
-              onChange={(val) => {
-                grafikBerdasarkanUmur.create.form.orangtua = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              w={{ base: '100%', md: '50%' }}
-              label="Lansia"
-              placeholder="masukkan jumlah responden lansia"
-              value={grafikBerdasarkanUmur.create.form.lansia}
-              onChange={(val) => {
-                grafikBerdasarkanUmur.create.form.lansia = val.currentTarget.value;
-              }}
-            />
-            <Group>
-              <Button
-                mt={10}
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-              >
-                Submit
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
-
-      {/* Chart */}
-      <Box>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack>
-            <Title pb={10} order={3}>Grafik Berdasarkan Umur Responden</Title>
-            {mounted && donutData.length > 0 && (
-              <Box style={{ width: '100%', height: 'auto', minHeight: 900 }}>
-                <Center>
-                  <PieChart
-                    width={1000} height={400}
-                    data={donutData}
-                  >
-                    <Pie
-                      dataKey="value"
-                      nameKey="name"
-                      data={donutData}
-                      innerRadius={120}
-                      outerRadius={230}
-                      label={true}
-                    >
-                      {donutData.map((entry, index) => (
-                        <Cell key={`cell-${index}`} fill={entry.color} />
-                      ))}
-                    </Pie>
-                  </PieChart>
-                </Center>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>17 - 25 tahun: {donutData.find((entry) => entry.name === 'remaja')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#D32711FF'} w={20} h={20} />
-                  <Text>26 - 45 tahun: {donutData.find((entry) => entry.name === 'dewasa')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#B46B04FF'} w={20} h={20} />
-                  <Text>46 - 60 tahun: {donutData.find((entry) => entry.name === 'orangtua')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#038617FF'} w={20} h={20} />
-                  <Text>di atas 60 tahun: {donutData.find((entry) => entry.name === 'lansia')?.value}</Text>
-                </Flex>
-              </Box>
-            )}
-          </Stack>
-        </Paper>
-      </Box>
-    </Box>
-  );
-}
-
-export default GrafikBerdasarakanUmur;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_ui/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -1,94 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import stateGrafikHasilKepuasanMasyarakat from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
-import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
-import React, { useEffect, useState } from 'react';
-import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
-import { useProxy } from 'valtio/utils';
-
-function GrafikHasilKepuasan() {
-  const grafikHasilKepuasan = useProxy(stateGrafikHasilKepuasanMasyarakat.grafikHasilKepuasanMasyarakat)
-  const [chartData, setChartData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-  const isTablet = useMediaQuery('(max-width: 1024px)')
-  const isMobile = useMediaQuery('(max-width: 768px)')
-
-  useEffect(() => {
-    setMounted(true);
-  }, [])
-
-  useShallowEffect(() => {
-    const fetchData = async () => {
-      await grafikHasilKepuasan.findMany.load();
-      if (grafikHasilKepuasan.findMany.data && grafikHasilKepuasan.findMany.data.length > 0) {
-        setChartData(grafikHasilKepuasan.findMany.data);
-      }
-    };
-    fetchData();
-  }, []);
-
-  return (
-    <Box>
-      <Box py={15}>
-        <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-          <Stack>
-            <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
-            <TextInput
-              label="Label"
-              placeholder="masukkan label"
-              value={grafikHasilKepuasan.create.form.label}
-              onChange={(val) => {
-                grafikHasilKepuasan.create.form.label = val.currentTarget.value;
-              }}
-            />
-            <TextInput
-              label="Jumlah Kepuasan"
-              type="number"
-              placeholder="masukkan jumlah kepuasan"
-              value={grafikHasilKepuasan.create.form.kepuasan}
-              onChange={(val) => {
-                grafikHasilKepuasan.create.form.kepuasan = val.currentTarget.value;
-              }}
-            />
-            <Button
-              mt={10}
-              bg={colors['blue-button']}
-              onClick={async () => {
-                await grafikHasilKepuasan.create.create();
-                await grafikHasilKepuasan.findMany.load();
-                if (grafikHasilKepuasan.findMany.data) {
-                  setChartData(grafikHasilKepuasan.findMany.data);
-                }
-              }}
-            >
-              Submit
-            </Button>
-          </Stack>
-        </Paper>
-      </Box>
-
-      {/* Chart */}
-      <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
-        <Paper style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title pb={10} order={3}>Data Kepuasan Masyarakat</Title>
-            {mounted && chartData.length > 0 && (
-              <BarChart width={isMobile ? 300 : isTablet ? 600 : 900} height={380} data={chartData} >
-                <XAxis dataKey="label" />
-                <YAxis />
-                <Tooltip />
-                <Legend />
-                <Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
-              </BarChart>
-            )}
-          </Stack>
-        </Paper>
-      </Box>
-
-    </Box>
-  );
-}
-
-export default GrafikHasilKepuasan;

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

@@ -0,0 +1,78 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+
+function EditGrafikBerdasarkanJenisKelaminResponden() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stategrafikBerdasarkanJenisKelamin = useProxy(grafikBerdasarkanJenisKelamin)
+  const id = params.id
+
+  useEffect(() => {
+    if(id){
+      stategrafikBerdasarkanJenisKelamin.findUnique.load(id).then(() => {
+        const data = stategrafikBerdasarkanJenisKelamin.findUnique.data
+        if(data){
+          stategrafikBerdasarkanJenisKelamin.update.form = {
+            laki: data.laki || '',
+            perempuan: data.perempuan || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    stategrafikBerdasarkanJenisKelamin.update.id = id;
+    await stategrafikBerdasarkanJenisKelamin.update.submit();
+    router.push('/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden')
+  }
+
+  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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+        <TextInput
+          label="Laki-laki"
+          type='number'
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanJenisKelamin.update.form.laki}
+          onChange={(val) => {
+            stategrafikBerdasarkanJenisKelamin.update.form.laki = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Perempuan"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanJenisKelamin.update.form.perempuan}
+          onChange={(val) => {
+            stategrafikBerdasarkanJenisKelamin.update.form.perempuan = val.currentTarget.value;
+          }}
+        />
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+          onClick={handleSubmit}
+        >
+          Submit
+        </Button>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditGrafikBerdasarkanJenisKelaminResponden;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create/page.tsx

@@ -0,0 +1,79 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+
+function GrafikBerdasarkanJenisKelaminRespondenCreate() {
+  const router = useRouter();
+  const stategrafikBerdasarkanJenisKelamin = useProxy(grafikBerdasarkanJenisKelamin)
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  const resetForm = () => {
+    stategrafikBerdasarkanJenisKelamin.create.form = {
+      ...stategrafikBerdasarkanJenisKelamin.create.form,
+      laki: "",
+      perempuan: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stategrafikBerdasarkanJenisKelamin.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stategrafikBerdasarkanJenisKelamin.findUnique.load(idStr);
+      if (stategrafikBerdasarkanJenisKelamin.findUnique.data) {
+        setDonutData([stategrafikBerdasarkanJenisKelamin.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden")
+  }
+  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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+           <TextInput
+             label="Laki-laki"
+             type='number'
+             placeholder="masukkan jumlah"
+             value={stategrafikBerdasarkanJenisKelamin.create.form.laki}
+             onChange={(val) => {
+               stategrafikBerdasarkanJenisKelamin.create.form.laki = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafikBerdasarkanJenisKelamin.create.form.perempuan}
+             onChange={(val) => {
+               stategrafikBerdasarkanJenisKelamin.create.form.perempuan = val.currentTarget.value;
+             }}
+           />
+           <Button
+             mt={10}
+             bg={colors['blue-button']}
+             onClick={handleSubmit}
+           >
+             Submit
+           </Button>
+         </Stack>
+       </Paper>
+     </Box>
+  );
+}
+
+export default GrafikBerdasarkanJenisKelaminRespondenCreate;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/page.tsx

@@ -0,0 +1,165 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/jusulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function GrafikBerdasarkanJenisKelamin() {
+  const stategrafikBerdasarkanJenisKelamin = useProxy(grafikBerdasarkanJenisKelamin)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    if (selectedId) {
+      await grafikBerdasarkanJenisKelamin.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stategrafikBerdasarkanJenisKelamin.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true);
+    stategrafikBerdasarkanJenisKelamin.findMany.load()
+  }, []);
+
+  useEffect(() => {
+    if (stategrafikBerdasarkanJenisKelamin.findMany.data) {
+      const totalLaki = stategrafikBerdasarkanJenisKelamin.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.laki || 0), 0);
+      const totalPerempuan = stategrafikBerdasarkanJenisKelamin.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.perempuan || 0), 0);
+      setDonutData([
+        { name: 'laki', value: totalLaki, color: colors['blue-button'], key: 'laki' },
+        { name: 'perempuan', value: totalPerempuan, color: '#10A85AFF', key: 'perempuan' }
+      ]);
+    }
+  }, [stategrafikBerdasarkanJenisKelamin.findMany.data])
+
+  if (!stategrafikBerdasarkanJenisKelamin.findMany.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={"md"}>
+          <JudulListTab
+            title='List Grafik Berdasarkan Jenis Kelamin Responden'
+            href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Laki-laki</TableTh>
+                <TableTh>Perempuan</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stategrafikBerdasarkanJenisKelamin.findMany.data.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                stategrafikBerdasarkanJenisKelamin.findMany.data.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.laki}</TableTd>
+                    <TableTd>{item.perempuan}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={stategrafikBerdasarkanJenisKelamin.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+                <PieChart
+                  width={800} height={300}
+                  data={donutData}
+                >
+                  <Pie
+                    dataKey="value"
+                    nameKey="name"
+                    data={donutData}
+                    cx={500}
+                    cy={150}
+                    innerRadius={60}
+                    outerRadius={115}
+                    label={true}
+                  >
+                    {donutData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>Laki-laki: {donutData.find((entry) => entry.name === 'laki')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#10A85AFF'} w={20} h={20} />
+                  <Text>Perempuan: {donutData.find((entry) => entry.name === 'perempuan')?.value}</Text>
+                </Flex>
+              </Box>
+              ) : (
+                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+              )}
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik berdasarkan hasil responden ini?'
+      />
+    </Box>
+  );
+}
+
+export default GrafikBerdasarkanJenisKelamin;

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

@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import React, { useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import grafikBerdasarkanResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+
+function EditGrafikBerdasarkanResponden() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stateGrafikResponden = useProxy(grafikBerdasarkanResponden)
+  const id = params.id
+
+  useEffect(() => {
+    if(id){
+      stateGrafikResponden.findUnique.load(id).then(() => {
+        const data = stateGrafikResponden.findUnique.data
+        if(data){
+          stateGrafikResponden.update.form = {
+            sangatbaik: data.sangatbaik || '',
+            baik: data.baik || '',
+            kurangbaik: data.kurangbaik || '',
+            tidakbaik: data.tidakbaik || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    stateGrafikResponden.update.id = id;
+    await stateGrafikResponden.update.submit();
+    router.push('/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden')
+  }
+
+  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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+           <TextInput
+             label="Sangat Baik"
+             type='number'
+             placeholder="masukkan jumlah"
+             value={stateGrafikResponden.update.form.sangatbaik}
+             onChange={(val) => {
+               stateGrafikResponden.update.form.sangatbaik = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stateGrafikResponden.update.form.baik}
+             onChange={(val) => {
+               stateGrafikResponden.update.form.baik = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Kurang Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stateGrafikResponden.update.form.kurangbaik}
+             onChange={(val) => {
+               stateGrafikResponden.update.form.kurangbaik = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Tidak Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stateGrafikResponden.update.form.tidakbaik}
+             onChange={(val) => {
+               stateGrafikResponden.update.form.tidakbaik = val.currentTarget.value;
+             }}
+           />
+           <Button
+             mt={10}
+             bg={colors['blue-button']}
+             onClick={handleSubmit}
+           >
+             Submit
+           </Button>
+         </Stack>
+       </Paper>
+     </Box>
+  );
+}
+
+export default EditGrafikBerdasarkanResponden;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create/page.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import grafikBerdasarkanResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
+import colors from '@/con/colors';
+import { Box, Button, 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 GrafikBerdasarkanRespondenCreate() {
+  const router = useRouter()
+  const stategrafikBerdasarkanResponden = useProxy(grafikBerdasarkanResponden)
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  const resetForm = () => {
+    stategrafikBerdasarkanResponden.create.form = {
+      ...stategrafikBerdasarkanResponden.create.form,
+      sangatbaik: "",
+      baik: "",
+      kurangbaik: "",
+      tidakbaik: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stategrafikBerdasarkanResponden.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stategrafikBerdasarkanResponden.findUnique.load(idStr);
+      if (stategrafikBerdasarkanResponden.findUnique.data) {
+        setDonutData([stategrafikBerdasarkanResponden.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden")
+  }
+  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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+           <TextInput
+             label="Sangat Baik"
+             type='number'
+             placeholder="masukkan jumlah"
+             value={stategrafikBerdasarkanResponden.create.form.sangatbaik}
+             onChange={(val) => {
+               stategrafikBerdasarkanResponden.create.form.sangatbaik = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafikBerdasarkanResponden.create.form.baik}
+             onChange={(val) => {
+               stategrafikBerdasarkanResponden.create.form.baik = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Kurang Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafikBerdasarkanResponden.create.form.kurangbaik}
+             onChange={(val) => {
+               stategrafikBerdasarkanResponden.create.form.kurangbaik = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Tidak Baik"
+             type="number"
+             placeholder="masukkan jumlah"
+             value={stategrafikBerdasarkanResponden.create.form.tidakbaik}
+             onChange={(val) => {
+               stategrafikBerdasarkanResponden.create.form.tidakbaik = val.currentTarget.value;
+             }}
+           />
+           <Button
+             mt={10}
+             bg={colors['blue-button']}
+             onClick={handleSubmit}
+           >
+             Submit
+           </Button>
+         </Stack>
+       </Paper>
+     </Box>
+  );
+}
+
+export default GrafikBerdasarkanRespondenCreate;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/page.tsx

@@ -0,0 +1,184 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/jusulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import grafikBerdasarkanResponden from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
+
+function GrafikBerdasarkanResponden() {
+
+  const stategrafikBerdasarkanResponden = useProxy(grafikBerdasarkanResponden)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+
+  const handleDelete = async () => {
+    if (selectedId) {
+      await stategrafikBerdasarkanResponden.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+  
+      // Refresh data agar chart & tabel ikut update
+      stategrafikBerdasarkanResponden.findMany.load();
+    }
+  }
+  
+
+  useShallowEffect(() => {
+    setMounted(true)
+    stategrafikBerdasarkanResponden.findMany.load()
+  }, [])
+
+  useEffect(() => {
+    if (stategrafikBerdasarkanResponden.findMany.data && stategrafikBerdasarkanResponden.findMany.data.length > 0) {
+      const totalSangatBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.sangatbaik || 0), 0);
+      const totalBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.baik || 0), 0);
+      const totalKurangBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.kurangbaik || 0), 0);
+      const totalTidakBaik = stategrafikBerdasarkanResponden.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.tidakbaik || 0), 0);
+      setDonutData([
+        { name: 'sangatbaik', value: totalSangatBaik, color: colors['blue-button'], key: 'sangatbaik' },
+        { name: 'baik', value: totalBaik, color: '#10A85AFF', key: 'baik' },
+        { name: 'kurangbaik', value: totalKurangBaik, color: '#B3AA12FF', key: 'kurangbaik' },
+        { name: 'tidakbaik', value: totalTidakBaik, color: '#B21313FF', key: 'tidakbaik' }
+      ]);
+    }
+
+  }, [stategrafikBerdasarkanResponden.findMany.data])
+
+  if (!stategrafikBerdasarkanResponden.findMany.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={"md"}>
+          <JudulListTab
+            title='List Grafik Berdasarkan Pilihan Responden'
+            href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Sangat Baik</TableTh>
+                <TableTh>Baik</TableTh>
+                <TableTh>Kurang Baik</TableTh>
+                <TableTh>Tidak Baik</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stategrafikBerdasarkanResponden.findMany.data.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                stategrafikBerdasarkanResponden.findMany.data.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.sangatbaik}</TableTd>
+                    <TableTd>{item.baik}</TableTd>
+                    <TableTd>{item.kurangbaik}</TableTd>
+                    <TableTd>{item.tidakbaik}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={stategrafikBerdasarkanResponden.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+                <PieChart
+                  width={800} height={300}
+                  data={donutData}
+                >
+                  <Pie
+                    dataKey="value"
+                    nameKey="name"
+                    data={donutData}
+                    cx={500}
+                    cy={150}
+                    innerRadius={60}
+                    outerRadius={115}
+                    label={true}
+                  >
+                    {donutData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>Sangat Baik: {donutData.find((entry) => entry.name === 'sangatbaik')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#10A85AFF'} w={20} h={20} />
+                  <Text>Baik: {donutData.find((entry) => entry.name === 'baik')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#B3AA12FF'} w={20} h={20} />
+                  <Text>Kurang Baik: {donutData.find((entry) => entry.name === 'kurangbaik')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#B21313FF'} w={20} h={20} />
+                  <Text>Tidak Baik: {donutData.find((entry) => entry.name === 'tidakbaik')?.value}</Text>
+                </Flex>
+              </Box>
+              ) : (
+                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+              )}
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik berdasarkan hasil responden ini?'
+      />
+    </Box>
+  );
+}
+
+export default GrafikBerdasarkanResponden;

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

@@ -0,0 +1,97 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import grafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditGrafikBerdasarakanUmur() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const stategrafikBerdasarkanUmur = useProxy(grafikBerdasarkanUmur)
+  const id = params.id
+
+  useEffect(() => {
+    if(id){
+      stategrafikBerdasarkanUmur.findUnique.load(id).then(() => {
+        const data = stategrafikBerdasarkanUmur.findUnique.data
+        if(data){
+          stategrafikBerdasarkanUmur.update.form = {
+            remaja: data.remaja || '',
+            dewasa: data.dewasa || '',
+            orangtua: data.orangtua || '',
+            lansia: data.lansia || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    stategrafikBerdasarkanUmur.update.id = id;
+    await stategrafikBerdasarkanUmur.update.submit();
+    router.push('/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur')
+  }
+  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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+        <TextInput
+          label="Remaja"
+          type='number'
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.update.form.remaja}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.update.form.remaja = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Dewasa"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.update.form.dewasa}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.update.form.dewasa = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Orangtua"
+          type='number'
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.update.form.orangtua}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.update.form.orangtua = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Lansia"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.update.form.lansia}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.update.form.lansia = val.currentTarget.value;
+          }}
+        />
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+          onClick={handleSubmit}
+        >
+          Submit
+        </Button>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default EditGrafikBerdasarakanUmur;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create/page.tsx

@@ -0,0 +1,98 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import grafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function GrafikBerdasarakanUmurCreate() {
+  const stategrafikBerdasarkanUmur = useProxy(grafikBerdasarkanUmur)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stategrafikBerdasarkanUmur.create.form = {
+      ...stategrafikBerdasarkanUmur.create.form,
+      remaja: "",
+      dewasa: "",
+      orangtua: "",
+      lansia: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    const id = await stategrafikBerdasarkanUmur.create.create();
+    if (id) {
+      const idStr = String(id);
+      await stategrafikBerdasarkanUmur.findUnique.load(idStr);
+      if (stategrafikBerdasarkanUmur.findUnique.data) {
+        setDonutData([stategrafikBerdasarkanUmur.findUnique.data]);
+      }
+    }
+    resetForm();
+    router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur")
+  }
+  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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+        <TextInput
+          label="Remaja"
+          type='number'
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.create.form.remaja}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.create.form.remaja = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Dewasa"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.create.form.dewasa}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.create.form.dewasa = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Orangtua"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.create.form.orangtua}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.create.form.orangtua = val.currentTarget.value;
+          }}
+        />
+        <TextInput
+          label="Lansia"
+          type="number"
+          placeholder="masukkan jumlah"
+          value={stategrafikBerdasarkanUmur.create.form.lansia}
+          onChange={(val) => {
+            stategrafikBerdasarkanUmur.create.form.lansia = val.currentTarget.value;
+          }}
+        />
+        <Button
+          mt={10}
+          bg={colors['blue-button']}
+          onClick={handleSubmit}
+        >
+          Submit
+        </Button>
+      </Stack>
+    </Paper>
+  </Box>
+  );
+}
+
+export default GrafikBerdasarakanUmurCreate;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/page.tsx

@@ -0,0 +1,181 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import grafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Cell, Pie, PieChart } from 'recharts';
+import { useProxy } from 'valtio/utils';
+import JudulListTab from '../../../_com/jusulListTab';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function GrafikBerdasarakanUmur() {
+  const stategrafikBerdasarkanUmur = useProxy(grafikBerdasarkanUmur)
+  const [donutData, setDonutData] = useState<any[]>([]);
+  const [mounted, setMounted] = useState(false);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleDelete = async () => {
+    if (selectedId) {
+      await grafikBerdasarkanUmur.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      stategrafikBerdasarkanUmur.findMany.load()
+    }
+  }
+
+  useShallowEffect(() => {
+    setMounted(true);
+    stategrafikBerdasarkanUmur.findMany.load()
+  }, []);
+
+  useEffect(() => {
+    if (stategrafikBerdasarkanUmur.findMany.data) {
+      const totalRemaja = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
+      const totalDewasa = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
+      const totalOrangtua = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
+      const totalLansia = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
+      setDonutData([
+        { name: 'remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
+        { name: 'dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
+        { name: 'orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
+        { name: 'lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
+      ]);
+    }
+  }, [stategrafikBerdasarkanUmur.findMany.data])
+
+  if (!stategrafikBerdasarkanUmur.findMany.data) {
+    return (
+      <Box>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+ 
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={"md"}>
+          <JudulListTab
+            title='List Grafik Berdasarkan Umur Responden'
+            href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Remaja</TableTh>
+                <TableTh>Dewasa</TableTh>
+                <TableTh>Orangtua</TableTh>
+                <TableTh>Lansia</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stategrafikBerdasarkanUmur.findMany.data.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                stategrafikBerdasarkanUmur.findMany.data.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.remaja}</TableTd>
+                    <TableTd>{item.dewasa}</TableTd>
+                    <TableTd>{item.orangtua}</TableTd>
+                    <TableTd>{item.lansia}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={stategrafikBerdasarkanUmur.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'}>
+            <Stack>
+              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+                <PieChart
+                  width={800} height={300}
+                  data={donutData}
+                >
+                  <Pie
+                    dataKey="value"
+                    nameKey="name"
+                    data={donutData}
+                    cx={500}
+                    cy={150}
+                    innerRadius={60}
+                    outerRadius={115}
+                    label={true}
+                  >
+                    {donutData.map((entry, index) => (
+                      <Cell key={`cell-${index}`} fill={entry.color} />
+                    ))}
+                  </Pie>
+                </PieChart>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={colors['blue-button']} w={20} h={20} />
+                  <Text>Remaja: {donutData.find((entry) => entry.name === 'remaja')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#D32711FF'} w={20} h={20} />
+                  <Text>Dewasa: {donutData.find((entry) => entry.name === 'dewasa')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#B46B04FF'} w={20} h={20} />
+                  <Text>Orangtua: {donutData.find((entry) => entry.name === 'orangtua')?.value}</Text>
+                </Flex>
+                <Flex gap={"md"} align={"center"}>
+                  <Box bg={'#038617FF'} w={20} h={20} />
+                  <Text>Lansia: {donutData.find((entry) => entry.name === 'lansia')?.value}</Text>
+                </Flex>
+              </Box>
+              ) : (
+                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
+              )}
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik berdasarkan hasil responden ini?'
+      />
+    </Box>
+  );
+}
+
+export default GrafikBerdasarakanUmur;

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

@@ -0,0 +1,81 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import grafikHasilKepuasanMasyarakat from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function EditGrafikHasilKepuasan() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const grafikHasilKepuasan = useProxy(grafikHasilKepuasanMasyarakat)
+
+  const id = params.id
+
+  // Load data saat komponen mount
+  useEffect(() => {
+    if (id) {
+      grafikHasilKepuasan.findUnique.load(id).then(() => {
+        const data = grafikHasilKepuasan.findUnique.data
+        if (data) {
+          grafikHasilKepuasan.update.form = {
+            label: data.label || '',
+            kepuasan: data.kepuasan || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    // Set the ID before submitting
+    grafikHasilKepuasan.update.id = id;
+    await grafikHasilKepuasan.update.submit();
+    router.push('/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat')
+  }
+
+  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 Grafik Hasil Kepuasan Masyarakat</Title>
+          <TextInput
+            label="Label"
+            placeholder="masukkan label"
+            value={grafikHasilKepuasan.update.form.label}
+            onChange={(val) => {
+              grafikHasilKepuasan.update.form.label = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Jumlah Kepuasan"
+            type="number"
+            placeholder="masukkan jumlah kepuasan"
+            value={grafikHasilKepuasan.update.form.kepuasan}
+            onChange={(val) => {
+              grafikHasilKepuasan.update.form.kepuasan = val.currentTarget.value;
+            }}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Simpan Perubahan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default EditGrafikHasilKepuasan;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/create/page.tsx

@@ -0,0 +1,83 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+
+import grafikHasilKepuasanMasyarakat from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
+import colors from '@/con/colors';
+import { Box, Button, 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 GrafikHasilKepuasan() {
+ const router = useRouter()
+ const grafikHasilKepuasan = useProxy(grafikHasilKepuasanMasyarakat)
+ const [chartData, setChartData] = useState<any[]>([]);
+
+
+const resetForm = () => {
+  grafikHasilKepuasan.create.form = {
+    ...grafikHasilKepuasan.create.form,
+    label: "",
+    kepuasan: "",
+  }
+}
+
+const handleSubmit = async () => {
+  const id = await grafikHasilKepuasan.create.create();
+  if (id) {
+    // Ensure id is a string
+    const idStr = String(id);
+    await grafikHasilKepuasan.findUnique.load(idStr);
+    if (grafikHasilKepuasan.findUnique.data) {
+      setChartData([grafikHasilKepuasan.findUnique.data]);
+    }
+  }
+  resetForm();
+  router.push("/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat")
+}
+ 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}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+           <TextInput
+             label="Label"
+             placeholder="masukkan label"
+             value={grafikHasilKepuasan.create.form.label}
+             onChange={(val) => {
+               grafikHasilKepuasan.create.form.label = val.currentTarget.value;
+             }}
+           />
+           <TextInput
+             label="Jumlah Kepuasan"
+             type="number"
+             placeholder="masukkan jumlah kepuasan"
+             value={grafikHasilKepuasan.create.form.kepuasan}
+             onChange={(val) => {
+               grafikHasilKepuasan.create.form.kepuasan = val.currentTarget.value;
+             }}
+           />
+           <Button
+             mt={10}
+             bg={colors['blue-button']}
+             onClick={handleSubmit}
+           >
+             Submit
+           </Button>
+         </Stack>
+       </Paper>
+     </Box>
+ );
+}
+
+
+export default GrafikHasilKepuasan;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/page.tsx

@@ -0,0 +1,143 @@
+'use client'
+import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
+import { useSnapshot } from 'valtio';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import grafikHasilKepuasanMasyarakat from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
+
+
+function GrafikHasilKepuasanMasyarakat() {
+  type IKMGrafik = {
+    id: string;
+    label: string;
+    kepuasan: number;
+  }
+
+
+  const stateGrafikHasilKepuasan = useSnapshot(grafikHasilKepuasanMasyarakat)
+  const [mounted, setMounted] = useState(false);
+  const [chartData, setChartData] = useState<IKMGrafik[]>([]);
+  const isTablet = useMediaQuery('(max-width: 1024px)')
+  const isMobile = useMediaQuery('(max-width: 768px)')
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter();
+
+
+  
+  const handleDelete = () => {
+    if (selectedId) {
+      stateGrafikHasilKepuasan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+  
+  useShallowEffect(() => {
+    setMounted(true)
+    stateGrafikHasilKepuasan.findMany.load()
+  }, [])
+  
+  useEffect(() => {
+    if (stateGrafikHasilKepuasan.findMany.data && stateGrafikHasilKepuasan.findMany.data.length > 0) {
+      setChartData([...stateGrafikHasilKepuasan.findMany.data.map((item) => ({
+        id: item.id,
+        label: item.label,
+        kepuasan: Number(item.kepuasan),
+      }))]);
+    }
+  }, [stateGrafikHasilKepuasan.findMany.data])
+  
+
+
+  if (!stateGrafikHasilKepuasan.findMany.data) {
+    return (
+      <Stack>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulListTab
+            title='List Grafik Hasil Kepuasan Masyarakat'
+            href='/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={16} />}
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Label</TableTh>
+                <TableTh>Jumlah Kepuasan</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {stateGrafikHasilKepuasan.findMany.data?.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.label}</TableTd>
+                  <TableTd>{item.kepuasan}</TableTd>
+                  <TableTd>
+                    <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/${item.id}`)}>
+                      <IconEdit size={20} />
+                    </Button>
+                  </TableTd>
+                  <TableTd>
+                    <Button
+                      color='red'
+                      disabled={stateGrafikHasilKepuasan.delete.loading}
+                      onClick={() => {
+                        setSelectedId(item.id)
+                        setModalHapus(true)
+                      }}>
+                      <IconTrash size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
+
+        {/* Chart */}
+        <Box style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }}>
+          <Paper style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }} bg={colors['white-1']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Title pb={10} order={3}>Data Kepuasan Masyarakat</Title>
+              {mounted && chartData.length > 0 && (
+                <BarChart width={isMobile ? 300 : isTablet ? 300 : 300} height={380} data={chartData} >
+                  <XAxis dataKey="label" />
+                  <YAxis />
+                  <Tooltip />
+                  <Legend />
+                  <Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
+                </BarChart>
+              )}
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus grafik hasil kepuasan masyarakat ini?'
+      />
+    </Box>
+
+  );
+}
+
+export default GrafikHasilKepuasanMasyarakat;

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/layout.tsx

@@ -0,0 +1,10 @@
+'use client'
+import LayoutTabs from "../_com/layoutTabs";
+
+export default function Layout({children} : {children: React.ReactNode}) {
+    return (
+        <LayoutTabs>
+            {children}
+        </LayoutTabs>
+    )
+}

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

@@ -1,46 +0,0 @@
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import colors from '@/con/colors';
-import GrafikHasilKepuasan from './_ui/grafik_hasil_kepuasan_masyarakat/page';
-import GrafikBerdasarkanJenisKelamin from './_ui/grafik_berdasarkan_jenis_kelamin_responden/page';
-import GrafikBerdasarkanResponden from './_ui/grafik_berdasarkan_responden/page';
-import GrafikBerdasarakanUmur from './_ui/grafik_berdasarkan_umur/page';
-
-function Page() {
-  return (
-    <Stack >
-      <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
-      <Tabs  color={colors['blue-button']} variant='pills' defaultValue={"Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik"}>
-        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-          <TabsTab value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
-            Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik
-          </TabsTab>
-          <TabsTab value="Grafik Berdasarkan Jenis Kelamin Responden">
-            Grafik Berdasarkan Jenis Kelamin Responden
-          </TabsTab>
-          <TabsTab value="Grafik Berdasarkan Pilihan Responden">
-            Grafik Berdasarkan Pilihan Responden
-          </TabsTab>
-          <TabsTab value="Grafik Berdasarkan Umur Responden">
-            Grafik Berdasarkan Umur Responden
-          </TabsTab>
-        </TabsList>
-
-        <TabsPanel value="Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik">
-          <GrafikHasilKepuasan/>
-        </TabsPanel>
-        <TabsPanel value="Grafik Berdasarkan Jenis Kelamin Responden">
-          <GrafikBerdasarkanJenisKelamin/>
-        </TabsPanel>
-        <TabsPanel value="Grafik Berdasarkan Pilihan Responden">
-          <GrafikBerdasarkanResponden/>
-        </TabsPanel>
-        <TabsPanel value="Grafik Berdasarkan Umur Responden">
-          <GrafikBerdasarakanUmur/>
-        </TabsPanel>
-      </Tabs>
-    </Stack>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/ppid/permohonan-informasi-publik/page.tsx

@@ -10,9 +10,10 @@ function Page() {
   useShallowEffect(() => {
     permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.load()
   }, [])
-  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data) return <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  if (!permohonanInformasiPublikState.statepermohonanInformasiPublik.findMany.data)
+    return <Stack pos={"relative"} bg={colors.Bg}>
+      <Skeleton radius={5} h={200} />
+    </Stack>
 
   return (
     <Box py={5}>

src/app/admin/(dashboard)/ppid/permohonan-keberatan-informasi-publik/page.tsx

@@ -11,9 +11,11 @@ function Page() {
     listState.findMany.load()
   }, [])
 
-  if (!listState.findMany.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
+  if (!listState.findMany.data)
+    return <Stack pos={"relative"} bg={colors.Bg}>
+      <Skeleton radius={5} h={200} />
+    </Stack>
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>

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

@@ -0,0 +1,28 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+
+
+function Biodata({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  
+  return (<Box>
+    <Text fw={"bold"}>Biodata</Text>
+    <EditPPIDEditor
+      value={value}
+      onChange={onChange}
+    />
+    {error && <Text c="red" size="sm">{error}</Text>}
+  </Box>
+  );
+}
+
+export default Biodata;

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

@@ -0,0 +1,256 @@
+/* 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 { 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 { useParams, useRouter } from 'next/navigation';
+import { toast } from 'react-toastify';
+import Biodata from './biodata/biodataForm';
+import PengalamanOrganisasi from './pengalaman_organisasi/pengalamanForm';
+import ProgramKerjaUnggulan from './program_kerja_unggulan/programKerjaForm';
+import RiwayatKarir from './riwayat_karir/riwayatKarirForm';
+
+function EditProfilePPID() {
+  const allState = useProxy(stateProfilePPID);
+  const params = useParams();
+  const router = useRouter();
+
+  // UI States
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  // Load data on mount
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error("ID tidak valid");
+        router.push("/admin/ppid/profile-ppid");
+        return;
+      }
+
+      try {
+        const profileData = await stateProfilePPID.loadForEdit(id);
+
+        if (profileData && profileData.image?.link) {
+          setPreviewImage(profileData.image.link);
+        }
+      } catch (error) {
+        console.error("Error loading profile:", error);
+        toast.error("Gagal memuat data profile");
+      }
+    };
+
+    loadData();
+
+    return () => {
+      stateProfilePPID.editForm.reset(); // cleanup form
+    };
+  }, [params?.id, router]);
+
+  const handleFieldChange = (field: string, value: string) => {
+    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");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Upload file jika ada
+      if (file) {
+        const uploadResponse = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = uploadResponse.data?.data;
+
+        if (!uploaded?.id) {
+          toast.error("Gagal upload gambar");
+          return;
+        }
+
+        stateProfilePPID.editForm.form.imageId = uploaded.id;
+      }
+
+      // Submit form
+      const success = await stateProfilePPID.editForm.submit();
+
+      if (success) {
+        toast.success("Berhasil menyimpan perubahan");
+        router.push("/admin/ppid/profile-ppid");
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      toast.error("Gagal menyimpan profile");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  // Loading state
+  if (allState.profile.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data profile...</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+  // Error state
+  if (allState.profile.error) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="red">
+            <Text fw="bold">Error</Text>
+            <Text>{allState.profile.error}</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  // No data state
+  if (!allState.profile.data) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="yellow">
+            <Text fw="bold">Data tidak ditemukan</Text>
+            <Text>Profile PPID tidak dapat ditemukan</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Stack gap="xs">
+        <Box>
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+
+        <Box>
+          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius={10}>
+            <Stack gap="xs">
+              <Title order={3}>Edit Profile PPID</Title>
+
+              {/* Nama Field */}
+              <TextInput
+                label={<Text fw="bold">Nama Perbekel</Text>}
+                placeholder="Masukkan nama perbekel"
+                value={allState.editForm.form.name}
+                onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
+                error={!allState.editForm.form.name && "Nama wajib diisi"}
+              />
+
+              {/* 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>
+                )}
+              </Box>
+
+              {/* Rich Components */}
+              <Biodata
+                value={allState.editForm.form.biodata}
+                onChange={(val) => handleFieldChange('biodata', val)}
+              />
+
+              <RiwayatKarir
+                value={allState.editForm.form.riwayat}
+                onChange={(val) => handleFieldChange('riwayat', val)}
+              />
+
+              <PengalamanOrganisasi
+                value={allState.editForm.form.pengalaman}
+                onChange={(val) => handleFieldChange('pengalaman', val)}
+              />
+
+              <ProgramKerjaUnggulan
+                value={allState.editForm.form.unggulan}
+                onChange={(val) => handleFieldChange('unggulan', val)}
+              />
+
+              {/* Submit Button */}
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  loading={isSubmitting || allState.editForm.loading}
+                  disabled={!allState.editForm.form.name}
+                >
+                  {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                </Button>
+
+                <Button
+                  variant="outline"
+                  onClick={handleBack}
+                  disabled={isSubmitting || allState.editForm.loading}
+                >
+                  Batal
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditProfilePPID;

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

@@ -0,0 +1,26 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+
+function PengalamanOrganisasi({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  return (<Box>
+    <Text fw={"bold"}>Pengalaman Organisasi</Text>
+    <EditPPIDEditor
+      value={value}
+      onChange={onChange}
+    />
+    {error && <Text c="red" size="sm">{error}</Text>}
+  </Box>
+  );
+}
+
+export default PengalamanOrganisasi;

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

@@ -0,0 +1,26 @@
+'use client'
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+function ProgramKerjaUnggulan({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  
+  return (<Box>
+    <Text fw={"bold"}>Program Kerja Unggulan</Text>
+    <EditPPIDEditor
+      value={value}
+      onChange={onChange}
+    />
+    {error && <Text c="red" size="sm">{error}</Text>}
+  </Box>
+  );
+}
+
+export default ProgramKerjaUnggulan;

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

@@ -0,0 +1,29 @@
+'use client';
+
+import { Box, Text } from '@mantine/core';
+import EditPPIDEditor from '../../_com/editPPIDEditor';
+
+
+
+function RiwayatKarir({
+  value,
+  onChange,
+  error,
+}: {
+  value: string;
+  onChange: (val: string) => void;
+  error?: string;
+}) {
+  return (
+    <Box>
+      <Text fw={"bold"}>Riwayat Karir</Text>
+      <EditPPIDEditor
+        value={value}
+        onChange={onChange}
+      />
+      {error && <Text c="red" size="sm">{error}</Text>}
+    </Box>
+  );
+}
+
+export default RiwayatKarir;

src/app/admin/(dashboard)/ppid/profile-ppid/_com/biodata.ts

@@ -1,10 +0,0 @@
-const biodata = {
-    id: "1",
-    name: "<p>I.B Surya Prabhawa Manuaba, S.H., M.H.</p>",
-    biodata: "<h2>Biodata</h2> <p>....</p>",
-    riwayat: "<h2>Riwayat Karir</h2> <ul>...</ul>",
-    pengalaman: "<h2>Pengalaman Organisasi</h2> <ul>...</ul>",
-    unggulan: "<h2>Program Kerja Unggulan</h2> <h3>...</h3>",
-}
-
-export default biodata

src/app/admin/(dashboard)/ppid/profile-ppid/_com/editPPIDEditor.tsx

@@ -0,0 +1,101 @@
+'use client'
+import { RichTextEditor, Link } from '@mantine/tiptap';
+import { useEditor } from '@tiptap/react';
+import Highlight from '@tiptap/extension-highlight';
+import StarterKit from '@tiptap/starter-kit';
+import Underline from '@tiptap/extension-underline';
+import TextAlign from '@tiptap/extension-text-align';
+import Superscript from '@tiptap/extension-superscript';
+import SubScript from '@tiptap/extension-subscript';
+import { useEffect } from 'react';
+
+type EditEditorProps = {
+  value: string;
+  onChange: (content: string) => void;
+};
+
+export default function EditPPIDEditor({ value, onChange }: EditEditorProps) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    onUpdate({ editor }) {
+      onChange(editor.getHTML());
+    },
+  });
+  
+  useEffect(() => {
+    if (editor && value && value !== editor.getHTML()) {
+      editor.commands.setContent(value);
+    }
+  }, [editor, value]);
+
+  useEffect(() => {
+    if (!editor) return;
+
+    const updateHandler = () => onChange(editor.getHTML());
+    editor.on('update', updateHandler);
+
+    return () => {
+      editor.off('update', updateHandler);
+    };
+  }, [editor, onChange]);
+
+  return (
+    <RichTextEditor editor={editor}>
+      <RichTextEditor.Toolbar sticky stickyOffset="var(--docs-header-height)">
+        {/* Toolbar seperti sebelumnya */}
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Bold />
+          <RichTextEditor.Italic />
+          <RichTextEditor.Underline />
+          <RichTextEditor.Strikethrough />
+          <RichTextEditor.ClearFormatting />
+          <RichTextEditor.Highlight />
+          <RichTextEditor.Code />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.H1 />
+          <RichTextEditor.H2 />
+          <RichTextEditor.H3 />
+          <RichTextEditor.H4 />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Blockquote />
+          <RichTextEditor.Hr />
+          <RichTextEditor.BulletList />
+          <RichTextEditor.OrderedList />
+          <RichTextEditor.Subscript />
+          <RichTextEditor.Superscript />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Link />
+          <RichTextEditor.Unlink />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.AlignLeft />
+          <RichTextEditor.AlignCenter />
+          <RichTextEditor.AlignJustify />
+          <RichTextEditor.AlignRight />
+        </RichTextEditor.ControlsGroup>
+
+        <RichTextEditor.ControlsGroup>
+          <RichTextEditor.Undo />
+          <RichTextEditor.Redo />
+        </RichTextEditor.ControlsGroup>
+      </RichTextEditor.Toolbar>
+
+      <RichTextEditor.Content />
+    </RichTextEditor>
+  );
+}

src/app/admin/(dashboard)/ppid/profile-ppid/biodata/page.tsx

@@ -1,76 +0,0 @@
-'use client'
-import { Box, Group, Text } from '@mantine/core';
-import { useState } from 'react';
-
-import ApiFetch from '@/lib/api-fetch';
-import { Dropzone, MIME_TYPES } from '@mantine/dropzone';
-import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-
-function Biodata() {
-  const biodataState = useProxy(stateProfilePPID)
-  const [loading, setLoading] = useState(false);
-  
-  return (<Box>
-    <Text fw={"bold"}>Biodata</Text>
-    <Dropzone
-    mb={20}
-      onDrop={async (droppedFiles) => {
-        setLoading(true);
-        for (const file of droppedFiles) {
-          await ApiFetch.api.ppid.profileppid["edit-img"].post({
-            file: file,
-            id: biodataState.findById.data?.id,
-          });
-        }
-
-        setLoading(false);
-        if (biodataState.findById.data?.id) {
-          biodataState.findById.load(biodataState.findById.data.id);
-        }
-      }}
-      accept={[MIME_TYPES.jpeg, MIME_TYPES.png, MIME_TYPES.webp]}
-      loading={loading}
-    >
-      <Group justify="center" gap="md" mih={150} style={{ pointerEvents: 'none' }}>
-        <Dropzone.Accept>
-          <IconUpload size={50} stroke={1.5} />
-        </Dropzone.Accept>
-        <Dropzone.Reject>
-          <IconX size={50} stroke={1.5} />
-        </Dropzone.Reject>
-        <Dropzone.Idle>
-          <IconPhoto size={50} stroke={1.5} />
-        </Dropzone.Idle>
-
-        <div>
-          <Text size="xl" inline>
-            Drag & drop gambar di sini atau klik untuk pilih file
-          </Text>
-          <Text size="sm" c="dimmed" inline mt={7}>
-            Maksimal ukuran file 5MB. Format: JPG, PNG, WebP
-          </Text>
-        </div>
-      </Group>
-    </Dropzone>
-    
-    
-    
-    <PPIDTextEditor
-      key={biodataState.findById.data?.id ?? 'new'}
-      showSubmit={false}
-      onChange={(val) => {
-        if (biodataState.findById.data) {
-          biodataState.findById.data.biodata = val;
-        }
-      }}
-      initialContent={biodataState.findById.data?.biodata ?? ''}
-    />
-   
-  </Box>
-  );
-}
-
-export default Biodata;

src/app/admin/(dashboard)/ppid/profile-ppid/listPage.tsx

@@ -1,65 +0,0 @@
-import colors from '@/con/colors';
-import { Stack, Skeleton, Paper, Title, Box, Text, Image } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
-
-function ProfileList() {
-  const allList = useProxy(stateProfilePPID)
-  useShallowEffect(() => {
-    allList.findById.load("1") // Assuming "1" is your default ID, adjust as needed
-  }, [])
-
-  if (!allList.findById.data) return <Stack>
-    {Array.from({ length: 10 }).map((v, k) => <Skeleton key={k} h={40} />)}
-  </Stack>
-
-  const dataArray = Array.isArray(allList.findById.data)
-    ? allList.findById.data
-    : [allList.findById.data];
-
-  return (
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Profile PPID</Title>
-        {dataArray.map((item) => (
-          <Box key={item.id}>
-            {item.imageUrl && (
-              <Box mb={20}>
-                <Text fw={"bold"} mb={5}>Preview Gambar:</Text>
-                <Image
-                  src={item.imageUrl ?? '/perbekel.png'}
-                  alt="Profile"
-                  w={200}
-                />
-              </Box>
-            )}
-            <Box>
-              <Text fw={"bold"}>Nama</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.name }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Biodata</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.biodata }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Riwayat</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.riwayat }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Pengalaman</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.pengalaman }}></Text>
-            </Box>
-            <Box>
-              <Text fw={"bold"}>Program Kerja Unggulan</Text>
-              <Text dangerouslySetInnerHTML={{ __html: item.unggulan }}></Text>
-            </Box>
-          </Box>
-        ))}
-      </Stack>
-    </Paper>
-  )
-}
-
-export default ProfileList;

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

@@ -1,89 +1,120 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import Biodata from './biodata/page';
-import PengalamanOrganisasi from './pengalaman_organisasi/page';
-import RiwayatKarir from './riwayat_karir/page';
-import ProgramKerjaUnggulan from './program_kerja_unggulan/page';
+import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateProfilePPID from '../../_state/ppid/profile_ppid/profile_PPID';
-import { useShallowEffect } from '@mantine/hooks';
-import ProfileList from './listPage';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
 
 
 function Page() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <ProfileCreate />
-        <ProfileList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function ProfileCreate() {
-  const [isLoading, setIsLoading] = useState(false)
-  const allState = useProxy(stateProfilePPID)
-
-  // Initialize data if it doesn't exist
+  const router = useRouter()
+  const allList = useProxy(stateProfilePPID)
   useShallowEffect(() => {
-    if (!allState.findById.data && isLoading) {
-      allState.findById.initialize()
-      setIsLoading(false)
-    }
-  }, [isLoading])
+    allList.profile.load("1") // Assuming "1" is your default ID, adjust as needed
+  }, [])
 
-  const submit = () => {
-    if (
-      allState.findById.data?.name &&
-      allState.findById.data?.biodata &&
-      allState.findById.data?.riwayat &&
-      allState.findById.data?.pengalaman &&
-      allState.findById.data?.unggulan
-    ) {
-      allState.update.save(allState.findById.data)
-      setIsLoading(true)
-      toast.success("success")
-      console.log("[SUBMIT SUCCESS]", JSON.stringify(allState.findById.data, null, 2))
-      allState.findById.initialize()
-    } else {
-      toast.error("error")
-    }
+  if (!allList.profile.data) {
+    return <Stack>
+      <Skeleton radius={10} h={800} />
+    </Stack>
   }
 
+  const dataArray = Array.isArray(allList.profile.data)
+    ? allList.profile.data
+    : [allList.profile.data];
+
   return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+    <Paper bg={colors['white-1']} p={'md'}>
       <Stack gap={"xs"}>
-        <Title order={3}>Profile PPID</Title>
-        <TextInput
-          label={<Text fw={"bold"}>Nama Perbekel</Text>}
-          placeholder="masukkan nama perbekel"
-          value={allState.findById.data?.name || ''}
-          onChange={(val) => {
-            if (allState.findById.data) {
-              allState.findById.data.name = val.currentTarget.value
-            }
-          }}
-        />
-        <Biodata />
-        <RiwayatKarir />
-        <PengalamanOrganisasi />
-        <ProgramKerjaUnggulan />
-        <Group>
-          <Button
-            bg={colors['blue-button']}
-            onClick={submit}
-            loading={allState.update.loading}
-          >
-            Submit
-          </Button>
-        </Group>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3}>Preview Profile PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/ppid/profile-ppid/${allList.profile.data?.id}`)}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        {dataArray.map((item) => (
+          <Box key={item.id} >
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: "md", md: 100 }}>
+                <Grid>
+                  <GridCol span={{ base: 12, md: 12 }}>
+                    <Center>
+                      <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
+                    </Center>
+                  </GridCol>
+                  <GridCol span={{ base: 12, md: 12 }}>
+                    <Text ta={"center"} fz={{ base: "1.2rem", md: "1.8rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
+                  </GridCol>
+                </Grid>
+              </Box>
+              <Divider my={"md"} color={colors['blue-button']} />
+              {/* biodata perbekel */}
+              <Box px={{ base: 0, md: 50 }} pb={30}>
+                <Box pb={20} px={{ base: 0, md: 50 }}>
+                  <Paper bg={colors['BG-trans']} w={{ base: "100%", md: "100%" }}>
+                    <Stack gap={0}>
+                      <Center>
+                        <Image
+                          pt={{ base: 0, md: 90 }}
+                          src={item.image?.link}
+                          w={{ base: 250, md: 350 }}
+                          alt='Foto Profil PPID'
+                          onError={(e) => {
+                            e.currentTarget.src = "/perbekel.png";
+                          }}
+                        />
+                      </Center>
+                      <Paper
+                        bg={colors['blue-button']}
+                        py={20}
+                        className="glass3"
+                        px={{ base: 10, md: 10 }}
+
+                      >
+                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.2rem", md: "1.6rem" }}>
+                          {item.name}
+                        </Text>
+                      </Paper>
+                    </Stack>
+                  </Paper>
+                </Box>
+                <Box pt={10}>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.biodata }} />
+                  </Box>
+                  <Box>
+                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Riwayat Karir</Text>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
+                  </Box>
+                </Box>
+                <Box pb={30}>
+                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
+                  <Box px={20}>
+                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
+                  </Box>
+                </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: item.unggulan }} />
+                  </Box>
+                </Box>
+              </Box>
+            </Paper>
+          </Box>
+        ))}
       </Stack>
     </Paper>
   )
 }
 
+
+
 export default Page;

src/app/admin/(dashboard)/ppid/profile-ppid/pengalaman_organisasi/page.tsx

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-
-function PengalamanOrganisasi() {
-  const pengalamanOrganisasiState = useProxy(stateProfilePPID)
-  return (<Box>
-    <Text fw={"bold"}>Pengalaman Organisasi</Text>
-    <PPIDTextEditor
-    key={pengalamanOrganisasiState.findById.data?.id ?? 'new'}
-    showSubmit={false}
-    onChange={(val) => {
-      if (pengalamanOrganisasiState.findById.data) {
-        pengalamanOrganisasiState.findById.data.pengalaman = val;
-      }
-    }}
-    initialContent={pengalamanOrganisasiState.findById.data?.pengalaman ?? ''}
-    />
-  </Box>
-  );
-}
-
-export default PengalamanOrganisasi;

src/app/admin/(dashboard)/ppid/profile-ppid/program_kerja_unggulan/page.tsx

@@ -1,26 +0,0 @@
-'use client'
-import { Box, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-import { PPIDTextEditor } from '../../_com/PPIDTextEditor';
-
-function ProgramKerjaUnggulan() {
-  const programKerjaUnggulanState = useProxy(stateProfilePPID)
-  return (<Box>
-    <Text fw={"bold"}>Program Kerja Unggulan</Text>
-    <PPIDTextEditor
-    key={programKerjaUnggulanState.findById.data?.id ?? 'new'}
-    showSubmit={false}
-    onChange={(val) => {
-      if (programKerjaUnggulanState.findById.data) {
-        programKerjaUnggulanState.findById.data.unggulan = val;
-      }
-    }}
-    initialContent={programKerjaUnggulanState.findById.data?.unggulan ?? ''}
-    />
-  </Box>
-  );
-}
-
-export default ProgramKerjaUnggulan;

src/app/admin/(dashboard)/ppid/profile-ppid/riwayat_karir/page.tsx

@@ -1,33 +0,0 @@
-'use client';
-
-import { Box, Text } from '@mantine/core';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import dynamic from 'next/dynamic';
-import stateProfilePPID from '../../../_state/ppid/profile_ppid/profile_PPID';
-
-// ini penting
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
-  ssr: false, // disable server side rendering
-});
-function RiwayatKarir() {
-  const riwayatKarirState = useProxy(stateProfilePPID);
-
-  return (
-    <Box>
-      <Text fw={"bold"}>Riwayat Karir</Text>
-      <PPIDTextEditor
-      key={riwayatKarirState.findById.data?.id ?? 'new'}
-        showSubmit={false}
-        onChange={(val) => {
-          if (riwayatKarirState.findById.data) {
-            riwayatKarirState.findById.data.riwayat = val;
-          }
-        }}
-        initialContent={riwayatKarirState.findById.data?.riwayat ?? ''}
-      />
-    </Box>
-  );
-}
-
-export default RiwayatKarir;

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

@@ -0,0 +1,225 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+/* 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 { IconAlertCircle, IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateStrukturPPID from '../../../_state/ppid/struktur_ppid/struktur_PPID';
+import { toast } from 'react-toastify';
+import ApiFetch from '@/lib/api-fetch';
+
+
+function EditStrukturPPID() {
+  const strukturPPID = useProxy(stateStrukturPPID);
+  const params = useParams();
+  const router = useRouter()
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const id = params?.id as string;
+      if (!id) {
+        toast.error("ID tidak valid");
+        router.push("/admin/ppid/struktur-ppid");
+        return;
+      }
+
+      try {
+        const profileData = await strukturPPID.loadForEdit(id);
+
+        if (profileData && profileData.image?.link) {
+          setPreviewImage(profileData.image.link);
+        }
+      } catch (error) {
+        console.error("Error loading profile:", error);
+        toast.error("Gagal memuat data profile");
+      }
+    };
+
+    loadData();
+
+    return () => {
+      strukturPPID.editStruktur.reset(); // cleanup form
+    };
+  }, [params?.id, router]);
+
+  const handleFieldChange = (field: string, value: string) => {
+    strukturPPID.editStruktur.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 || !strukturPPID.editStruktur.form.name.trim()) {
+      toast.error("Nama wajib diisi");
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    try {
+      // Upload file jika ada
+      if (file) {
+        const uploadResponse = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = uploadResponse.data?.data;
+
+        if (!uploaded?.id) {
+          toast.error("Gagal upload gambar");
+          return;
+        }
+
+        strukturPPID.editStruktur.form.imageId = uploaded.id;
+      }
+
+      // Submit form
+      const success = await strukturPPID.editStruktur.submit();
+
+      if (success) {
+        toast.success("Berhasil menyimpan perubahan");
+        router.push("/admin/ppid/struktur-ppid");
+      }
+    } catch (error) {
+      console.error("Error submitting form:", error);
+      toast.error("Gagal menyimpan profile");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  const handleBack = () => {
+    router.back();
+  };
+
+  if (strukturPPID.struktur.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data struktur...</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+   // Error state
+   if (strukturPPID.struktur.error) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="red">
+            <Text fw="bold">Error</Text>
+            <Text>{strukturPPID.struktur.error}</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  // No data state
+  if (!strukturPPID.struktur.data) {
+    return (
+      <Box>
+        <Stack gap="md">
+          <Button variant="subtle" onClick={handleBack}>
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+          <Alert icon={<IconAlertCircle size={16} />} color="yellow">
+            <Text fw="bold">Data tidak ditemukan</Text>
+            <Text>Profile PPID tidak dapat ditemukan</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={handleBack}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Struktur PPID</Title>
+              <TextInput
+                value={strukturPPID.editStruktur.form.name}
+                onChange={(e) => handleFieldChange('name', e.currentTarget.value)}
+                label={<Text fz="sm" fw="bold">Judul</Text>}
+                placeholder="Masukkan judul"
+              />
+              {/* 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>
+                )}
+              </Box>
+
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  disabled={isSubmitting || strukturPPID.editStruktur.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditStrukturPPID;

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

@@ -1,10 +1,59 @@
-import React from 'react';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateStrukturPPID from '../../_state/ppid/struktur_ppid/struktur_PPID';
+import { useShallowEffect } from '@mantine/hooks';
 
 function Page() {
+  const router = useRouter()
+  const strukturPPID = useProxy(stateStrukturPPID)
+  useShallowEffect(() => {
+    strukturPPID.struktur.load("1")
+  }, [])
+
+  if (!strukturPPID.struktur.data) {
+    return <Stack>
+      <Skeleton radius={10} h={800} />
+    </Stack>
+  }
+
+  const dataArray = Array.isArray(strukturPPID.struktur.data)
+    ? strukturPPID.struktur.data
+    : [strukturPPID.struktur.data];
+
   return (
-    <div>
-      struktur-ppid
-    </div>
+    <Paper bg={colors['white-1']} p={'md'}>
+      <Stack gap={"xs"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3}>Preview Struktur PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button onClick={() => router.push(`/admin/ppid/struktur-ppid/${strukturPPID.struktur.data?.id}`)} bg={colors['blue-button']}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        {dataArray.map((item) => (
+          <Paper key={item.id} p={"xl"} bg={colors['BG-trans']}>
+            <Box>
+              <Text fw={"bold"} fz={"h4"}>{item.name}</Text>
+              <Image 
+              w={{ base: "100%", md: "100%" }} 
+              src={item.image?.link}
+              alt=''
+              onError={(e) => {
+                e.currentTarget.src = "/struktur_ppid.png";
+              }}
+              />
+            </Box>
+          </Paper>
+        ))}
+      </Stack>
+    </Paper>
   );
 }
 

src/app/admin/(dashboard)/ppid/visi-misi-ppid/edit/backup.txt

@@ -0,0 +1,115 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useProxy } from 'valtio/utils';
+import { useEffect, useState } from 'react';
+import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import MisiPPID from '../misiPPID/misi-PPID';
+import VisiPPID from '../visiPPID/visi-PPID';
+
+
+
+
+function Page() {
+  return (
+    <Box>
+      <SimpleGrid cols={{ base: 1, md: 2 }}>
+        <VisiMisiPPIDCreate />
+        <VisiMisiPPIDList />
+      </SimpleGrid>
+    </Box>
+  );
+}
+
+function VisiMisiPPIDCreate() {
+  const visiMisi = useProxy(stateVisiMisiPPID);
+  const [draftVisi, setDraftVisi] = useState('');
+  const [draftMisi, setDraftMisi] = useState('');
+
+  useShallowEffect(() => {
+    if (!visiMisi.findById.data) {
+      visiMisi.findById.initialize();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visiMisi.findById.data) {
+      setDraftVisi(visiMisi.findById.data.visi ?? '');
+      setDraftMisi(visiMisi.findById.data.misi ?? '');
+    }
+  }, [visiMisi.findById.data]);
+
+  const submit = () => {
+    if (visiMisi.findById.data) {
+      // update nilai di state global hanya saat submit
+      visiMisi.findById.data.visi = draftVisi;
+      visiMisi.findById.data.misi = draftMisi;
+      visiMisi.update.save(visiMisi.findById.data);
+    }
+  };
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={'xs'}>
+        <Title order={3}>Visi Misi PPID</Title>
+        <VisiPPID value={draftVisi} onChange={setDraftVisi} />
+        <MisiPPID value={draftMisi} onChange={setDraftMisi} />
+        <Group>
+          <Button
+            bg={colors['blue-button']}
+            onClick={submit}
+            loading={visiMisi.update.loading}
+          >
+            Submit
+          </Button>
+        </Group>
+      </Stack>
+    </Paper>
+  );
+}
+
+function VisiMisiPPIDList() {
+  const listVisiMisi = useProxy(stateVisiMisiPPID);
+  useShallowEffect(() => {
+    listVisiMisi.findById.load('1');
+  }, []);
+
+  if (!listVisiMisi.findById.data) {
+    return (
+      <Stack>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={'xs'}>
+        <Title order={3}>List Visi Misi PPID</Title>
+        <Box>
+          <Text fw={'bold'}>Visi PPID</Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              __html: listVisiMisi.findById.data.visi,
+            }}
+          ></Text>
+        </Box>
+        <Box>
+          <Text fw={'bold'}>Misi PPID</Text>
+          <Text
+            dangerouslySetInnerHTML={{
+              __html: listVisiMisi.findById.data.misi,
+            }}
+          ></Text>
+        </Box>
+      </Stack>
+    </Paper>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/edit/page.tsx

@@ -0,0 +1,81 @@
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button, Group, Paper,
+  Stack,
+  Title
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateVisiMisiPPID from '../../../_state/ppid/visi_misi_ppid/visimisiPPID';
+import MisiPPID from '../misiPPID/misi-PPID';
+import VisiPPID from '../visiPPID/visi-PPID';
+
+
+function VisiMisiPPIDEdit() {
+  const router = useRouter()
+  const visiMisi = useProxy(stateVisiMisiPPID);
+  const [draftVisi, setDraftVisi] = useState('');
+  const [draftMisi, setDraftMisi] = useState('');
+
+  useShallowEffect(() => {
+    if (!visiMisi.findById.data) {
+      visiMisi.findById.initialize();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (visiMisi.findById.data) {
+      setDraftVisi(visiMisi.findById.data.visi ?? '');
+      setDraftMisi(visiMisi.findById.data.misi ?? '');
+    }
+  }, [visiMisi.findById.data]);
+
+  const submit = () => {
+    if (visiMisi.findById.data) {
+      // update nilai di state global hanya saat submit
+      visiMisi.findById.data.visi = draftVisi;
+      visiMisi.findById.data.misi = draftMisi;
+      visiMisi.update.save(visiMisi.findById.data);
+    }
+  };
+
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Visi Misi PPID</Title>
+              <VisiPPID value={draftVisi} onChange={setDraftVisi} />
+              <MisiPPID value={draftMisi} onChange={setDraftMisi} />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={visiMisi.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default VisiMisiPPIDEdit;

src/app/admin/(dashboard)/ppid/visi-misi-ppid/page.tsx

@@ -1,76 +1,25 @@
 'use client'
 import colors from '@/con/colors';
 import {
-  Box, Button, Group, Paper, SimpleGrid, Skeleton, Stack, Text, Title
+  Box,
+  Button,
+  Center,
+  Grid,
+  GridCol,
+  Image,
+  Paper,
+  Skeleton, Stack, Text,
+  Title
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
-import { useEffect, useState } from 'react';
 import stateVisiMisiPPID from '../../_state/ppid/visi_misi_ppid/visimisiPPID';
-import VisiPPID from './visiPPID/visi-PPID';
-import MisiPPID from './misiPPID/misi-PPID';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
 
 
-
-function Page() {
-  return (
-    <Box>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <VisiMisiPPIDCreate />
-        <VisiMisiPPIDList />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-function VisiMisiPPIDCreate() {
-  const visiMisi = useProxy(stateVisiMisiPPID);
-  const [draftVisi, setDraftVisi] = useState('');
-  const [draftMisi, setDraftMisi] = useState('');
-
-  useShallowEffect(() => {
-    if (!visiMisi.findById.data) {
-      visiMisi.findById.initialize();
-    }
-  }, []);
-
-  useEffect(() => {
-    if (visiMisi.findById.data) {
-      setDraftVisi(visiMisi.findById.data.visi ?? '');
-      setDraftMisi(visiMisi.findById.data.misi ?? '');
-    }
-  }, [visiMisi.findById.data]);
-
-  const submit = () => {
-    if (visiMisi.findById.data) {
-      // update nilai di state global hanya saat submit
-      visiMisi.findById.data.visi = draftVisi;
-      visiMisi.findById.data.misi = draftMisi;
-      visiMisi.update.save(visiMisi.findById.data);
-    }
-  };
-
-  return (
-    <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={'xs'}>
-        <Title order={3}>Visi Misi PPID</Title>
-        <VisiPPID value={draftVisi} onChange={setDraftVisi} />
-        <MisiPPID value={draftMisi} onChange={setDraftMisi} />
-        <Group>
-          <Button
-            bg={colors['blue-button']}
-            onClick={submit}
-            loading={visiMisi.update.loading}
-          >
-            Submit
-          </Button>
-        </Group>
-      </Stack>
-    </Paper>
-  );
-}
-
 function VisiMisiPPIDList() {
+  const router = useRouter()
   const listVisiMisi = useProxy(stateVisiMisiPPID);
   useShallowEffect(() => {
     listVisiMisi.findById.load('1');
@@ -79,36 +28,56 @@ function VisiMisiPPIDList() {
   if (!listVisiMisi.findById.data) {
     return (
       <Stack>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton radius={10} h={800} />
       </Stack>
     );
   }
 
   return (
     <Paper bg={colors['white-1']} p={'md'} radius={10}>
-      <Stack gap={'xs'}>
-        <Title order={3}>List Visi Misi PPID</Title>
+      <Stack pos={"relative"} gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3}>Preview Visi Misi PPID</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/ppid/visi-misi-ppid/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
         <Box>
-          <Text fw={'bold'}>Visi PPID</Text>
-          <Text
-            dangerouslySetInnerHTML={{
-              __html: listVisiMisi.findById.data.visi,
-            }}
-          ></Text>
-        </Box>
-        <Box>
-          <Text fw={'bold'}>Misi PPID</Text>
-          <Text
-            dangerouslySetInnerHTML={{
-              __html: listVisiMisi.findById.data.misi,
-            }}
-          ></Text>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box pb={30}>
+                <Center>
+                  <Image src={"/api/img/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
+                </Center>
+                <Text ta={"center"} fz={{ base: "h2", md: "2.5rem" }} fw={"bold"}>
+                  MOTO PPID DESA DARMASABA
+                </Text>
+                <Text ta={"center"} fz={{ base: "h4", md: "h3" }} >
+                  MEMBERIKAN INFORMASI YANG CEPAT, MUDAH, TEPAT DAN TRANSPARAN
+                </Text>
+              </Box>
+              <Box px={{ base: 20, md: 50 }} pb={30}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                  VISI PPID
+                </Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.visi }} />
+              </Box>
+              <Box px={{ base: 20, md: 50 }}>
+                <Text ta={"center"} fz={{ base: "h3", md: "h2" }} fw={"bold"}>
+                  MISI PPID
+                </Text>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listVisiMisi.findById.data.misi }} />
+              </Box>
+            </Paper>
+          </Stack>
         </Box>
       </Stack>
     </Paper>
   );
 }
 
-export default Page;
+export default VisiMisiPPIDList;

src/app/admin/_com/list_PageAdmin.tsx

@@ -94,7 +94,7 @@ export const navBar = [
       {
         id: "PPID_8",
         name: "IKM Desa Darmasaba",
-        path: "/admin/ppid/ikm-desa-darmasaba"
+        path: "/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat"
       },
 
     ]

src/app/api/[[...slugs]]/_lib/desa/potensi/del.ts

@@ -1,6 +1,6 @@
 import prisma from "@/lib/prisma";
 import path from "path";
-import { Context } from "vm";
+import { Context } from "elysia";
 import fs from "fs/promises";
 
 const potensiDesaDelete = async (context: Context) => {

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/create.ts

@@ -11,12 +11,8 @@ type FormCreate = Prisma.DaftarInformasiPublikGetPayload<{
 }>
 export default async function daftarInformasiPublikCreate(context: Context) {
     const body = context.body as FormCreate;
-    const jumlahData = await prisma.daftarInformasiPublik.count({
-        where: { isActive: true }, // hitung data aktif aja
-      })
     await prisma.daftarInformasiPublik.create({
-        data: {
-            nomor: jumlahData + 1,
+        data: { 
             jenisInformasi: body.jenisInformasi,
             deskripsi: body.deskripsi,
             tanggal: body.tanggal,

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/del.ts

@@ -0,0 +1,36 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+const daftarInformasiPublikDelete = async (context: Context) => {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const daftarInformasi = await prisma.daftarInformasiPublik.findUnique({
+    where: { id },
+  });
+
+  if (!daftarInformasi) {
+    return {
+      status: 400,
+      body: "Daftar Informasi Publik tidak ditemukan",
+    };
+  }
+
+  await prisma.daftarInformasiPublik.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    status: 200,
+    body: "Daftar Informasi Publik berhasil dihapus",
+  };
+};
+
+export default daftarInformasiPublikDelete;

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/edit.ts

@@ -0,0 +1,47 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function daftarInformasiPublikEdit(context: Context) {
+  const id = context.params?.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID tidak ditemukan",
+    };
+  }
+
+  const { jenisInformasi, deskripsi, tanggal } = context.body as {
+    jenisInformasi: string;
+    deskripsi: string;
+    tanggal: string;
+  };
+
+  const existing = await prisma.daftarInformasiPublik.findUnique({
+    where: {
+      id: id,
+    },
+  });
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Data tidak ditemukan",
+    };
+  }
+
+  const updated = await prisma.daftarInformasiPublik.update({
+    where: { id },
+    data: {
+      jenisInformasi,
+      deskripsi,
+      tanggal,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Data berhasil diupdate",
+    data: updated,
+  };
+}

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

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function handler(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.daftarInformasiPublik.findUnique({
+      where: { id },
+    });
+
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Data tidak ditemukan",
+      }, { status: 404 });
+    }
+
+    return Response.json({
+      success: true,
+      message: "Berhasil mengambil data berdasarkan ID",
+      data,
+    }, { status: 200 });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return Response.json({
+      success: false,
+      message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }, { status: 500 });
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/daftar_informasi_publik/index.ts

@@ -1,18 +1,36 @@
 import Elysia, { t } from "elysia";
 import daftarInformasiPublikCreate from "./create";
 import daftarInformasiPublikFindMany from "./find-many";
+import daftarInformasiPublikFindById from "./find-by-id";
+import daftarInformasiPublikEdit from "./edit";
+import daftarInformasiPublikDelete from "./del";
 
 const DaftarInformasiPublik = new Elysia({
-    prefix: "/daftarinformasipublik",
-    tags: ["PPID/Daftar Informasi Publik"]
+  prefix: "/daftarinformasipublik",
+  tags: ["PPID/Daftar Informasi Publik"],
 })
-    .get("/find-many", daftarInformasiPublikFindMany)
-    .post("/create", daftarInformasiPublikCreate, {
-        body: t.Object({
-            jenisInformasi: t.String(),
-            deskripsi: t.String(),
-            tanggal: t.String(),
-        }),
-    })
+  .put("/:id", daftarInformasiPublikEdit, {
+    params: t.Object({
+      id: t.String(),
+    }),
+    body: t.Object({
+      jenisInformasi: t.String(),
+      deskripsi: t.String(),
+      tanggal: t.String(),
+    }),
+  })
+  .delete("/del/:id", daftarInformasiPublikDelete)
+  .get("/:id", async (context) => {
+    const response = await daftarInformasiPublikFindById(new Request(context.request))
+    return response
+  })
+  .get("/find-many", daftarInformasiPublikFindMany)
+  .post("/create", daftarInformasiPublikCreate, {
+    body: t.Object({
+      jenisInformasi: t.String(),
+      deskripsi: t.String(),
+      tanggal: t.String(),
+    }),
+  });
 
-export default DaftarInformasiPublik
+export default DaftarInformasiPublik;

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_jenis_kelamin/create.ts

@@ -11,17 +11,20 @@ type FormCreate = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
 export default async function grafikBerdasarkanJenisKelaminCreate(context: Context) {
     const body = context.body as FormCreate;
 
-    await prisma.grafikBerdasarkanJenisKelamin.create({
+    const created = await prisma.grafikBerdasarkanJenisKelamin.create({
         data: {
             perempuan: body.perempuan,
             laki: body.laki,
         },
+        select: {
+            id: true,
+            perempuan: true,
+            laki: true,
+        }
     });
     return {
         success: true,
         message: "Success create grafik berdasarkan jenis kelamin",
-        data: {
-            ...body,
-        },
+        data: created,
     };
 }

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_jenis_kelamin/del.ts

@@ -0,0 +1,43 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function grafikBerdasarkanJenisKelaminDelete(context: Context) {
+    const {id} = context.params as {id: string}
+
+    try {
+        const existingData = await prisma.grafikBerdasarkanJenisKelamin.findUnique({
+            where: {
+                id: id,
+            }
+        })
+
+        if (!existingData) {
+            return {
+                success: false,
+                message: "Data tidak ditemukan",
+                data: null,
+            }
+        }
+
+        await prisma.grafikBerdasarkanJenisKelamin.delete({
+            where: {
+                id: id
+            }
+        })
+
+        return {
+            success: true,
+            message: "Data berhasil dihapus",
+            data: {
+                id: id,
+                deleted: true,
+            },
+        }
+    } catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+            data: null,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_jenis_kelamin/find-by-id.ts

@@ -0,0 +1,52 @@
+import prisma from "@/lib/prisma";
+
+export default async function grafikBerdasarakanJenisKelaminFindById(
+  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.grafikBerdasarkanJenisKelamin.findUnique({
+      where: { id },
+    });
+
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Data tidak ditemukan",
+      }, { status: 404 });
+    }
+
+    return Response.json({
+      success: true,
+      message: "Berhasil mengambil data berdasarkan ID",
+      data,
+    }, { status: 200 });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return Response.json({
+      success: false,
+      message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }, {
+      status: 500,
+    });
+  }
+
+ 
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_jenis_kelamin/index.ts

@@ -1,6 +1,9 @@
 import Elysia, { t } from "elysia";
 import grafikBerdasarkanJenisKelaminCreate from "./create";
 import grafikBerdasarkanJenisKelaminFindMany from "./find-many";
+import grafikBerdasarakanJenisKelaminFindById from "./find-by-id";
+import grafikBerdasarakanJenisKelaminUpdate from "./update";
+import grafikBerdasarkanJenisKelaminDelete from "./del";
 
 
 const GrafikBerdasarkanJenisKelamin = new Elysia({
@@ -8,10 +11,28 @@ const GrafikBerdasarkanJenisKelamin = new Elysia({
   tags: ["PPID/IKM/grafikberdasarkanjeniskelamin"],
 })
   .get("/find-many", grafikBerdasarkanJenisKelaminFindMany)
+  .get("/:id", async (context) => {
+      const response = await grafikBerdasarakanJenisKelaminFindById(new Request(context.request))
+      return response
+    })
+  .put("/:id", grafikBerdasarakanJenisKelaminUpdate, {
+    params: t.Object({
+      id: t.String(),
+    }),
+    body: t.Object({
+      perempuan: t.String(),
+      laki: t.String(),
+    }),
+  })
   .post("/create", grafikBerdasarkanJenisKelaminCreate, {
     body: t.Object({
       perempuan: t.String(),
       laki: t.String(),
     }),
+  })
+  .delete("/del/:id", grafikBerdasarkanJenisKelaminDelete, {
+    params: t.Object({
+      id: t.String(),
+    }),
   });
 export default GrafikBerdasarkanJenisKelamin;

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_jenis_kelamin/update.ts

@@ -0,0 +1,49 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function grafikBerdasarakanJenisKelaminUpdate(
+  context: Context
+) {
+  const id = context.params?.id;
+
+  if (!id) {
+    return {
+      success: false,
+      message: "Id tidak ditemukan",
+    }
+  }
+
+  const {perempuan, laki} = context.body as {
+    perempuan: string;
+    laki: string;
+  }
+
+  const existing = await prisma.grafikBerdasarkanJenisKelamin.findUnique({
+    where: {
+      id: id,
+    },
+  })
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Data tidak ditemukan",
+    }
+  }
+
+  const updated = await prisma.grafikBerdasarkanJenisKelamin.update({
+    where: {
+      id
+    },
+    data: {
+      perempuan: perempuan,
+      laki: laki,
+    },
+  })
+
+  return {
+    success: true,
+    message: "Data berhasil diupdate",
+    data: updated,
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_umur/create.ts

@@ -13,19 +13,24 @@ type FormCreate = Prisma.GrafikBerdasarkanUmurGetPayload<{
 export async function grafikBerdasarkanUmurCreate(context: Context) {
     const body = context.body as FormCreate;
 
-    await prisma.grafikBerdasarkanUmur.create({
+    const created = await prisma.grafikBerdasarkanUmur.create({
         data: {
             remaja: body.remaja,
             dewasa: body.dewasa,
             orangtua: body.orangtua,
             lansia: body.lansia,
         },
+        select: {
+            id: true,
+            remaja: true,
+            dewasa: true,
+            orangtua: true,
+            lansia: true,
+        }
     });
     return {
         success: true,
         message: "Success create grafik berdasarkan umur",
-        data: {
-            ...body,
-        },
+        data: created,
     };
 }

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_umur/del.ts

@@ -0,0 +1,43 @@
+import prisma from "@/lib/prisma"
+import { Context } from "elysia"
+
+export default async function grafikBerdasarkanUmurDelete(context: Context) {
+    const {id} = context.params as {id: string}
+
+    try {
+        const existingData = await prisma.grafikBerdasarkanUmur.findUnique({
+            where: {
+                id: id,
+            }
+        })
+
+        if (!existingData) {
+            return {
+                success: false,
+                message: "Data tidak ditemukan",
+                data: null,
+            }
+        }
+
+        await prisma.grafikBerdasarkanUmur.delete({
+            where: {
+                id: id
+            }
+        })
+
+        return {
+            success: true,
+            message: "Data berhasil dihapus",
+            data: {
+                id: id,
+                deleted: true,
+            },
+        }
+    } catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+            data: null,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_umur/find-by-id.ts

@@ -0,0 +1,53 @@
+import prisma from "@/lib/prisma";
+
+export default async function grafikBerdasarakanUmurFindById(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.grafikBerdasarkanUmur.findUnique({
+      where: { id },
+    });
+
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Data tidak ditemukan",
+        data: null,
+      }, { status: 404 });
+    }
+
+    return Response.json({
+      success: true,
+      message: "Berhasil mengambil data berdasarkan ID",
+      data: data,
+    }, { status: 200 });
+  } catch (error) {
+    console.error("Error fetching grafik berdasarkan umur:", error);
+    return Response.json({
+      success: false,
+      message: error instanceof Error ? error.message : "Unknown error",
+    }, { status: 500 });
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_umur/index.ts

@@ -1,19 +1,42 @@
 import Elysia, { t } from "elysia";
 import { grafikBerdasarkanUmurFindMany } from "./find-many";
 import { grafikBerdasarkanUmurCreate } from "./create";
+import grafikBerdasarakanUmurUpdate from "./update";
+import grafikBerdasarakanUmurFindById from "./find-by-id";
+import grafikBerdasarkanUmurDelete from "./del";
 
 const GrafikBerdasarkanUmur = new Elysia({
-    prefix: "/grafikberdasarkanumur",
-    tags: ["PPID/IKM/grafikberdasarkanumur"]
+  prefix: "/grafikberdasarkanumur",
+  tags: ["PPID/IKM/grafikberdasarkanumur"],
 })
-    .get("/find-many", grafikBerdasarkanUmurFindMany)
-    .post("/create", grafikBerdasarkanUmurCreate, {
-        body: t.Object({
-            remaja: t.String(),
-            dewasa: t.String(),
-            orangtua: t.String(),
-            lansia: t.String(),
-        }),
-    });
+  .get("/find-many", grafikBerdasarkanUmurFindMany)
+  .post("/create", grafikBerdasarkanUmurCreate, {
+    body: t.Object({
+      remaja: t.String(),
+      dewasa: t.String(),
+      orangtua: t.String(),
+      lansia: t.String(),
+    }),
+  })
+  .get("/:id", async (context) => {
+        const response = await grafikBerdasarakanUmurFindById(new Request(context.request))
+        return response
+      })
+  .put("/:id", grafikBerdasarakanUmurUpdate, {
+    params: t.Object({
+      id: t.String(),
+    }),
+    body: t.Object({
+      remaja: t.String(),
+      dewasa: t.String(),
+      orangtua: t.String(),
+      lansia: t.String(),
+    }),
+  })
+  .delete("/del/:id", grafikBerdasarkanUmurDelete, {
+    params: t.Object({
+      id: t.String(),
+    }),
+  });
 
-export default GrafikBerdasarkanUmur;
+export default GrafikBerdasarkanUmur;

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_berdasarkan_umur/update.ts

@@ -0,0 +1,51 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function grafikBerdasarakanUmurUpdate(context: Context) {
+  const id = context.params?.id;
+  
+  if (!id) {
+    return {
+      success: false,
+      message: "Id tidak ditemukan",
+    }
+  }
+
+  const {remaja, dewasa, orangtua, lansia} = context.body as {
+    remaja: string;
+    dewasa: string;
+    orangtua: string;
+    lansia: string;
+  }
+
+  const existing = await prisma.grafikBerdasarkanUmur.findUnique({
+    where: {
+      id: id
+    }
+  })
+
+  if (!existing) {
+    return {
+      success: false,
+      message: "Grafik tidak ditemukan"
+    }
+  }
+
+  const updated = await prisma.grafikBerdasarkanUmur.update({
+    where: {
+      id: id
+    },
+    data: {
+      remaja: remaja,
+      dewasa: dewasa,
+      orangtua: orangtua,
+      lansia: lansia,
+    },
+  })
+
+  return {
+    success: true,
+    message: "Data berhasil diupdate",
+    data: updated,
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_hasil_kepuasan_masyarakat/create.ts

@@ -11,17 +11,20 @@ type FormCreate = Prisma.IndeksKepuasanMasyarakatGetPayload<{
 export default async function grafikHasilKepuasanMasyarakatCreate(context: Context) {
   const body = context.body as FormCreate;
 
-  await prisma.indeksKepuasanMasyarakat.create({
+  const created = await prisma.indeksKepuasanMasyarakat.create({
     data: {
       label: body.label,
       kepuasan: body.kepuasan,
     },
+    select: {
+      id: true,
+      label: true,
+      kepuasan: true,
+    }
   });
   return {
     success: true,
     message: "Success create grafik hasil kepuasan masyarakat",
-    data: {
-      ...body,
-    },
+    data: created,
   };
 }

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_hasil_kepuasan_masyarakat/del.ts

@@ -0,0 +1,43 @@
+import prisma from "@/lib/prisma"
+import { Context } from "elysia"
+
+export default async function grafikHasilKepuasanMasyarakatDelete(context: Context) {
+    const {id} = context.params as {id: string}
+
+    try {
+        const existingData = await prisma.indeksKepuasanMasyarakat.findUnique({
+            where: {
+                id: id,
+            }
+        })
+
+        if (!existingData) {
+            return {
+                success: false,
+                message: "Data tidak ditemukan",
+                data: null,
+            }
+        }
+
+        await prisma.indeksKepuasanMasyarakat.delete({
+            where: {
+                id: id
+            }
+        })
+
+        return {
+            success: true,
+            message: "Data berhasil dihapus",
+            data: {
+                id: id,
+                deleted: true,
+            },
+        }
+    } catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+            data: null,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_hasil_kepuasan_masyarakat/find-by-id.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function handler(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.indeksKepuasanMasyarakat.findUnique({
+      where: { id },
+    });
+
+    if (!data) {
+      return Response.json({
+        success: false,
+        message: "Data tidak ditemukan",
+      }, { status: 404 });
+    }
+
+    return Response.json({
+      success: true,
+      message: "Berhasil mengambil data berdasarkan ID",
+      data,
+    }, { status: 200 });
+  } catch (e) {
+    console.error("Find by ID error:", e);
+    return Response.json({
+      success: false,
+      message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+    }, { status: 500 });
+  }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_hasil_kepuasan_masyarakat/index.ts

@@ -1,17 +1,38 @@
 import Elysia, { t } from "elysia";
 import grafikHasilKepuasanMasyarakatCreate from "./create";
 import grafikHasilKepuasanMasyarakatFindMany from "./find-many";
+import grafikHasilKepuasanMasyarakatFindById from "./find-by-id";
+import grafikHasilKepuasanMasyarakatUpdate from "./update";
+import grafikHasilKepuasanMasyarakatDelete from "./del";
 
 const GrafikHasilKepuasanMasyarakat = new Elysia({
   prefix: "/grafikhasilkepuasamanmasyarakat",
   tags: ["PPID/IKM/grafikhasilkepuasanmasyarakat"],
 })
   .get("/find-many", grafikHasilKepuasanMasyarakatFindMany)
+  .get("/:id", async (context) => {
+    const response = await grafikHasilKepuasanMasyarakatFindById(new Request(context.request))
+    return response
+  })
+  .put("/:id", grafikHasilKepuasanMasyarakatUpdate, {
+    params: t.Object({
+      id: t.String(),
+    }),
+    body: t.Object({
+      label: t.String(),
+      kepuasan: t.String(),
+    }),
+  })
   .post("/create", grafikHasilKepuasanMasyarakatCreate, {
     body: t.Object({
       label: t.String(),
       kepuasan: t.String(),
     }),
+  })
+  .delete("/del/:id", grafikHasilKepuasanMasyarakatDelete, {
+    params: t.Object({
+      id: t.String(),
+    }),
   });
 
 export default GrafikHasilKepuasanMasyarakat;

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_hasil_kepuasan_masyarakat/update.ts

@@ -0,0 +1,45 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function grafikHasilKepuasanMasyarakatUpdate(context: Context) {
+   const id = context.params?.id;
+
+   if (!id) {
+    return {
+        success: false,
+        message: "Id tidak ditemukan",
+    }
+   }
+
+   const {label, kepuasan} = context.body as {
+    label: string;
+    kepuasan: string;
+   }
+
+   const existing = await prisma.indeksKepuasanMasyarakat.findUnique({
+    where: {
+      id: id,
+    },
+   })
+
+   if (!existing) {
+    return {
+        success: false,
+        message: "Data tidak ditemukan",
+    }
+   }
+
+   const updated = await prisma.indeksKepuasanMasyarakat.update({
+    where: { id },
+    data: {
+      label,
+      kepuasan,
+    },
+   })
+
+   return {
+    success: true,
+    message: "Data berhasil diupdate",
+    data: updated,
+   }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_responden/create.ts

@@ -2,30 +2,16 @@ import prisma from "@/lib/prisma";
 import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
-type FormCreate = Prisma.GrafikBerdasarkanRespondenGetPayload<{
-  select: {
-    sangatbaik: true;
-    baik: true;
-    kurangbaik: true;
-    tidakbaik: true
-  };
-}>;
 export default async function grafikRespondenCreate(context: Context) {
-  const body = context.body as FormCreate;
+  const body = context.body as Prisma.GrafikBerdasarkanRespondenCreateInput;
 
-  await prisma.grafikBerdasarkanResponden.create({
-    data: {
-      sangatbaik: body.sangatbaik,
-      baik: body.baik,
-      kurangbaik: body.kurangbaik,
-      tidakbaik: body.tidakbaik,
-    },
+  const created = await prisma.grafikBerdasarkanResponden.create({
+    data: body,
   });
+
   return {
     success: true,
     message: "Success create grafik berdasarkan responden",
-    data: {
-      ...body,
-    },
+    data: created, // ini termasuk id
   };
-}
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_responden/del.ts

@@ -0,0 +1,40 @@
+import prisma from "@/lib/prisma"
+import { Context } from "elysia"
+
+export default async function grafikRespondenDelete(context: Context) {
+    const { id } = context.params as { id: string }
+
+    try {
+        const existingData = await prisma.grafikBerdasarkanResponden.findUnique({
+            where: {
+                id: id,
+            }
+        })
+
+        if (!existingData) {
+            return {
+                success: false,
+                message: "Data tidak ditemukan",
+                data: null,
+            }
+        }
+
+        await prisma.grafikBerdasarkanResponden.delete({
+            where: {
+                id: id
+            }
+        })
+
+        return {
+            success: true,
+            message: "Data berhasil dihapus",
+            data: null,
+        }
+    } catch (error) {
+        return {
+            success: false,
+            message: error instanceof Error ? error.message : "Unknown error",
+            data: null,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_responden/find-by-id.ts

@@ -0,0 +1,48 @@
+import prisma from "@/lib/prisma";
+
+export default async function grafikRespondenFindById(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.grafikBerdasarkanResponden.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Data tidak ditemukan",
+            }, { status: 404 });
+        }
+
+        return Response.json({
+            success: true,
+            message: "Berhasil mengambil data berdasarkan ID",
+            data,
+        }, { status: 200 });
+    } catch (e) {
+        console.error("Find by ID error:", e);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil data: " + (e instanceof Error ? e.message : 'Unknown error'),
+        }, {
+            status: 500,
+        });
+    }
+}

src/app/api/[[...slugs]]/_lib/ppid/ikm/grafik_responden/index.ts

@@ -1,11 +1,29 @@
 import Elysia, { t } from "elysia";
 import grafikRespondenCreate from "./create";
 import grafikRespondenFindMany from "./find-many";
+import grafikRespondenFindById from "./find-by-id";
+import grafikRespondenUpdate from "./update";
+import grafikRespondenDelete from "./del";
 
 const GrafikBerdasarkanResponden = new Elysia({
     prefix: "/grafikberdasarkanresponden",
     tags: ["PPID/IKM/grafikberdasarkanresponden"]
 })
+.get("/:id", async (context) => {
+    const response = await grafikRespondenFindById(new Request(context.request))
+    return response
+})
+.put("/:id", grafikRespondenUpdate, {
+    params: t.Object({
+        id: t.String(),
+    }),
+    body: t.Object({
+        sangatbaik: t.String(),
+        baik: t.String(),
+        kurangbaik: t.String(),
+        tidakbaik: t.String(),
+    }),
+})
 .get("/find-many", grafikRespondenFindMany)
 .post("/create", grafikRespondenCreate, {
     body: t.Object({
@@ -15,6 +33,11 @@ const GrafikBerdasarkanResponden = new Elysia({
         tidakbaik: t.String(),
     }),
 })
+.delete("/del/:id", grafikRespondenDelete, {
+    params: t.Object({
+        id: t.String(),
+    }),
+})
 
 
 export default GrafikBerdasarkanResponden