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,9 +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())
@@ -89,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
@@ -181,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())
@@ -615,3 +630,17 @@ model DoctorSign {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
+
+// ========================================= POSYANDU ========================================= //
+model Posyandu {
+  id        String      @id @default(cuid())
+  name      String
+  nomor     String
+  deskripsi String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}

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)/inovasi/ajukan-ide-inovatif/page.tsx

@@ -1,28 +1,43 @@
 import colors from '@/con/colors';
 import { Box, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconSearch } from '@tabler/icons-react';
 import React from 'react';
+import HeaderSearch from '../../_com/header';
 
-function Page() {
+function AjukanIdeInofativ() {
   return (
-    <Box py={5}>
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Title order={3}>Ajukan Ide Inovatif</Title>
-        <Box>
-          <Table striped withRowBorders withColumnBorders withTableBorder>
-            <TableThead>
-              <TableTr>
-                <TableTh>No</TableTh>
-                <TableTh>Nama</TableTh>
-                <TableTh>Alamat</TableTh>
-                <TableTh>Nama Ide Inovatif</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Masalah yang ingin diatasi</TableTh>
-                <TableTh>Benefit</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              
+    <Box>
+      <HeaderSearch
+        title='Ajukan Ide Inovatif'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListAjukanIdeInovatif />
+    </Box>
+  );
+}
+
+function ListAjukanIdeInovatif() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>List Ajukan Ide Inovatif</Title>
+          <Box>
+            <Table striped withRowBorders withColumnBorders withTableBorder>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Alamat</TableTh>
+                  <TableTh>Nama Ide Inovatif</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Masalah yang ingin diatasi</TableTh>
+                  <TableTh>Benefit</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+
                 <TableTr>
                   <TableTd>1</TableTd>
                   <TableTd>nama</TableTd>
@@ -32,13 +47,13 @@ function Page() {
                   <TableTd>masalah</TableTd>
                   <TableTd>benefit</TableTd>
                 </TableTr>
-              
-            </TableTbody>
-          </Table> </Box>
-      </Stack>
-    </Paper>
-  </Box>
-  );
+
+              </TableTbody>
+            </Table> </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
 }
 
-export default Page;
+export default AjukanIdeInofativ;

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

@@ -1,34 +1,44 @@
+'use client'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
 
 function CreateInfoTeknologiTepatGuna() {
+  const router = useRouter();
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors['white-1']}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Info Teknologi Tepat Guna</Title>
-            <Box>
-              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-              <IconImageInPicture size={24}/>
-            </Box>
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>}
-              placeholder="Masukkan nama info teknologi tepat guna"
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Info Teknologi Tepat Guna</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Info Teknologi Tepat Guna</Text>}
+          placeholder='Masukkan nama info teknologi tepat guna'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Info Teknologi Tepat Guna</Text>
+            <KeamananEditor
+              showSubmit={false}
             />
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Deskripsi Info Teknologi Tepat Guna</Text>}
-              placeholder="Masukkan deskripsi info teknologi tepat guna"
-            />
-            <Group>
-              <Button bg={colors['blue-button']}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box>
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
   );
 }
 

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

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailInfoTeknologiTepatGuna() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Info Teknologi Tepat Guna</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Info Teknologi Tepat Guna</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/info-teknologi-tepat-guna/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailInfoTeknologiTepatGuna;

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

@@ -0,0 +1,45 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditInfoTeknologiTepatGuna() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Info Teknologi Tepat Guna</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Info Teknologi Tepat Guna</Text>}
+          placeholder='Masukkan nama info teknologi tepat guna'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Info Teknologi Tepat Guna</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditInfoTeknologiTepatGuna;

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

@@ -1,31 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataInfoTeknologiTepatGuna() {
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Paper p={'md'} bg={colors['BG-trans']}>
-          <Title order={4}>List Data Info Teknologi Tepat Guna</Title>
-          <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 1
-            </Paper>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 2
-            </Paper>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 3
-            </Paper>
-            <Paper p={'md'} bg={colors['white-1']}>
-              Data 4
-            </Paper>
-          </SimpleGrid>
-        </Paper>
-      </Stack>
-    </Box>
-  );
-}
-
-export default ListDataInfoTeknologiTepatGuna;

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

@@ -1,18 +1,58 @@
-import { Box, Stack, Title } from '@mantine/core';
-import React from 'react';
-import CreateInfoTeknologiTepatGuna from './create/page';
-import ListDataInfoTeknologiTepatGuna from './listData/page';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function InfoTeknologiTepatGuna() {
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Title order={3}>Info Teknologi Tepat Guna</Title>
-        <CreateInfoTeknologiTepatGuna/>
-        <ListDataInfoTeknologiTepatGuna/>
-      </Stack>
+      <HeaderSearch
+        title='Info Teknologi Tepat Guna'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListInfoTeknologiTepatGuna/>
     </Box>
   );
 }
 
