UI & API Menu Inovasi, SubMenu Program Kreatif Desa

package.json

@@ -1,6 +1,6 @@
 {
   "name": "desa-darmasaba",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "private": true,
   "scripts": {
     "dev": "next dev --turbopack",

prisma/schema.prisma

@@ -90,6 +90,10 @@ model FileStorage {
   KontakItem KontakItem[]
 
   Pegawai Pegawai[]
+
+  DesaDigital DesaDigital[]
+
+  KolaborasiInovasi KolaborasiInovasi[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -150,7 +154,7 @@ model DaftarInformasiPublik {
   id             String   @id @default(cuid())
   jenisInformasi String
   deskripsi      String
-  tanggal        String
+  tanggal        DateTime @db.Date
   createdAt      DateTime @default(now())
   updatedAt      DateTime @updatedAt
   deletedAt      DateTime @default(now())
@@ -1312,7 +1316,7 @@ model Belanja {
   updatedAt DateTime  @updatedAt
   deletedAt DateTime  @default(now())
   isActive  Boolean   @default(true)
-  ApbDesa ApbDesa[] @relation("ApbDesaBelanja")
+  ApbDesa   ApbDesa[] @relation("ApbDesaBelanja")
 }
 
 model Pembiayaan {
@@ -1323,5 +1327,48 @@ model Pembiayaan {
   updatedAt DateTime  @updatedAt
   deletedAt DateTime  @default(now())
   isActive  Boolean   @default(true)
-  ApbDesa ApbDesa[] @relation("ApbDesaPembiayaan")
+  ApbDesa   ApbDesa[] @relation("ApbDesaPembiayaan")
+}
+
+// ========================================= INOVASI ========================================= //
+// ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
+model DesaDigital {
+  id        String      @id @default(cuid())
+  name      String
+  deskripsi 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)
+}
+
+// ========================================= PROGRAM KREATIF ========================================= //
+model ProgramKreatif {
+  id        String   @id @default(cuid())
+  name      String
+  slug      String   @db.Text //deskripsi singkat
+  deskripsi String   @db.Text //deskripsi panjang
+  icon      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= KOLABORASI INOVASI ========================================= //
+model KolaborasiInovasi {
+  id          String      @id @default(cuid())
+  name        String
+  tahun       Int
+  slug        String      @db.Text //deskripsi singkat
+  deskripsi   String      @db.Text //deskripsi panjang
+  kolaborator 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)
 }

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

@@ -19,7 +19,7 @@ const HeaderSearch = ({
   onChange,
 }: HeaderSearchProps) => {
   return (
-    <Grid>
+    <Grid mb={10}>
       <GridCol span={{ base: 12, md: 9 }}>
         <Title order={3}>{title}</Title>
       </GridCol>

src/app/admin/(dashboard)/_state/inovasi/desa-digital.ts

@@ -0,0 +1,216 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(1).max(50),
+  deskripsi: z.string().min(1).max(5000),
+  imageId: z.string().min(1).max(50),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const desaDigitalState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(desaDigitalState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        desaDigitalState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.desadigital["create"].post(
+          desaDigitalState.create.form
+        );
+        if (res.status === 200) {
+          desaDigitalState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        desaDigitalState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DesaDigitalGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.inovasi.desadigital["find-many"].get();
+      if (res.status === 200) {
+        desaDigitalState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DesaDigitalGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/desadigital/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          desaDigitalState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          desaDigitalState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading desa digital:", error);
+        desaDigitalState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        desaDigitalState.delete.loading = true;
+        const response = await fetch(`/api/inovasi/desadigital/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+
+        if (response.ok) {
+          toast.success(result.message || "Desa Digital berhasil dihapus");
+          await desaDigitalState.findMany.load();
+        } else {
+          toast.error(result?.message || "Gagal menghapus desa digital");
+        }
+      } catch (error) {
+        console.log((error as Error).message);
+        toast.error("Terjadi kesalahan saat menghapus desa digital");
+      } finally {
+        desaDigitalState.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/inovasi/desadigital/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading desa digital:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateForm.safeParse(desaDigitalState.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        desaDigitalState.edit.loading = true;
+        const response = await fetch(
+          `/api/inovasi/desadigital/${desaDigitalState.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update desa digital");
+          await desaDigitalState.findMany.load();
+          return true;
+        } else {
+          throw new Error(result?.message || "Gagal update desa digital");
+        }
+      } catch (error) {
+        console.error("Error updating desa digital:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update desa digital"
+        );
+        return false;
+      } finally {
+        desaDigitalState.edit.loading = false;
+      }
+    },
+    reset() {
+      desaDigitalState.edit.id = "";
+      desaDigitalState.edit.form = { ...defaultForm };
+    },
+  },
+});
+export default desaDigitalState;

src/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi.ts

@@ -0,0 +1,234 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+    name: z.string().min(1, "Nama minimal 1 karakter"),
+    tahun: z.number().min(4, "Tahun minimal 4 karakter"),
+    slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+    deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+    kolaborator: z.string().min(1, "Kolaborator minimal 1 karakter"),
+    imageId: z.string().min(1, "Image ID minimal 1 karakter"),
+})
+
+const defaultForm = {
+    name: "",
+    tahun: 0,
+    slug: "",
+    deskripsi: "",
+    kolaborator: "",
+    imageId: "",
+}
+
+const kolaborasiInovasiState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(kolaborasiInovasiState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kolaborasiInovasiState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.kolaborasiinovasi["create"].post(
+          kolaborasiInovasiState.create.form
+        );
+        if (res.status === 200) {
+          kolaborasiInovasiState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kolaborasiInovasiState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      kolaborasiInovasiState.findMany.loading = true; // Use the full path to access the property
+      kolaborasiInovasiState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.inovasi.kolaborasiinovasi["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kolaborasiInovasiState.findMany.data = res.data.data || [];
+          kolaborasiInovasiState.findMany.total = res.data.total || 0;
+          kolaborasiInovasiState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load grafik berdasarkan jenis kelamin:",
+            res.data?.message
+          );
+          kolaborasiInovasiState.findMany.data = [];
+          kolaborasiInovasiState.findMany.total = 0;
+          kolaborasiInovasiState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        kolaborasiInovasiState.findMany.data = [];
+        kolaborasiInovasiState.findMany.total = 0;
+        kolaborasiInovasiState.findMany.totalPages = 1;
+      } finally {
+        kolaborasiInovasiState.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/inovasi/kolaborasiinovasi/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            tahun: data.tahun,
+            slug: data.slug,
+            deskripsi: data.deskripsi,
+            kolaborator: data.kolaborator,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading kolaborasi inovasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateForm.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/inovasi/kolaborasiinovasi/${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 kolaborasiInovasiState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data kolaborasi inovasi");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KolaborasiInovasiGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/kolaborasiinovasi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kolaborasiInovasiState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kolaborasiInovasiState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading kolaborasi inovasi:", error);
+        kolaborasiInovasiState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kolaborasiInovasiState.delete.loading = true;
+
+        const response = await fetch(`/api/inovasi/kolaborasiinovasi/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kolaborasi inovasi berhasil dihapus");
+          await kolaborasiInovasiState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kolaborasi inovasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kolaborasi inovasi");
+      } finally {
+        kolaborasiInovasiState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default kolaborasiInovasiState;
+    

src/app/admin/(dashboard)/_state/inovasi/program-kreatif.ts

@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+  icon: z.string().min(1, "Icon minimal 1 karakter"),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  slug: "",
+  icon: "",
+};
+
+const programKreatifState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(programKreatifState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        programKreatifState.create.loading = true;
+        const res = await ApiFetch.api.inovasi.programkreatif["create"].post(
+          programKreatifState.create.form
+        );
+        if (res.status === 200) {
+          programKreatifState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programKreatifState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      programKreatifState.findMany.loading = true; // Use the full path to access the property
+      programKreatifState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.inovasi.programkreatif["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          programKreatifState.findMany.data = res.data.data || [];
+          programKreatifState.findMany.total = res.data.total || 0;
+          programKreatifState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load grafik berdasarkan jenis kelamin:",
+            res.data?.message
+          );
+          programKreatifState.findMany.data = [];
+          programKreatifState.findMany.total = 0;
+          programKreatifState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        programKreatifState.findMany.data = [];
+        programKreatifState.findMany.total = 0;
+        programKreatifState.findMany.totalPages = 1;
+      } finally {
+        programKreatifState.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/inovasi/programkreatif/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            slug: data.slug,
+            icon: data.icon,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading program kreatif:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateForm.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/inovasi/programkreatif/${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 programKreatifState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data program kreatif");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramKreatifGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/programkreatif/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programKreatifState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          programKreatifState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading program kreatif:", error);
+        programKreatifState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programKreatifState.delete.loading = true;
+
+        const response = await fetch(`/api/inovasi/programkreatif/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program kreatif berhasil dihapus");
+          await programKreatifState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program kreatif");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program kreatif");
+      } finally {
+        programKreatifState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default programKreatifState;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -16,17 +17,9 @@ const defaultForm = {
   tanggal: "",
 };
 
-type DaftarInformasi = Prisma.DaftarInformasiPublikGetPayload<{
-  select: {
-    jenisInformasi: true;
-    deskripsi: true;
-    tanggal: true;
-  };
-}>;
-
 const daftarInformasiPublik = proxy({
   create: {
-    form: {} as DaftarInformasi,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateDaftarInformasi.safeParse(
@@ -56,15 +49,38 @@ const daftarInformasiPublik = proxy({
     },
   },
   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 ?? [];
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      daftarInformasiPublik.findMany.loading = true;  // Use the full path to access the property
+      daftarInformasiPublik.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.daftarinformasipublik[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          daftarInformasiPublik.findMany.data = res.data.data || [];
+          daftarInformasiPublik.findMany.total = res.data.total || 0;
+          daftarInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load daftar informasi publik:", res.data?.message);
+          daftarInformasiPublik.findMany.data = [];
+          daftarInformasiPublik.findMany.total = 0;
+          daftarInformasiPublik.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading daftar informasi publik:", error);
+        daftarInformasiPublik.findMany.data = [];
+        daftarInformasiPublik.findMany.total = 0;
+        daftarInformasiPublik.findMany.totalPages = 1;
+      } finally {
+        daftarInformasiPublik.findMany.loading = false;
       }
     },
   },
@@ -186,7 +202,9 @@ const daftarInformasiPublik = proxy({
       }
       try {
         daftarInformasiPublik.edit.loading = true;
-
+        const formattedTanggal = this.form.tanggal
+        ? new Date(this.form.tanggal).toISOString()
+        : undefined;
         const response = await fetch(
           `/api/ppid/daftarinformasipublik/${this.id}`,
           {
@@ -197,7 +215,7 @@ const daftarInformasiPublik = proxy({
             body: JSON.stringify({
               jenisInformasi: this.form.jenisInformasi,
               deskripsi: this.form.deskripsi,
-              tanggal: this.form.tanggal,
+              tanggal: formattedTanggal,
             }),
           }
         );

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,71 +10,75 @@ const templateGrafikJenisKelamin = z.object({
   perempuan: z.string().min(1, "Data perempuan harus diisi"),
 }); 
 
-type GrafikJenisKelamin = Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
-  select: {
-    id: true;
-    laki: true;
-    perempuan: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikJenisKelamin, 'id'> & { id?: string } = {
+const defaultForm = {
   laki: "",
   perempuan: "",
 };
 
 const grafikBerdasarkanJenisKelamin = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
-    async create() {
-      const cek = templateGrafikJenisKelamin.safeParse(
-        grafikBerdasarkanJenisKelamin.create.form
-      );
+    async create(){
+      const cek = templateGrafikJenisKelamin.safeParse(grafikBerdasarkanJenisKelamin.create.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
       }
+
       try {
         grafikBerdasarkanJenisKelamin.create.loading = true;
         const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
-          if (id) {
-            toast.success("Success create");
-            grafikBerdasarkanJenisKelamin.create.form = {
-              laki: "",
-              perempuan: "",
-            };
-            grafikBerdasarkanJenisKelamin.findMany.load();
-            return id;
-          }
+          toast.success("Grafik berdasarkan jenis kelamin berhasil ditambahkan");
+          await grafikBerdasarkanJenisKelamin.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin");
         }
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin");
       } finally {
         grafikBerdasarkanJenisKelamin.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
-      | Prisma.GrafikBerdasarkanJenisKelaminGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikBerdasarkanJenisKelamin.findMany.data = res.data?.data ?? [];
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikBerdasarkanJenisKelamin.findMany.loading = true;  // Use the full path to access the property
+      grafikBerdasarkanJenisKelamin.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanJenisKelamin.findMany.data = res.data.data || [];
+          grafikBerdasarkanJenisKelamin.findMany.total = res.data.total || 0;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan jenis kelamin:", res.data?.message);
+          grafikBerdasarkanJenisKelamin.findMany.data = [];
+          grafikBerdasarkanJenisKelamin.findMany.total = 0;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan jenis kelamin:", error);
+        grafikBerdasarkanJenisKelamin.findMany.data = [];
+        grafikBerdasarkanJenisKelamin.findMany.total = 0;
+        grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanJenisKelamin.findMany.loading = false;
       }
     },
   },

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,17 +12,7 @@ const templateGrafikResponden = z.object({
   tidakbaik: z.string().min(1, "Data tidak baik harus diisi"),
 });
 
-type GrafikResponden = Prisma.GrafikBerdasarkanRespondenGetPayload<{
-  select: {
-    id: true;
-    sangatbaik: true;
-    baik: true;
-    kurangbaik: true;
-    tidakbaik: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
+const defaultForm = {
   sangatbaik: "",
   baik: "",
   kurangbaik: "",
@@ -30,7 +21,7 @@ const defaultForm: Omit<GrafikResponden, 'id'> & { id?: string } = {
 
 const grafikBerdasarkanResponden = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikResponden.safeParse(
@@ -48,40 +39,52 @@ const grafikBerdasarkanResponden = proxy({
           "create"
         ].post(grafikBerdasarkanResponden.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
-          if (id) {
-            toast.success("Success create");
-            grafikBerdasarkanResponden.create.form = {
-              sangatbaik: "",
-              baik: "",
-              kurangbaik: "",
-              tidakbaik: "",
-            };
-            grafikBerdasarkanResponden.findMany.load();
-            return id;
-          }
+          toast.success("Grafik berdasarkan responden berhasil ditambahkan");
+          await grafikBerdasarkanResponden.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan responden");
         }
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan responden");
       } finally {
         grafikBerdasarkanResponden.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
-      | Prisma.GrafikBerdasarkanRespondenGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikBerdasarkanResponden.findMany.data = res.data?.data ?? [];
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikBerdasarkanResponden.findMany.loading = true;  // Use the full path to access the property
+      grafikBerdasarkanResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanresponden[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanResponden.findMany.data = res.data.data || [];
+          grafikBerdasarkanResponden.findMany.total = res.data.total || 0;
+          grafikBerdasarkanResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan responden:", res.data?.message);
+          grafikBerdasarkanResponden.findMany.data = [];
+          grafikBerdasarkanResponden.findMany.total = 0;
+          grafikBerdasarkanResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafikBerdasarkanResponden:", error);
+        grafikBerdasarkanResponden.findMany.data = [];
+        grafikBerdasarkanResponden.findMany.total = 0;
+        grafikBerdasarkanResponden.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanResponden.findMany.loading = false;
       }
     },
   },

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,17 +12,7 @@ const templateGrafikUmur = z.object({
   lansia: z.string().min(1, "Data lansia harus diisi"),
 });
 
-type GrafikUmur = Prisma.GrafikBerdasarkanUmurGetPayload<{
-  select: {
-    id: true;
-    remaja: true;
-    dewasa: true;
-    orangtua: true;
-    lansia: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
+const defaultForm = {
   remaja: "",
   dewasa: "",
   orangtua: "",
@@ -30,7 +21,7 @@ const defaultForm: Omit<GrafikUmur, "id"> & { id?: string } = {
 
 const grafikBerdasarkanUmur = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikUmur.safeParse(
@@ -70,18 +61,38 @@ const grafikBerdasarkanUmur = proxy({
     },
   },
   findMany: {
-    data: null as
-      | Prisma.GrafikBerdasarkanUmurGetPayload<{
-          omit: { isActive: true };
-        }>[]
-      | null,
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikBerdasarkanUmur.findMany.data = res.data?.data ?? [];
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikBerdasarkanUmur.findMany.loading = true;  // Use the full path to access the property
+      grafikBerdasarkanUmur.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikberdasarkanumur[
+          "find-many"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikBerdasarkanUmur.findMany.data = res.data.data || [];
+          grafikBerdasarkanUmur.findMany.total = res.data.total || 0;
+          grafikBerdasarkanUmur.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik berdasarkan umur:", res.data?.message);
+          grafikBerdasarkanUmur.findMany.data = [];
+          grafikBerdasarkanUmur.findMany.total = 0;
+          grafikBerdasarkanUmur.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan umur:", error);
+        grafikBerdasarkanUmur.findMany.data = [];
+        grafikBerdasarkanUmur.findMany.total = 0;
+        grafikBerdasarkanUmur.findMany.totalPages = 1;
+      } finally {
+        grafikBerdasarkanUmur.findMany.loading = false;
       }
     },
   },

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,22 +10,14 @@ const templateGrafikHasilKepuasanMasyarakat = z.object({
   kepuasan: z.string().min(1, "Kepuasan harus diisi"),
 });
 
-type GrafikHasilKepuasanMasyarakat = Prisma.IndeksKepuasanMasyarakatGetPayload<{
-  select: {
-    id: true;
-    label: true;
-    kepuasan: true;
-  };
-}>;
-
-const defaultForm: Omit<GrafikHasilKepuasanMasyarakat, 'id'> & { id?: string } = {
+const defaultForm = {
   label: "",
   kepuasan: "",
 };
 
 const grafikHasilKepuasanMasyarakat = proxy({
   create: {
-    form: defaultForm,
+    form: {...defaultForm},
     loading: false,
     async create() {
       const cek = templateGrafikHasilKepuasanMasyarakat.safeParse(
@@ -38,42 +31,52 @@ const grafikHasilKepuasanMasyarakat = proxy({
       }
       try {
         grafikHasilKepuasanMasyarakat.create.loading = true;
-        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(
-          grafikHasilKepuasanMasyarakat.create.form
-        );
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["create"].post(grafikHasilKepuasanMasyarakat.create.form);
         if (res.status === 200) {
-          const id = res.data?.data?.id;
-          if (id) {
-            toast.success("Success create");
-            grafikHasilKepuasanMasyarakat.create.form = {
-              label: "",
-              kepuasan: "",
-            };
-            grafikHasilKepuasanMasyarakat.findMany.load();
-            return id;
-          }
+          toast.success("Grafik hasil kepuasan masyarakat berhasil ditambahkan");
+          await grafikHasilKepuasanMasyarakat.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah grafik hasil kepuasan masyarakat");
         }
-        
-        return toast.error("failed create");
       } catch (error) {
-        console.log((error as Error).message);
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan grafik hasil kepuasan masyarakat");
       } finally {
         grafikHasilKepuasanMasyarakat.create.loading = false;
       }
     },
   },
   findMany: {
-    data: null as
-      | 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 ?? [];
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      grafikHasilKepuasanMasyarakat.findMany.loading = true;  // Use the full path to access the property
+      grafikHasilKepuasanMasyarakat.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.ppid.grafikhasilkepuasamanmasyarakat["find-many"].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          grafikHasilKepuasanMasyarakat.findMany.data = res.data.data || [];
+          grafikHasilKepuasanMasyarakat.findMany.total = res.data.total || 0;
+          grafikHasilKepuasanMasyarakat.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load grafik hasil kepuasan masyarakat:", res.data?.message);
+          grafikHasilKepuasanMasyarakat.findMany.data = [];
+          grafikHasilKepuasanMasyarakat.findMany.total = 0;
+          grafikHasilKepuasanMasyarakat.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik hasil kepuasan masyarakat:", error);
+        grafikHasilKepuasanMasyarakat.findMany.data = [];
+        grafikHasilKepuasanMasyarakat.findMany.total = 0;
+        grafikHasilKepuasanMasyarakat.findMany.totalPages = 1;
+      } finally {
+        grafikHasilKepuasanMasyarakat.findMany.loading = false;
       }
     },
   },

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

@@ -18,8 +18,6 @@ import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
-
-
 import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -40,8 +40,8 @@ function ListBerita({ search }: { search: string }) {
 
   // Fetch pertama kali
   useShallowEffect(() => {
-    load(page); // awal page = 1
-  }, []);
+    load(page, 10); // awal page = 1
+  }, [page]);
 
   const filteredData = (data || []).filter((item) => {
     const keyword = search.toLowerCase();
@@ -57,14 +57,6 @@ function ListBerita({ search }: { search: string }) {
 
   return (
     <Box py={10}>
-      <Pagination
-        value={page}
-        onChange={(newPage) => load(newPage)} // ini penting!
-        total={totalPages}
-        mt="md"
-        mb="md"
-      />
-
       <Paper bg={colors["white-1"]} p={"md"}>
         <Stack>
           <Grid>
@@ -128,6 +120,15 @@ function ListBerita({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -0,0 +1,137 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditPenghargaan() {
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const router = useRouter()
+  const params = useParams()
+  const [previewImage, setPreviewImage] = useState<string | null>(null)
+  const [file, setFile] = useState<File | null>(null)
+  const [formData, setFormData] = useState({
+    name: stateDesaDigital.findUnique.data?.name || '',
+    deskripsi: stateDesaDigital.findUnique.data?.deskripsi || '',
+    imageId: stateDesaDigital.findUnique.data?.imageId || '',
+  })
+
+  useEffect(() => {
+    const loadPenghargaan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDesaDigital.edit.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+          });
+
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error("Error loading desa digital smart village:", error);
+        toast.error("Gagal memuat data desa digital smart village");
+      }
+    };
+
+    loadPenghargaan();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      stateDesaDigital.edit.form = {
+        ...stateDesaDigital.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+      }
+
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        stateDesaDigital.edit.form.imageId = uploaded.id;
+      }
+
+      await stateDesaDigital.edit.update();
+      toast.success("Desa digital smart village berhasil diperbarui!");
+      router.push("/admin/inovasi/desa-digital-smart-village");
+    } catch (error) {
+      console.error("Error updating desa digital smart village:", error);
+      toast.error("Terjadi kesalahan saat memperbarui desa digital smart village");
+    }
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Desa Digital Smart Village</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                stateDesaDigital.edit.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPenghargaan;

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

@@ -0,0 +1,107 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import desaDigitalState from '../../../_state/inovasi/desa-digital';
+
+function DetailDesaDigital() {
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const router = useRouter()
+  const params = useParams()
+
+  useShallowEffect(() => {
+    stateDesaDigital.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDesaDigital.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/desa-digital-smart-village")
+    }
+  }
+
+  if (!stateDesaDigital.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Desa Digital Smart Village</Text>
+          {stateDesaDigital.findUnique.data ? (
+            <Paper key={stateDesaDigital.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{stateDesaDigital.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateDesaDigital.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateDesaDigital.findUnique.data) {
+                        setSelectedId(stateDesaDigital.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDesaDigital.delete.loading || !stateDesaDigital.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateDesaDigital.findUnique.data) {
+                        router.push(`/admin/inovasi/desa-digital-smart-village/${stateDesaDigital.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDesaDigital.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 desa digital smart village ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailDesaDigital;

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

@@ -1,48 +1,115 @@
 '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 ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import desaDigitalState from '../../../_state/inovasi/desa-digital';
 
 
 function CreateDesaDigital() {
-  const router = useRouter();
+  const stateDesaDigital = useProxy(desaDigitalState)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateDesaDigital.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null)
+    setFile(null)
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+    }
+
+    try {
+      // Upload the image first
+      const uploadRes = await ApiFetch.api.fileStorage.create.post({
+        file: file,
+        name: file.name
+      })
+
+      const uploaded = uploadRes.data?.data
+      if (!uploaded?.id) {
+        return toast.error("Gagal upload gambar")
+      }
+
+      // Set the image ID in the form
+      stateDesaDigital.create.form.imageId = uploaded.id
+
+      // Submit the form
+      const success = await stateDesaDigital.create.create()
+      
+      if (success) {
+        resetForm()
+        router.push("/admin/inovasi/desa-digital-smart-village")
+      }
+    } catch (error) {
+      console.error("Error in handleSubmit:", error)
+      toast.error("Terjadi kesalahan saat menyimpan data")
+    }
+
+  }
   return (
     <Box>
       <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+        <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'}>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
         <Stack gap={"xs"}>
-          <Title order={4}>Create Desa Digital Smart Village</Title>
+          <Title order={3}>Create Desa Digital Smart Village</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
-          placeholder='Masukkan nama inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
-          placeholder='Masukkan deskripsi singkat inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
-          placeholder='Masukkan image'
+            value={stateDesaDigital.create.form.name}
+            onChange={(val) => {
+              stateDesaDigital.create.form.name = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Desa Digital Smart Village</Text>}
+            placeholder="masukkan nama desa digital smart village"
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateDesaDigital.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateDesaDigital.create.form.deskripsi = htmlContent;
+              }}
             />
           </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

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

@@ -1,66 +0,0 @@
-'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 DetailDesaDigital() {
-  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 Desa Digital Smart Village</Text>
-
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
-              <Box>
-                <Text fw={"bold"}>Nama Inovasi</Text>
-                <Text>Pelayanan Admin Digital</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Deskripsi Singkat Inovasi</Text>
-                <Text>Deskripsi Singkat Inovasi</Text>
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Image</Text>
-                <IconImageInPicture size={20} />
-              </Box>
-              <Box>
-                <Text fw={"bold"}>Deskripsi Inovasi</Text>
-                <Text>Deskripsi Inovasi</Text>
-              </Box>
-              <Box>
-                <Flex gap={"xs"}>
-                  <Button color="red">
-                    <IconX size={20} />
-                  </Button>
-                  <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/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 DetailDesaDigital;
-

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

@@ -1,49 +0,0 @@
-'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';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
-
-
-function EditDesaDigital() {
-  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 Desa Digital Smart Village</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Nama Inovasi</Text>}
-          placeholder='Masukkan nama inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Inovasi</Text>}
-          placeholder='Masukkan deskripsi singkat inovasi'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Image</Text>}
-          placeholder='Masukkan image'
-          />
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Inovasi</Text>
-            <KeamananEditor
-              showSubmit={false}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditDesaDigital;

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

@@ -1,26 +1,53 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Image, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
-import { useRouter } from 'next/navigation';
+import desaDigitalState from '../../_state/inovasi/desa-digital';
 
 function DesaDigitalSmartVillage() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Desa Digital Smart Village'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListDesaDigitalSmartVillage/>
+      <ListDesaDigitalSmartVillage search={search} />
     </Box>
   );
 }
 
-function ListDesaDigitalSmartVillage() {
-  const router = useRouter();
+function ListDesaDigitalSmartVillage({ search }: { search: string }) {
+  const state = useProxy(desaDigitalState)
+  const router = useRouter()
+  useShallowEffect(() => {
+    state.findMany.load()
+  }, [])
+
+  const filteredData = (state.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!state.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -33,25 +60,25 @@ function ListDesaDigitalSmartVillage() {
             <TableTr>
               <TableTh>Nama Inovasi</TableTh>
               <TableTh>Deskripsi Singkat Inovasi</TableTh>
-              <TableTh>Image</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Layanan Admin Digital</TableTd>
-              <TableTd>Deskripsi Singkat Inovasi</TableTd>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
               <TableTd>
-                <Image src={"/"} alt=''/>
-              </TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/inovasi/desa-digital-smart-village/detail')}>
+                <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
                   <IconDeviceImac size={20} />
                 </Button>
               </TableTd>
             </TableTr>
+          ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
     </Box>
   );

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

@@ -1,26 +1,84 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import kolaborasiInovasiState from '../../_state/inovasi/kolaborasi-inovasi';
+import { useProxy } from 'valtio/utils';
 
 function KolaborasiInovasi() {
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Kolaborasi Inovasi'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListKolaborasiInovasi/>
+      <ListKolaborasiInovasi search={search} />
     </Box>
   );
 }
 
-function ListKolaborasiInovasi() {
+function ListKolaborasiInovasi({ search }: { search: string }) {
+  const listState = useProxy(kolaborasiInovasiState)
+  const { data, loading, page, totalPages, load } = listState.findMany
   const router = useRouter();
+
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) ||
+      item.slug.toLowerCase().includes(keyword) ||
+      item.kolaborator.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Kolaborasi Inovasi'
+              href='/admin/inovasi/kolaborasi-inovasi/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Kolaborasi Inovasi</TableTh>
+                  <TableTh>Tahun</TableTh>
+                  <TableTh>Deskripsi Singkat</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data kolaborasi inovasi yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,26 +89,43 @@ function ListKolaborasiInovasi() {
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
+              <TableTh>No</TableTh>
               <TableTh>Nama Kolaborasi Inovasi</TableTh>
-              <TableTh>Image</TableTh>
+              <TableTh>Tahun</TableTh>
               <TableTh>Deskripsi Singkat</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </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>
+            {filteredData.map((item, index) => (
+              <TableTr key={item.id}>
+                <TableTd>{index + 1}</TableTd>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.tahun}</TableTd>
+                <TableTd>{item.slug}</TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push('/admin/inovasi/kolaborasi-inovasi/detail')}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+
     </Box>
   );
 }

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

@@ -3,7 +3,7 @@ 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";
+// import { KeamananEditor } from "../../../keamanan/_com/keamananEditor";
 
 export default function EditLayananOnlineDesa() {
     const router = useRouter();
@@ -28,9 +28,9 @@ export default function EditLayananOnlineDesa() {
             />
             <Box>
               <Text fw={"bold"} fz={"sm"}>Deskripsi Layanan Online Desa</Text>
-              <KeamananEditor
+              {/* <KeamananEditor
                 showSubmit={false}
-              />
+              /> */}
             </Box>
             <Group>
               <Button bg={colors['blue-button']}>Submit</Button>

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

@@ -0,0 +1,149 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import programKreatifState from '@/app/admin/(dashboard)/_state/inovasi/program-kreatif';
+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';
+import SelectIconProgramEdit from '../../_lib/selectIconEdit';
+
+interface FormProgramKreatif {
+  name: string;
+  deskripsi: string;
+  slug: string;
+  icon: string;
+}
+
+type IconKey = 'ekowisata' | 'kompetisi' | 'wisata' | 'ekonomi' | 'sampah';
+
+
+function EditProgramKreatifDesa() {
+  const stateProgramKreatif = useProxy(programKreatifState)
+  const params = useParams()
+  const router = useRouter();
+  const [formData, setFormData] = useState<FormProgramKreatif>({
+    name: '',
+    deskripsi: '',
+    slug: '',
+    icon: '',
+  })
+
+  useEffect(() => {
+    const loadProgramKreatif = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+  
+      try {
+        const data = await stateProgramKreatif.update.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          stateProgramKreatif.update.id = id;
+  
+          stateProgramKreatif.update.form = {
+            name: data.name,
+            slug: data.slug,
+            deskripsi: data.deskripsi,
+            icon: data.icon,
+          };
+  
+          setFormData({
+            name: data.name,
+            slug: data.slug,
+            deskripsi: data.deskripsi,
+            icon: data.icon,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading program kreatif:", error);
+        toast.error("Gagal memuat data program kreatif");
+      }
+    }
+  
+    loadProgramKreatif();
+  }, [params?.id]);
+  
+
+
+  const handleSubmit = async () => {
+    try {
+      stateProgramKreatif.update.form = {
+        ...stateProgramKreatif.update.form,
+        name: formData.name.trim(),
+        deskripsi: formData.deskripsi.trim(),
+        slug: formData.slug.trim(),
+        icon: formData.icon.trim(),
+      }
+      await stateProgramKreatif.update.submit();
+      router.push("/admin/inovasi/program-kreatif-desa");
+    } catch (error) {
+      console.error("Error updating program kreatif:", error);
+      toast.error("Gagal memuat data program kreatif");
+    }
+  }
+  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={3}>Edit Program Kreatif Desa</Title>
+          <TextInput
+            value={formData.name}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program Kreatif Desa</Text>}
+            placeholder="masukkan nama program kreatif desa"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                name: val.target.value
+              })
+            }}
+          />
+          <TextInput
+            value={formData.slug}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi Singkat Program Kreatif Desa</Text>}
+            placeholder="masukkan deskripsi singkat program kreatif desa"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                slug: val.target.value
+              })
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                stateProgramKreatif.update.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
+            <SelectIconProgramEdit
+              value={formData.icon as IconKey}
+              onChange={(value) => {
+                setFormData((prev) => ({ ...prev, icon: value }));
+                stateProgramKreatif.update.form.icon = value;
+              }}
+/>
+
+
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Berita</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditProgramKreatifDesa;

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

@@ -0,0 +1,127 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconChartLine, IconEdit, IconLeaf, IconRecycle, IconTent, IconTrophy, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import programKreatifState from '../../../_state/inovasi/program-kreatif';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+// import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function DetailProgramKreatifDesa() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateProgramKreatif = useProxy(programKreatifState)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+  };
+
+  useShallowEffect(() => {
+    stateProgramKreatif.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateProgramKreatif.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/program-kreatif-desa")
+    }
+  }
+
+  if (!stateProgramKreatif.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 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"}>{stateProgramKreatif.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
+                {iconMap[stateProgramKreatif.findUnique.data?.icon] && (
+                  <Box title={stateProgramKreatif.findUnique.data?.icon}>
+                    {React.createElement(iconMap[stateProgramKreatif.findUnique.data?.icon], { size: 24 })}
+                  </Box>
+                )}
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Singkat</Text>
+                <Text fz={"lg"}>{stateProgramKreatif.findUnique.data?.slug}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: stateProgramKreatif.findUnique.data?.deskripsi }}></Text>
+              </Box>
+              <Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramKreatif.findUnique.data) {
+                        setSelectedId(stateProgramKreatif.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateProgramKreatif.delete.loading || !stateProgramKreatif.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (stateProgramKreatif.findUnique.data) {
+                        router.push(`/admin/inovasi/program-kreatif-desa/${stateProgramKreatif.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateProgramKreatif.findUnique.data}
+                    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 program kreatif desa ini?"
+      /> 
+    </Box>
+  );
+}
+
+export default DetailProgramKreatifDesa;

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

@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
+import { Box, rem, Select } from '@mantine/core';
+import {
+  IconChartLine,
+  IconLeaf,
+  IconRecycle,
+  IconTent,
+  IconTrophy,
+} from '@tabler/icons-react';
+import { useEffect, useState } from 'react';
+
+const iconMap = {
+  ekowisata: { label: 'Ekowisata', icon: IconLeaf },
+  kompetisi: { label: 'Kompetisi', icon: IconTrophy },
+  wisata: { label: 'Wisata', icon: IconTent },
+  ekonomi: { label: 'Ekonomi', icon: IconChartLine },
+  sampah: { label: 'Sampah', icon: IconRecycle },
+};
+
+type IconKey = keyof typeof iconMap;
+
+const iconList = Object.entries(iconMap).map(([value, data]) => ({
+  value,
+  label: data.label,
+}));
+
+export default function SelectIconProgram(
+  { onChange }: { onChange: (value: IconKey) => void }) {
+  const [selectedIcon, setSelectedIcon] = useState<IconKey>('ekowisata');
+  const IconComponent = iconMap[selectedIcon]?.icon || null;
+
+  // Push default icon ke state saat render awal
+  useEffect(() => {
+    onChange(selectedIcon);
+  }, []);
+
+  return (
+    <Box maw={300}>
+      <Select
+        placeholder="Pilih ikon"
+        value={selectedIcon}
+        onChange={(value) => {
+          if (value) {
+            setSelectedIcon(value as IconKey);
+            onChange(value as IconKey);
+          }
+        }}
+        data={iconList}
+        leftSection={
+          IconComponent && (
+            <Box>
+              <IconComponent size={24} stroke={1.5} />
+            </Box>
+          )
+        }
+        withCheckIcon={false}
+        searchable={false}
+        rightSectionWidth={0}
+        styles={{
+          input: {
+            textAlign: 'left',
+            fontSize: rem(16),
+            paddingLeft: 40,
+          },
+          section: {
+            left: 10,
+            right: 'auto',
+          },
+        }}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,70 @@
+'use client'
+
+import { Box, rem, Select } from '@mantine/core';
+import {
+  IconChartLine,
+  IconLeaf,
+  IconRecycle,
+  IconTent,
+  IconTrophy,
+} from '@tabler/icons-react';
+
+const iconMap = {
+  ekowisata: { label: 'Ekowisata', icon: IconLeaf },
+  kompetisi: { label: 'Kompetisi', icon: IconTrophy },
+  wisata: { label: 'Wisata', icon: IconTent },
+  ekonomi: { label: 'Ekonomi', icon: IconChartLine },
+  sampah: { label: 'Sampah', icon: IconRecycle },
+};
+
+type IconKey = keyof typeof iconMap;
+
+const iconList = Object.entries(iconMap).map(([value, data]) => ({
+  value,
+  label: data.label,
+}));
+
+export default function SelectIconProgramEdit({
+  onChange,
+  value,
+}: {
+  onChange: (value: IconKey) => void;
+  value: IconKey;
+}) {
+  const IconComponent = iconMap[value]?.icon || null;
+
+  return (
+    <Box maw={300}>
+      <Select
+        placeholder="Pilih ikon"
+        value={value}
+        onChange={(value) => {
+          if (value) onChange(value as IconKey);
+        }}
+        data={iconList}
+        leftSection={
+          IconComponent && (
+            <Box>
+              <IconComponent size={24} stroke={1.5} />
+            </Box>
+          )
+        }
+        withCheckIcon={false}
+        searchable={false}
+        rightSectionWidth={0}
+        styles={{
+          input: {
+            textAlign: 'left',
+            fontSize: rem(16),
+            paddingLeft: 40,
+          },
+          section: {
+            left: 10,
+            right: 'auto',
+          },
+        }}
+      />
+    </Box>
+  );
+}
+

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

@@ -1,48 +1,70 @@
 '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 { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { KeamananEditor } from '../../../keamanan/_com/keamananEditor';
+import { useProxy } from 'valtio/utils';
+import CreateEditor from '../../../_com/createEditor';
+import programKreatifState from '../../../_state/inovasi/program-kreatif';
+import SelectIconProgram from '../_lib/selectIcon';
 
 
 function CreateProgramKreatifDesa() {
+  const stateCreate = useProxy(programKreatifState)
   const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      slug: "",
+      deskripsi: "",
+      icon: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    router.push("/admin/inovasi/program-kreatif-desa")
+  }
   return (
     <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 Program Kreatif Desa</Title>
+          <Title order={3}>Create Program Kreatif Desa</Title>
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Program Kreatif Desa</Text>}
+            placeholder="masukkan nama program kreatif desa"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
+          />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Masukkan Image</Text>
-            <IconImageInPicture size={50} />
+            <Text fz={"sm"} fw={"bold"}>Ikon Program Kreatif Desa</Text>
+            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
           </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'
+            onChange={(e) => stateCreate.create.form.slug = e.currentTarget.value}
+            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}
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

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

@@ -1,66 +0,0 @@
-'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

@@ -1,49 +0,0 @@
-'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/page.tsx

@@ -1,58 +1,155 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import React from 'react';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
 import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import programKreatifState from '../../_state/inovasi/program-kreatif';
+import { useProxy } from 'valtio/utils';
+import {
+  IconChartLine,
+  IconLeaf,
+  IconRecycle,
+  IconTent,
+  IconTrophy,
+} from '@tabler/icons-react';
 
 function ProgramKreatifDesa() {
+  const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
         title='Program Kreatif Desa'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListProgramKreatifDesa/>
+      <ListProgramKreatifDesa search={search} />
     </Box>
   );
 }
 
-function ListProgramKreatifDesa() {
+function ListProgramKreatifDesa({ search }: { search: string }) {
+  const listState = useProxy(programKreatifState)
+  const { data, loading, page, totalPages, load } = listState.findMany
   const router = useRouter();
+
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword) ||
+      item.slug.toLowerCase().includes(keyword) ||
+      item.icon.toLowerCase().includes(keyword)
+    );
+  });
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+  };
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Program Kreatif Desa'
+              href='/admin/inovasi/program-kreatif-desa/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Program Kreatif Desa</TableTh>
+                  <TableTh>Deskripsi Singkat</TableTh>
+                  <TableTh>Ikon</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data program kreatif desa yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors['white-1']} p={'md'} h={{ base: 'auto', md: 650 }}>
         <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>
+        <Box style={{ overflowY: 'auto' }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%' }}>Nama Program Kreatif Desa</TableTh>
+                <TableTh style={{ width: '35%' }}>Deskripsi Singkat</TableTh>
+                <TableTh style={{ width: '10%' }}>Ikon</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>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>  
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item, index) => (
+                <TableTr key={item.id}>
+                  <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
+                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.slug }}></TableTd>
+                  <TableTd style={{ width: '10%' }}>
+                    {iconMap[item.icon] && (
+                      <Box title={item.icon}>
+                        {React.createElement(iconMap[item.icon], { size: 24 })}
+                      </Box>
+                    )}
+                  </TableTd>
+                  <TableTd style={{ width: '15%', textAlign: 'center' }}>
+                    <Button onClick={() => router.push(`/admin/inovasi/program-kreatif-desa/${item.id}`)}>
+                      <IconDeviceImac size={25} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }
-
 export default ProgramKreatifDesa;

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

@@ -10,17 +10,29 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+interface FormDaftarInformasi {
+  jenisInformasi: string;
+  deskripsi: string;
+  tanggal: string;
+}
+
 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 || '',
+  const [formData, setFormData] = useState<FormDaftarInformasi>({
+    jenisInformasi: '',
+    deskripsi: '',
+    tanggal: '',
   })
 
+  const formatDateForInput = (dateString: string) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    return date.toISOString().split('T')[0];
+  };
+
   useEffect(() => {
     const loadDaftarInformasi = async () => {
       const id = params?.id as string;
@@ -48,12 +60,11 @@ function EditDaftarInformasiPublik() {
     try {
       daftarInformasi.edit.form = {
         ...daftarInformasi.edit.form,
-        jenisInformasi: formData.jenisInformasi,
-        deskripsi: formData.deskripsi,
-        tanggal: formData.tanggal,
+        jenisInformasi: formData.jenisInformasi.trim(),
+        deskripsi: formData.deskripsi.trim(),
+        tanggal: formData.tanggal.trim(),
       }
       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);
@@ -73,7 +84,7 @@ function EditDaftarInformasiPublik() {
           <Title order={3}>Edit Daftar Informasi Publik Desa Darmasaba</Title>
           <TextInput
             value={formData.jenisInformasi}
-            label="Jenis Informasi"
+            label={<Text fz={"sm"} fw={"bold"}>Jenis Informasi</Text>}
             placeholder="masukkan jenis informasi"
             onChange={(val) => {
               setFormData({
@@ -93,8 +104,9 @@ function EditDaftarInformasiPublik() {
             />
           </Box>
           <TextInput
-            value={formData.tanggal}
-            label="Tanggal Publikasi"
+            type='date'
+            value={formatDateForInput(formData.tanggal)}
+            label={<Text fz={"sm"} fw={"bold"}>Tanggal Publikasi</Text>}
             placeholder="masukkan tanggal publikasi"
             onChange={(val) => {
               setFormData({

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

@@ -56,7 +56,9 @@ function DetailDaftarInformasiPublik() {
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Tanggal</Text>
-                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.tanggal}</Text>
+                  <Text fz={"lg"}>{stateDaftarInformasi.findUnique.data?.tanggal
+                    ? new Date(stateDaftarInformasi.findUnique.data.tanggal).toLocaleDateString()
+                    : "-"}</Text>
                 </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>

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

@@ -42,7 +42,7 @@ export default function CreateBerita() {
         <Stack gap={"xs"}>
           <Title order={3}>Create Daftar Informasi Publik Desa Darmasaba</Title>
           <TextInput
-            label="Jenis Informasi"
+            label={<Text fz={"sm"} fw={"bold"}>Jenis Informasi</Text>}
             placeholder="masukkan jenis informasi"
             onChange={(val) => {
               daftarInformasi.create.form.jenisInformasi = val.target.value
@@ -58,13 +58,13 @@ export default function CreateBerita() {
             />
           </Box>
           <TextInput
-            label="Tanggal Publikasi"
-            placeholder="masukkan tanggal publikasi"
-            onChange={(val) => {
-              daftarInformasi.create.form.tanggal = val.target.value
-            }}
+            label={<Text fz={"sm"} fw={"bold"}>Tanggal Publikasi</Text>}
+            type="date"
+            placeholder="Contoh: 2022-01-01"
+            value={daftarInformasi.create.form.tanggal}
+            onChange={(e) => (daftarInformasi.create.form.tanggal = e.currentTarget.value)}
           />
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,12 +1,13 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 import daftarInformasiPublik from '../../_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 
 function DaftarInformasiPublik() {
@@ -14,7 +15,7 @@ function DaftarInformasiPublik() {
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
+        title='Daftar Informasi Publik Desa Darmasaba'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
         value={search}
@@ -29,12 +30,14 @@ function ListDaftarInformasi({ search }: { search: string }) {
   const listData = useProxy(daftarInformasiPublik)
   const router = useRouter()
 
-  useShallowEffect(() => {
-    listData.findMany.load()
-  }, [])
+  const { data, page, totalPages, loading, load } = listData.findMany
+
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
 
 
-  const filteredData = (listData.findMany.data || []).filter(item => {
+  const filteredData = (data || []).filter(item => {
     const keyword = search.toLowerCase();
     return (
       item.jenisInformasi.toLowerCase().includes(keyword) ||
@@ -42,28 +45,47 @@ function ListDaftarInformasi({ search }: { search: string }) {
     );
   });
 
-  if (!listData.findMany.data) {
+  if (loading || !data) {
     return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack py={10}>
+        <Skeleton height={790} />
       </Stack>
-    )
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Daftar Informasi Publik Desa Darmasaba'
+              href='/admin/ppid/daftar-informasi-publik-desa-darmasaba/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Jenis Informasi</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data daftar informasi publik yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
+      <Paper bg={colors['white-1']} p={'md'} h={{ base: 870, md: 790 }}>
         <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>
+          <JudulList
+            title='List Daftar Informasi Publik Desa Darmasaba'
+            href='/admin/ppid/daftar-informasi-publik-desa-darmasaba/create'
+          />
           <Box style={{ overflowX: "auto" }}>
             <Table
               striped
@@ -74,19 +96,19 @@ function ListDaftarInformasi({ search }: { search: string }) {
             >
               <TableThead>
                 <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Jenis Informasi</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Detail</TableTh>
+                  <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                  <TableTh style={{ width: '20%' }}>Jenis Informasi</TableTh>
+                  <TableTh style={{ width: '50%' }}>Deskripsi</TableTh>
+                  <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
                 {filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{index + 1}</TableTd>
-                    <TableTd>{item.jenisInformasi}</TableTd>
-                    <TableTd dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
-                    <TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }}>{item.jenisInformasi}</TableTd>
+                    <TableTd style={{ wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.deskripsi }}></TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
                       <Button bg={"green"} onClick={() => router.push(`/admin/ppid/daftar-informasi-publik-desa-darmasaba/${item.id}`)}>
                         <IconDeviceImacCog size={25} />
                       </Button>
@@ -98,6 +120,18 @@ function ListDaftarInformasi({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   )
 }

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

@@ -24,16 +24,20 @@ function GrafikBerdasarkanJenisKelaminRespondenCreate() {
   }
 
   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]);
+    try {
+      const id = await stategrafikBerdasarkanJenisKelamin.create.create();
+      if (typeof id !== 'undefined') {
+        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");
+    } catch (error) {
+      console.error('Error submitting form:', error);
     }
-    resetForm();
-    router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden")
   }
   return (
     <Box>

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

@@ -2,16 +2,16 @@
 '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 { Box, Button, Center, Flex, Pagination, 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/judulListTab';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function GrafikBerdasarkanJenisKelamin() {
   const [search, setSearch] = useState("");
@@ -36,6 +36,32 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter();
+  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanJenisKelamin.findMany
+
+
+  useShallowEffect(() => {
+    setMounted(true);
+    load(page, 10)
+  }, [page]);
+
+  useEffect(() => {
+    if (data) {
+      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', value: totalLaki, color: colors['blue-button'], key: 'laki' },
+        { name: 'perempuan', value: totalPerempuan, color: '#10A85AFF', key: 'perempuan' }
+      ]);
+    }
+  }, [data])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.laki.toString().toLowerCase().includes(keyword) ||
+      item.perempuan.toString().toLowerCase().includes(keyword)
+    );
+  });
 
   const handleDelete = async () => {
     if (selectedId) {
@@ -47,55 +73,56 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
     }
   }
 
-  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])
-
-  const filteredData = (stategrafikBerdasarkanJenisKelamin.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
+  if (loading || !data) {
     return (
-      item.laki.toString().toLowerCase().includes(keyword) ||
-      item.perempuan.toString().toLowerCase().includes(keyword)
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
     );
-  });
-
-  if (!stategrafikBerdasarkanJenisKelamin.findMany.data) {
+  }
+  if (data.length === 0) {
     return (
-      <Box>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Box py={10}>
+        <Paper p="md">
+          <Stack>
+            <JudulList
+              title='List Data Berdasarkan Jenis Kelamin Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Laki-laki</TableTh>
+                  <TableTh>Perempuan</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data berdasarkan jenis kelamin responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
 
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"}>
-          <JudulListTab
-            title='List Grafik Berdasarkan Jenis Kelamin Responden'
+        <Paper bg={colors['white-1']} p={"md"} h={{ base: 730, md: 650 }}>
+          <JudulList
+            title='List Data 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>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Laki-laki</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Perempuan</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -106,16 +133,17 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
                   </TableTd>
                 </TableTr>
               ) : (
-                filteredData.map((item) => (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.laki}</TableTd>
-                    <TableTd>{item.perempuan}</TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.laki}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.perempuan}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
                       <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
                       <Button
                         color='red'
                         disabled={stategrafikBerdasarkanJenisKelamin.delete.loading}
@@ -130,16 +158,27 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
                 ))
               )}
             </TableTbody>
-
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* 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 }}>
+              <Title pb={10} order={3}>Grafik Berdasarkan Jenis Kelamin Responden</Title>
+              {mounted && donutData.length === 0 ? (<Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>) : (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
                 <PieChart
                   width={800} height={300}
                   data={donutData}
@@ -168,8 +207,6 @@ function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
                   <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>

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

@@ -45,7 +45,7 @@ function GrafikBerdasarkanRespondenCreate() {
        </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>
+           <Title order={3}>Grafik Hasil Kepuasan Masyarakat Berdasarkan Responden</Title>
            <TextInput
              label="Sangat Baik"
              type='number'

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

@@ -1,17 +1,17 @@
 '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 { Box, Button, Center, Flex, Pagination, 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 { useSnapshot } from 'valtio';
-import JudulListTab from '../../../_com/judulListTab';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikBerdasarkanResponden from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
-import HeaderSearch from '../../../_com/header';
 
 function GrafikBerdasarkanResponden() {
   const [search, setSearch] = useState("");
@@ -37,24 +37,14 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
   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();
-    }
-  }
-  
+  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanResponden.findMany
 
   useShallowEffect(() => {
     setMounted(true)
-    stategrafikBerdasarkanResponden.findMany.load()
-  }, [])
+    load(page, 10)
+  }, [page])
 
-  const filteredData = (stategrafikBerdasarkanResponden.findMany.data || []).filter(item => {
+  const filteredData = (data || []).filter(item => {
     const keyword = search.toLowerCase();
     return (
       item.sangatbaik.toString().toLowerCase().includes(keyword) ||
@@ -65,11 +55,11 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
   });
 
   useEffect(() => {
-    if (stategrafikBerdasarkanResponden.findMany.data) {
-      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);
+    if (data) {
+      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' },
@@ -78,34 +68,72 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
       ]);
     }
 
-  }, [stategrafikBerdasarkanResponden.findMany.data])
+  }, [data])
 
-  if (!stategrafikBerdasarkanResponden.findMany.data) {
+  const handleDelete = async () => {
+    if (selectedId) {
+      await stategrafikBerdasarkanResponden.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+
+      // Refresh data agar chart & tabel ikut update
+      stategrafikBerdasarkanResponden.findMany.load();
+    }
+  }
+
+  if (loading || !data) {
     return (
-      <Box>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Data Berdasarkan Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Sangat Baik</TableTh>
+                  <TableTh>Baik</TableTh>
+                  <TableTh>Kurang Baik</TableTh>
+                  <TableTh>Tidak Baik</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data grafik berdasarkan responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"}>
-          <JudulListTab
-            title='List Grafik Berdasarkan Pilihan Responden'
+        <Paper bg={colors['white-1']} p={"md"} h={{ base: 730, md: 650 }}>
+          <JudulList
+            title='List Data 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>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Sangat Baik</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Baik</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Kurang Baik</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Tidak Baik</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -116,18 +144,19 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
                   </TableTd>
                 </TableTr>
               ) : (
-                filteredData.map((item) => (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.sangatbaik}</TableTd>
-                    <TableTd>{item.baik}</TableTd>
-                    <TableTd>{item.kurangbaik}</TableTd>
-                    <TableTd>{item.tidakbaik}</TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{item.sangatbaik}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>{item.baik}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>{item.kurangbaik}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>{item.tidakbaik}</TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>
                       <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>
                       <Button
                         color='red'
                         disabled={stategrafikBerdasarkanResponden.delete.loading}
@@ -145,12 +174,24 @@ function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
 
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box>
           <Paper bg={colors['white-1']} p={'md'}>
             <Stack>
-              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              <Title pb={10} order={3}>Grafik Berdasarkan Pilihan Responden</Title>
               {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
                 <PieChart
                   width={800} height={300}

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

@@ -2,7 +2,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import grafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Flex, Pagination, 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';
@@ -12,6 +12,7 @@ import { useProxy } from 'valtio/utils';
 import JudulListTab from '../../../_com/judulListTab';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 
 function GrafikBerdasarakanUmur() {
   const [search, setSearch] = useState("");
@@ -36,6 +37,37 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter()
+  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanUmur.findMany
+
+  useShallowEffect(() => {
+    setMounted(true);
+    load(page, 10)
+  }, [page]);
+
+  useEffect(() => {
+    if (data) {
+      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' }
+      ]);
+    }
+  }, [data])
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.remaja.toString().toLowerCase().includes(keyword) ||
+      item.dewasa.toString().toLowerCase().includes(keyword) ||
+      item.orangtua.toString().toLowerCase().includes(keyword) ||
+      item.lansia.toString().toLowerCase().includes(keyword)
+    );
+  });
 
   const handleDelete = async () => {
     if (selectedId) {
@@ -47,50 +79,48 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
     }
   }
 
-  useShallowEffect(() => {
-    setMounted(true);
-    stategrafikBerdasarkanUmur.findMany.load()
-  }, []);
-
-  useEffect(() => {
-    if (stategrafikBerdasarkanUmur.findMany.data) {
-      const totalRemaja = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.remaja || 0), 0);
-      const totalDewasa = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.dewasa || 0), 0);
-      const totalOrangtua = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.orangtua || 0), 0);
-      const totalLansia = stategrafikBerdasarkanUmur.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.lansia || 0), 0);
-      setDonutData([
-        { name: 'remaja', value: totalRemaja, color: colors['blue-button'], key: 'remaja' },
-        { name: 'dewasa', value: totalDewasa, color: '#D32711FF', key: 'dewasa' },
-        { name: 'orangtua', value: totalOrangtua, color: '#B46B04FF', key: 'orangtua' },
-        { name: 'lansia', value: totalLansia, color: '#038617FF', key: 'lansia' }
-      ]);
-    }
-  }, [stategrafikBerdasarkanUmur.findMany.data])
-
-  const filteredData = (stategrafikBerdasarkanUmur.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
+  if (loading || !data) {
     return (
-      item.remaja.toString().toLowerCase().includes(keyword) ||
-      item.dewasa.toString().toLowerCase().includes(keyword) ||
-      item.orangtua.toString().toLowerCase().includes(keyword) ||
-      item.lansia.toString().toLowerCase().includes(keyword)
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
     );
-  });
-
-  if (!stategrafikBerdasarkanUmur.findMany.data) {
+  }
+  if (data.length === 0) {
     return (
-      <Box>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Data Berdasarkan Umur Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Remaja</TableTh>
+                  <TableTh>Dewasa</TableTh>
+                  <TableTh>Orangtua</TableTh>
+                  <TableTh>Lansia</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data grafik berdasarkan umur responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
 
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={"md"}>
+        <Paper bg={colors['white-1']} p={"md"} h={{ base: 730, md: 650 }}>
           <JudulListTab
-            title='List Grafik Berdasarkan Umur Responden'
+            title='List Data Berdasarkan Umur Responden'
             href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create'
             placeholder='pencarian'
             searchIcon={<IconSearch size={16} />}
@@ -98,12 +128,13 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Remaja</TableTh>
-                <TableTh>Dewasa</TableTh>
-                <TableTh>Orangtua</TableTh>
-                <TableTh>Lansia</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '2%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Remaja</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Dewasa</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Orangtua</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Lansia</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -116,16 +147,17 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
               ) : (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>{item.remaja}</TableTd>
-                    <TableTd>{item.dewasa}</TableTd>
-                    <TableTd>{item.orangtua}</TableTd>
-                    <TableTd>{item.lansia}</TableTd>
-                    <TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{filteredData.indexOf(item) + 1}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.remaja}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.dewasa}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.orangtua}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>{item.lansia}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
                       <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/${item.id}`)}>
                         <IconEdit size={20} />
                       </Button>
                     </TableTd>
-                    <TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
                       <Button
                         color='red'
                         disabled={stategrafikBerdasarkanUmur.delete.loading}
@@ -143,12 +175,24 @@ function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
 
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box>
           <Paper bg={colors['white-1']} p={'md'}>
             <Stack>
-              <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
+              <Title pb={10} order={3}>Grafik Umur Berdasarkan Responden</Title>
               {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
                 <PieChart
                   width={800} height={300}

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

@@ -1,16 +1,16 @@
 'use client'
-import JudulListTab from '@/app/admin/(dashboard)/_com/judulListTab';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Bar, BarChart, Legend, Tooltip, XAxis, YAxis } from 'recharts';
 import { useSnapshot } from 'valtio';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikHasilKepuasanMasyarakat from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
-import HeaderSearch from '../../../_com/header';
 
 
 function GrafikHasilKepuasanMasyarakat() {
@@ -46,8 +46,34 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null)
   const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = stateGrafikHasilKepuasan.findMany
 
 
+  useShallowEffect(() => {
+    setMounted(true)
+    load(page, 10)
+  }, [page])
+
+  useEffect(() => {
+    if (data) {
+      setChartData(
+        data.map((item) => ({
+          id: item.id,
+          label: item.label,
+          kepuasan: Number(item.kepuasan),
+        }))
+      );
+    }
+  }, [data]);
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.label.toLowerCase().includes(keyword) ||
+      item.kepuasan.toString().toLowerCase().includes(keyword)
+    );
+  });
+
   const handleDelete = () => {
     if (selectedId) {
       stateGrafikHasilKepuasan.delete.byId(selectedId)
@@ -58,70 +84,69 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
     }
   }
 
-  useShallowEffect(() => {
-    setMounted(true)
-    stateGrafikHasilKepuasan.findMany.load()
-  }, [])
-
-  useEffect(() => {
-    if (stateGrafikHasilKepuasan.findMany.data) {
-      setChartData(
-        stateGrafikHasilKepuasan.findMany.data.map((item) => ({
-          id: item.id,
-          label: item.label,
-          kepuasan: Number(item.kepuasan),
-        }))
-      );
-    }
-  }, [stateGrafikHasilKepuasan.findMany.data]);
-
-  const filteredData = (stateGrafikHasilKepuasan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
+  if (loading || !data) {
     return (
-      item.label.toLowerCase().includes(keyword) ||
-      item.kepuasan.toString().toLowerCase().includes(keyword)
-    );
-  });
-
-
-
-  if (!stateGrafikHasilKepuasan.findMany.data) {
-    return (
-      <Stack>
-        <Skeleton h={500} />
+      <Stack py={10}>
+        <Skeleton height={730} />
       </Stack>
-    )
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Data Hasil Kepuasan Masyarakat'
+              href='/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Label</TableTh>
+                  <TableTh>Jumlah Kepuasan</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data grafik hasil kepuasan masyarakat yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
   }
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulListTab
-            title='List Grafik Hasil Kepuasan Masyarakat'
+        <Paper bg={colors['white-1']} p={'md'} h={{ base: 730, md: 650 }}>
+          <JudulList
+            title='List Data Hasil Kepuasan Masyarakat'
             href='/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
               <TableTr>
-                <TableTh>Label</TableTh>
-                <TableTh>Jumlah Kepuasan</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Label</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Jumlah Kepuasan</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Edit</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
+              {filteredData.map((item, index) => (
                 <TableTr key={item.id}>
-                  <TableTd>{item.label}</TableTd>
-                  <TableTd>{item.kepuasan}</TableTd>
-                  <TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>{item.label}</TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>{item.kepuasan}</TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>
                     <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat/${item.id}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>
-                  <TableTd>
+                  <TableTd style={{ textAlign: 'center' }}>
                     <Button
                       color='red'
                       disabled={stateGrafikHasilKepuasan.delete.loading}
@@ -137,12 +162,24 @@ function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
 
         {/* Chart */}
         <Box style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }}>
           <Paper style={{ width: '100%', minWidth: 300, height: 500, minHeight: 300 }} bg={colors['white-1']} p={'md'}>
             <Stack gap={"xs"}>
-              <Title pb={10} order={3}>Data Kepuasan Masyarakat</Title>
+              <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
               {mounted && chartData.length > 0 ? (
                 <BarChart width={isMobile ? 300 : isTablet ? 300 : 300} height={380} data={chartData} >
                   <XAxis dataKey="label" />

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/create.ts

@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+
+type FormCreate = Prisma.DesaDigitalGetPayload<{
+    select: {
+        name: true;
+        deskripsi: true;
+        imageId: true;
+    }
+}>
+export default async function desaDigitalCreate(context: Context){
+    const body = context.body as FormCreate;
+
+    await prisma.desaDigital.create({
+        data: {
+            name: body.name,
+            deskripsi: body.deskripsi,
+            imageId: body.imageId,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create desa digital",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/del.ts

@@ -0,0 +1,54 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+export default async function desaDigitalDelete(context: Context) {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const desaDigital = await prisma.desaDigital.findUnique({
+    where: { id },
+    include: {
+      image: true,
+    },
+  });
+
+  if (!desaDigital) {
+    return {
+      status: 404,
+      body: "Desa digital tidak ditemukan",
+    };
+  }
+
+  if (desaDigital.image) {
+    try {
+      const filePath = path.join(
+        desaDigital.image.path,
+        desaDigital.image.name
+      );
+      await fs.unlink(filePath);
+      await prisma.fileStorage.delete({
+        where: { id: desaDigital.image.id },
+      });
+    } catch (error) {
+      console.error("Gagal hapus file image:", error);
+    }
+  }
+
+  await prisma.desaDigital.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Desa digital berhasil dihapus",
+    status: 200,
+  };
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/findMany.ts

@@ -0,0 +1,23 @@
+import prisma from "@/lib/prisma";
+
+export default async function desaDigitalFindMany() {
+    try {
+        const data = await prisma.desaDigital.findMany({
+            include: {
+                image: true,
+            },
+        });
+
+        return {
+            success: true,
+            message: "Success fetch desa digital",
+            data,
+        };
+    } catch (error) {
+        console.error("Find many error:", error);
+        return {
+            success: false,
+            message: "Failed fetch desa digital",
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/index.ts

@@ -0,0 +1,39 @@
+import Elysia, { t } from "elysia";
+import desaDigitalCreate from "./create";
+import desaDigitalDelete from "./del";
+import desaDigitalUpdate from "./updt";
+import desaDigitalFindUnique from "./findUnique";
+import desaDigitalFindMany from "./findMany";
+
+const DesaDigital = new Elysia({
+  prefix: "/desadigital",
+  tags: ["Inovasi/Desa Digital"],
+})
+  .post("/create", desaDigitalCreate, {
+    body: t.Object({
+      name: t.String(),
+      deskripsi: t.String(),
+      imageId: t.String(),
+    }),
+  })
+  .get("/find-many", desaDigitalFindMany)
+  .get("/:id", async (context) => {
+    const response = await desaDigitalFindUnique(context.request);
+    return response;
+  })
+  .delete("/del/:id", desaDigitalDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await desaDigitalUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        deskripsi: t.String(),
+        imageId: t.String(),
+      }),
+    }
+  );
+export default DesaDigital;

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/updt.ts

@@ -0,0 +1,103 @@
+import prisma from "@/lib/prisma";
+import { Prisma } from "@prisma/client";
+import { Context } from "elysia";
+import path from "path";
+import fs from "fs/promises";
+
+type FormUpdate = Prisma.DesaDigitalGetPayload<{
+    select: {
+        id: true,
+        name: true,
+        deskripsi: true
+        imageId: true
+    }
+}>
+export default async function desaDigitalUpdate(context: Context) {
+    try {
+        const id = context.params?.id as string;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+    
+        const {
+            name,
+            deskripsi,
+            imageId
+        } = body;
+    
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak ditemukan",
+            }), {
+                status: 400,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        const existing = await prisma.desaDigital.findUnique({
+            where: {id},
+            include: {
+                image: true,
+            }
+        })
+    
+        if (!existing) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "Desa digital tidak ditemukan",
+            }), {
+                status: 404,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        if (existing.imageId && existing.imageId !== imageId) {
+        const oldImage = existing.image;
+        if (oldImage) {
+            try {
+                const filePath = path.join(oldImage.path, oldImage.name);
+                await fs.unlink(filePath);
+                await prisma.fileStorage.delete({
+                    where: { id: oldImage.id },
+                });
+            } catch (error) {
+                console.error("Gagal hapus gambar lama:", error);
+            }
+        }
+        }
+    
+        const updated = await prisma.desaDigital.update({
+            where: { id },
+            data: {
+                name,
+                deskripsi,
+                imageId,
+            }
+        })
+    
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Desa digital berhasil diupdate",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    } catch (error) {
+        console.error("Error updating desa digital:", error); 
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate desa digital",
+        }), {
+            status: 500,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    }
+    }

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

@@ -0,0 +1,14 @@
+import Elysia from "elysia";
+import DesaDigital from "./desa-digital";
+import ProgramKreatif from "./program-kreatif";
+import KolaborasiInovasi from "./kolaborasi-inovasi";
+
+const Inovasi = new Elysia({
+  prefix: "/api/inovasi",
+  tags: ["Inovasi"],
+})
+  .use(DesaDigital)
+  .use(ProgramKreatif)
+  .use(KolaborasiInovasi)
+
+export default Inovasi;

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/create.ts

@@ -0,0 +1,34 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreateKolaborasiInovasi = {
+    name: string;
+    tahun: number;
+    slug: string;
+    deskripsi: string;
+    kolaborator: string;
+    imageId: string;
+}
+
+export default async function kolaborasiInovasiCreate(context: Context){
+    const body = context.body as FormCreateKolaborasiInovasi;
+
+    await prisma.kolaborasiInovasi.create({
+        data: {
+            name: body.name,
+            tahun: body.tahun,
+            slug: body.slug,
+            deskripsi: body.deskripsi,
+            kolaborator: body.kolaborator,
+            imageId: body.imageId,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create kolaborasi inovasi",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/del.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function kolaborasiInovasiDelete(context: Context){
+    const { id } = context.params as { id: string };
+
+    if (!id) {
+        return {
+            success: false,
+            message: "ID kolaborasi inovasi diperlukan",
+        };
+    }
+
+    try {
+        const deleted = await prisma.kolaborasiInovasi.delete({
+            where: { id },
+        });
+
+        return {
+            success: true,
+            message: "Kolaborasi inovasi berhasil dihapus",
+            data: deleted,
+        };
+    } catch (error: any) {
+        console.error("Error delete kolaborasi inovasi:", error);
+        return {
+            success: false,
+            message: "Terjadi kesalahan saat menghapus kolaborasi inovasi",
+            error: error.message,
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/findMany.ts

@@ -0,0 +1,44 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+// Di findMany.ts
+export default async function kolaborasiInovasiFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.kolaborasiInovasi.findMany({
+        where: { isActive: true },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.kolaborasiInovasi.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch kolaborasi inovasi with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch kolaborasi inovasi with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/findUnique.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function kolaborasiInovasiFindUnique(context: Context) {
+    const { id } = context.params as { id: string };
+
+    if (!id) {
+        return {
+            success: false,
+            message: "ID kolaborasi inovasi diperlukan",
+        };
+    }
+
+    try {
+        const kolaborasiInovasi = await prisma.kolaborasiInovasi.findUnique({
+            where: { id },
+        });
+
+        if (!kolaborasiInovasi) {
+            return {
+                success: false,
+                message: "Kolaborasi inovasi tidak ditemukan",
+            };
+        }
+
+        return {
+            success: true,
+            data: kolaborasiInovasi,
+        };
+    } catch (error: any) {
+        console.error("Error findUnique kolaborasi inovasi:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data kolaborasi inovasi",
+            error: error.message,
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/index.ts

@@ -0,0 +1,45 @@
+import Elysia, { t } from "elysia";
+import kolaborasiInovasiFindMany from "./findMany";
+import kolaborasiInovasiFindUnique from "./findUnique";
+import kolaborasiInovasiCreate from "./create";
+import kolaborasiInovasiUpdate from "./updt";
+import kolaborasiInovasiDelete from "./del";
+
+const KolaborasiInovasi = new Elysia({
+  prefix: "/kolaborasiinovasi",
+  tags: ["Inovasi/Kolaborasi Inovasi"],
+})
+  .get("/find-many", kolaborasiInovasiFindMany)
+  .get("/:id", async (context) => {
+    const response = await kolaborasiInovasiFindUnique(context);
+    return response;
+  })
+  .post("/create", kolaborasiInovasiCreate, {
+    body: t.Object({
+      name: t.String(),
+      tahun: t.Number(),
+      slug: t.String(),
+      deskripsi: t.String(),
+      kolaborator: t.String(),
+      imageId: t.String(),
+    }),
+  })
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await kolaborasiInovasiUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        tahun: t.Number(),
+        slug: t.String(),
+        deskripsi: t.String(),
+        kolaborator: t.String(),
+        imageId: t.String(),
+      }),
+    }
+  )
+  .delete("/del/:id", kolaborasiInovasiDelete);
+export default KolaborasiInovasi;

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/updt.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdateKolaborasiInovasi = {
+    id: string;
+    name?: string;
+    tahun?: number;
+    slug?: string;
+    deskripsi?: string;
+    kolaborator?: string;
+    imageId?: string;
+};
+export default async function kolaborasiInovasiUpdate(context: Context) {
+    const body = context.body as FormUpdateKolaborasiInovasi;
+    const id = context.params?.id; // ambil dari URL param
+  
+    if (!id) {
+      return {
+        success: false,
+        message: "ID kolaborasi inovasi wajib diisi",
+      };
+    }
+  
+    try {
+      const updated = await prisma.kolaborasiInovasi.update({
+        where: { id },
+        data: {
+          name: body.name,
+          tahun: body.tahun,
+          slug: body.slug,
+          deskripsi: body.deskripsi,
+          kolaborator: body.kolaborator,
+          imageId: body.imageId,
+        },
+      });
+  
+      return {
+        success: true,
+        message: "Kolaborasi inovasi berhasil diupdate",
+        data: updated,
+      };
+    } catch (error: any) {
+      console.error("Error update kolaborasi inovasi:", error);
+      return {
+        success: false,
+        message: "Gagal mengupdate kolaborasi inovasi",
+        error: error.message,
+      };
+    }
+  }

src/app/api/[[...slugs]]/_lib/inovasi/program-kreatif/create.ts

@@ -0,0 +1,30 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreateProgramKreatif = {
+    name: string;
+    slug: string;
+    deskripsi: string;
+    icon: string;
+}
+
+export default async function programKreatifCreate(context: Context){
+    const body = context.body as FormCreateProgramKreatif;
+
+    await prisma.programKreatif.create({
+        data: {
+            name: body.name,
+            slug: body.slug,
+            deskripsi: body.deskripsi,
+            icon: body.icon,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create program kreatif",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/program-kreatif/del.ts

@@ -0,0 +1,33 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function programKreatifDelete(context: Context) {
+  const { id } = context.params as { id: string };
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID program kreatif tidak ditemukan",
+    };
+  }
+
+  try {
+    const deleted = await prisma.programKreatif.delete({
+      where: { id },
+    });
+
+    return {
+      success: true,
+      message: "Program kreatif berhasil dihapus",
+      data: deleted,
+    };
+  } catch (error: any) {
+    console.error("Error delete program kreatif:", error);
+    return {
+      success: false,
+      message: "Terjadi kesalahan saat menghapus program kreatif",
+      error: error.message,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/inovasi/program-kreatif/findMany.ts

@@ -0,0 +1,44 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+// Di findMany.ts
+export default async function programKreatifFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.programKreatif.findMany({
+        where: { isActive: true },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.programKreatif.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch program kreatif with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch program kreatif with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/inovasi/program-kreatif/findUnique.ts

@@ -0,0 +1,39 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function programKreatifFindUnique(context: Context) {
+    const { id } = context.params as { id: string };
+
+    if (!id) {
+        return {
+            success: false,
+            message: "ID program kreatif diperlukan",
+        };
+    }
+
+    try {
+        const programKreatif = await prisma.programKreatif.findUnique({
+            where: { id },
+        });
+
+        if (!programKreatif) {
+            return {
+                success: false,
+                message: "Program kreatif tidak ditemukan",
+            };
+        }
+
+        return {
+            success: true,
+            data: programKreatif,
+        };
+    } catch (error: any) {
+        console.error("Error findUnique program kreatif:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data program kreatif",
+            error: error.message,
+        };
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/program-kreatif/index.ts

@@ -0,0 +1,41 @@
+import Elysia, { t } from "elysia";
+import programKreatifFindMany from "./findMany";
+import programKreatifFindUnique from "./findUnique";
+import programKreatifCreate from "./create";
+import programKreatifUpdate from "./updt";
+import programKreatifDelete from "./del";
+
+const ProgramKreatif = new Elysia({
+  prefix: "/programkreatif",
+  tags: ["Inovasi/Program Kreatif"],
+})
+  .get("/find-many", programKreatifFindMany)
+  .get("/:id", async (context) => {
+    const response = await programKreatifFindUnique(context);
+    return response;
+  })
+  .post("/create", programKreatifCreate, {
+    body: t.Object({
+      name: t.String(),
+      slug: t.String(),
+      deskripsi: t.String(),
+      icon: t.String(),
+    }),
+  })
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await programKreatifUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        slug: t.String(),
+        deskripsi: t.String(),
+        icon: t.String(),
+      }),
+    }
+  )
+  .delete("/del/:id", programKreatifDelete);
+  export default ProgramKreatif;

src/app/api/[[...slugs]]/_lib/inovasi/program-kreatif/updt.ts

@@ -0,0 +1,48 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdateProgramKreatif = {
+  id: string;
+  name?: string;
+  slug?: string;
+  deskripsi?: string;
+  icon?: string;
+};
+export default async function programKreatifUpdate(context: Context) {
+  const body = context.body as FormUpdateProgramKreatif;
+  const id = context.params?.id; // ambil dari URL param
+
+  if (!id) {
+    return {
+      success: false,
+      message: "ID program kreatif wajib diisi",
+    };
+  }
+
+  try {
+    const updated = await prisma.programKreatif.update({
+      where: { id },
+      data: {
+        name: body.name,
+        slug: body.slug,
+        deskripsi: body.deskripsi,
+        icon: body.icon,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Program kreatif berhasil diupdate",
+      data: updated,
+    };
+  } catch (error: any) {
+    console.error("Error update program kreatif:", error);
+    return {
+      success: false,
+      message: "Gagal mengupdate program kreatif",
+      error: error.message,
+    };
+  }
+}
+

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

@@ -1,21 +1,18 @@
 import prisma from "@/lib/prisma";
-import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
-type FormCreate = Prisma.DaftarInformasiPublikGetPayload<{
-    select: {
-        jenisInformasi: true;
-        deskripsi: true;
-        tanggal: true;
-    }
-}>
+type FormCreate = {
+    jenisInformasi: string;
+    deskripsi: string;
+    tanggal: string;
+}
 export default async function daftarInformasiPublikCreate(context: Context) {
     const body = context.body as FormCreate;
     await prisma.daftarInformasiPublik.create({
         data: { 
             jenisInformasi: body.jenisInformasi,
             deskripsi: body.deskripsi,
-            tanggal: body.tanggal,
+            tanggal: new Date(body.tanggal),
         },
     })
     return {

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

@@ -1,6 +1,12 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
+type FormEdit = {
+  jenisInformasi: string;
+  deskripsi: string;
+  tanggal: string;
+};
+
 export default async function daftarInformasiPublikEdit(context: Context) {
   const id = context.params?.id;
 
@@ -11,11 +17,7 @@ export default async function daftarInformasiPublikEdit(context: Context) {
     };
   }
 
-  const { jenisInformasi, deskripsi, tanggal } = context.body as {
-    jenisInformasi: string;
-    deskripsi: string;
-    tanggal: string;
-  };
+  const body = context.body as FormEdit;
 
   const existing = await prisma.daftarInformasiPublik.findUnique({
     where: {
@@ -33,9 +35,9 @@ export default async function daftarInformasiPublikEdit(context: Context) {
   const updated = await prisma.daftarInformasiPublik.update({
     where: { id },
     data: {
-      jenisInformasi,
-      deskripsi,
-      tanggal,
+      jenisInformasi: body.jenisInformasi,
+      deskripsi: body.deskripsi,
+      tanggal: new Date(body.tanggal),
     },
   });
 

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

@@ -1,9 +1,44 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+// Di findMany.ts
+export default async function daftarInformasiPublikFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.daftarInformasiPublik.findMany({
+        where: { isActive: true },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.daftarInformasiPublik.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
 
-export default async function daftarInformasiPublikFindMany() {
-    const res = await prisma.daftarInformasiPublik.findMany();
     return {
-        data: res
-    }
-}
-    
+      success: true,
+      message: "Success fetch daftar informasi publik with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch daftar informasi publik with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
+}

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

@@ -1,8 +1,43 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function grafikBerdasarkanJenisKelaminFindMany() {
-    const res = await prisma.grafikBerdasarkanJenisKelamin.findMany();
-    return {
-        data: res
+export default async function grafikBerdasarkanJenisKelaminFindMany(context: Context) {
+    const page = Number(context.query.page) || 1;
+    const limit = Number(context.query.limit) || 10;
+    const skip = (page - 1) * limit;
+  
+    try {
+      const [data, total] = await Promise.all([
+        prisma.grafikBerdasarkanJenisKelamin.findMany({
+          where: { isActive: true },
+          skip,
+          take: limit,
+          orderBy: { createdAt: 'desc' },
+        }),
+        prisma.grafikBerdasarkanJenisKelamin.count({
+          where: { isActive: true }
+        })
+      ]);
+  
+      const totalPages = Math.ceil(total / limit);
+  
+      return {
+        success: true,
+        message: "Success fetch grafik berdasarkan jenis kelamin with pagination",
+        data,
+        page,
+        totalPages,
+        total,
+      };
+    } catch (e) {
+      console.error("Find many paginated error:", e);
+      return {
+        success: false,
+        message: "Failed fetch grafik berdasarkan jenis kelamin with pagination",
+        data: [],
+        page: 1,
+        totalPages: 1,
+        total: 0,
+      };
     }
 }

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

@@ -1,8 +1,43 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export async function grafikBerdasarkanUmurFindMany(){
-    const res = await prisma.grafikBerdasarkanUmur.findMany();
-    return {
-        data: res
-    }
+export default async function grafikBerdasarkanUmurFindMany(context: Context){
+     const page = Number(context.query.page) || 1;
+     const limit = Number(context.query.limit) || 10;
+     const skip = (page - 1) * limit;
+   
+     try {
+       const [data, total] = await Promise.all([
+         prisma.grafikBerdasarkanUmur.findMany({
+           where: { isActive: true },
+           skip,
+           take: limit,
+           orderBy: { createdAt: 'desc' },
+         }),
+         prisma.grafikBerdasarkanUmur.count({
+           where: { isActive: true }
+         })
+       ]);
+   
+       const totalPages = Math.ceil(total / limit);
+   
+       return {
+         success: true,
+         message: "Success fetch grafik berdasarkan umur with pagination",
+         data,
+         page,
+         totalPages,
+         total,
+       };
+     } catch (e) {
+       console.error("Find many paginated error:", e);
+       return {
+         success: false,
+         message: "Failed fetch grafik berdasarkan umur with pagination",
+         data: [],
+         page: 1,
+         totalPages: 1,
+         total: 0,
+       };
+     }
 }

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

@@ -1,9 +1,9 @@
 import Elysia, { t } from "elysia";
-import { grafikBerdasarkanUmurFindMany } from "./find-many";
 import { grafikBerdasarkanUmurCreate } from "./create";
 import grafikBerdasarakanUmurUpdate from "./update";
 import grafikBerdasarakanUmurFindById from "./find-by-id";
 import grafikBerdasarkanUmurDelete from "./del";
+import grafikBerdasarkanUmurFindMany from "./find-many";
 
 const GrafikBerdasarkanUmur = new Elysia({
   prefix: "/grafikberdasarkanumur",

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

@@ -1,8 +1,44 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function grafikHasilKepuasanMasyarakatFindMany() {
-  const res = await prisma.indeksKepuasanMasyarakat.findMany();
-  return {
-    data: res,
-  };
-}
+// Di findMany.ts
+export default async function grafikHasilKepuasanMasyarakatFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.indeksKepuasanMasyarakat.findMany({
+        where: { isActive: true },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.indeksKepuasanMasyarakat.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch grafik hasil kepuasan masyarakat with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch grafik hasil kepuasan masyarakat with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
+}

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

@@ -1,8 +1,43 @@
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function grafikRespondenFindMany(){
-    const res = await prisma.grafikBerdasarkanResponden.findMany();
-    return{
-        data: res
-    }
+export default async function grafikRespondenFindMany(context: Context){
+      const page = Number(context.query.page) || 1;
+      const limit = Number(context.query.limit) || 10;
+      const skip = (page - 1) * limit;
+    
+      try {
+        const [data, total] = await Promise.all([
+          prisma.grafikBerdasarkanResponden.findMany({
+            where: { isActive: true },
+            skip,
+            take: limit,
+            orderBy: { createdAt: 'desc' },
+          }),
+          prisma.grafikBerdasarkanResponden.count({
+            where: { isActive: true }
+          })
+        ]);
+    
+        const totalPages = Math.ceil(total / limit);
+    
+        return {
+          success: true,
+          message: "Success fetch grafik berdasarkan responden with pagination",
+          data,
+          page,
+          totalPages,
+          total,
+        };
+      } catch (e) {
+        console.error("Find many paginated error:", e);
+        return {
+          success: false,
+          message: "Failed fetch grafik berdasarkan responden with pagination",
+          data: [],
+          page: 1,
+          totalPages: 1,
+          total: 0,
+        };
+      }
 }

src/app/api/[[...slugs]]/route.ts

@@ -19,6 +19,7 @@ import { uplImgSingle } from "./_lib/upl-img-single";
 import FileStorage from "./_lib/fileStorage";
 import Keamanan from "./_lib/keamanan";
 import Ekonomi from "./_lib/ekonomi";
+import Inovasi from "./_lib/inovasi";
 
 
 const ROOT = process.cwd();
@@ -81,6 +82,7 @@ const ApiServer = new Elysia()
   .use(Utils)
   .use(FileStorage)
   .use(Ekonomi)
+  .use(Inovasi)
   .onError(({ code }) => {
     if (code === "NOT_FOUND") {
       return {