-export default Page;
+function ListInfoTeknologiTepatGuna() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Info Teknologi Tepat Guna'
+          href='/admin/inovasi/info-teknologi-tepat-guna/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Info Teknologi Tepat Guna</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Info Teknologi Tepat Guna 1</TableTd>
+              <TableTd>Image</TableTd>
+              <TableTd>Deskripsi</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/info-teknologi-tepat-guna/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default InfoTeknologiTepatGuna;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/create/page.tsx

@@ -0,0 +1,50 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kolaborasi Inovasi</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan nama kolaborasi inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan deskripsi singkat kolaborasi inovasi'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateKolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Kolaborasi Inovasi</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                <Text fz={"lg"}>Test Deskripsi Singkat</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/kolaborasi-inovasi/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailKolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/edit/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+function EditKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Kolaborasi Inovasi</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan nama kolaborasi inovasi'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Kolaborasi Inovasi</Text>}
+          placeholder='Masukkan deskripsi singkat kolaborasi inovasi'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditKolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,35 +1,58 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import React from 'react';
-import KolaborasiInovasi from './ui/kolaborasiInovasi/page';
-import MitraKolaborasi from './ui/mitraKolaborasi/page';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function KolaborasiInovasi() {
   return (
     <Box>
-      <Stack>
-      <Title order={3}>Kolaborasi Inovasi</Title>
-        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Kolaborasi Inovasi"}>
-          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value="Kolaborasi Inovasi">
-               Kolaborasi Inovasi
-            </TabsTab>
-            <TabsTab value="Mitra Kolaborasi">
-              Mitra Kolaborasi
-            </TabsTab>
-          </TabsList>
-
-          <TabsPanel value="Kolaborasi Inovasi">
-            <KolaborasiInovasi/>
-          </TabsPanel>
-
-          <TabsPanel value="Mitra Kolaborasi">
-            <MitraKolaborasi/>
-          </TabsPanel>
-        </Tabs>
-      </Stack>
+      <HeaderSearch
+        title='Kolaborasi Inovasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListKolaborasiInovasi/>
     </Box>
   );
 }
 
-export default Page;
+function ListKolaborasiInovasi() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kolaborasi Inovasi'
+          href='/admin/inovasi/kolaborasi-inovasi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Kolaborasi Inovasi</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Kolaborasi Inovasi 1</TableTd>
+              <TableTd>Image</TableTd>
+              <TableTd>Deskripsi Singkat</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/kolaborasi-inovasi/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default KolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/kolaborasiInovasi/page.tsx

@@ -1,53 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import React from 'react';
-
-function KolaborasiInovasi() {
-  return (
-    <Box py={15}>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Title order={4}>Create Kolaborasi Inovasi</Title>
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
-                placeholder="Masukkan tahun"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
-                placeholder="Masukkan nama kolaborasi inovasi"
-              />
-              <TextInput
-                label={<Text fz={"sm"} fw={"bold"}>Deskripsi Kolaborasi Inovasi</Text>}
-                placeholder="Masukkan deskripsi kolaborasi inovasi"
-              />
-
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Title order={4}>List Data Kolaborasi Inovasi</Title>
-            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 1
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 2
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 3
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Data 4
-              </Paper>
-            </SimpleGrid>
-          </Paper>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default KolaborasiInovasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/ui/mitraKolaborasi/page.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
-import colors from '@/con/colors';
-import { IconImageInPicture } from '@tabler/icons-react';
-
-function MitraKolaborasi() {
-  return (
-    <Box py={15}>
-      <Stack gap={'xs'}>
-        <Box>
-        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={'xs'}>
-            <Title order={4}>Create Mitra Kolaborasi</Title>
-            <TextInput
-              label={<Text fz={"sm"} fw={"bold"}>Nama Mitra Kolaborasi</Text>}
-              placeholder="Masukkan nama mitra kolaborasi"
-            />
-            <Box>
-              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-              <IconImageInPicture size={50}/>
-            </Box>
-            <Group>
-              <Button bg={colors['blue-button']}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Title order={4}>List Data Kolaborasi Inovasi</Title>
-            <SimpleGrid py={10} cols={{ base: 1, md: 4 }}>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 1
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 2
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 3
-              </Paper>
-              <Paper p={'md'} bg={colors['white-1']}>
-                Foto 4
-              </Paper>
-            </SimpleGrid>
-          </Paper>
-        </Box>
-      </Stack>
-    </Box>
-  );
-}
-
-export default MitraKolaborasi;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/create/page.tsx

@@ -0,0 +1,44 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function CreateLayananOnlineDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Layanan Online Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Layanan Online Desa</Text>}
+          placeholder='Masukkan nama LayananOnlineDesa'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Layanan Online Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateLayananOnlineDesa;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailLayananOnlineDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Layanan Online Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Layanan Online Desa</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"}>Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                <Text fz={"lg"} >Test Konten</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/layanan-online-desa/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailLayananOnlineDesa;

src/app/admin/(dashboard)/inovasi/layanan-online-desa/edit/page.tsx

@@ -0,0 +1,42 @@
+'use client'
+import colors from "@/con/colors";
+import { Box, Button, Paper, Stack, Title, TextInput, Group, Text } from "@mantine/core";
+import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { useRouter } from "next/navigation";
+import { KeamananEditor } from "../../../keamanan/_com/keamananEditor";
+
+export default function EditLayananOnlineDesa() {
+    const router = useRouter();
+    return (
+      <Box>
+        <Box mb={10}>
+          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+            <IconArrowBack color={colors['blue-button']} size={25}/>
+          </Button>
+        </Box>
+  
+        <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Edit Layanan Online Desa</Title>
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+              <IconImageInPicture size={50} />
+            </Box>
+            <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Layanan Online Desa</Text>}
+            placeholder='Masukkan nama LayananOnlineDesa'
+            />
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Deskripsi Layanan Online Desa</Text>
+              <KeamananEditor
+                showSubmit={false}
+              />
+            </Box>
+            <Group>
+              <Button bg={colors['blue-button']}>Submit</Button>
+            </Group>
+         </Stack>
+        </Paper>
+     </Box>
+    );
+  }

src/app/admin/(dashboard)/inovasi/layanan-online-desa/page.tsx

@@ -1,41 +1,56 @@
+'use client'
 import colors from '@/con/colors';
-import { Box, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function LayananOnlineDesa() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Box>
-          <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Layanan Online Desa</Title>
-              <TextInput
-                label={<Text fz={'sm'} fw={'bold'}>Nama Layanan</Text>}
-                placeholder="Masukkan nama layanan"
-              />
-              <TextInput
-                label={<Text fz={'sm'} fw={'bold'}>Deskripsi Layanan</Text>}
-                placeholder="Masukkan deskripsi layanan"
-              />
-              <Box>
-                <Text fz={'sm'} fw={'bold'}>Upload Gambar Layanan</Text>
-                <IconImageInPicture size={24} />
-              </Box>
-            </Stack>
-          </Paper>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack gap={'xs'}>
-              <Title order={3}>List Data Layanan Online Desa</Title>
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
+      <HeaderSearch
+        title='Layanan Online Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListLayananOnlineDesa/>
     </Box>
   );
 }
 
-export default Page;
+function ListLayananOnlineDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Layanan Online Desa'
+          href='/admin/inovasi/layanan-online-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Layanan</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Layanan Online Desa 1</TableTd>
+              <TableTd>Deskripsi Layanan Online Desa 1</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/layanan-online-desa/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default LayananOnlineDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx

@@ -1,37 +1,49 @@
+'use client'
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconImageInPicture } from '@tabler/icons-react';
-import React from 'react';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
-function ProgramKreatifCreate() {
+
+function CreateProgramKreatifDesa() {
+  const router = useRouter();
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Paper w={{base: "100%", md: "50%"}} p={"md"} bg={colors["white-1"]}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Program Kreatif Desa</Title>
-            <Box>
-              <Text fz={"sm"} fw={"bold"}>Gambar</Text>
-              <IconImageInPicture size={24}/>
-            </Box>
-            <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Program</Text>}
-            placeholder="Masukkan nama program"
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Program Kreatif Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Program Kreatif Desa</Text>}
+          placeholder='Masukkan nama program kreatif desa'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Kreatif Desa</Text>}
+          placeholder='Masukkan deskripsi singkat program kreatif desa'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
             />
-            <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="Masukkan deskripsi"
-            />
-            <Group>
-              <Button
-              bg={colors["blue-button"]}
-              >Simpan</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box>
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
   );
 }
 
-export default ProgramKreatifCreate;
+export default CreateProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Kreatif Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Program Kreatif Desa</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                <Text fz={"lg"}>Test Deskripsi Singkat</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/inovasi/program-kreatif-desa/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/edit/page.tsx

@@ -0,0 +1,49 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Program Kreatif Desa</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Program Kreatif Desa</Text>}
+          placeholder='Masukkan nama Program Kreatif Desa'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Kreatif Desa</Text>}
+          placeholder='Masukkan deskripsi singkat program kreatif desa'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/listData/page.tsx

@@ -1,29 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListDataProgramKreatifDesa() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={3}>List Data Program Kreatif Desa</Title>
-        <SimpleGrid cols={{ base: 1, md: 4 }}>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 1
-          </Paper>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 2
-          </Paper>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 3
-          </Paper>
-          <Paper p={"md"} bg={colors["white-1"]}>
-          Data 4
-          </Paper>
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default ListDataProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/program-kreatif-desa/page.tsx

@@ -1,18 +1,58 @@
-import { Box, Stack, Title } from '@mantine/core';
-import React from 'react';
-import ProgramKreatifCreate from './create/page';
-import ListDataProgramKreatifDesa from './listData/page';
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
-function Page() {
+function ProgramKreatifDesa() {
   return (
     <Box>
-      <Stack gap={"xs"}>
-        <Title order={3}>Program Kreatif Desa</Title>
-        <ProgramKreatifCreate />
-        <ListDataProgramKreatifDesa />
-      </Stack>
+      <HeaderSearch
+        title='Program Kreatif Desa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+      />
+      <ListProgramKreatifDesa/>
     </Box>
   );
 }
 
-export default Page;
+function ListProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Program Kreatif Desa'
+          href='/admin/inovasi/program-kreatif-desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Program Kreatif Desa</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Detail</TableTh>
+              </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Program Kreatif Desa 1</TableTd>
+              <TableTd>Image</TableTd>
+              <TableTd>Deskripsi Singkat</TableTd>
+              <TableTd>
+                <Button onClick={() => router.push('/admin/inovasi/program-kreatif-desa/detail')}>
+                  <IconDeviceImac size={20} />
+                </Button>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>  
+      </Paper>
+    </Box>
+  );
+}
+
+export default ProgramKreatifDesa;

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

@@ -12,11 +12,11 @@ function CreatePosyandu() {
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Posyandu</Title>
           <Box>
@@ -24,8 +24,12 @@ function CreatePosyandu() {
             <IconImageInPicture size={50} />
           </Box>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
-          placeholder='Masukkan nama posyandu'
+            label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
+            placeholder='Masukkan nama posyandu'
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
+            placeholder='Masukkan nomor posyandu'
           />
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>
@@ -36,9 +40,9 @@ function CreatePosyandu() {
           <Group>
             <Button bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

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

@@ -17,30 +17,26 @@ function DetailPosyandu() {
       </Box>
       <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Potensi</Text>
+          <Text fz={"xl"} fw={"bold"}>Detail Posyandu</Text>
 
           <Paper bg={colors['BG-trans']} p={'md'}>
             <Stack gap={"xs"}>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                <Text fz={"lg"} fw={"bold"}>Nama Posyandu</Text>
                 <Text fz={"lg"}>Test Judul</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Kategori</Text>
-                <Text fz={"lg"}>Test Kategori</Text>
+                <Text fz={"lg"} fw={"bold"}>Nomor Posyandu</Text>
+                <Text fz={"lg"}>089647038426</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                <Text fz={"lg"}>Test Deskripsi</Text>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Posyandu</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
               </Box>
               <Box>
                 <Text fz={"lg"} fw={"bold"}>Gambar</Text>
                 <Image src={"/"} alt="gambar" />
               </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                <Text fz={"lg"} >Test Konten</Text>
-              </Box>
               <Box>
                 <Flex gap={"xs"}>
                   <Button color="red">
@@ -61,7 +57,7 @@ function DetailPosyandu() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
+        text="Apakah anda yakin ingin menghapus penanganan darurat ini?"
       /> */}
     </Box>
   );

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

@@ -26,6 +26,10 @@ function EditPosyandu() {
           <TextInput
           label={<Text fw={"bold"} fz={"sm"}>Nama Posyandu</Text>}
           placeholder='Masukkan nama posyandu'
+          />
+           <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nomor Posyandu</Text>}
+          placeholder='Masukkan nomor posyandu'
           />
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Posyandu</Text>

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/create/page.tsx

@@ -4,6 +4,7 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
 function CreateDataLingkunganDesa() {
   const router = useRouter()
@@ -19,10 +20,13 @@ function CreateDataLingkunganDesa() {
         <Stack gap="xs">
           <Title order={3}>Create Data Lingkungan Desa</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jumlah</Text>}
+            placeholder="masukkan jumlah"
           />
-
           <TextInput
             label={<Text fz="sm" fw="bold">Deskripsi</Text>}
             placeholder="masukkan deskripsi"
@@ -51,15 +55,11 @@ function CreateDataLingkunganDesa() {
                             <IconImageInPicture />
                         </Center>
                     )} */}
-
           <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
-            {/* <CreateEditor
-                            value={potensiState.create.form.content}
-                            onChange={(htmlContent) => {
-                                potensiState.create.form.content = htmlContent;
-                            }}
-                        /> */}
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
           </Box>
           <Button bg={colors['blue-button']} >
             Simpan Data

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailDataLingkunganDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Data Lingkungan Desa</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Data Lingkungan Desa</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jumlah</Text>
+                <Text fz={"lg"}>Test Jumlah</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailDataLingkunganDesa;

src/app/admin/(dashboard)/lingkungan/data-lingkungan-desa/edit/page.tsx

@@ -0,0 +1,73 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function EditDataLingkunganDesa() {
+  const router = useRouter()
+  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}>Edit Data Lingkungan Desa</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Nama Data Lingkungan Desa</Text>}
+            placeholder="masukkan nama data lingkungan desa"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          {/* <FileInput
+                        label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+                        value={file}
+                        onChange={async (e) => {
+                            if (!e) return;
+                            setFile(e);
+                            const base64 = await e.arrayBuffer().then((buf) =>
+                                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+                            );
+                            setPreviewImage(base64);
+                        }}
+                    /> */}
+
+          {/* {previewImage ? (
+                        <Image alt="" src={previewImage} w={200} h={200} />
+                    ) : (
+                        <Center w={200} h={200} bg="gray">
+                            <IconImageInPicture />
+                        </Center>
+                    )} */}
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Data Lingkungan Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan Data
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDataLingkunganDesa;

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

@@ -1,9 +1,11 @@
+'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 DataLingkunganDesa() {
   return (
@@ -19,6 +21,7 @@ function DataLingkunganDesa() {
 }
 
 function ListDataLingkunganDesa() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p="md">
@@ -31,7 +34,7 @@ function ListDataLingkunganDesa() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Nama Data Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
                   <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
@@ -41,15 +44,15 @@ function ListDataLingkunganDesa() {
                 <TableTr>
                   <TableTd>
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                      <Text truncate="end" fz={"sm"}>Lingkungan Desa</Text>
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Image w={100}  alt="image" />
+                    <Image w={100} src={"/"}  alt="image" />
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/create/page.tsx

@@ -5,7 +5,7 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
-function Page() {
+function CreateEdukasiLingkungan() {
   const router = useRouter()
   return (
     <Box>
@@ -19,12 +19,12 @@ function Page() {
         <Stack gap="xs">
           <Title order={3}>Create Edukasi Lingkungan</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Judul Edukasi Lingkungan</Text>}
+            placeholder="masukkan judul edukasi lingkungan"
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={<Text fz="sm" fw="bold">Deskripsi Edukasi Lingkungan</Text>}
+            placeholder="masukkan deskripsi edukasi lingkungan"
           />
           {/* <FileInput
           label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
@@ -58,4 +58,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default CreateEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailEdukasiLingkungan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Edukasi Lingkungan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Edukasi Lingkungan</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Edukasi Lingkungan</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/edit/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+import React from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function EditEdukasiLingkungan() {
+  const router = useRouter()
+  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}>Edit Edukasi Lingkungan</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Edukasi Lingkungan</Text>}
+            placeholder="masukkan judul edukasi lingkungan"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi Edukasi Lingkungan</Text>}
+            placeholder="masukkan deskripsi edukasi lingkungan"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+          value={file}
+          onChange={async (e) => {
+            if (!e) return;
+            setFile(e);
+            const base64 = await e.arrayBuffer().then((buf) =>
+              'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+            );
+            setPreviewImage(base64);
+          }}
+          /> */}
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditEdukasiLingkungan;

src/app/admin/(dashboard)/lingkungan/edukasi-lingkungan/page.tsx

@@ -1,9 +1,11 @@
+'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() { 
   return (
@@ -19,6 +21,7 @@ function Page() {
 }
 
 function ListEdukasiLingkungan() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,9 +34,9 @@ function ListEdukasiLingkungan() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Judul Edukasi Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Deskripsi Edukasi Lingkungan</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -47,9 +50,9 @@ function ListEdukasiLingkungan() {
                   <TableTd>
                     <Image w={100} src="/" alt="image" />
                   </TableTd>
-                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>Deskripsi Edukasi Lingkungan</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

src/app/admin/(dashboard)/lingkungan/gotong-royong/create/page.tsx

@@ -4,8 +4,9 @@ import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
-function Page() {
+function CreateGotongRoyong() {
   const router = useRouter()
   return (
     <Box>
@@ -19,17 +20,19 @@ function Page() {
         <Stack gap="xs">
           <Title order={3}>Create Gotong Royong</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
+            placeholder="masukkan judul gotong royong"
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="masukkan kategori"
-          />
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
+            placeholder="masukkan kategori gotong royong"
           />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
           {/* <FileInput
           label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
           value={file}
@@ -62,4 +65,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default CreateGotongRoyong;

src/app/admin/(dashboard)/lingkungan/gotong-royong/detail/page.tsx

@@ -0,0 +1,66 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailGotongRoyong() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Gotong Royong</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Gotong Royong</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Kategori Gotong Royong</Text>
+                <Text fz={"lg"}>Test Kategori</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Gotong Royong</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/gotong-royong/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailGotongRoyong;

src/app/admin/(dashboard)/lingkungan/gotong-royong/edit/page.tsx

@@ -0,0 +1,68 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+function EditGotongRoyong() {
+  const router = useRouter()
+  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}>Edit Gotong Royong</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Gotong Royong</Text>}
+            placeholder="masukkan judul gotong royong"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Kategori Gotong Royong</Text>}
+            placeholder="masukkan kategori gotong royong"
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Gotong Royong</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+          value={file}
+          onChange={async (e) => {
+            if (!e) return;
+            setFile(e);
+            const base64 = await e.arrayBuffer().then((buf) =>
+              'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+            );
+            setPreviewImage(base64);
+          }}
+          /> */}
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+          <Box>
+            <Text fz="sm" fw="bold">Gambar</Text>
+            <IconImageInPicture size={25} />
+          </Box>
+          <Button bg={colors['blue-button']} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditGotongRoyong;

src/app/admin/(dashboard)/lingkungan/gotong-royong/page.tsx

@@ -1,8 +1,10 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function GotongRoyong() {
   return (
@@ -18,6 +20,7 @@ function GotongRoyong() {
 }
 
 function ListGotongRoyong() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -30,10 +33,10 @@ function ListGotongRoyong() {
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Kategori</TableTh>
+                  <TableTh>Judul Gotong Royong</TableTh>
+                  <TableTh>Kategori Gotong Royong</TableTh>
                   <TableTh>Image</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Deskripsi Gotong Royong</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -50,7 +53,7 @@ function ListGotongRoyong() {
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/gotong-royong/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/create/page.tsx

@@ -1,11 +1,10 @@
 'use client'
-import React from 'react';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
-function Page() {
+function CreateKonservasiAdatBali() {
   const router = useRouter()
   return (
     <Box>
@@ -19,12 +18,12 @@ function Page() {
         <Stack gap="xs">
           <Title order={3}>Create Konservasi Adat Bali</Title>
           <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            label={<Text fz="sm" fw="bold">Judul Konservasi Adat Bali</Text>}
+            placeholder="masukkan judul konservasi adat bali"
           />
           <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            label={<Text fz="sm" fw="bold">Deskripsi Konservasi Adat Bali</Text>}
+            placeholder="masukkan deskripsi konservasi adat bali"
           />
           {/* <FileInput
           label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
@@ -46,17 +45,15 @@ function Page() {
               <IconImageInPicture />
             </Center>
           )} */}
-          <Box>
-            <Text fz="sm" fw="bold">Gambar</Text>
-            <IconImageInPicture size={25} />
-          </Box>
-          <Button bg={colors['blue-button']}>
+         <Group>
+         <Button bg={colors['blue-button']}>
             Simpan
           </Button>
+         </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
 
-export default Page;
+export default CreateKonservasiAdatBali;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/detail/page.tsx

@@ -0,0 +1,57 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKonservasiAdatBali() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Konservasi Adat Bali</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Konservasi Adat Bali</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Konservasi Adat Bali</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailKonservasiAdatBali;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/edit/page.tsx

@@ -0,0 +1,59 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+function EditKonservasiAdatBali() {
+  const router = useRouter()
+  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}>Edit Konservasi Adat Bali</Title>
+          <TextInput
+            label={<Text fz="sm" fw="bold">Judul Konservasi Adat Bali</Text>}
+            placeholder="masukkan judul konservasi adat bali"
+          />
+          <TextInput
+            label={<Text fz="sm" fw="bold">Deskripsi Konservasi Adat Bali</Text>}
+            placeholder="masukkan deskripsi konservasi adat bali"
+          />
+          {/* <FileInput
+          label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
+          value={file}
+          onChange={async (e) => {
+            if (!e) return;
+            setFile(e);
+            const base64 = await e.arrayBuffer().then((buf) =>
+              'data:image/png;base64,' + Buffer.from(buf).toString('base64')
+            );
+            setPreviewImage(base64);
+          }}
+          />
+          */}
+          {/* {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg="gray">
+              <IconImageInPicture />
+            </Center>
+          )} */}
+          <Group>
+            <Button bg={colors['blue-button']}>
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKonservasiAdatBali;

src/app/admin/(dashboard)/lingkungan/konservasi-adat-bali/page.tsx

@@ -1,9 +1,10 @@
-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';
+'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 HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function KonservasiAdatBali() {
   return (
@@ -19,6 +20,7 @@ function KonservasiAdatBali() {
 }
 
 function ListKonservasiAdatBali() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,9 +33,8 @@ function ListKonservasiAdatBali() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Judul Konservasi Adat Bali</TableTh>
+                  <TableTh>Deskripsi Konservasi Adat Bali</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -41,15 +42,12 @@ function ListKonservasiAdatBali() {
                 <TableTr>
                   <TableTd>
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                      <Text truncate="end" fz={"sm"}>Judul Konservasi Adat Bali</Text>
                     </Box>
                   </TableTd>
+                  <TableTd>Deskripsi Konservasi Adat Bali</TableTd>
                   <TableTd>
-                    <Image w={100} src="/" alt="image" />
-                  </TableTd>
-                  <TableTd>Deskripsi</TableTd>
-                  <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push("/admin/lingkungan/konservasi-adat-bali/detail")}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/create/page.tsx

@@ -1,71 +0,0 @@
-'use client'
-import colors from "@/con/colors";
-import { Box, Button, Paper, Stack, Title, TextInput, Text } from "@mantine/core";
-import { IconArrowBack } from "@tabler/icons-react";
-import { useRouter } from "next/navigation";
-
-
-export default function CreatePengelolaanSampahBankSampah() {
-    const router = useRouter()
-    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 Mekanisme Bank Sampah</Title>
-
-                    <TextInput
-                        label={<Text fz="sm" fw="bold">Judul</Text>}
-                        placeholder="masukkan judul"
-                    />
-
-                    <TextInput
-                        label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-                        placeholder="masukkan deskripsi"
-                    />
-
-                    {/* <FileInput
-                        label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-                        value={file}
-                        onChange={async (e) => {
-                            if (!e) return;
-                            setFile(e);
-                            const base64 = await e.arrayBuffer().then((buf) =>
-                                'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                            );
-                            setPreviewImage(base64);
-                        }}
-                    /> */}
-
-                    {/* {previewImage ? (
-                        <Image alt="" src={previewImage} w={200} h={200} />
-                    ) : (
-                        <Center w={200} h={200} bg="gray">
-                            <IconImageInPicture />
-                        </Center>
-                    )} */}
-
-                    <Box>
-                        <Text fz="sm" fw="bold">Konten</Text>
-                        {/* <CreateEditor
-                            value={potensiState.create.form.content}
-                            onChange={(htmlContent) => {
-                                potensiState.create.form.content = htmlContent;
-                            }}
-                        /> */}
-                    </Box>
-
-                    <Button bg={colors['blue-button']} >
-                        Simpan
-                    </Button>
-                </Stack>
-            </Paper>
-        </Box>
-    )
-}
-

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateKeteranganBankSampahTerdekat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Keterangan Bank Sampah Terdekat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Bank Sampah Terdekat</Text>}
+            placeholder='Masukkan nama bank sampah terdekat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Bank Sampah Terdekat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKeteranganBankSampahTerdekat;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailKeteranganBankSampahTerdekat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Keterangan Bank Sampah Terdekat</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Bank Sampah Terdekat</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailKeteranganBankSampahTerdekat;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditKeteranganBankSampahTerdekat() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Keterangan Bank Sampah Terdekat</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Bank Sampah Terdekat</Text>}
+            placeholder='Masukkan nama bank sampah terdekat'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Bank Sampah Terdekat</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKeteranganBankSampahTerdekat;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/page.tsx

@@ -0,0 +1,55 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Image, 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 JudulListTab from '../../../_com/jusulListTab';
+
+function KeteranganBankSampahTerdekat() {
+  const router = useRouter();
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <JudulListTab
+            title='Keterangan Bank Sampah Terdekat'
+            href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={20} />}
+          />
+          <Title order={4}>List Keterangan Bank Sampah Terdekat</Title>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Bank Sampah Terdekat</TableTh>
+                  <TableTh>Gambar</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                <TableTr>
+                  <TableTd>
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>Bank Sampah Sarana Gathi</Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Image w={100} alt="image" />
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan_bank_sampah_terdekat/detail')}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default KeteranganBankSampahTerdekat;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function CreateMekanismeBankSampah() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Mekanisme Bank Sampah</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default CreateMekanismeBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail/page.tsx

@@ -0,0 +1,61 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailPengelolaanSampahBankSampah() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Mekanisme Bank Sampah</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <IconImageInPicture color={colors['blue-button']} size={25} />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailPengelolaanSampahBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit/page.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+
+
+
+function EditMekanismeBankSampah() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Mekanisme Bank Sampah</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditMekanismeBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/page.tsx

@@ -1,39 +1,29 @@
-import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import React from 'react';
-import HeaderSearch from '@/app/admin/(dashboard)/_com/header';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+'use client'
 import colors from '@/con/colors';
-import JudulList from '@/app/admin/(dashboard)/_com/judulList';
-
-function ListPage() {
-  return (
-    <Box py={10}>
-      <HeaderSearch
-        title='Mekanisme Bank Sampah'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-      />
-      <ListPengelolaanSampahBankSampah />
-    </Box>
-  );
-}
+import { Box, Button, Image, 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 JudulListTab from '../../../_com/jusulListTab';
 
 function ListPengelolaanSampahBankSampah() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-          title='List Mekanisme Bank Sampah'
-          href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/create'
+        <Stack gap={"xs"}>
+          <JudulListTab
+            title='Mekanisme Bank Sampah'
+            href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/create'
+            placeholder='pencarian'
+            searchIcon={<IconSearch size={20} />}
           />
+          <Title order={4}>List Mekanisme Bank Sampah</Title>
           <Box style={{ overflowX: "auto" }}>
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
               <TableThead>
                 <TableTr>
                   <TableTh>Judul</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -45,11 +35,10 @@ function ListPengelolaanSampahBankSampah() {
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Image w={100}  alt="image" />
+                    <Image w={100} alt="image" />
                   </TableTd>
-                  <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
@@ -63,4 +52,4 @@ function ListPengelolaanSampahBankSampah() {
   )
 }
 
-export default ListPage;
+export default ListPengelolaanSampahBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,6 +1,9 @@
 import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import ListPage from './ui/list_page/listPage';
+
 import colors from '@/con/colors';
+import ListPengelolaanSampahBankSampah from './list_pengelolaan_sampah_bank_sampah/page';
+import KeteranganBankSampahTerdekat from './keterangan_bank_sampah_terdekat/page';
+
 
 function PengelolaanSampahBankSampah() {
   return (
@@ -13,16 +16,16 @@ function PengelolaanSampahBankSampah() {
               List Pengelolaan Sampah Bank Sampah
             </TabsTab>
             <TabsTab value="maps">
-              Maps
+              Keterangan Bank Sampah Terdekat
             </TabsTab>
-          </TabsList> 
+          </TabsList>
 
           <TabsPanel value="list">
-            <ListPage />
+            <ListPengelolaanSampahBankSampah />
           </TabsPanel>
 
           <TabsPanel value="maps">
-            Maps
+            <KeteranganBankSampahTerdekat />
           </TabsPanel>
         </Tabs>
       </Stack>

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

@@ -1,73 +1,53 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
 
-function Page() {
-  const router = useRouter()
+
+function CreateProgramKreatifDesa() {
+  const router = useRouter();
   return (
     <Box>
-     <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
         </Button>
       </Box>
 
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
-          <Title order={3}>Create Program Penghijauan</Title>
-
-          <TextInput
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
-          />
-
-          <TextInput
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
-          />
-
-          <Text fz="sm" fw="bold">Gambar</Text>
-          <IconImageInPicture size={25} />
-          {/* <FileInput
-            label={<Text fz="sm" fw="bold">Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-                if (!e) return;
-                setFile(e);
-                const base64 = await e.arrayBuffer().then((buf) =>
-                    'data:image/png;base64,' + Buffer.from(buf).toString('base64')
-                );
-                setPreviewImage(base64);
-            }}
-          /> */}
-
-          {/* {previewImage ? (
-              <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-              <Center w={200} h={200} bg="gray">
-                  <IconImageInPicture />
-              </Center>
-          )} */}
-
+          <Title order={4}>Create Program Penghijauan</Title>
           <Box>
-              <Text fz="sm" fw="bold">Konten</Text>
-              {/* <CreateEditor
-                  value={potensiState.create.form.content}
-                  onChange={(htmlContent) => {
-                      potensiState.create.form.content = htmlContent;
-                  }}
-              /> */}
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
           </Box>
-
-          <Button bg={colors['blue-button']}>
-              Simpan Potensi
-          </Button>
-        </Stack>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Program Penghijauan</Text>}
+          placeholder='Masukkan nama program penghijauan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Penghijauan</Text>}
+          placeholder='Masukkan deskripsi singkat program penghijauan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+          placeholder='Masukkan jumlah'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
       </Paper>
-    </Box>
+   </Box>
   );
 }
 
-export default Page;
+export default CreateProgramKreatifDesa;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/detail/page.tsx

@@ -0,0 +1,62 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Flex, Text, Image } from '@mantine/core';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramPenghijauan() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Program Penghijauan</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Program Penghijauan</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                <Image src={"/"} alt="gambar" />
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"}>
+                  <Button color="red">
+                    <IconX size={20} />
+                  </Button>
+                  <Button onClick={() => router.push('/admin/lingkungan/program-penghijauan/edit')} color="green">
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus potensi ini?"
+      /> */}
+    </Box>
+  );
+}
+
+export default DetailProgramPenghijauan;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/edit/page.tsx

@@ -0,0 +1,53 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+
+
+function EditProgramKreatifDesa() {
+  const router = useRouter();
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25}/>
+        </Button>
+      </Box>
+
+      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Program Penghijauan</Title>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
+            <IconImageInPicture size={50} />
+          </Box>
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Nama Program Penghijauan</Text>}
+          placeholder='Masukkan nama program penghijauan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Program Penghijauan</Text>}
+          placeholder='Masukkan deskripsi singkat program penghijauan'
+          />
+          <TextInput
+          label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+          placeholder='Masukkan jumlah'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Program Kreatif Desa</Text>
+            <KeamananEditor
+              showSubmit={false}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']}>Submit</Button>
+          </Group>
+       </Stack>
+      </Paper>
+   </Box>
+  );
+}
+
+export default EditProgramKreatifDesa;

src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx

@@ -1,8 +1,10 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 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 ProgramPenghijauan() {
   return (
@@ -18,20 +20,21 @@ function ProgramPenghijauan() {
 }
 
 function ListManfaatPenghijauan() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
         <Stack>
           <JudulList
           title='List Manfaat Program Penghijauan'
+          href='/admin/lingkungan/program-penghijauan/create'
           />
           <Box style={{ overflowX: "auto" }}>
             <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Nama Program Penghijauan</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Jumlah</TableTh>
                   <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
@@ -42,16 +45,13 @@ function ListManfaatPenghijauan() {
                     <Box w={100}>
                       <Text truncate="end" fz={"sm"}>Judul</Text>
                     </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Jumlah</Text>
-                  </TableTd>
+                  </TableTd>  
                   <TableTd>
                     <Image w={100}  alt="image" />
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/program-penghijauan/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

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;