Admin: Ubah Pie Chart Submenu IKM, Menu PPID

prisma/data/ppid/ikm/jenis-kelamin/jenis-kelamin.json

@@ -0,0 +1,10 @@
+[
+    {
+        "id": "cme8bt5o5000007lb9xp11unb",
+        "name": "Laki-laki"
+    },
+    {
+        "id": "cme8btctl000107lbh2hocgg8",
+        "name": "Perempuan"
+    }
+]

prisma/data/ppid/ikm/pilihan-rating-responden/rating-responden.json

@@ -0,0 +1,18 @@
+[
+    {
+        "id": "cme8buup6000207lb54q9b0az",
+        "name": "Sangat Baik"
+    },
+    {
+        "id": "cme8bv15o000307lbft9b0vzy",
+        "name": "Baik"
+    },
+    {
+        "id": "cme8bvjvu000507lbgfsveog6",
+        "name": "Kurang Baik"
+    },
+    {
+        "id": "cme8bvvm6000607lbh6rn2ubm",
+        "name": "Sangat Kurang Baik"
+    }
+]

prisma/data/ppid/ikm/umur-responden/umur-responden.json

@@ -0,0 +1,14 @@
+[
+    {
+        "id": "cme8bwgwu000707lbawc6fz3a",
+        "name": "Muda"
+    },
+    {
+        "id": "cme8hnx09000b07jl3ipifb1k",
+        "name": "Dewasa"
+    },
+    {
+        "id": "cme8ho7dv000c07jlc7lr4b4w",
+        "name": "Lansia"
+    }   
+]

prisma/schema.prisma

@@ -50,23 +50,22 @@ model AppMenuChild {
 // ========================================= FILE STORAGE ========================================= //
 
 model FileStorage {
-  id           String         @id @default(cuid())
-  name         String         @unique
-  realName     String
-  path         String
-  mimeType     String
-  createdAt    DateTime       @default(now())
-  updatedAt    DateTime       @updatedAt
-  deletedAt    DateTime?
-  isActive     Boolean        @default(true)
-  link         String
-  category     String // "image" / "document" / "other"
-  Berita       Berita[]
-  PotensiDesa  PotensiDesa[]
-  Posyandu     Posyandu[]
-  StrukturPPID StrukturPPID[]
-  GalleryFoto  GalleryFoto[]
-
+  id                             String                     @id @default(cuid())
+  name                           String                     @unique
+  realName                       String
+  path                           String
+  mimeType                       String
+  createdAt                      DateTime                   @default(now())
+  updatedAt                      DateTime                   @updatedAt
+  deletedAt                      DateTime?
+  isActive                       Boolean                    @default(true)
+  link                           String
+  category                       String // "image" / "document" / "other"
+  Berita                         Berita[]
+  PotensiDesa                    PotensiDesa[]
+  Posyandu                       Posyandu[]
+  StrukturPPID                   StrukturPPID[]
+  GalleryFoto                    GalleryFoto[]
   Pelapor                        Pelapor[]
   Penghargaan                    Penghargaan[]
   ProfileDesaImage               ProfileDesaImage[]
@@ -98,10 +97,8 @@ model FileStorage {
   APBDesImage                    APBDes[]                   @relation("APBDesImage")
   APBDesFile                     APBDes[]                   @relation("APBDesFile")
   PrestasiDesa                   PrestasiDesa[]
-
-  DataPerpustakaan DataPerpustakaan[]
-
-  PegawaiPPID PegawaiPPID[]
+  DataPerpustakaan               DataPerpustakaan[]
+  PegawaiPPID                    PegawaiPPID[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -221,79 +218,51 @@ model KategoriPrestasiDesa {
   PrestasiDesa PrestasiDesa[]
 }
 
-//========================================= INDEKS KEPUASAN MASYARAKAT ========================================= //
-// Entitas Survey
-model Survey {
-  id               String        @id @default(cuid())
-  title            String // Judul survei
-  totalRespondents Int // Total jumlah responden
-  averageScore     Float // Rata-rata skor
-  monthlyStats     MonthlyStat[]
-  createdAt        DateTime      @default(now())
-  updatedAt        DateTime      @updatedAt
-  deletedAt        DateTime      @default(now())
-  isActive         Boolean       @default(true)
+//========================================= INDEKS KEPUASAAN MASYARAKAT ========================================= //
+model Responden {
+  id           String      @id @default(cuid())
+  name         String      @unique
+  tanggal      DateTime    // misal: 2025-05-01
+  jenisKelamin JenisKelaminResponden @relation(fields: [jenisKelaminId], references: [id])
+  jenisKelaminId String
+  rating       PilihanRatingResponden @relation(fields: [ratingId], references: [id])
+  ratingId     String
+  kelompokUmur UmurResponden @relation(fields: [kelompokUmurId], references: [id])
+  kelompokUmurId String
+  createdAt    DateTime    @default(now())
+  updatedAt    DateTime    @updatedAt
+  deletedAt    DateTime    @default(now())
+  isActive     Boolean     @default(true)
 }
 
-// Entitas Statistik Bulanan
-model MonthlyStat {
-  id               String         @id @default(cuid())
-  month            String // Nama bulan (e.g., "Januari", "Februari")
-  respondentsCount Int // Jumlah responden per bulan
-  surveyId         String         @unique(map: "monthly_stat_survey_id_month_key")
-  survey           Survey         @relation(fields: [surveyId], references: [id])
-  AgeStat          AgeStat[]
-  ResponseStat     ResponseStat[]
-  genderStat       genderStat[]
-  createdAt        DateTime       @default(now())
-  updatedAt        DateTime       @updatedAt
-  deletedAt        DateTime       @default(now())
-  isActive         Boolean        @default(true)
+model JenisKelaminResponden {
+  id           String      @id @default(cuid())
+  name         String      @unique
+  createdAt    DateTime    @default(now())
+  updatedAt    DateTime    @updatedAt
+  deletedAt    DateTime    @default(now())
+  isActive     Boolean     @default(true)
+  Responden Responden[]
 }
 
-// Entitas Gender
-
-model genderStat {
-  id               String       @id @default(cuid())
-  laki             Int
-  perempuan        Int
-  percentLaki      Float
-  percentPerempuan Float
-  total            Int
-  createdAt        DateTime     @default(now())
-  updatedAt        DateTime     @updatedAt
-  deletedAt        DateTime     @default(now())
-  isActive         Boolean      @default(true)
-  MonthlyStat      MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
-  monthlyStatId    String?
+model PilihanRatingResponden {
+  id           String      @id @default(cuid())
+  name         String      @unique
+  createdAt    DateTime    @default(now())
+  updatedAt    DateTime    @updatedAt
+  deletedAt    DateTime    @default(now())
+  isActive     Boolean     @default(true)
+  Responden Responden[]
 }
 
-// Entitas Age
-
-model AgeStat {
-  id            String       @id @default(cuid())
-  group         String // "18-44", "45+" dll
-  count         Int
-  createdAt     DateTime     @default(now())
-  updatedAt     DateTime     @updatedAt
-  deletedAt     DateTime     @default(now())
-  isActive      Boolean      @default(true)
-  MonthlyStat   MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
-  monthlyStatId String?
-}
-
-// Entitas Response
-
-model ResponseStat {
-  id            String       @id @default(cuid())
-  label         String // BAIK / BURUK
-  count         Int
-  createdAt     DateTime     @default(now())
-  updatedAt     DateTime     @updatedAt
-  deletedAt     DateTime     @default(now())
-  isActive      Boolean      @default(true)
-  MonthlyStat   MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
-  monthlyStatId String?
+model UmurResponden {
+  id           String      @id @default(cuid())
+  name         String      @unique
+  createdAt    DateTime    @default(now())
+  updatedAt    DateTime    @updatedAt
+  deletedAt    DateTime    @default(now())
+  isActive     Boolean     @default(true)
+  Responden Responden[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -732,16 +701,16 @@ model PelayananPendudukNonPermanen {
 
 // ========================================= PENGHARGAAN ========================================= //
 model Penghargaan {
-  id        String      @id @default(cuid())
+  id        String       @id @default(cuid())
   name      String
   juara     String
-  deskripsi String      @db.Text
+  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)
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
 }
 
 // ========================================= MENU KESEHATAN ========================================= //

prisma/seed.ts

@@ -16,6 +16,9 @@ import potensi from "./data/list-potensi.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
 import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
+import jenisKelamin from "./data/ppid/ikm/jenis-kelamin/jenis-kelamin.json";
+import pilihanRatingResponden from "./data/ppid/ikm/pilihan-rating-responden/rating-responden.json";
+import umurResponden from "./data/ppid/ikm/umur-responden/umur-responden.json";
 import pelayananPerizinanBerusaha from "./data/desa/layanan/pelayananPerizinanBerusaha.json";
 import pelayananPendudukNonPermanen from "./data/desa/layanan/pelayanaPendudukNonPermanen.json";
 import sejarahDesa from "./data/desa/profile/sejarah_desa.json";
@@ -546,6 +549,54 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("visi misi PPID success ...");
 
+  for (const j of jenisKelamin) {
+    await prisma.jenisKelaminResponden.upsert({
+      where: {
+        id: j.id,
+      },
+      update: {
+        name: j.name,
+      },
+      create: {
+        id: j.id,
+        name: j.name,
+      },
+    });
+  }
+  console.log("jenis kelamin responden success ...");
+
+  for (const r of pilihanRatingResponden) {
+    await prisma.pilihanRatingResponden.upsert({
+      where: {
+        id: r.id,
+      },
+      update: {
+        name: r.name,
+      },
+      create: {
+        id: r.id,
+        name: r.name,
+      },
+    });
+  }
+  console.log("pilihan rating responden success ...");
+
+  for (const u of umurResponden) {
+    await prisma.umurResponden.upsert({
+      where: {
+        id: u.id,
+      },
+      update: {
+        name: u.name,
+      },
+      create: {
+        id: u.id,
+        name: u.name,
+      },
+    });
+  }
+  console.log("umur responden success ...");
+
   for (const v of dasarHukumPPID) {
     await prisma.dasarHukumPPID.upsert({
       where: {

src/app/admin/(dashboard)/_state/desa/berita.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";
@@ -22,19 +23,6 @@ const defaultForm = {
   kategoriBeritaId: "",
 };
 
-// 3. Kategori proxy
-const category = proxy({
-  findMany: {
-    data: [] as Prisma.KategoriBeritaGetPayload<{ omit: { isActive: true } }>[],
-    async load() {
-      const res = await ApiFetch.api.desa.berita.category["find-many"].get();
-      if (res.status === 200) {
-        category.findMany.data = res.data?.data ?? [];
-      }
-    },
-  },
-});
-
 // 4. Berita proxy
 const berita = proxy({
   create: {
@@ -71,6 +59,8 @@ const berita = proxy({
     },
   },
 
+  // State untuk berita utama (hanya 1)
+
   findMany: {
     data: null as
       | Prisma.BeritaGetPayload<{
@@ -83,38 +73,43 @@ const berita = proxy({
     page: 1,
     totalPages: 1,
     loading: false,
-  
-    async load(page = 1, limit = 10) {
-      berita.findMany.loading = true;
+    search: "",
+   load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      berita.findMany.loading = true; // ✅ Akses langsung via nama path
       berita.findMany.page = page;
-      try {
-        const res = await ApiFetch.api.desa.berita["find-many"].get({
-          query: {
-            page,
-            limit,
-          },
-        });
+      berita.findMany.search = search;
   
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+    
+        const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
+    
         if (res.status === 200 && res.data?.success) {
           berita.findMany.data = res.data.data ?? [];
           berita.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          berita.findMany.data = [];
+          berita.findMany.totalPages = 1;
         }
       } catch (err) {
         console.error("Gagal fetch berita paginated:", err);
+        berita.findMany.data = [];
+        berita.findMany.totalPages = 1;
       } finally {
         berita.findMany.loading = false;
       }
     },
   },
-  
+
   findUnique: {
-    data: null as
-      | Prisma.BeritaGetPayload<{
-          include: {
-            image: true;
-            kategoriBerita: true;
-          };
-        }> | null,
+    data: null as Prisma.BeritaGetPayload<{
+      include: {
+        image: true;
+        kategoriBerita: true;
+      };
+    }> | null,
     async load(id: string) {
       try {
         const res = await fetch(`/api/desa/berita/${id}`);
@@ -122,11 +117,11 @@ const berita = proxy({
           const data = await res.json();
           berita.findUnique.data = data.data ?? null;
         } else {
-          console.error('Failed to fetch berita:', res.statusText);
+          console.error("Failed to fetch berita:", res.statusText);
           berita.findUnique.data = null;
         }
       } catch (error) {
-        console.error('Error fetching berita:', error);
+        console.error("Error fetching berita:", error);
         berita.findUnique.data = null;
       }
     },
@@ -140,14 +135,14 @@ const berita = proxy({
         berita.delete.loading = true;
 
         const response = await fetch(`/api/desa/berita/delete/${id}`, {
-          method: 'DELETE',
+          method: "DELETE",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
         });
-        
+
         const result = await response.json();
-        
+
         if (response.ok && result?.success) {
           toast.success(result.message || "Berita berhasil dihapus");
           await berita.findMany.load(); // refresh list
@@ -172,21 +167,21 @@ const berita = proxy({
         toast.warn("ID tidak valid");
         return null;
       }
-      
+
       try {
         const response = await fetch(`/api/desa/berita/${id}`, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Content-Type': 'application/json',
+            "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;
@@ -203,7 +198,9 @@ const berita = proxy({
         }
       } catch (error) {
         console.error("Error loading berita:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
         return null;
       }
     },
@@ -217,14 +214,14 @@ const berita = proxy({
         toast.error(err);
         return false;
       }
-    
+
       try {
         berita.edit.loading = true;
-        
+
         const response = await fetch(`/api/desa/berita/${this.id}`, {
-          method: 'PUT',
+          method: "PUT",
           headers: {
-            'Content-Type': 'application/json',
+            "Content-Type": "application/json",
           },
           body: JSON.stringify({
             judul: this.form.judul,
@@ -234,14 +231,16 @@ const berita = proxy({
             imageId: this.form.imageId,
           }),
         });
-        
+
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
-          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
         }
-        
+
         const result = await response.json();
-    
+
         if (result.success) {
           toast.success("Berhasil update berita");
           await berita.findMany.load(); // refresh list
@@ -251,7 +250,11 @@ const berita = proxy({
         }
       } catch (error) {
         console.error("Error updating berita:", error);
-        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update berita");
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update berita"
+        );
         return false;
       } finally {
         berita.edit.loading = false;
@@ -271,21 +274,22 @@ const berita = proxy({
       };
     }> | null,
     loading: false,
-    async load() {
+    // findFirst.load()
+    async load(kategori?: string) {
       this.loading = true;
       try {
-        const res = await ApiFetch.api.desa.berita["find-first"].get();
+        const res = await ApiFetch.api.desa.berita["find-first"].get({
+          query: kategori ? { kategori } : {},
+        });
+
         if (res.status === 200 && res.data?.success) {
-          // Add type assertion to ensure type safety
-          berita.findFirst.data = res.data.data as Prisma.BeritaGetPayload<{
-            include: {
-              image: true;
-              kategoriBerita: true;
-            };
-          }> | null;
+          this.data = res.data.data || null;
+        } else {
+          this.data = null;
         }
       } catch (err) {
         console.error("Gagal fetch berita terbaru:", err);
+        this.data = null;
       } finally {
         this.loading = false;
       }
@@ -299,7 +303,7 @@ const berita = proxy({
       };
     }>[],
     loading: false,
-  
+
     async load() {
       try {
         this.loading = true;
@@ -313,15 +317,227 @@ const berita = proxy({
         this.loading = false;
       }
     },
-  }
-   
-  
-  
+  },
+});
+
+//=============== Kategori Berita ===============
+
+const templateKategoriBerita = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultKategoriBerita = {
+  name: "",
+};
+
+const kategoriBerita = proxy({
+  create: {
+    form: { ...defaultKategoriBerita },
+    loading: false,
+    async create() {
+      const cek = templateKategoriBerita.safeParse(kategoriBerita.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kategoriBerita.create.loading = true;
+        const res = await ApiFetch.api.desa.kategoriberita["create"].post(
+          kategoriBerita.create.form
+        );
+        if (res.status === 200) {
+          kategoriBerita.findMany.load();
+          return toast.success("Data Kategori Berita Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        kategoriBerita.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.KategoriBeritaGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.desa.kategoriberita["findMany"].get();
+      if (res.status === 200) {
+        kategoriBerita.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriBeritaGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/kategoriberita/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kategoriBerita.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriBerita.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriBerita.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriBerita.delete.loading = true;
+
+        const response = await fetch(`/api/desa/kategoriberita/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Kategori Berita berhasil dihapus"
+          );
+          await kategoriBerita.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus Data Kategori Berita"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Kategori Berita");
+      } finally {
+        kategoriBerita.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKategoriBerita },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/kategoriberita/${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,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori berita:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKategoriBerita.safeParse(kategoriBerita.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriBerita.update.loading = true;
+
+        const response = await fetch(`/api/desa/kategoriberita/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kategori berita");
+          await kategoriBerita.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update data kategori berita"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating data kategori berita:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kategori berita"
+        );
+        return false;
+      } finally {
+        kategoriBerita.update.loading = false;
+      }
+    },
+    reset() {
+      kategoriBerita.update.id = "";
+      kategoriBerita.update.form = { ...defaultKategoriBerita };
+    },
+  },
 });
 
 // 5. State global
 const stateDashboardBerita = proxy({
-  category,
+  kategoriBerita,
   berita,
 });
 

src/app/admin/(dashboard)/_state/desa/gallery.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";
@@ -68,10 +69,34 @@ const foto = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.desa.gallery.foto["find-many"].get();
-      if (res.status === 200) {
-        foto.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      foto.findMany.loading = true; // ✅ Akses langsung via nama path
+      foto.findMany.page = page;
+      foto.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.desa.gallery.foto["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          foto.findMany.data = res.data.data ?? [];
+          foto.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          foto.findMany.data = [];
+          foto.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch foto paginated:", err);
+        foto.findMany.data = [];
+        foto.findMany.totalPages = 1;
+      } finally {
+        foto.findMany.loading = false;
       }
     },
   },
@@ -215,6 +240,28 @@ const foto = proxy({
       foto.update.form = { ...defaultFormFoto };
     },
   },
+  findRecent: {
+      data: [] as Prisma.GalleryFotoGetPayload<{
+        include: {
+          imageGalleryFoto: true;
+        };
+      }>[],
+      loading: false,
+  
+      async load() {
+        try {
+          this.loading = true;
+          const res = await ApiFetch.api.desa.gallery.foto["find-recent"].get();
+          if (res.status === 200 && res.data?.success) {
+            this.data = res.data.data ?? [];
+          }
+        } catch (error) {
+          console.error("Gagal fetch foto recent:", error);
+        } finally {
+          this.loading = false;
+        }
+      },
+    },
 });
 
 const video = proxy({
@@ -257,10 +304,34 @@ const video = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.desa.gallery.video["find-many"].get();
-      if (res.status === 200) {
-        video.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      video.findMany.loading = true; // ✅ Akses langsung via nama path
+      video.findMany.page = page;
+      video.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.desa.gallery.video["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          video.findMany.data = res.data.data ?? [];
+          video.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          video.findMany.data = [];
+          video.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch video paginated:", err);
+        video.findMany.data = [];
+        video.findMany.totalPages = 1;
+      } finally {
+        video.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/desa/pengumuman.ts

@@ -5,6 +5,228 @@ import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
+const templateKategoriPengumuman = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultKategoriPengumuman = {
+  name: "",
+};
+
+const category = proxy({
+  create: {
+    form: { ...defaultKategoriPengumuman },
+    loading: false,
+    async create() {
+      const cek = templateKategoriPengumuman.safeParse(category.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        category.create.loading = true;
+        const res = await ApiFetch.api.desa.kategoripengumuman["create"].post(
+          category.create.form
+        );
+        if (res.status === 200) {
+          category.findMany.load();
+          return toast.success("Data Kategori Pengumuman Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        category.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as (Prisma.CategoryPengumumanGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> & {
+      _count: {
+        pengumumans: number;
+      };
+    })[],
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.desa.kategoripengumuman["findMany"].get();
+      if (res.status === 200) {
+        category.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.CategoryPengumumanGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/kategoripengumuman/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          category.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          category.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        category.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        category.delete.loading = true;
+
+        const response = await fetch(`/api/desa/kategoripengumuman/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Kategori Pengumuman berhasil dihapus"
+          );
+          await category.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus Data Kategori Pengumuman"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error(
+          "Terjadi kesalahan saat menghapus Data Kategori Pengumuman"
+        );
+      } finally {
+        category.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKategoriPengumuman },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/desa/kategoripengumuman/${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,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori pengumuman:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKategoriPengumuman.safeParse(category.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        category.update.loading = true;
+
+        const response = await fetch(
+          `/api/desa/kategoripengumuman/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kategori pengumuman");
+          await category.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update data kategori pengumuman"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating data kategori pengumuman:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kategori pengumuman"
+        );
+        return false;
+      } finally {
+        category.update.loading = false;
+      }
+    },
+    reset() {
+      category.update.id = "";
+      category.update.form = { ...defaultKategoriPengumuman };
+    },
+  },
+});
+
 const templateFormPengumuman = z.object({
   judul: z.string().min(3, "Judul minimal 3 karakter"),
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
@@ -12,33 +234,15 @@ const templateFormPengumuman = z.object({
   categoryPengumumanId: z.string().nonempty(),
 });
 
-const category = proxy({
-  findMany: {
-    data: null as
-      | null
-      | Prisma.CategoryPengumumanGetPayload<{ omit: { isActive: true } }>[],
-    async load() {
-      const res = await ApiFetch.api.desa.pengumuman.category[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        category.findMany.data = (res.data?.data as any) ?? [];
-      }
-    },
-  },
-});
-
-type PengumumanForm = Prisma.PengumumanGetPayload<{
-  select: {
-    judul: true;
-    deskripsi: true;
-    content: true;
-    categoryPengumumanId: true;
-  };
-}>;
+const defaultForm = {
+  judul: "",
+  deskripsi: "",
+  content: "",
+  categoryPengumumanId: "",
+};
 const pengumuman = proxy({
   create: {
-    form: {} as PengumumanForm,
+    form: { ...defaultForm },
     loading: false,
     async create() {
       const cek = templateFormPengumuman.safeParse(pengumuman.create.form);
@@ -74,11 +278,35 @@ const pengumuman = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
-      console.log(res);
-      if (res.status === 200) {
-        pengumuman.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      pengumuman.findMany.loading = true; // ✅ Akses langsung via nama path
+      pengumuman.findMany.page = page;
+      pengumuman.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+    
+        const res = await ApiFetch.api.desa.pengumuman["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          pengumuman.findMany.data = res.data.data ?? [];
+          pengumuman.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          pengumuman.findMany.data = [];
+          pengumuman.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch pengumuman paginated:", err);
+        pengumuman.findMany.data = [];
+        pengumuman.findMany.totalPages = 1;
+      } finally {
+        pengumuman.findMany.loading = false;
       }
     },
   },
@@ -112,7 +340,7 @@ const pengumuman = proxy({
       try {
         pengumuman.delete.loading = true;
 
-        const response = await fetch(`/api/desa/pengumuman/delete/${id}`, {
+        const response = await fetch(`/api/desa/pengumuman/del/${id}`, {
           method: "DELETE",
           headers: {
             "Content-Type": "application/json",
@@ -135,9 +363,9 @@ const pengumuman = proxy({
       }
     },
   },
-  update: {
+  edit: {
     id: "",
-    form: {} as PengumumanForm,
+    form: { ...defaultForm },
     loading: false,
 
     async load(id: string) {
@@ -153,6 +381,7 @@ const pengumuman = proxy({
             "Content-Type": "application/json",
           },
         });
+
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -168,20 +397,21 @@ const pengumuman = proxy({
             content: data.content,
             categoryPengumumanId: data.categoryPengumumanId || "",
           };
-          return data;
+          return data; // Return the loaded data
         } else {
-          throw new Error(result?.message || "Gagal mengambil data pengumuman");
+          throw new Error(result?.message || "Gagal memuat data");
         }
       } catch (error) {
-        console.error((error as Error).message);
-        toast.error("Terjadi kesalahan saat mengambil data pengumuman");
-      } finally {
-        pengumuman.update.loading = false;
+        console.error("Error loading pengumuman:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
       }
     },
 
     async update() {
-      const cek = templateFormPengumuman.safeParse(pengumuman.update.form);
+      const cek = templateFormPengumuman.safeParse(pengumuman.edit.form);
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -191,7 +421,7 @@ const pengumuman = proxy({
       }
 
       try {
-        pengumuman.update.loading = true;
+        pengumuman.edit.loading = true;
 
         const response = await fetch(`/api/desa/pengumuman/${this.id}`, {
           method: "PUT",
@@ -202,7 +432,7 @@ const pengumuman = proxy({
             judul: this.form.judul,
             deskripsi: this.form.deskripsi,
             content: this.form.content,
-            categoryPengumumanId: this.form.categoryPengumumanId,
+            categoryPengumumanId: this.form.categoryPengumumanId || null,
           }),
         });
 
@@ -231,9 +461,14 @@ const pengumuman = proxy({
         );
         return false;
       } finally {
-        pengumuman.update.loading = false;
+        pengumuman.edit.loading = false;
       }
     },
+
+    reset() {
+      pengumuman.edit.id = "";
+      pengumuman.edit.form = { ...defaultForm };
+    },
   },
   findFirst: {
     data: null as Prisma.PengumumanGetPayload<{

src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan.ts

@@ -0,0 +1,788 @@
+/* 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";
+
+// Template form responden
+
+const templateResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+  tanggal: z.string().min(1, "Tanggal harus diisi"),
+  jenisKelaminId: z.string().min(1, "Jenis kelamin harus diisi"),
+  ratingId: z.string().min(1, "Rating harus diisi"),
+  kelompokUmurId: z.string().min(1, "Kelompok umur harus diisi"),
+});
+
+const defaultFormResponden = {
+  name: "",
+  tanggal: "",
+  jenisKelaminId: "",
+  ratingId: "",
+  kelompokUmurId: "",
+};
+
+const responden = proxy({
+  create: {
+    form: { ...defaultFormResponden },
+    loading: false,
+    async create() {
+      const cek = templateResponden.safeParse(responden.create.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+
+      try {
+        responden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.responden["create"].post(
+          responden.create.form
+        );
+        if (res.status === 200) {
+          toast.success("Responden berhasil ditambahkan");
+          await responden.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah responden");
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan responden");
+      } finally {
+        responden.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
+      responden.findMany.loading = true; // Use the full path to access the property
+      responden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.responden["findMany"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          responden.findMany.data = res.data.data || [];
+          responden.findMany.total = res.data.total || 0;
+          responden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load responden:", res.data?.message);
+          responden.findMany.data = [];
+          responden.findMany.total = 0;
+          responden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        responden.findMany.data = [];
+        responden.findMany.total = 0;
+        responden.findMany.totalPages = 1;
+      } finally {
+        responden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.RespondenGetPayload<{
+      include: {
+        jenisKelamin: true;
+        rating: true;
+        kelompokUmur: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/responden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          responden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          responden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        responden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateResponden.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/landingpage/responden/${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 responden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        responden.delete.loading = true;
+
+        const response = await fetch(`/api/landingpage/responden/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "responden berhasil dihapus");
+          await responden.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus responden");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus responden");
+      } finally {
+        responden.delete.loading = false;
+      }
+    },
+  },
+});
+
+// Template form jenis kelamin responden
+const templateJenisKelaminResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormJenisKelaminResponden = {
+  name: "",
+};
+
+const jenisKelaminResponden = proxy({
+  create: {
+    form: { ...defaultFormJenisKelaminResponden },
+    loading: false,
+    async create() {
+      const cek = templateJenisKelaminResponden.safeParse(
+        jenisKelaminResponden.create.form
+      );
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+      jenisKelaminResponden.create.loading = true;
+      try {
+        jenisKelaminResponden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.jeniskelaminresponden[
+          "create"
+        ].post(jenisKelaminResponden.create.form);
+        if (res.status === 200) {
+          toast.success("Jenis kelamin responden berhasil ditambahkan");
+          await jenisKelaminResponden.findMany.load();
+        } else {
+          toast.error(
+            res.data?.message ?? "Gagal tambah jenis kelamin responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error(
+          "Terjadi kesalahan saat menambahkan jenis kelamin responden"
+        );
+      } finally {
+        jenisKelaminResponden.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
+      jenisKelaminResponden.findMany.loading = true; // Use the full path to access the property
+      jenisKelaminResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.jeniskelaminresponden[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          jenisKelaminResponden.findMany.data = res.data.data || [];
+          jenisKelaminResponden.findMany.total = res.data.total || 0;
+          jenisKelaminResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load jenis kelamin responden:",
+            res.data?.message
+          );
+          jenisKelaminResponden.findMany.data = [];
+          jenisKelaminResponden.findMany.total = 0;
+          jenisKelaminResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading jenis kelamin responden:", error);
+        jenisKelaminResponden.findMany.data = [];
+        jenisKelaminResponden.findMany.total = 0;
+        jenisKelaminResponden.findMany.totalPages = 1;
+      } finally {
+        jenisKelaminResponden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.JenisKelaminRespondenGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/jeniskelaminresponden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          jenisKelaminResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          jenisKelaminResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading jenis kelamin responden:", error);
+        jenisKelaminResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormJenisKelaminResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateJenisKelaminResponden.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/landingpage/jeniskelaminresponden/${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 jenisKelaminResponden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data jenis kelamin responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        jenisKelaminResponden.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/jeniskelaminresponden/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "jenis kelamin responden berhasil dihapus"
+          );
+          await jenisKelaminResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus jenis kelamin responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus jenis kelamin responden");
+      } finally {
+        jenisKelaminResponden.delete.loading = false;
+      }
+    },
+  },
+});
+
+// Template form pilihan rating responden
+
+const templatePilihanRatingResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormPilihanRatingResponden = {
+  name: "",
+};
+
+const pilihanRatingResponden = proxy({
+  create: {
+    form: { ...defaultFormPilihanRatingResponden },
+    loading: false,
+    async create() {
+      const cek = templatePilihanRatingResponden.safeParse(
+        pilihanRatingResponden.create.form
+      );
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+      pilihanRatingResponden.create.loading = true;
+      try {
+        pilihanRatingResponden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.pilihanratingresponden[
+          "create"
+        ].post(pilihanRatingResponden.create.form);
+        if (res.status === 200) {
+          toast.success("Jenis kelamin responden berhasil ditambahkan");
+          await pilihanRatingResponden.findMany.load();
+        } else {
+          toast.error(
+            res.data?.message ?? "Gagal tambah jenis kelamin responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error(
+          "Terjadi kesalahan saat menambahkan jenis kelamin responden"
+        );
+      } finally {
+        pilihanRatingResponden.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
+      pilihanRatingResponden.findMany.loading = true; // Use the full path to access the property
+      pilihanRatingResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.pilihanratingresponden[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pilihanRatingResponden.findMany.data = res.data.data || [];
+          pilihanRatingResponden.findMany.total = res.data.total || 0;
+          pilihanRatingResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load pilihan rating responden:",
+            res.data?.message
+          );
+          pilihanRatingResponden.findMany.data = [];
+          pilihanRatingResponden.findMany.total = 0;
+          pilihanRatingResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pilihan rating responden:", error);
+        pilihanRatingResponden.findMany.data = [];
+        pilihanRatingResponden.findMany.total = 0;
+        pilihanRatingResponden.findMany.totalPages = 1;
+      } finally {
+        pilihanRatingResponden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PilihanRatingRespondenGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/pilihanratingresponden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          pilihanRatingResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          pilihanRatingResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading pilihan rating responden:", error);
+        pilihanRatingResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormPilihanRatingResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templatePilihanRatingResponden.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/landingpage/pilihanratingresponden/${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 pilihanRatingResponden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data pilihan rating responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pilihanRatingResponden.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/pilihanratingresponden/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "pilihan rating responden berhasil dihapus"
+          );
+          await pilihanRatingResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus pilihan rating responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pilihan rating responden");
+      } finally {
+        pilihanRatingResponden.delete.loading = false;
+      }
+    },
+  },
+});
+
+// Template form kelompok umur responden
+
+const templateKelompokUmurResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormKelompokUmurResponden = {
+  name: "",
+};
+
+const kelompokUmurResponden = proxy({
+  create: {
+    form: { ...defaultFormKelompokUmurResponden },
+    loading: false,
+    async create() {
+      const cek = templateKelompokUmurResponden.safeParse(
+        kelompokUmurResponden.create.form
+      );
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+      kelompokUmurResponden.create.loading = true;
+      try {
+        kelompokUmurResponden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.umurresponden["create"].post(
+          kelompokUmurResponden.create.form
+        );
+        if (res.status === 200) {
+          toast.success("Kelompok umur responden berhasil ditambahkan");
+          await kelompokUmurResponden.findMany.load();
+        } else {
+          toast.error(
+            res.data?.message ?? "Gagal tambah kelompok umur responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error(
+          "Terjadi kesalahan saat menambahkan kelompok umur responden"
+        );
+      } finally {
+        kelompokUmurResponden.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
+      kelompokUmurResponden.findMany.loading = true; // Use the full path to access the property
+      kelompokUmurResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.umurresponden[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kelompokUmurResponden.findMany.data = res.data.data || [];
+          kelompokUmurResponden.findMany.total = res.data.total || 0;
+          kelompokUmurResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load kelompok umur responden:",
+            res.data?.message
+          );
+          kelompokUmurResponden.findMany.data = [];
+          kelompokUmurResponden.findMany.total = 0;
+          kelompokUmurResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading kelompok umur responden:", error);
+        kelompokUmurResponden.findMany.data = [];
+        kelompokUmurResponden.findMany.total = 0;
+        kelompokUmurResponden.findMany.totalPages = 1;
+      } finally {
+        kelompokUmurResponden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.UmurRespondenGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/umurresponden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kelompokUmurResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kelompokUmurResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading kelompok umur responden:", error);
+        kelompokUmurResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormKelompokUmurResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateKelompokUmurResponden.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/landingpage/umurresponden/${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 kelompokUmurResponden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data kelompok umur responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kelompokUmurResponden.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/umurresponden/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "kelompok umur responden berhasil dihapus"
+          );
+          await kelompokUmurResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus kelompok umur responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kelompok umur responden");
+      } finally {
+        kelompokUmurResponden.delete.loading = false;
+      }
+    },
+  },
+});
+
+const indeksKepuasanState = proxy({
+    responden,
+    kelompokUmurResponden,
+    jenisKelaminResponden,
+    pilihanRatingResponden
+})
+
+export default indeksKepuasanState

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

@@ -8,7 +8,7 @@ import { z } from "zod";
 const templateGrafikJenisKelamin = z.object({
   laki: z.string().min(1, "Data laki-laki harus diisi"),
   perempuan: z.string().min(1, "Data perempuan harus diisi"),
-}); 
+});
 
 const defaultForm = {
   laki: "",
@@ -17,10 +17,12 @@ const defaultForm = {
 
 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((i) => i.message).join("\n");
         toast.error(err);
@@ -33,14 +35,20 @@ const grafikBerdasarkanJenisKelamin = proxy({
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          toast.success("Grafik berdasarkan jenis kelamin berhasil ditambahkan");
+          toast.success(
+            "Grafik berdasarkan jenis kelamin berhasil ditambahkan"
+          );
           await grafikBerdasarkanJenisKelamin.findMany.load();
         } else {
-          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin");
+          toast.error(
+            res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin"
+          );
         }
       } catch (error) {
         console.error("Gagal create:", error);
-        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin");
+        toast.error(
+          "Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin"
+        );
       } finally {
         grafikBerdasarkanJenisKelamin.create.loading = false;
       }
@@ -52,8 +60,9 @@ const grafikBerdasarkanJenisKelamin = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      grafikBerdasarkanJenisKelamin.findMany.loading = true;  // Use the full path to access the property
+    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[
@@ -61,13 +70,17 @@ const grafikBerdasarkanJenisKelamin = proxy({
         ].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;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages =
+            res.data.totalPages || 1;
         } else {
-          console.error("Failed to load grafik berdasarkan jenis kelamin:", res.data?.message);
+          console.error(
+            "Failed to load grafik berdasarkan jenis kelamin:",
+            res.data?.message
+          );
           grafikBerdasarkanJenisKelamin.findMany.data = [];
           grafikBerdasarkanJenisKelamin.findMany.total = 0;
           grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
@@ -106,7 +119,7 @@ const grafikBerdasarkanJenisKelamin = proxy({
   },
   update: {
     id: "",
-    form: {...defaultForm},
+    form: { ...defaultForm },
     loading: false,
     async byId() {
       // Method implementation if needed
@@ -119,20 +132,24 @@ const grafikBerdasarkanJenisKelamin = proxy({
       }
       const cek = templateGrafikJenisKelamin.safeParse(this.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         toast.error(err);
         return null;
       }
       this.loading = true;
       try {
         const response = await fetch(
-          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(this.form),
-        });
+          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
         const result = await response.json();
         if (!response.ok || !result?.success) {
           throw new Error(result?.message || "Gagal update data");
@@ -156,29 +173,40 @@ const grafikBerdasarkanJenisKelamin = proxy({
       try {
         grafikBerdasarkanJenisKelamin.delete.loading = true;
 
-        const response = await fetch(`/api/ppid/grafikberdasarkanjeniskelamin/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/ppid/grafikberdasarkanjeniskelamin/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(result.message || "Grafik berdasarkan jenis kelamin berhasil dihapus");
+          toast.success(
+            result.message ||
+              "Grafik berdasarkan jenis kelamin berhasil dihapus"
+          );
           await grafikBerdasarkanJenisKelamin.findMany.load(); // refresh list
         } else {
-          toast.error(result?.message || "Gagal menghapus grafik berdasarkan jenis kelamin");
+          toast.error(
+            result?.message ||
+              "Gagal menghapus grafik berdasarkan jenis kelamin"
+          );
         }
       } catch (error) {
         console.error("Gagal delete:", error);
-        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan jenis kelamin");
+        toast.error(
+          "Terjadi kesalahan saat menghapus grafik berdasarkan jenis kelamin"
+        );
       } finally {
         grafikBerdasarkanJenisKelamin.delete.loading = false;
       }
     },
-  }
+  },
 });
 
 export default grafikBerdasarkanJenisKelamin;

src/app/admin/(dashboard)/_state/state-file-storage.ts

@@ -0,0 +1,63 @@
+import ApiFetch from "@/lib/api-fetch";
+import { proxy } from "valtio";
+
+interface FileItem {
+  id: string;
+  name: string;
+  path: string;
+  link: string;
+  mimeType: string;
+  category: string;
+  realName: string;
+  isActive: boolean;
+  createdAt: string | Date;
+  updatedAt: string | Date;
+  deletedAt: string | Date | null;
+}
+
+const stateFileStorage = proxy<{
+  list: FileItem[] | null;
+  page: number;
+  limit: number;
+  total: number | undefined;
+  load: (params?: { search?: string }) => Promise<void>;
+  del: (params: { id: string }) => Promise<void>;
+}>({
+  list: null,
+  page: 1,
+  limit: 10,
+  total: undefined,
+  async load(params?: { search?: string }) {
+    const { search = "" } = params ?? {};
+    try {
+      const { data } = await ApiFetch.api.fileStorage.findMany.get({
+        query: {
+          page: this.page,
+          limit: this.limit,
+          search,
+          category: 'image'
+        },
+      });
+      
+      if (data?.data) {
+        this.list = data.data as FileItem[];
+        this.total = data.meta?.totalPages;
+      }
+    } catch (error) {
+      console.error('Error loading files:', error);
+      this.list = [];
+      this.total = 0;
+    }
+  },
+  async del({ id }: { id: string }) {
+    try {
+      await ApiFetch.api.fileStorage.delete({ id });
+      await this.load();
+    } catch (error) {
+      console.error('Error deleting file:', error);
+      throw error;
+    }
+  },
+});
+
+export default stateFileStorage;

src/app/admin/(dashboard)/desa/berita/_com/layoutTabs.tsx

@@ -5,25 +5,21 @@ import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
-function LayoutTabs({ children }: { children: React.ReactNode }) {
+function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
     const router = useRouter()
     const pathname = usePathname()
     const tabs = [
         {
-            label: "List Survey",
-            value: "listSurvey",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-survey"
+            label: "List Berita",
+            value: "list_berita",
+            href: "/admin/desa/berita/list-berita"
         },
         {
-            label: "List Bulanan",
-            value: "listBulanan",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan"
+            label: "Kategori Berita",
+            value: "kategori_berita",
+            href: "/admin/desa/berita/kategori-berita"
         },
-        {
-          label: "List Gender Stat",
-          value: "listGenderStat",
-          href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat"
-        }
+        
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)
     const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
@@ -45,7 +41,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
 
     return (
         <Stack>
-            <Title order={3}>Indeks Kepuasan Masyarakat</Title>
+            <Title order={3}>Gallery</Title>
             <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
                 <TabsList p={"xs"} bg={"#BBC8E7FF"}>
                     {tabs.map((e, i) => (
@@ -64,4 +60,4 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
     );
 }
 
-export default LayoutTabs;
+export default LayoutTabsBerita;

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

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditKategoriBerita() {
+  const editState = useProxy(stateDashboardBerita.kategoriBerita)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+      name: editState.update.form.name || '',
+    });
+
+  useEffect(() => {
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              name: data.name || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori Berita:", error);
+          toast.error("Gagal memuat data kategori Berita");
+        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          name: formData.name,
+        };
+        await editState.update.update();
+        toast.success('Kategori Berita berhasil diperbarui!');
+        router.push('/admin/desa/berita/kategori-berita');
+      } catch (error) {
+        console.error('Error updating kategori Berita:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
+      }
+    };
+
+  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 Kategori Berita</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Berita</Text>}
+            placeholder="masukkan nama kategori Berita"
+          />
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriBerita;

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

@@ -0,0 +1,55 @@
+'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateKategoriBerita() {
+  const createState = useProxy(stateDashboardBerita.kategoriBerita)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.form = {
+      name: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create();
+    resetForm();
+    router.push("/admin/desa/berita/kategori-berita")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Berita</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Berita</Text>}
+            placeholder='Masukkan nama kategori Berita'
+            value={createState.create.form.name}
+            onChange={(val) => {
+              createState.create.form.name = val.target.value;
+            }}
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKategoriBerita;

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

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
+
+
+function KategoriBerita() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Berita'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriBerita search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriBerita({ search }: { search: string }) {
+  const listDataState = useProxy(stateDashboardBerita.kategoriBerita)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    listDataState.findMany.load()
+  }, [])
+
+  const handleDelete = () => {
+    if (selectedId) {
+      listDataState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      listDataState.findMany.load()
+    }
+  }
+
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listDataState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Kategori Berita'
+          href='/admin/desa/berita/kategori-berita/create'
+        />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-Berita/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus kategori Berita ini?'
+      />
+    </Box>
+  )
+}
+
+export default KategoriBerita;

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

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

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

@@ -1,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
 import {
@@ -7,7 +8,6 @@ import {
   Image,
   Paper,
   Select,
-  Skeleton,
   Stack,
   Text,
   TextInput,
@@ -22,9 +22,8 @@ import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
 import { FileInput } from "@mantine/core";
-import { useShallowEffect } from "@mantine/hooks";
-import { Prisma } from "@prisma/client";
-import stateDashboardBerita from "../../../../_state/desa/berita";
+import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
+
 
 function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
@@ -43,6 +42,7 @@ function EditBerita() {
 
   // Load berita by id saat pertama kali
   useEffect(() => {
+    beritaState.kategoriBerita.findMany.load()
     const loadBerita = async () => {
       const id = params?.id as string;
       if (!id) return;
@@ -99,7 +99,7 @@ function EditBerita() {
 
       await beritaState.berita.edit.update();
       toast.success("Berita berhasil diperbarui!");
-      router.push("/admin/desa/berita");
+      router.push("/admin/desa/berita/list-berita");
     } catch (error) {
       console.error("Error updating berita:", error);
       toast.error("Terjadi kesalahan saat memperbarui berita");
@@ -154,22 +154,29 @@ function EditBerita() {
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <EditEditor
-            value={formData.content}
-            onChange={(htmlContent) => {
-              setFormData((prev) => ({ ...prev, content: htmlContent }));
-              beritaState.berita.edit.form.content = htmlContent;
-            }}
+              value={formData.content}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                beritaState.berita.edit.form.content = htmlContent;
+              }}
             />
           </Box>
 
-          <SelectCategory
+          <Select
             value={formData.kategoriBeritaId}
-            onChange={(val) => {
-              setFormData({
-                ...formData,
-                kategoriBeritaId: val?.id || ''
-              });
-            }}
+            onChange={(val) => setFormData({ ...formData, kategoriBeritaId: val || "" })}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
+            data={
+              beritaState.kategoriBerita.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
           <Button onClick={handleSubmit}>Edit Berita</Button>
@@ -179,61 +186,4 @@ function EditBerita() {
   );
 }
 
-interface SelectCategoryProps {
-  onChange: (value: Prisma.KategoriBeritaGetPayload<{
-    select: {
-      name: true;
-      id: true;
-    };
-  }> | null) => void;
-  value?: string | null;
-  defaultValue?: string | null;
-}
-
-function SelectCategory({
-  onChange,
-  value,
-  defaultValue,
-}: SelectCategoryProps) {
-  const categoryState = useProxy(stateDashboardBerita.category);
-
-  useShallowEffect(() => {
-    categoryState.findMany.load().then(() => {
-      console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
-    });
-  }, []);
-
-  if (!categoryState.findMany.data) {
-    return <Skeleton height={38} />;
-  }
-
-
-  const selectedValue = value || defaultValue;
-
-  return (
-    <Select
-      label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
-      placeholder="Pilih kategori"
-      data={categoryState.findMany.data.map((item) => ({
-        label: item.name,
-        value: item.id,
-      }))}
-      value={selectedValue || null}
-      onChange={(val: string | null) => {
-        if (val) {
-          const selected = categoryState.findMany.data?.find((item) => item.id === val);
-          if (selected) {
-            onChange(selected);
-          }
-        } else {
-          onChange(null);
-        }
-      }}
-      searchable
-      clearable
-      nothingFoundMessage="Tidak ditemukan"
-    />
-  );
-}
-
 export default EditBerita;

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

@@ -8,8 +8,8 @@ import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
 import colors from '@/con/colors';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import stateDashboardBerita from '../../../_state/desa/berita';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 
 function DetailBerita() {
   const beritaState = useProxy(stateDashboardBerita)
@@ -28,7 +28,7 @@ function DetailBerita() {
       beritaState.berita.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/desa/berita")
+      router.push("/admin/desa/berita/list-berita")
     }
   }
 
@@ -89,7 +89,7 @@ function DetailBerita() {
                   <Button
                     onClick={() => {
                       if (beritaState.berita.findUnique.data) {
-                        router.push(`/admin/desa/berita/${beritaState.berita.findUnique.data.id}/edit`);
+                        router.push(`/admin/desa/berita/list-berita/${beritaState.berita.findUnique.data.id}/edit`);
                       }
                     }}
                     disabled={!beritaState.berita.findUnique.data}

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

@@ -1,16 +1,16 @@
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Select, Skeleton, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Center, FileInput, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
 import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import CreateEditor from '../../../_com/createEditor';
-import stateDashboardBerita from '../../../_state/desa/berita';
+
 
 export default function CreateBerita() {
   const beritaState = useProxy(stateDashboardBerita);
@@ -18,6 +18,10 @@ export default function CreateBerita() {
   const [file, setFile] = useState<File | null>(null);
   const router = useRouter()
 
+  useShallowEffect(() => {
+    beritaState.kategoriBerita.findMany.load()
+  }, []);
+
   const resetForm = () => {
     // Reset state di valtio
     beritaState.berita.create.form = {
@@ -57,7 +61,7 @@ export default function CreateBerita() {
 
     // Reset form setelah submit
     resetForm();
-    router.push("/admin/desa/berita")
+    router.push("/admin/desa/berita/list-berita")
   };
 
   return (
@@ -78,11 +82,27 @@ export default function CreateBerita() {
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
-          <SelectCategory
-            value={beritaState.berita.create.form.kategoriBeritaId}
-            onChange={(val) => {
-              beritaState.berita.create.form.kategoriBeritaId = val?.id || "";
+          <Select
+            label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+            placeholder="Pilih kategori"
+            data={beritaState.kategoriBerita.findMany.data.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={beritaState.berita.create.form.kategoriBeritaId || null}
+            onChange={(val: string | null) => {
+              if (val) {
+                const selected = beritaState.kategoriBerita.findMany.data?.find((item) => item.id === val);
+                if (selected) {
+                  beritaState.berita.create.form.kategoriBeritaId = selected.id;
+                }
+              } else {
+                beritaState.berita.create.form.kategoriBeritaId = "";
+              }
             }}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
           />
           <TextInput
             value={beritaState.berita.create.form.deskripsi}
@@ -126,61 +146,4 @@ export default function CreateBerita() {
       </Paper>
     </Box>
   );
-
-  interface SelectCategoryProps {
-    onChange: (value: Prisma.KategoriBeritaGetPayload<{
-      select: {
-        name: true;
-        id: true;
-      };
-    }> | null) => void;
-    value?: string | null;
-    defaultValue?: string | null;
-  }
-
-  function SelectCategory({
-    onChange,
-    value,
-    defaultValue,
-  }: SelectCategoryProps) {
-    const categoryState = useProxy(stateDashboardBerita.category);
-
-    useShallowEffect(() => {
-      categoryState.findMany.load().then(() => {
-        console.log("Kategori berhasil dimuat:", categoryState.findMany.data);
-      });
-    }, []);
-
-    if (!categoryState.findMany.data) {
-      return <Skeleton height={38} />;
-    }
-
-
-    const selectedValue = value || defaultValue;
-
-    return (
-      <Select
-        label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
-        placeholder="Pilih kategori"
-        data={categoryState.findMany.data.map((item) => ({
-          label: item.name,
-          value: item.id,
-        }))}
-        value={selectedValue || null}
-        onChange={(val: string | null) => {
-          if (val) {
-            const selected = categoryState.findMany.data?.find((item) => item.id === val);
-            if (selected) {
-              onChange(selected);
-            }
-          } else {
-            onChange(null);
-          }
-        }}
-        searchable
-        clearable
-        nothingFoundMessage="Tidak ditemukan"
-      />
-    );
-  }
 }

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

@@ -6,8 +6,9 @@ import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/ico
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../_com/header';
-import stateDashboardBerita from '../../_state/desa/berita';
+import HeaderSearch from '../../../_com/header';
+import stateDashboardBerita from '../../../_state/desa/berita';
+
 
 
 function Berita() {
@@ -38,22 +39,16 @@ function ListBerita({ search }: { search: string }) {
   } = beritaState.berita.findMany;
 
 
-  // Fetch pertama kali
+  // Fetch data when page or search changes
   useShallowEffect(() => {
-    load(page, 10); // awal page = 1
-  }, [page]);
-
-  const filteredData = (data || []).filter((item) => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.kategoriBerita?.name.toLowerCase().includes(keyword)
-    );
-  });
+    load(page, 10, search);
+  }, [page, search]);
 
   if (loading || !data) {
     return <Skeleton h={500} />;
   }
+  
+  const filteredData = data || [];
 
   return (
     <Box py={10}>
@@ -67,7 +62,7 @@ function ListBerita({ search }: { search: string }) {
             </GridCol>
             <GridCol span={{ base: 12, md: 1 }}>
               <Button
-                onClick={() => router.push("/admin/desa/berita/create")}
+                onClick={() => router.push("/admin/desa/berita/list-berita/create")}
                 bg={colors["blue-button"]}
               >
                 <IconCircleDashedPlus size={25} />
@@ -107,7 +102,7 @@ function ListBerita({ search }: { search: string }) {
                       <Button
                         bg={"green"}
                         onClick={() =>
-                          router.push(`/admin/desa/berita/${item.id}`)
+                          router.push(`/admin/desa/berita/list-berita/${item.id}`)
                         }
                       >
                         <IconDeviceImacCog size={25} />

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

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -18,6 +19,11 @@ function EditFoto() {
   const params = useParams();
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: fotoState.update.form.name || '',
+    deskripsi: fotoState.update.form.deskripsi || '',
+    imagesId: fotoState.update.form.imagesId || ''
+  });
 
   useEffect(() => {
     const loadFoto = async () => {
@@ -26,6 +32,11 @@ function EditFoto() {
       try {
         const data = await fotoState.update.load(id);
         if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imagesId: data.imageGalleryFoto?.id || ''
+          });
           if (data?.imageGalleryFoto?.link) {
             setPreviewImage(data.imageGalleryFoto.link);
           }
@@ -40,6 +51,12 @@ function EditFoto() {
 
   const handleSubmit = async () => {
     try {
+      fotoState.update.form = {
+        ...fotoState.update.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imagesId: formData.imagesId
+      };
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({
           file,
@@ -74,30 +91,55 @@ function EditFoto() {
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
             placeholder='Masukkan judul foto'
-            value={fotoState.update.form.name}
+            value={formData.name}
             onChange={(e) =>
-              (fotoState.update.form.name = e.target.value)
+              (formData.name = e.target.value)
             }
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text>Upload Foto</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0]; // Ambil file pertama
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2} // Maks 5MB
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg={"gray"}>
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
             <EditEditor

src/app/admin/(dashboard)/desa/gallery/foto/create/page.tsx

@@ -3,8 +3,9 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -69,25 +70,62 @@ function CreateFoto() {
               fotoState.create.form.name = val.target.value;
             }}
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
             <CreateEditor

src/app/admin/(dashboard)/desa/gallery/foto/page.tsx

@@ -1,93 +1,124 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/judulListTab';
-import { useProxy } from 'valtio/utils';
-import stateGallery from '../../../_state/desa/gallery';
-import { useShallowEffect } from '@mantine/hooks';
-import HeaderSearch from '../../../_com/header';
-import { useState } from 'react';
+"use client";
+import colors from "@/con/colors";
+import stateFileStorage from "@/state/state-list-image";
+import {
+  ActionIcon,
+  Box,
+  Flex,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconSearch, IconTrash, IconX } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import toast from "react-simple-toasts";
+import { useSnapshot } from "valtio";
 
-function Foto() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Posisi Organisasi'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListFoto search={search} />
-    </Box>
-  );
-}
-
-function ListFoto({ search }: { search: string }) {
-  const fotoState = useProxy(stateGallery.foto)
-  const router = useRouter();
+export default function ListImage() {
+  const { list, total } = useSnapshot(stateFileStorage);
 
   useShallowEffect(() => {
-    fotoState.findMany.load()
-  }, [])
+    stateFileStorage.load();
+  }, []);
 
-  const filteredData = (fotoState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!fotoState.findMany.data) {
-    return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
-  }
-  
+  let timeOut: NodeJS.Timer;
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
-          title='List Foto'
-          href='/admin/desa/gallery/foto/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
+    <Stack p={"lg"}>
+      <Flex justify="space-between">
+        <Title order={3}>List Foto</Title>
+        <TextInput
+          radius={"lg"}
+          leftSection={<IconSearch />}
+          rightSection={
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                stateFileStorage.load();
+              }}
+            >
+              <IconX />
+            </ActionIcon>
+          }
+          placeholder="Pencarian"
+          onChange={(e) => {
+            if (timeOut) clearTimeout(timeOut);
+            timeOut = setTimeout(() => {
+              stateFileStorage.load({ search: e.target.value });
+            }, 200);
+          }}
         />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Judul Foto</TableTh>
-              <TableTh>Tanggal Foto</TableTh>
-              <TableTh>Deskripsi Foto</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
-                <TableTd>
-                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/desa/gallery/foto/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+      </Flex>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <SimpleGrid
+          cols={{
+            base: 3,
+            md: 5,
+            lg: 10,
+          }}
+        >
+          {list &&
+            list.map((v, k) => {
+              return (
+                <Paper key={k} shadow="sm">
+                  <Stack pos={"relative"} gap={0} justify="space-between">
+                    <motion.div
+                      onClick={() => {
+                        // copy to clipboard
+                        navigator.clipboard.writeText(v.url);
+                        toast("Berhasil disalin");
+                      }}
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.8 }}
+                    >
+                      <Image
+                        h={100}
+                        src={v.url + "?size=100"}
+                        alt={v.name}
+                        fit="cover"
+                        loading="lazy"
+                        style={{
+                          objectFit: "cover",
+                          objectPosition: "center",
+                        }}
+                      />
+                    </motion.div>
+                    <Box p={"md"} h={54}>
+                      <Text lineClamp={2} fz={"xs"}>
+                        {v.name}
+                      </Text>
+                    </Box>
+                    <Group justify="end">
+                        <IconTrash
+                        color="red"
+                          onClick={() => {
+                            stateFileStorage.del({ name: v.name }).finally(() => {
+                              toast("Berhasil dihapus");
+                            });
+                          }}
+                        />
+                    </Group>
+                  </Stack>
+                </Paper>
+              );
+            })}
+        </SimpleGrid>
       </Paper>
-    </Box>
+      {total && (
+        <Pagination
+          total={total}
+          onChange={(e) => {
+            stateFileStorage.page = e;
+            stateFileStorage.load();
+          }}
+        />
+      )}
+    </Stack>
   );
 }
-
-export default Foto;

src/app/admin/(dashboard)/desa/gallery/layout.tsx

@@ -1,5 +1,5 @@
 'use client'
-import LayoutTabsGallery from "../../ppid/_com/layoutTabsGallery"
+import LayoutTabsGallery from "./lib/layoutTabs"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
     return (

src/app/admin/(dashboard)/desa/gallery/lib/layoutTabs.tsx

@@ -5,30 +5,20 @@ import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
-function LayoutTabs({ children }: { children: React.ReactNode }) {
+function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
     const router = useRouter()
     const pathname = usePathname()
     const tabs = [
         {
-            label: "Grafik Hasil Kepuasan Masyarakat",
-            value: "grafikhasilkepuasamanmasyarakat",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat"
+            label: "Foto",
+            value: "foto",
+            href: "/admin/desa/gallery/foto"
         },
         {
-            label: "Grafik Berdasarkan Jenis Kelamin Responden",
-            value: "grafikberdasarkanjeniskelaminresponden",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden"
+            label: "Video",
+            value: "video",
+            href: "/admin/desa/gallery/video"
         },
-        {
-            label: "Grafik Berdasarkan Pilihan Responden",
-            value: "grafikberdasarkanpilihanresponden",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden"
-        },
-        {
-            label: "Grafik Berdasarkan Umur Responden",
-            value: "grafikberdasarkanumurresponden",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur"
-        }
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)
     const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
@@ -50,7 +40,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
 
     return (
         <Stack>
-            <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
+            <Title order={3}>Gallery</Title>
             <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
                 <TabsList p={"xs"} bg={"#BBC8E7FF"}>
                     {tabs.map((e, i) => (
@@ -69,4 +59,4 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
     );
 }
 
-export default LayoutTabs;
+export default LayoutTabsGallery;

src/app/admin/(dashboard)/desa/gallery/video/page.tsx

@@ -1,14 +1,14 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/judulListTab';
-import { useProxy } from 'valtio/utils';
-import stateGallery from '../../../_state/desa/gallery';
-import { useShallowEffect } from '@mantine/hooks';
-import HeaderSearch from '../../../_com/header';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import stateGallery from '../../../_state/desa/gallery';
 
 function Video() {
   const [search, setSearch] = useState("");
@@ -29,35 +29,34 @@ function Video() {
 function ListVideo({ search }: { search: string }) {
   const videoState = useProxy(stateGallery.video)
   const router = useRouter();
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = videoState.findMany;
 
   useShallowEffect(() => {
-    videoState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (videoState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = (data || [])
 
-  if (!videoState.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
       </Box>
     )
   }
-  
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
+        <JudulList
           title='List Video'
           href='/admin/desa/gallery/video/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
         />
         <Table striped withTableBorder withRowBorders>
           <TableThead>
@@ -71,10 +70,25 @@ function ListVideo({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
                 <TableTd>
-                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Box w={200}>
+                    <Text lineClamp={1}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                
+                <TableTd>
+                  <Box w={200}>
+                  {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                  })}
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={200}>
+                    <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}>
@@ -86,6 +100,15 @@ function ListVideo({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -1,53 +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 '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
-
-function EditPengumuman() {
-  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 Pengumuman</Title>
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-          placeholder='Masukkan judul'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
-          placeholder='Masukkan deskripsi singkat'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal</Text>}
-          placeholder='Masukkan tanggal'
-          />
-           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Waktu</Text>}
-          placeholder='Masukkan waktu'
-          />
-          <Box>
-          <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
-          <KeamananEditor
-          showSubmit={false}
-          />
-          </Box>
-
-          <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
-          </Group>
-       </Stack>
-      </Paper>
-   </Box>
-  );
-}
-
-export default EditPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "List Pengumuman",
+            value: "listpengumuman",
+            href: "/admin/desa/pengumuman/list-pengumuman"
+        },
+        {
+            label: "Kategori Pengumuman",
+            value: "kategoripengumuman",
+            href: "/admin/desa/pengumuman/kategori-pengumuman"
+        },
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Pengumuman</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsLayanan;

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditKategoriPengumuman() {
+  const editState = useProxy(stateDesaPengumuman.category)
+  const router = useRouter();
+  const params = useParams();
+  const [formData, setFormData] = useState({
+      name: editState.update.form.name || '',
+    });
+
+  useEffect(() => {
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              name: data.name || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori Pengumuman:", error);
+          toast.error("Gagal memuat data kategori Pengumuman");
+        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          name: formData.name,
+        };
+        await editState.update.update();
+        toast.success('Kategori Pengumuman berhasil diperbarui!');
+        router.push('/admin/desa/pengumuman/kategori-pengumuman');
+      } catch (error) {
+        console.error('Error updating kategori Pengumuman:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
+      }
+    };
+
+  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 Kategori Pengumuman</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Pengumuman</Text>}
+            placeholder="masukkan nama kategori Pengumuman"
+          />
+
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/create/page.tsx

@@ -0,0 +1,55 @@
+'use client'
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateKategoriPengumuman() {
+  const createState = useProxy(stateDesaPengumuman.category)
+  const router = useRouter();
+
+  const resetForm = () => {
+    createState.create.form = {
+      name: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await createState.create.create();
+    resetForm();
+    router.push("/admin/desa/pengumuman/kategori-pengumuman")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Pengumuman</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Pengumuman</Text>}
+            placeholder='Masukkan nama kategori Pengumuman'
+            value={createState.create.form.name}
+            onChange={(val) => {
+              createState.create.form.name = val.target.value;
+            }}
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateKategoriPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/page.tsx

@@ -0,0 +1,128 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
+
+
+function KategoriPengumuman() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Pengumuman'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriPengumuman search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriPengumuman({ search }: { search: string }) {
+  const listDataState = useProxy(stateDesaPengumuman.category)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useEffect(() => {
+    listDataState.findMany.load()
+  }, [])
+
+  const handleDelete = () => {
+    if (selectedId) {
+      listDataState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      listDataState.findMany.load()
+    }
+  }
+
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listDataState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Kategori Pengumuman'
+          href='/admin/desa/pengumuman/kategori-pengumuman/create'
+        />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/desa/pengumuman/kategori-pengumuman/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleDelete}
+        text='Apakah anda yakin ingin menghapus kategori Pengumuman ini?'
+      />
+    </Box>
+  )
+}
+
+export default KategoriPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/layout.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import LayoutTabs from './_lib/layoutTabs';
+import LayoutTabs from './_com/layoutTabs';
 
-function Layout({children} : {children: React.ReactNode}) {
+function Layout({ children }: { children: React.ReactNode }) {
   return (
     <LayoutTabs>
       {children}

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx

@@ -0,0 +1,140 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import stateDesaPengumuman from "@/app/admin/(dashboard)/_state/desa/pengumuman";
+import colors from "@/con/colors";
+import {
+  Box,
+  Button,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { IconArrowBack } from "@tabler/icons-react";
+import { useParams, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "react-toastify";
+import { useProxy } from "valtio/utils";
+
+
+function EditPengumuman() {
+  const editState = useProxy(stateDesaPengumuman);
+  const router = useRouter();
+  const params = useParams();
+
+  const [formData, setFormData] = useState({
+    judul: editState.pengumuman.edit.form.judul || '',
+    deskripsi: editState.pengumuman.edit.form.deskripsi || '',
+    categoryPengumumanId: editState.pengumuman.edit.form.categoryPengumumanId || '',
+    content: editState.pengumuman.edit.form.content || ''
+  });
+
+  // Load pengumuman by id saat pertama kali
+  useEffect(() => {
+    editState.category.findMany.load()
+    const loadpengumuman = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateDesaPengumuman.pengumuman.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            categoryPengumumanId: data.categoryPengumumanId || '',
+            content: data.content || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pengumuman:", error);
+        toast.error("Gagal memuat data pengumuman");
+      }
+    };
+
+    loadpengumuman();
+  }, [params?.id]); // ✅ hapus editState dari dependency
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      editState.pengumuman.edit.form = {
+        ...editState.pengumuman.edit.form,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        categoryPengumumanId: formData.categoryPengumumanId || ''
+      };
+      await editState.pengumuman.edit.update();
+      toast.success("pengumuman berhasil diperbarui!");
+      router.push("/admin/desa/pengumuman/list-pengumuman");
+    } catch (error) {
+      console.error("Error updating pengumuman:", error);
+      toast.error("Terjadi kesalahan saat memperbarui pengumuman");
+    }
+  };
+
+  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 pengumuman</Title>
+          <TextInput
+            value={formData.judul}
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
+          />
+
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <EditEditor
+              value={formData.content}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                editState.pengumuman.edit.form.content = htmlContent;
+              }}
+            />
+          </Box>
+
+          <Select
+            value={formData.categoryPengumumanId}
+            onChange={(val) => setFormData({ ...formData, categoryPengumumanId: val || "" })}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
+            data={
+              editState.category.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!formData.categoryPengumumanId ? "Pilih kategori" : undefined}
+          />
+
+          <Button onClick={handleSubmit}>Edit pengumuman</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPengumuman;

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx

@@ -1,40 +1,46 @@
 'use client'
 
-import { Box, Button, Paper } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
 import colors from '@/con/colors';
+import { useProxy } from 'valtio/utils';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import { useState } from 'react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 
 
 function DetailPengumuman() {
-  // const pengumumanState = useProxy(stateDesaPengumuman)
-  // const [modalHapus, setModalHapus] = useState(false)
-  // const [selectedId, setSelectedId] = useState<string | null>(null)
-  // const params = useParams()
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
   const router = useRouter()
 
-  // useShallowEffect(() => {
-  //   pengumumanState.pengumuman.findUnique.load(params?.id as string)
-  // }, [])
+  useShallowEffect(() => {
+    pengumumanState.pengumuman.findUnique.load(params?.id as string)
+  }, [])
 
 
-  // const handleHapus = () => {
-  //   if (selectedId) {
-  //     pengumumanState.pengumuman.delete.byId(selectedId)
-  //     setModalHapus(false)
-  //     setSelectedId(null)
-  //     router.push("/admin/desa/pengumuman")
-  //   }
-  // }
+  const handleHapus = () => {
+    if (selectedId) {
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/pengumuman/list-pengumuman")
+    }
+  }
 
-  // if (!pengumumanState.pengumuman.findUnique.data) {
-  //   return (
-  //     <Stack py={10}>
-  //         <Skeleton h={400} />
-  //     </Stack>
-  //   )
-  // }
+  if (!pengumumanState.pengumuman.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={400} />
+      </Stack>
+    )
+  }
 
   return (
     <Box>
@@ -44,7 +50,7 @@ function DetailPengumuman() {
         </Button>
       </Box>
       <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        {/* <Stack>
+        <Stack>
           <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
           {pengumumanState.pengumuman.findUnique.data ? (
             <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
@@ -79,11 +85,11 @@ function DetailPengumuman() {
                     <IconX size={20} />
                   </Button>
                   <Button
-                   onClick={() => {
-                    if (pengumumanState.pengumuman.findUnique.data) {
-                      router.push(`/admin/desa/pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
-                    }
-                   }}
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        router.push(`/admin/desa/pengumuman/list-pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                      }
+                    }}
                     disabled={!pengumumanState.pengumuman.findUnique.data}
                     color={"green"}
                   >
@@ -93,16 +99,16 @@ function DetailPengumuman() {
               </Stack>
             </Paper>
           ) : null}
-        </Stack> */}
+        </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus
+      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
-      /> */}
+        text='Apakah anda yakin ingin menghapus pengumuman ini?'
+      />
     </Box>
   );
 }

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx

@@ -1,22 +1,26 @@
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { Prisma } from '@prisma/client';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import CreateEditor from '../../../_com/createEditor';
-import stateDesaPengumuman from '../../../_state/desa/pengumuman';
+
 
 function CreatePengumuman() {
   const pengumumanState = useProxy(stateDesaPengumuman)
   const router = useRouter();
 
+  useShallowEffect(() => {
+    pengumumanState.category.findMany.load()
+  }, [])
+
   const handleSubmit = async () => {
     await pengumumanState.pengumuman.create.create()
     resetForm()
-    router.push("/admin/desa/pengumuman")
+    router.push("/admin/desa/pengumuman/list-pengumuman")
   }
 
   const resetForm = () => {
@@ -45,10 +49,21 @@ function CreatePengumuman() {
               pengumumanState.pengumuman.create.form.judul = val.target.value
             }}
           />
-          <SelectCategory
+          <Select
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
+            data={pengumumanState.category.findMany.data?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
             onChange={(val) => {
-              pengumumanState.pengumuman.create.form.categoryPengumumanId = val.id;
+              const selected = pengumumanState.category.findMany.data?.find((item) => item.id === val);
+              if (selected) {
+                pengumumanState.pengumuman.create.form.categoryPengumumanId = selected.id;
+              }
             }}
+            searchable
+            nothingFoundMessage="Tidak ditemukan"
           />
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
@@ -76,35 +91,4 @@ function CreatePengumuman() {
   );
 }
 
-function SelectCategory({
-  onChange,
-}: {
-  onChange: (value: Prisma.CategoryPengumumanGetPayload<{ select: { name: true; id: true; } }>) => void;
-}) {
-  const categoryState = useProxy(stateDesaPengumuman.category);
-
-  useShallowEffect(() => {
-    categoryState.findMany.load();
-  }, []);
-
-  return (
-    <Select
-      label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-      placeholder='Pilih kategori'
-      data={categoryState.findMany.data?.map((item) => ({
-        label: item.name,
-        value: item.id,
-      }))}
-      onChange={(val) => {
-        const selected = categoryState.findMany.data?.find((item) => item.id === val);
-        if (selected) {
-          onChange(selected);
-        }
-      }}
-      searchable
-      nothingFoundMessage="Tidak ditemukan"
-    />
-  );
-}
-
 export default CreatePengumuman;

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx

@@ -1,14 +1,13 @@
 '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 { Box, Button, Center, Grid, GridCol, 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';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../_com/header';
-import stateDesaPengumuman from '../../_state/desa/pengumuman';
-import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import stateDesaPengumuman from '../../../_state/desa/pengumuman';
 
 
 function Pengumuman() {
@@ -16,7 +15,7 @@ function Pengumuman() {
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
+        title='List Pengumuman'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
         value={search}
@@ -30,31 +29,21 @@ function Pengumuman() {
 function ListPengumuman({ search }: { search: string }) {
   const pengumumanState = useProxy(stateDesaPengumuman)
   const router = useRouter()
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = pengumumanState.pengumuman.findMany;
 
   useShallowEffect(() => {
-    pengumumanState.pengumuman.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
+  const filteredData = (data || [])
 
-  const handleHapus = () => {
-    if (selectedId) {
-      pengumumanState.pengumuman.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-    }
-  }
-
-  const filteredData = (pengumumanState.pengumuman.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.CategoryPengumuman?.name.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!pengumumanState.pengumuman.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -71,7 +60,7 @@ function ListPengumuman({ search }: { search: string }) {
               <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
             </GridCol>
             <GridCol span={{ base: 12, md: 1 }}>
-              <Button onClick={() => router.push("/admin/desa/pengumuman/create")} bg={colors['blue-button']}>
+              <Button onClick={() => router.push("/admin/desa/pengumuman/list-pengumuman/create")} bg={colors['blue-button']}>
                 <IconCircleDashedPlus size={25} />
               </Button>
             </GridCol>
@@ -96,7 +85,7 @@ function ListPengumuman({ search }: { search: string }) {
                   </TableTd>
                   <TableTd >{item.CategoryPengumuman?.name}</TableTd>
                   <TableTd>
-                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/detail`)}>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/list-pengumuman/${item.id}`)}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>
@@ -107,14 +96,15 @@ function ListPengumuman({ search }: { search: string }) {
           </Box>
         </Stack>
       </Paper>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
-      />
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   )
 }

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/edit/page.tsx

@@ -1,128 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-
-function EditListBulanan() {
-  const editState = useProxy(indeksKepuasanState.monthlyStatState)
-  const params = useParams()
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    month: editState.edit.form.month || '',
-    respondentsCount: editState.edit.form.respondentsCount || 0,
-    surveyId: editState.edit.form.surveyId || '',
-  })
-
-  useEffect(() => {
-    const loadSurvey = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            month: data.month,
-            respondentsCount: data.respondentsCount,
-            surveyId: data.surveyId,
-          });
-        }
-      } catch (error) {
-        console.error("Error loading list bulanan:", error);
-        toast.error("Gagal memuat data list bulanan");
-      }
-    };
-    indeksKepuasanState.surveyState.findMany.load();
-    loadSurvey();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-
-    try {
-      // edit global state with form data
-      editState.edit.form = {
-        ...editState.edit.form,
-        month: formData.month,
-        respondentsCount: formData.respondentsCount,
-        surveyId: formData.surveyId,
-      };
-
-      await editState.edit.update();
-      toast.success("list bulanan berhasil diperbarui!");
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan");
-    } catch (error) {
-      console.error("Error updating list bulanan:", error);
-      toast.error("Terjadi kesalahan saat memperbarui list bulanan");
-    }
-  };
-
-  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"}>Edit List Survey</Text>
-          <Paper>
-            <Stack gap={"xs"}>
-              <TextInput
-                value={formData.month}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    month: val.target.value
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Bulan</Text>}
-                placeholder='Masukkan bulan'
-              />
-              <TextInput
-                value={formData.respondentsCount}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    respondentsCount: Number(val.target.value)
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-                placeholder='Masukkan total responden'
-              />
-              <Select
-                label={<Text fw="bold" fz="sm">Pilih Survey</Text>}
-                placeholder="Pilih survey"
-                value={formData.surveyId}
-                onChange={(value) => {
-                  if (value) setFormData({
-                    ...formData,
-                    surveyId: value
-                  })
-                }}
-                data={
-                  indeksKepuasanState.surveyState.findMany.data?.map((survey) => ({
-                    value: survey.id,
-                    label: `${survey.title} (${survey.totalRespondents} responden)`,
-                  })) || []
-                }
-              />
-              <Group>
-                <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditListBulanan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/page.tsx

@@ -1,109 +0,0 @@
-'use client'
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function DetailListBulanan() {
-  const detailState = useProxy(indeksKepuasanState.monthlyStatState)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
-
-  const handleHapus = () => {
-    if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan")
-    }
-  }
-
-  if (!detailState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Bulan</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.month}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Total Responden</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.respondentsCount}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Survey</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.survey.title }</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.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 list bulanan ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailListBulanan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create/page.tsx

@@ -1,84 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function CreateListBulanan() {
-  const router = useRouter();
-  const stateCreate = useProxy(indeksKepuasanState.monthlyStatState)
-
-
-  useEffect(() => {
-    stateCreate.findMany.load();
-    indeksKepuasanState.surveyState.findMany.load();
-  }, []);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      month: "",
-      respondentsCount: 0,
-      surveyId: "",
-    };
-  };
-  const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create List Bulanan</Title>
-          <TextInput
-            value={stateCreate.create.form.month}
-            onChange={(val) => {
-              stateCreate.create.form.month = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Bulan</Text>}
-            placeholder='Masukkan bulan'
-          />
-          <TextInput
-            value={stateCreate.create.form.respondentsCount}
-            onChange={(val) => {
-              stateCreate.create.form.respondentsCount = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-            placeholder='Masukkan total responden'
-          />
-          <Select
-            label={<Text fw="bold" fz="sm">Pilih Survey</Text>}
-            placeholder="Pilih survey"
-            value={stateCreate.create.form.surveyId}
-            onChange={(value) => {
-              if (value) stateCreate.create.form.surveyId = value;
-            }}
-            data={
-              indeksKepuasanState.surveyState.findMany.data?.map((survey) => ({
-                value: survey.id,
-                label: `${survey.title} (${survey.totalRespondents} responden)`,
-              })) || []
-            }
-          />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateListBulanan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/page.tsx

@@ -1,98 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, 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 { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
-import JudulList from '../../../_com/judulList';
-
-
-
-function ListBulananLandingPage() {
-  const [search, setSearch] = useState('');
-  return (
-    <Box>
-      <HeaderSearch
-        title='List Bulanan'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListBUlanan search={search} />
-    </Box>
-  );
-}
-
-function ListBUlanan({ search }: { search: string }) {
-  const listState = useProxy(indeksKepuasanState.monthlyStatState)
-  const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
-
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.month.toLowerCase().includes(keyword) ||
-      item.respondentsCount.toString().includes(keyword)
-    );
-  });
-
-  if (!listState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Bulanan'
-            href='/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Bulan</TableTh>
-                  <TableTh>Total Responden</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.month}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.respondentsCount}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ListBulananLandingPage;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/edit/page.tsx

@@ -1,186 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-
-function EditListSurvey() {
-  const editState = useProxy(indeksKepuasanState.genderStatState)
-  const params = useParams()
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    laki: editState.edit.form.laki || 0,
-    perempuan: editState.edit.form.perempuan || 0,
-    monthlyStatId: editState.edit.form.monthlyStatId || '',
-    total: editState.edit.form.total || 0,
-    percentLaki: editState.edit.form.percentLaki || 0,
-    percentPerempuan: editState.edit.form.percentPerempuan || 0,
-  })
-
-  useEffect(() => {
-    indeksKepuasanState.monthlyStatState.findMany.load();
-    const loadSurvey = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            laki: data.laki || 0,
-            perempuan: data.perempuan || 0,
-            monthlyStatId: data.monthlyStatId || '',
-            total: data.total || 0,
-            percentLaki: data.percentLaki || 0,
-            percentPerempuan: data.percentPerempuan || 0,
-          });
-        }
-      } catch (error) {
-        console.error("Error loading list survey:", error);
-        toast.error("Gagal memuat data list survey");
-      }
-    };
-    loadSurvey();
-  }, [params?.id]);
-
-  // Hitung total dan persentase saat nilai laki atau perempuan berubah
-  useEffect(() => {
-    const total = formData.laki + formData.perempuan;
-    const percentLaki = total > 0 ? Math.round((formData.laki / total) * 100) : 0;
-    const percentPerempuan = 100 - percentLaki;
-    
-    setFormData(prev => ({
-      ...prev,
-      total,
-      percentLaki,
-      percentPerempuan
-    }));
-  }, [formData.laki, formData.perempuan]);
-
-  const handleSubmit = async () => {
-    if (!formData.monthlyStatId) {
-      return toast.error("Silakan pilih bulan terlebih dahulu");
-    }
-
-    if (formData.laki < 0 || formData.perempuan < 0) {
-      return toast.error("Nilai tidak boleh negatif");
-    }
-
-    try {
-      // edit global state with form data
-      editState.edit.form = {
-        ...editState.edit.form,
-        laki: formData.laki,
-        perempuan: formData.perempuan,
-        monthlyStatId: formData.monthlyStatId,
-        total: formData.total,
-        percentLaki: formData.percentLaki,
-        percentPerempuan: formData.percentPerempuan,
-      };
-
-      await editState.edit.update();
-      toast.success("Data gender berhasil diperbarui!");
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat");
-    } catch (error) {
-      console.error("Error updating list gender:", error);
-      toast.error("Terjadi kesalahan saat memperbarui data gender");
-    }
-  };
-
-  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"}>Edit List Survey</Text>
-          <Paper>
-            <Stack gap={"xs"}>
-              <TextInput
-                type="number"
-                value={formData.laki}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    laki: Number(val.target.value)
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Laki - Laki</Text>}
-                placeholder='Masukkan laki - laki'
-              />
-              <TextInput
-                type="number"
-                value={formData.perempuan}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    perempuan: Number(val.target.value)
-                  })
-                }}
-                label={<Text fw={"bold"} fz={"sm"}>Perempuan</Text>}
-                placeholder='Masukkan perempuan'
-              />
-              <TextInput
-                type="number"
-                value={formData.total}
-                label={<Text fw="bold" fz="sm">Total</Text>}
-                disabled
-              />
-              <TextInput
-                type="number"
-                value={formData.percentLaki}
-                label={<Text fw="bold" fz="sm">Persentase Laki Laki</Text>}
-                disabled
-              />
-              <TextInput
-                type="number"
-                value={formData.percentPerempuan}
-                label={<Text fw="bold" fz="sm">Persentase Perempuan</Text>}
-                disabled
-              />
-              <Select
-                label={"Pilih Bulan"}
-                placeholder="Pilih bulanan"
-                value={formData.monthlyStatId}
-                onChange={(value) => {
-                  setFormData(prev => ({
-                    ...prev,
-                    monthlyStatId: value || ''
-                  }));
-                }}
-                data={
-                  indeksKepuasanState.monthlyStatState.findMany.data?.map((monthlyStat) => ({
-                    value: monthlyStat.id,
-                    label: `${monthlyStat.month} (${monthlyStat.respondentsCount} responden)`,
-                  })) || []
-                }
-                required
-                error={!formData.monthlyStatId ? 'Bulan harus dipilih' : undefined}
-              />
-              <Group>
-                <Button 
-                  bg={colors['blue-button']} 
-                  onClick={handleSubmit}
-                  loading={editState.edit.loading}
-                >
-                  {editState.edit.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditListSurvey;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/page.tsx

@@ -1,113 +0,0 @@
-'use client'
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function DetailGenderStat() {
-  const detailState = useProxy(indeksKepuasanState.genderStatState)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
-
-  const handleHapus = () => {
-    if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat")
-    }
-  }
-
-  if (!detailState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Laki Laki</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.laki}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Perempuan</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.perempuan}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Persentase Laki Laki</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.percentLaki}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Persentase Perempuan</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.percentPerempuan}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.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 list gender stat ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailGenderStat;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create/page.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-
-function CreateListGenderStat() {
-  const router = useRouter();
-  const stateCreate = useProxy(indeksKepuasanState.genderStatState)
-
-
-  useEffect(() => {
-    stateCreate.findMany.load();
-    indeksKepuasanState.monthlyStatState.findMany.load();
-  }, []);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      laki: 0,
-      perempuan: 0,
-      monthlyStatId: "",
-      total: 0,
-      percentLaki: 0,
-      percentPerempuan: 0,
-    };
-  };
-  const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create List Gender Stat</Title>
-          <TextInput
-            value={stateCreate.create.form.laki}
-            onChange={(val) => {
-              stateCreate.create.form.laki = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Laki Laki</Text>}
-            placeholder='Masukkan laki laki'
-          />
-          <TextInput
-            value={stateCreate.create.form.perempuan}
-            onChange={(val) => {
-              stateCreate.create.form.perempuan = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Perempuan</Text>}
-            placeholder='Masukkan perempuan'
-          />
-          <TextInput
-            value={stateCreate.create.form.total}
-            label={<Text fw="bold" fz="sm">Total</Text>}
-            disabled
-          />
-          <TextInput
-            value={stateCreate.create.form.percentLaki}
-            label={<Text fw="bold" fz="sm">Persentase Laki Laki</Text>}
-            disabled
-          />
-          <TextInput
-            value={stateCreate.create.form.percentPerempuan}
-            label={<Text fw="bold" fz="sm">Persentase Perempuan</Text>}
-            disabled
-          />
-          <Select
-            label={<Text fw="bold" fz="sm">Pilih Bulan</Text>}
-            placeholder="Pilih bulanan"
-            value={stateCreate.create.form.monthlyStatId}
-            onChange={(value) => {
-              if (value) stateCreate.create.form.monthlyStatId = value;
-            }}
-            data={
-              indeksKepuasanState.monthlyStatState.findMany.data?.map((monthlyStat) => ({
-                value: monthlyStat.id,
-                label: `${monthlyStat.month} (${monthlyStat.respondentsCount} responden)`,
-              })) || []
-            }
-          />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateListGenderStat;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/page.tsx

@@ -1,106 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, 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 { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
-
-
-
-function ListGenderStat() {
-  const [search, setSearch] = useState('');
-  return (
-    <Box>
-      <HeaderSearch
-        title='Gender Stat'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListGender search={search} />
-    </Box>
-  );
-}
-
-function ListGender({ search }: { search: string }) {
-  const listState = useProxy(indeksKepuasanState.genderStatState)
-  const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
-
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.laki.toString().includes(keyword) ||
-      item.perempuan.toString().includes(keyword)
-    );
-  });
-
-  if (!listState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Gender Stat'
-            href='/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Laki Laki</TableTh>
-                  <TableTh>Perempuan</TableTh>
-                  <TableTh>Persentase Laki Laki</TableTh>
-                  <TableTh>Persentase Perempuan</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.laki}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.perempuan}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.percentLaki}%</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.percentPerempuan}%</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ListGenderStat;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/edit/page.tsx

@@ -1,122 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-
-
-function EditListSurvey() {
-  const editState = useProxy(indeksKepuasanState.surveyState)
-  const params = useParams()
-  const router = useRouter()
-  const [formData, setFormData] = useState({
-    title: editState.edit.form.title || '',
-    totalRespondents: editState.edit.form.totalRespondents || 0,
-    averageScore: editState.edit.form.averageScore || 0,
-  })
-
-  useEffect(() => {
-    const loadSurvey = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.edit.load(id); // akses langsung, bukan dari proxy
-        if (data) {
-          setFormData({
-            title: data.title || '',
-            totalRespondents: data.totalRespondents || 0,
-            averageScore: data.averageScore || 0,
-          });
-        }
-      } catch (error) {
-        console.error("Error loading list survey:", error);
-        toast.error("Gagal memuat data list survey");
-      }
-    };
-
-    loadSurvey();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-  
-      try {
-        // edit global state with form data
-        editState.edit.form = {
-          ...editState.edit.form,
-          title: formData.title,
-          totalRespondents: formData.totalRespondents,
-          averageScore: formData.averageScore,
-        };
-  
-        await editState.edit.update();
-        toast.success("list survey berhasil diperbarui!");
-        router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey");
-      } catch (error) {
-        console.error("Error updating list survey:", error);
-        toast.error("Terjadi kesalahan saat memperbarui list survey");
-      }
-    };
-
-  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"}>Edit List Survey</Text>
-            <Paper>
-              <Stack gap={"xs"}>
-                <TextInput
-                  value={formData.title}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      title: val.target.value
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-                  placeholder='Masukkan judul'
-                />
-                <TextInput
-                  value={formData.totalRespondents}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      totalRespondents: Number(val.target.value)
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-                  placeholder='Masukkan total responden'
-                />
-                <TextInput
-                  value={formData.averageScore}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      averageScore: Number(val.target.value)
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Skor Rata-rata</Text>}
-                  placeholder='Masukkan skor'
-                />
-                <Group>
-                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default EditListSurvey;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/page.tsx

@@ -1,109 +0,0 @@
-'use client'
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useParams, useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function DetailKegiatanDesa() {
-  const detailState = useProxy(indeksKepuasanState.surveyState)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    detailState.findUnique.load(params?.id as string)
-  }, [])
-
-
-  const handleHapus = () => {
-    if (selectedId) {
-      detailState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey")
-    }
-  }
-
-  if (!detailState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={40} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail List Survey</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.title}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Total Responden</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.totalRespondents}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Rata-rata Skor</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.averageScore}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/${detailState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!detailState.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 list survey ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailKegiatanDesa;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/create/page.tsx

@@ -1,78 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat';
-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 { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-
-function CreateListSurvey() {
-  const router = useRouter();
-  const stateCreate = useProxy(indeksKepuasanState.surveyState)
-
-
-  useEffect(() => {
-    stateCreate.findMany.load();
-  }, []);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      title: "",
-      totalRespondents: 0,
-      averageScore: 0,
-    };
-  };
-  const handleSubmit = async () => {
-    await stateCreate.create.create();
-    resetForm();
-    router.push("/admin/landing-page/indeks-kepuasan-masyarakat/list-survey")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create List Survey</Title>
-          <TextInput
-            value={stateCreate.create.form.title}
-            onChange={(val) => {
-              stateCreate.create.form.title = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
-          />
-           <TextInput
-            value={stateCreate.create.form.totalRespondents}
-            onChange={(val) => {
-              stateCreate.create.form.totalRespondents = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Total Responden</Text>}
-            placeholder='Masukkan tahun'
-          />
-           <TextInput
-            value={stateCreate.create.form.averageScore}
-            onChange={(val) => {
-              stateCreate.create.form.averageScore = Number(val.target.value);
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Skor</Text>}
-            placeholder='Masukkan skor'
-          />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateListSurvey;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/page.tsx

@@ -1,103 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, 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 { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan-masyarakat';
-import JudulList from '../../../_com/judulList';
-
-
-
-function ListSurveyLandingPage() {
-  const [search, setSearch] = useState('');
-  return (
-    <Box>
-      <HeaderSearch
-        title='List Survey'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListSurvey search={search} />
-    </Box>
-  );
-}
-
-function ListSurvey({ search }: { search: string }) {
-  const listState = useProxy(indeksKepuasanState.surveyState)
-  const router = useRouter();
-  useEffect(() => {
-    listState.findMany.load()
-  }, [])
-
-  const filteredData = (listState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.title.toLowerCase().includes(keyword) ||
-      item.totalRespondents.toString().includes(keyword) ||
-      item.averageScore.toString().includes(keyword)
-    );
-  });
-
-  if (!listState.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Survey'
-            href='/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Total Responden</TableTh>
-                  <TableTh>Skor Rata-rata</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.title}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.totalRespondents}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text truncate="end" fz={"sm"}>{item.averageScore}</Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/list-survey/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ListSurveyLandingPage;

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

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

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

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

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

@@ -1,83 +0,0 @@
-'use client'
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { useRouter } from 'next/navigation';
-import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
-import { useProxy } from 'valtio/utils';
-import { useState } from 'react';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Title, TextInput } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-
-function GrafikBerdasarkanJenisKelaminRespondenCreate() {
-  const router = useRouter();
-  const stategrafikBerdasarkanJenisKelamin = useProxy(grafikBerdasarkanJenisKelamin)
-  const [donutData, setDonutData] = useState<any[]>([]);
-
-  const resetForm = () => {
-    stategrafikBerdasarkanJenisKelamin.create.form = {
-      ...stategrafikBerdasarkanJenisKelamin.create.form,
-      laki: "",
-      perempuan: "",
-    }
-  }
-
-  const handleSubmit = async () => {
-    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);
-    }
-  }
-  return (
-    <Box>
-       <Box mb={10}>
-         <Button variant="subtle" onClick={() => router.back()}>
-           <IconArrowBack size={20} />
-         </Button>
-       </Box>
-       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-         <Stack>
-           <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
-           <TextInput
-             label="Laki-laki"
-             type='number'
-             placeholder="masukkan jumlah"
-             value={stategrafikBerdasarkanJenisKelamin.create.form.laki}
-             onChange={(val) => {
-               stategrafikBerdasarkanJenisKelamin.create.form.laki = val.currentTarget.value;
-             }}
-           />
-           <TextInput
-             label="Perempuan"
-             type="number"
-             placeholder="masukkan jumlah"
-             value={stategrafikBerdasarkanJenisKelamin.create.form.perempuan}
-             onChange={(val) => {
-               stategrafikBerdasarkanJenisKelamin.create.form.perempuan = val.currentTarget.value;
-             }}
-           />
-           <Button
-             mt={10}
-             bg={colors['blue-button']}
-             onClick={handleSubmit}
-           >
-             Submit
-           </Button>
-         </Stack>
-       </Paper>
-     </Box>
-  );
-}
-
-export default GrafikBerdasarkanJenisKelaminRespondenCreate;

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

@@ -1,227 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
-import colors from '@/con/colors';
-import { Box, Button, 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 HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function GrafikBerdasarkanJenisKelamin() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Grafik Berdasarkan Jenis Kelamin Responden'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListGrafikBerdasarkanJenisKelamin search={search} />
-    </Box>
-  );
-}
-
-function ListGrafikBerdasarkanJenisKelamin({ search }: { search: string }) {
-  const stategrafikBerdasarkanJenisKelamin = useProxy(grafikBerdasarkanJenisKelamin)
-  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter();
-  const { 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) {
-      await grafikBerdasarkanJenisKelamin.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      stategrafikBerdasarkanJenisKelamin.findMany.load()
-    }
-  }
-
-  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={730} />
-      </Stack>
-    );
-  }
-  if (data.length === 0) {
-    return (
-      <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"} 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'
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <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>
-              {filteredData.length === 0 ? (
-                <TableTr>
-                  <TableTd colSpan={6}>
-                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
-                  </TableTd>
-                </TableTr>
-              ) : (
-                filteredData.map((item, index) => (
-                  <TableTr key={item.id}>
-                    <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 style={{ width: '15%', textAlign: 'center' }}>
-                      <Button
-                        color='red'
-                        disabled={stategrafikBerdasarkanJenisKelamin.delete.loading}
-                        onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
-                        }}>
-                        <IconTrash size={20} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              )}
-            </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 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}
-                >
-                  <Pie
-                    dataKey="value"
-                    nameKey="name"
-                    data={donutData}
-                    cx={500}
-                    cy={150}
-                    innerRadius={60}
-                    outerRadius={115}
-                    label={true}
-                  >
-                    {donutData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
-                </PieChart>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>Laki-laki: {donutData.find((entry) => entry.name === 'laki')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#10A85AFF'} w={20} h={20} />
-                  <Text>Perempuan: {donutData.find((entry) => entry.name === 'perempuan')?.value}</Text>
-                </Flex>
-              </Box>
-              )}
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik berdasarkan hasil responden ini?'
-      />
-    </Box>
-  );
-}
-
-export default GrafikBerdasarkanJenisKelamin;

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

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

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

@@ -1,98 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import grafikBerdasarkanResponden from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-function GrafikBerdasarkanRespondenCreate() {
-  const router = useRouter()
-  const stategrafikBerdasarkanResponden = useProxy(grafikBerdasarkanResponden)
-  const [donutData, setDonutData] = useState<any[]>([]);
-
-  const resetForm = () => {
-    stategrafikBerdasarkanResponden.create.form = {
-      ...stategrafikBerdasarkanResponden.create.form,
-      sangatbaik: "",
-      baik: "",
-      kurangbaik: "",
-      tidakbaik: "",
-    }
-  }
-
-  const handleSubmit = async () => {
-    const id = await stategrafikBerdasarkanResponden.create.create();
-    if (id) {
-      const idStr = String(id);
-      await stategrafikBerdasarkanResponden.findUnique.load(idStr);
-      if (stategrafikBerdasarkanResponden.findUnique.data) {
-        setDonutData([stategrafikBerdasarkanResponden.findUnique.data]);
-      }
-    }
-    resetForm();
-    router.push("/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden")
-  }
-  return (
-    <Box>
-       <Box mb={10}>
-         <Button variant="subtle" onClick={() => router.back()}>
-           <IconArrowBack size={20} />
-         </Button>
-       </Box>
-       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-         <Stack>
-           <Title order={3}>Grafik Hasil Kepuasan Masyarakat Berdasarkan Responden</Title>
-           <TextInput
-             label="Sangat Baik"
-             type='number'
-             placeholder="masukkan jumlah"
-             value={stategrafikBerdasarkanResponden.create.form.sangatbaik}
-             onChange={(val) => {
-               stategrafikBerdasarkanResponden.create.form.sangatbaik = val.currentTarget.value;
-             }}
-           />
-           <TextInput
-             label="Baik"
-             type="number"
-             placeholder="masukkan jumlah"
-             value={stategrafikBerdasarkanResponden.create.form.baik}
-             onChange={(val) => {
-               stategrafikBerdasarkanResponden.create.form.baik = val.currentTarget.value;
-             }}
-           />
-           <TextInput
-             label="Kurang Baik"
-             type="number"
-             placeholder="masukkan jumlah"
-             value={stategrafikBerdasarkanResponden.create.form.kurangbaik}
-             onChange={(val) => {
-               stategrafikBerdasarkanResponden.create.form.kurangbaik = val.currentTarget.value;
-             }}
-           />
-           <TextInput
-             label="Tidak Baik"
-             type="number"
-             placeholder="masukkan jumlah"
-             value={stategrafikBerdasarkanResponden.create.form.tidakbaik}
-             onChange={(val) => {
-               stategrafikBerdasarkanResponden.create.form.tidakbaik = val.currentTarget.value;
-             }}
-           />
-           <Button
-             mt={10}
-             bg={colors['blue-button']}
-             onClick={handleSubmit}
-           >
-             Submit
-           </Button>
-         </Stack>
-       </Paper>
-     </Box>
-  );
-}
-
-export default GrafikBerdasarkanRespondenCreate;

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

@@ -1,251 +0,0 @@
-'use client'
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import colors from '@/con/colors';
-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 HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import grafikBerdasarkanResponden from '../../../_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanResponden';
-
-function GrafikBerdasarkanResponden() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Grafik Berdasarkan Pilihan Responden'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListGrafikBerdasarkanResponden search={search} />
-    </Box>
-  );
-}
-
-function ListGrafikBerdasarkanResponden({ search }: { search: string }) {
-  const stategrafikBerdasarkanResponden = useSnapshot(grafikBerdasarkanResponden)
-  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter();
-
-  const { data, page, totalPages, loading, load } = stategrafikBerdasarkanResponden.findMany
-
-  useShallowEffect(() => {
-    setMounted(true)
-    load(page, 10)
-  }, [page])
-
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.sangatbaik.toString().toLowerCase().includes(keyword) ||
-      item.baik.toString().toLowerCase().includes(keyword) ||
-      item.kurangbaik.toString().toLowerCase().includes(keyword) ||
-      item.tidakbaik.toString().toLowerCase().includes(keyword)
-    );
-  });
-
-  useEffect(() => {
-    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' },
-        { name: 'kurangbaik', value: totalKurangBaik, color: '#B3AA12FF', key: 'kurangbaik' },
-        { name: 'tidakbaik', value: totalTidakBaik, color: '#B21313FF', key: 'tidakbaik' }
-      ]);
-    }
-
-  }, [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 (
-      <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"} h={{ base: 730, md: 650 }}>
-          <JudulList
-            title='List Data Berdasarkan Pilihan Responden'
-            href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden/create'
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <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>
-              {filteredData.length === 0 ? (
-                <TableTr>
-                  <TableTd colSpan={6}>
-                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
-                  </TableTd>
-                </TableTr>
-              ) : (
-                filteredData.map((item, index) => (
-                  <TableTr key={item.id}>
-                    <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 style={{ width: '5%', textAlign: 'center' }}>
-                      <Button
-                        color='red'
-                        disabled={stategrafikBerdasarkanResponden.delete.loading}
-                        onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
-                        }}>
-                        <IconTrash size={20} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              )}
-            </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 Pilihan Responden</Title>
-              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
-                <PieChart
-                  width={800} height={300}
-                  data={donutData}
-                >
-                  <Pie
-                    dataKey="value"
-                    nameKey="name"
-                    data={donutData}
-                    cx={500}
-                    cy={150}
-                    innerRadius={60}
-                    outerRadius={115}
-                    label={true}
-                  >
-                    {donutData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
-                </PieChart>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>Sangat Baik: {donutData.find((entry) => entry.name === 'sangatbaik')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#10A85AFF'} w={20} h={20} />
-                  <Text>Baik: {donutData.find((entry) => entry.name === 'baik')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#B3AA12FF'} w={20} h={20} />
-                  <Text>Kurang Baik: {donutData.find((entry) => entry.name === 'kurangbaik')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#B21313FF'} w={20} h={20} />
-                  <Text>Tidak Baik: {donutData.find((entry) => entry.name === 'tidakbaik')?.value}</Text>
-                </Flex>
-              </Box>
-              ) : (
-                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-              )}
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik berdasarkan hasil responden ini?'
-      />
-    </Box>
-  );
-}
-
-export default GrafikBerdasarkanResponden;

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

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

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

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

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

@@ -1,252 +0,0 @@
-'use client'
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import grafikBerdasarkanUmur from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanUmur';
-import colors from '@/con/colors';
-import { Box, Button, 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';
-
-function GrafikBerdasarakanUmur() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Grafik Berdasarkan Umur Responden'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListGrafikBerdasarakanUmur search={search} />
-    </Box>
-  );
-}
-
-function ListGrafikBerdasarakanUmur({ search }: { search: string }) {
-  const stategrafikBerdasarkanUmur = useProxy(grafikBerdasarkanUmur)
-  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter()
-  const { 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) {
-      await grafikBerdasarkanUmur.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      stategrafikBerdasarkanUmur.findMany.load()
-    }
-  }
-
-  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={730} />
-      </Stack>
-    );
-  }
-  if (data.length === 0) {
-    return (
-      <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"} h={{ base: 730, md: 650 }}>
-          <JudulListTab
-            title='List Data Berdasarkan Umur Responden'
-            href='/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh 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>
-              {filteredData.length === 0 ? (
-                <TableTr>
-                  <TableTd colSpan={6}>
-                    <Text ta='center' c='dimmed'>Belum ada data grafik responden</Text>
-                  </TableTd>
-                </TableTr>
-              ) : (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <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 style={{ textAlign: 'center' }}>
-                      <Button
-                        color='red'
-                        disabled={stategrafikBerdasarkanUmur.delete.loading}
-                        onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
-                        }}>
-                        <IconTrash size={20} />
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              )}
-            </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 Umur Berdasarkan Responden</Title>
-              {mounted && donutData.length > 0 ? (<Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
-                <PieChart
-                  width={800} height={300}
-                  data={donutData}
-                >
-                  <Pie
-                    dataKey="value"
-                    nameKey="name"
-                    data={donutData}
-                    cx={500}
-                    cy={150}
-                    innerRadius={60}
-                    outerRadius={115}
-                    label={true}
-                  >
-                    {donutData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
-                </PieChart>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>Remaja: {donutData.find((entry) => entry.name === 'remaja')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#D32711FF'} w={20} h={20} />
-                  <Text>Dewasa: {donutData.find((entry) => entry.name === 'dewasa')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#B46B04FF'} w={20} h={20} />
-                  <Text>Orangtua: {donutData.find((entry) => entry.name === 'orangtua')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#038617FF'} w={20} h={20} />
-                  <Text>Lansia: {donutData.find((entry) => entry.name === 'lansia')?.value}</Text>
-                </Flex>
-              </Box>
-              ) : (
-                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-              )}
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik berdasarkan hasil responden ini?'
-      />
-    </Box>
-  );
-}
-
-export default GrafikBerdasarakanUmur;

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

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

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

@@ -1,83 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-
-import grafikHasilKepuasanMasyarakat from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikHasilKepuasan';
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
-
-function GrafikHasilKepuasan() {
- const router = useRouter()
- const grafikHasilKepuasan = useProxy(grafikHasilKepuasanMasyarakat)
- const [chartData, setChartData] = useState<any[]>([]);
-
-
-const resetForm = () => {
-  grafikHasilKepuasan.create.form = {
-    ...grafikHasilKepuasan.create.form,
-    label: "",
-    kepuasan: "",
-  }
-}
-
-const handleSubmit = async () => {
-  const id = await grafikHasilKepuasan.create.create();
-  if (id) {
-    // Ensure id is a string
-    const idStr = String(id);
-    await grafikHasilKepuasan.findUnique.load(idStr);
-    if (grafikHasilKepuasan.findUnique.data) {
-      setChartData([grafikHasilKepuasan.findUnique.data]);
-    }
-  }
-  resetForm();
-  router.push("/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat")
-}
- return (
-   <Box>
-     
-       <Box mb={10}>
-         <Button variant="subtle" onClick={() => router.back()}>
-           <IconArrowBack size={20} />
-         </Button>
-       </Box>
-       <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-         <Stack>
-           <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
-           <TextInput
-             label="Label"
-             placeholder="masukkan label"
-             value={grafikHasilKepuasan.create.form.label}
-             onChange={(val) => {
-               grafikHasilKepuasan.create.form.label = val.currentTarget.value;
-             }}
-           />
-           <TextInput
-             label="Jumlah Kepuasan"
-             type="number"
-             placeholder="masukkan jumlah kepuasan"
-             value={grafikHasilKepuasan.create.form.kepuasan}
-             onChange={(val) => {
-               grafikHasilKepuasan.create.form.kepuasan = val.currentTarget.value;
-             }}
-           />
-           <Button
-             mt={10}
-             bg={colors['blue-button']}
-             onClick={handleSubmit}
-           >
-             Submit
-           </Button>
-         </Stack>
-       </Paper>
-     </Box>
- );
-}
-
-
-export default GrafikHasilKepuasan;

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

@@ -1,211 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-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';
-
-
-function GrafikHasilKepuasanMasyarakat() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Grafik Hasil Kepuasan Masyarakat'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListGrafikHasilKepuasanMasyarakat search={search} />
-    </Box>
-  );
-}
-
-function ListGrafikHasilKepuasanMasyarakat({ search }: { search: string }) {
-  type IKMGrafik = {
-    id: string;
-    label: string;
-    kepuasan: number;
-  }
-
-
-  const stateGrafikHasilKepuasan = useSnapshot(grafikHasilKepuasanMasyarakat)
-  const [mounted, setMounted] = useState(false);
-  const [chartData, setChartData] = useState<IKMGrafik[]>([]);
-  const isTablet = useMediaQuery('(max-width: 1024px)')
-  const isMobile = useMediaQuery('(max-width: 768px)')
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const router = useRouter();
-
-  const { 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)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      stateGrafikHasilKepuasan.findMany.load()
-    }
-  }
-
-  if (loading || !data) {
-    return (
-      <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'} h={{ base: 730, md: 650 }}>
-          <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 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, index) => (
-                <TableTr key={item.id}>
-                  <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 style={{ textAlign: 'center' }}>
-                    <Button
-                      color='red'
-                      disabled={stateGrafikHasilKepuasan.delete.loading}
-                      onClick={() => {
-                        setSelectedId(item.id)
-                        setModalHapus(true)
-                      }}>
-                      <IconTrash size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              ))}
-            </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}>Grafik Hasil Kepuasan Masyarakat</Title>
-              {mounted && chartData.length > 0 ? (
-                <BarChart width={isMobile ? 300 : isTablet ? 300 : 300} height={380} data={chartData} >
-                  <XAxis dataKey="label" />
-                  <YAxis />
-                  <Tooltip />
-                  <Legend />
-                  <Bar dataKey="kepuasan" fill={colors['blue-button']} name="Kepuasan" />
-                </BarChart>
-              ) : (
-                <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
-              )}
-            </Stack>
-          </Paper>
-        </Box>
-      </Stack>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik hasil kepuasan masyarakat ini?'
-      />
-    </Box>
-
-  );
-}
-
-export default GrafikHasilKepuasanMasyarakat;

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

@@ -0,0 +1,199 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+import colors from '@/con/colors';
+import { PieChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
+import {
+  Box,
+  Center,
+  Flex,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
+
+interface ChartDataItem {
+  name: string;
+  value: number;
+  color: string;
+  label?: string;
+}
+
+function Page() {
+  const state = useProxy(indeksKepuasanState.responden);
+  const { data, loading } = state.findMany;
+  const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
+  const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
+  const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
+
+  useShallowEffect(() => {
+    if (data) {
+      // Hitung total berdasarkan jenis kelamin
+      const totalLaki = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'laki-laki').length;
+      const totalPerempuan = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'perempuan').length;
+
+      // Hitung total berdasarkan rating
+      const totalSangatBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat baik').length;
+      const totalBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'baik').length;
+      const totalKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'kurang baik').length;
+      const totalSangatKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat kurang baik').length;
+
+      // Hitung total berdasarkan kelompok umur
+      const totalMuda = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'muda').length;
+      const totalDewasa = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'dewasa').length;
+      const totalLansia = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'lansia').length;
+
+      // Update gender chart data
+      setDonutDataJenisKelamin([
+        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
+        { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
+      ]);
+
+      // Update rating chart data
+      setDonutDataRating([
+        { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
+        { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
+        { name: 'Kurang Baik', value: totalKurangBaik, color: '#FFA500' },
+        { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
+      ]);
+
+      // Update age group chart data
+      setDonutDataKelompokUmur([
+        { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
+        { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
+        { name: 'Lansia', value: totalLansia, color: '#FFA500' },
+      ]);
+    }
+  }, [data]);
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Stack py={10}>
+        <Text c="dimmed" ta="center" my="md">
+          Belum ada data untuk ditampilkan
+        </Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="xs">
+
+
+
+      <SimpleGrid cols={{ base: 1, md: 3 }}>
+      {/* Chart Jenis Kelamin */}
+      <Paper bg={colors['white-1']} p="md" radius="md">
+        <Stack>
+          <Title order={4}>Jenis Kelamin</Title>
+          {donutDataJenisKelamin.every(item => item.value === 0) ? (
+            <Text c="dimmed" ta="center" my="md">
+              Belum ada data untuk ditampilkan dalam grafik
+            </Text>
+          ) : (
+            <Box>
+              <Center>
+                <PieChart
+                  withLabels
+                  withTooltip
+                  labelsType="percent"
+                  size={250}
+                  data={donutDataJenisKelamin}
+                />
+              </Center>
+              <Stack gap="sm" mt="md">
+                {donutDataJenisKelamin.map((entry) => (
+                  <Flex key={entry.name} gap="md" align="center">
+                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                    <Text size="sm">{entry.name}: {entry.value}</Text>
+                  </Flex>
+                ))}
+              </Stack>
+            </Box>
+          )}
+        </Stack>
+      </Paper>
+
+      {/* Chart Rating */}
+      <Paper bg={colors['white-1']} p="md" radius="md">
+        <Stack>
+          <Title order={4}>Pilihan</Title>
+          {donutDataRating.every(item => item.value === 0) ? (
+            <Text c="dimmed" ta="center" my="md">
+              Belum ada data untuk ditampilkan dalam grafik
+            </Text>
+          ) : (
+            <Box>
+              <Center>
+                <PieChart
+                  withLabels
+                  withTooltip
+                  labelsType="percent"
+                  size={250}
+                  data={donutDataRating}
+                />
+              </Center>
+              <Stack gap="sm" mt="md">
+                {donutDataRating.map((entry) => (
+                  <Flex key={entry.name} gap="md" align="center">
+                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                    <Text size="sm">{entry.name}: {entry.value}</Text>
+                  </Flex>
+                ))}
+              </Stack>
+            </Box>
+          )}
+        </Stack>
+      </Paper>
+
+      {/* Chart Kelompok Umur */}
+      <Paper bg={colors['white-1']} p="md" radius="md">
+        <Stack>
+          <Title order={4}>Umur</Title>
+          {donutDataKelompokUmur.every(item => item.value === 0) ? (
+            <Text c="dimmed" ta="center" my="md">
+              Belum ada data untuk ditampilkan dalam grafik
+            </Text>
+          ) : (
+            <Box>
+              <Center>
+                <PieChart
+                  withLabels
+                  withTooltip
+                  labelsType="percent"
+                  size={250}
+                  data={donutDataKelompokUmur}
+                />
+              </Center>
+              <Stack gap="sm" mt="md">
+                {donutDataKelompokUmur.map((entry) => (
+                  <Flex key={entry.name} gap="md" align="center">
+                    <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                    <Text size="sm">{entry.name}: {entry.value}</Text>
+                  </Flex>
+                ))}
+              </Stack>
+            </Box>
+          )}
+        </Stack>
+      </Paper>
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;

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

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

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

@@ -0,0 +1,137 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput, Text, Select } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
+
+function EditResponden() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const state = useProxy(indeksKepuasanState.responden)
+  const id = params.id
+
+  useEffect(() => {
+    if (id) {
+      state.findUnique.load(id).then(() => {
+        const data = state.findUnique.data
+        if (data) {
+          state.update.form = {
+            name: data.name || '',
+            tanggal: data.tanggal ? new Date(data.tanggal).toISOString() : new Date().toISOString(),
+            jenisKelaminId: data.jenisKelaminId || '',
+            ratingId: data.ratingId || '',
+            kelompokUmurId: data.kelompokUmurId || '',
+          }
+        }
+      })
+    }
+  }, [id])
+
+  const handleSubmit = async () => {
+    state.update.id = id;
+    await state.update.submit();
+    router.push('/admin/ppid/ikm-desa-darmasaba/responden')
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Responden</Title>
+          <TextInput
+            label="Nama"
+            type='text'
+            placeholder="masukkan nama"
+            value={state.update.form.name}
+            onChange={(val) => {
+              state.update.form.name = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Tanggal"
+            type="date"
+            placeholder="masukkan tanggal"
+            value={state.update.form.tanggal}
+            onChange={(val) => {
+              state.update.form.tanggal = val.currentTarget.value;
+            }}
+          />
+          <Select
+            value={state.update.form.jenisKelaminId}
+            onChange={(val) => {
+              state.update.form.jenisKelaminId = val || "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jenis Kelamin</Text>}
+            placeholder='Pilih jenis kelamin'
+            data={
+              indeksKepuasanState.jenisKelaminResponden.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!state.update.form.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
+          />
+           <Select
+            value={state.update.form.ratingId}
+            onChange={(val) => {
+              state.update.form.ratingId = val || "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Rating</Text>}
+            placeholder='Pilih rating'
+            data={
+              indeksKepuasanState.pilihanRatingResponden.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!state.update.form.ratingId ? "Pilih rating" : undefined}
+          />
+
+          <Select
+            value={state.update.form.kelompokUmurId}
+            onChange={(val) => {
+              state.update.form.kelompokUmurId = val || "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Kelompok Umur</Text>}
+            placeholder='Pilih kelompok umur'
+            data={
+              indeksKepuasanState.kelompokUmurResponden.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama
+              })) || []
+            }
+            clearable
+            searchable
+            required
+            error={!state.update.form.kelompokUmurId ? "Pilih kelompok umur" : undefined}
+          />
+
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditResponden;

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

@@ -0,0 +1,91 @@
+'use client'
+
+import { ModalKonfirmasiHapus } from "@/app/admin/(dashboard)/_com/modalKonfirmasiHapus"
+import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan"
+import colors from "@/con/colors"
+import { Box, Button, Paper, Skeleton, Stack, Text } from "@mantine/core"
+import { useShallowEffect } from "@mantine/hooks"
+import { IconArrowBack } from "@tabler/icons-react"
+import { useRouter, useParams } from "next/navigation"
+import { useState } from "react"
+import { useProxy } from "valtio/utils"
+
+export default function DetailResponden(){
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateDetail = useProxy(indeksKepuasanState.responden)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateDetail.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDetail.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ppid/ikm-desa-darmasaba/responden")
+    }
+  }
+
+  if(!stateDetail.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 Responden</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Responden</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Tanggal</Text>
+                <Text fz={"lg"}>{
+                  stateDetail.findUnique.data?.tanggal 
+                    ? new Date(stateDetail.findUnique.data.tanggal).toLocaleDateString('id-ID')
+                    : '-' 
+                }</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jenis Kelamin</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.jenisKelamin?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Rating</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.rating?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Kelompok Umur</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.kelompokUmur?.name}</Text>
+              </Box>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus responden ini?"
+      /> 
+    </Box>
+  )
+}

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

@@ -0,0 +1,148 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput, Select, Text } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
+import { useShallowEffect } from '@mantine/hooks';
+
+function RespondenCreate() {
+  const router = useRouter();
+  const stategrafikBerdasarkanResponden = useProxy(indeksKepuasanState.responden)
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  const resetForm = () => {
+    stategrafikBerdasarkanResponden.create.form = {
+      ...stategrafikBerdasarkanResponden.create.form,
+      name: "",
+      tanggal: "",
+      jenisKelaminId: "",
+      ratingId: "",
+      kelompokUmurId: "",
+    }
+  }
+
+  useShallowEffect(() => {
+    indeksKepuasanState.jenisKelaminResponden.findMany.load()
+    indeksKepuasanState.pilihanRatingResponden.findMany.load()
+    indeksKepuasanState.kelompokUmurResponden.findMany.load()
+  })
+
+  const handleSubmit = async () => {
+    try {
+      const id = await stategrafikBerdasarkanResponden.create.create();
+      if (typeof id !== 'undefined') {
+        const idStr = String(id);
+        await stategrafikBerdasarkanResponden.findUnique.load(idStr);
+        if (stategrafikBerdasarkanResponden.findUnique.data) {
+          setDonutData([stategrafikBerdasarkanResponden.findUnique.data]);
+        }
+      }
+      resetForm();
+      router.push("/admin/ppid/ikm-desa-darmasaba/responden");
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+          <TextInput
+            label="Nama"
+            type='text'
+            placeholder="masukkan nama"
+            value={stategrafikBerdasarkanResponden.create.form.name}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.name = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Tanggal"
+            type="date"
+            placeholder="masukkan tanggal"
+            value={stategrafikBerdasarkanResponden.create.form.tanggal}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.tanggal = val.currentTarget.value;
+            }}
+          />
+          <Select
+            key={"jenisKelamin"}
+            label={"Jenis Kelamin"}
+            placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
+            value={stategrafikBerdasarkanResponden.create.form.jenisKelaminId || ""}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.jenisKelaminId = val ?? "";
+            }}
+            data={
+              (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null, undefined, dll
+                .map((item) => ({
+                  value: item.id,
+                  label: item.name || 'Tanpa Nama',
+                }))
+            }
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
+          />
+            <Select
+            key={"rating_responden"}
+              label={"Rating"}
+              placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
+              value={stategrafikBerdasarkanResponden.create.form.ratingId || ""}
+              onChange={(val) => {
+                stategrafikBerdasarkanResponden.create.form.ratingId = val ?? "";
+              }}
+              data={
+                (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                  .filter(Boolean) // Hapus null, undefined, dll
+                  .map((item) => ({
+                    value: item.id,
+                    label: item.name || 'Tanpa Nama',
+                  }))
+              }
+              disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+            />
+          <Select
+            key={"kelompokUmur"}
+            label={"Kelompok Umur"}
+            placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
+            value={stategrafikBerdasarkanResponden.create.form.kelompokUmurId || ""}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.kelompokUmurId = val ?? "";
+            }}
+            data={
+              (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null, undefined, dll
+                .map((item) => ({
+                  value: item.id,
+                  label: item.name || 'Tanpa Nama',
+                }))
+            }
+            disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default RespondenCreate;

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

@@ -0,0 +1,151 @@
+'use client';
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, 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 indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
+
+function Responden() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Responden'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListResponden search={search} />
+    </Box>
+  );
+}
+
+interface ListRespondenProps {
+  search: string;
+}
+
+function ListResponden({ search }: ListRespondenProps) {
+  const state = useProxy(indeksKepuasanState.responden);
+  const router = useRouter();
+  const { data, page, totalPages, loading, load } = state.findMany;
+
+
+  useShallowEffect(() => {
+    load(page, 10)
+  }, [page]);
+
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md">
+          <Stack>
+            <JudulList
+              title='List Data Berdasarkan Jenis Kelamin Responden'
+              href='/admin/ppid/ikm-desa-darmasaba/responden/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Tanggal</TableTh>
+                  <TableTh>Jenis Kelamin</TableTh>
+                  <TableTh>Detail</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" h={{ base: 730, md: 650 }}>
+          <JudulList
+            title='List Data Responden'
+            href='/admin/ppid/ikm-desa-darmasaba/responden/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Nama</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.name}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
+                      ? new Date(item.tanggal).toLocaleDateString('id-ID')
+                      : '-'}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.jenisKelamin.name}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
+                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}>
+                        <IconDeviceImac size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+          </Table>
+        </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
+
+       
+      </Stack>
+    </Box>
+  );
+}
+
+export default Responden;
+
+

src/app/admin/_com/list_PageAdmin.tsx

@@ -79,7 +79,7 @@ export const navBar = [
       {
         id: "PPID_8",
         name: "IKM Desa Darmasaba",
-        path: "/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat"
+        path: "/admin/ppid/ikm-desa-darmasaba/indeks-kepuasan-masyarakat"
       },
 
     ]
@@ -103,12 +103,12 @@ export const navBar = [
       {
         id: "Desa_3",
         name: "Berita",
-        path: "/admin/desa/berita"
+        path: "/admin/desa/berita/list-berita"
       },
       {
         id: "Desa_4",
         name: "Pengumuman",
-        path: "/admin/desa/pengumuman"
+        path: "/admin/desa/pengumuman/list-pengumuman"
       },
       {
         id: "Desa_5",

src/app/api/[[...slugs]]/_lib/desa/berita/category.ts

@@ -1,9 +0,0 @@
-import prisma from "@/lib/prisma";
-
- async function kategoriBeritaFindMany() {
-  const data = await prisma.kategoriBerita.findMany();
-  return { data };
-}
-
-export default kategoriBeritaFindMany
-

src/app/api/[[...slugs]]/_lib/desa/berita/find-many.ts

@@ -1,44 +1,71 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 // /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
 async function beritaFindMany(context: Context) {
+  // Ambil parameter dari query
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const kategori = (context.query.kategori as string) || ''; // 🔥 Parameter kategori baru
   const skip = (page - 1) * limit;
 
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan kategori (jika ada)
+  if (kategori) {
+    where.kategoriBerita = {
+      name: {
+        equals: kategori,
+        mode: 'insensitive' // Tidak case-sensitive
+      }
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+      { content: { contains: search, mode: 'insensitive' } },
+      { kategoriBerita: { name: { contains: search, mode: 'insensitive' } } }
+    ];
+  }
+
   try {
+    // Ambil data dan total count secara paralel
     const [data, total] = await Promise.all([
       prisma.berita.findMany({
-        where: { isActive: true },
+        where,
         include: {
           image: true,
           kategoriBerita: true,
         },
         skip,
         take: limit,
-        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { createdAt: 'desc' },
       }),
-      prisma.berita.count({
-        where: { isActive: true }
-      })
+      prisma.berita.count({ where }),
     ]);
 
     return {
       success: true,
-      message: "Success fetch berita with pagination",
+      message: "Berhasil ambil berita dengan pagination",
       data,
       page,
-      totalPages: Math.ceil(total / limit),
+      limit,
       total,
+      totalPages: Math.ceil(total / limit),
     };
   } catch (e) {
-    console.error("Find many paginated error:", e);
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message: "Failed fetch berita with pagination",
+      message: "Gagal mengambil data berita",
     };
   }
 }
 
-export default beritaFindMany;
+export default beritaFindMany;

src/app/api/[[...slugs]]/_lib/desa/berita/findFirst.ts

@@ -1,30 +1,41 @@
-import prisma from '@/lib/prisma';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// find-first.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function beritaFindFirst(context: Context) {
+  const kategori = (context.query.kategori as string) || '';
+
+  const where: any = { isActive: true };
+
+  if (kategori) {
+    where.kategoriBerita = {
+      name: { equals: kategori, mode: 'insensitive' }
+    };
+  }
 
-export default async function beritaFindFirst() {
   try {
-    const result = await prisma.berita.findFirst({
-      where: {
-        isActive: true, // opsional kalau kamu punya field ini
-      },
-      orderBy: {
-        createdAt: 'desc', // ambil yang paling terbaru
-      },
+    const data = await prisma.berita.findFirst({
+      where,
       include: {
         image: true,
         kategoriBerita: true,
-      }
+      },
+      orderBy: { createdAt: 'desc' },
     });
 
     return {
       success: true,
-      message: 'Berhasil ambil berita terbaru',
-      data: result,
+      message: "Berhasil ambil berita terbaru",
+      data,
     };
-  } catch (error) {
-    console.error('[findFirstBerita] Error:', error);
+  } catch (e) {
+    console.error("Error di findFirst:", e);
     return {
       success: false,
-      message: 'Gagal ambil berita terbaru',
+      message: "Gagal ambil berita terbaru",
     };
   }
 }
+
+export default beritaFindFirst;

src/app/api/[[...slugs]]/_lib/desa/berita/findManyUI.ts

@@ -0,0 +1,14 @@
+import prisma from "@/lib/prisma";
+
+export default async function findManyUI() {
+  const data = await prisma.berita.findMany({
+    include: {
+      image: true,
+      kategoriBerita: true,
+    },
+  });
+  return {
+    success: true,
+    data,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/berita/index.ts

@@ -1,5 +1,4 @@
 import Elysia, { t } from "elysia";
-import kategoriBeritaFindMany from "./category";
 import beritaFindMany from "./find-many";
 import beritaCreate from "./create";
 import beritaDelete from "./del";
@@ -9,8 +8,8 @@ import beritaFindFirst from "./findFirst";
 import findRecentBerita from "./findRecent";
 
 const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
-  .get("/category/find-many", kategoriBeritaFindMany)
   .get("/find-many", beritaFindMany)
+  .get("/find-many-ui", beritaFindMany)
   .get("/:id", async (context) => {
       const response = await findBeritaById(new Request(context.request));
       return response;

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    name: string;
+}
+
+export default async function kategoriBeritaCreate(context: Context) {
+    const body = (await context.body) as FormCreate;
+
+    try {
+        const result = await prisma.kategoriBerita.create({
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil membuat kategori berita",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error creating kategori berita:", error);
+        throw new Error("Gagal membuat kategori berita: " + (error as Error).message);
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/del.ts

@@ -0,0 +1,16 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function kategoriBeritaDelete(context: Context) {
+    const id = context.params.id as string;
+
+    await prisma.kategoriBerita.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        success: true,
+        message: "Success delete kategori berita",
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findMany.ts

@@ -0,0 +1,11 @@
+import prisma from "@/lib/prisma";
+
+export default async function kategoriBeritaFindMany() {
+  const data = await prisma.kategoriBerita.findMany();
+
+  return {
+    success: true,
+    message: "Success get all kategori berita",
+    data,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function kategoriBeritaFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.kategoriBerita.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get kategori berita",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/index.ts

@@ -0,0 +1,33 @@
+import Elysia, { t } from "elysia";
+import kategoriBeritaCreate from "./create";
+import kategoriBeritaDelete from "./del";
+import kategoriBeritaFindMany from "./findMany";
+import kategoriBeritaFindUnique from "./findUnique";
+import kategoriBeritaUpdate from "./updt";
+
+const KategoriBerita = new Elysia({
+    prefix: "/kategoriberita",
+    tags: ["Desa / Berita / Kategori Berita"],
+})
+
+ .post("/create", kategoriBeritaCreate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+
+  .get("/findMany", kategoriBeritaFindMany)
+  .get("/:id", async (context) => {
+    const response = await kategoriBeritaFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", kategoriBeritaUpdate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+  .delete("/del/:id", kategoriBeritaDelete);
+
+export default KategoriBerita;

src/app/api/[[...slugs]]/_lib/desa/berita/kategori-berita/updt.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    name: string;
+}
+
+export default async function kategoriBeritaUpdate(context: Context) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.kategoriBerita.update({
+            where: { id },
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil mengupdate kategori berita",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating kategori berita:", error);
+        throw new Error("Gagal mengupdate kategori berita: " + (error as Error).message);
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/gallery/foto/find-many.ts

@@ -1,25 +1,57 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-async function galleryFotoFindMany() {
-    try {
-        const data = await prisma.galleryFoto.findMany({
-            where: { isActive: true },
-            include: {
-                imageGalleryFoto: true,
-            },
-        });
+async function galleryFotoFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
 
-        return {
-            success: true,
-            message: "Success fetch gallery foto",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch gallery foto",
-        };
-    }
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.galleryFoto.findMany({
+        where,
+        include: {
+          imageGalleryFoto: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.galleryFoto.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil foto dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data foto",
+    };
+  }
 }
-export default galleryFotoFindMany
+
+export default galleryFotoFindMany;

src/app/api/[[...slugs]]/_lib/desa/gallery/foto/findRecent.ts

@@ -0,0 +1,18 @@
+import prisma from "@/lib/prisma";
+
+export default async function galleryFotoFindRecent() {
+  const result = await prisma.galleryFoto.findMany({
+    orderBy: {
+      createdAt: "desc",
+    },
+    take: 3, // ambil 4 data terbaru
+    include: {
+      imageGalleryFoto: true,
+    },
+  });
+
+  return {
+    success: true,
+    data: result,
+  };
+}

src/app/api/[[...slugs]]/_lib/desa/gallery/foto/index.ts

@@ -4,6 +4,7 @@ import galleryFotoDelete from "./del";
 import galleryFotoFindMany from "./find-many";
 import galleryFotoUpdate from "./updt";
 import galleryFotoFindUnique from "./findUnique";
+import galleryFotoFindRecent from "./findRecent";
 
 const GalleryFoto = new Elysia({ prefix: "/gallery/foto", tags: ["Desa/Gallery/Foto"] })
     .get("/find-many", galleryFotoFindMany)
@@ -18,6 +19,7 @@ const GalleryFoto = new Elysia({ prefix: "/gallery/foto", tags: ["Desa/Gallery/F
             imagesId: t.String(),
         }),
     })
+    .get("/find-recent", galleryFotoFindRecent)
     .delete("/del/:id", galleryFotoDelete)
     .put("/:id", async (context) => {
         const response = await galleryFotoUpdate(context);

src/app/api/[[...slugs]]/_lib/desa/gallery/video/find-many.ts

@@ -1,22 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-async function galleryVideoFindMany() {
-    try {
-        const data = await prisma.galleryVideo.findMany({
-            where: { isActive: true },
-        });
+async function galleryVideoFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
 
-        return {
-            success: true,
-            message: "Success fetch gallery video",
-            data,
-        };
-    } catch (e) {
-        console.error("Find many error:", e);
-        return {
-            success: false,
-            message: "Failed fetch gallery video",
-        };
-    }
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } }
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.galleryVideo.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.galleryVideo.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil video dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data video",
+    };
+  }
 }
+
 export default galleryVideoFindMany;

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

@@ -8,6 +8,8 @@ import GalleryVideo from "./gallery/video";
 import LayananDesa from "./layanan";
 import Penghargaan from "./penghargaan";
 import KategoriPotensi from "./potensi/kategori-potensi";
+import KategoriBerita from "./berita/kategori-berita";
+import KategoriPengumuman from "./pengumuman/kategori-pengumuman";
 
 
 const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
@@ -20,5 +22,7 @@ const Desa = new Elysia({ prefix: "/api/desa", tags: ["Desa"] })
   .use(LayananDesa)
   .use(Penghargaan)
   .use(KategoriPotensi)
+  .use(KategoriBerita)
+  .use(KategoriPengumuman)
 
 export default Desa;

src/app/api/[[...slugs]]/_lib/desa/pengumuman/find-many.ts

@@ -1,23 +1,70 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// /api/berita/findManyPaginated.ts
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function pengumumanFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const kategori = (context.query.kategori as string) || ''; // 🔥 Parameter kategori baru
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Filter berdasarkan kategori (jika ada)
+  if (kategori) {
+    where.CategoryPengumuman = {
+      name: {
+        equals: kategori,
+        mode: 'insensitive' // Tidak case-sensitive
+      }
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { judul: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+      { content: { contains: search, mode: 'insensitive' } },
+      { CategoryPengumuman: { name: { contains: search, mode: 'insensitive' } } }
+    ];
+  }
 
-export default async function pengumumanFindMany() {
   try {
-    const data = await prisma.pengumuman.findMany({
-      where: { isActive: true },
-      include: {
-        CategoryPengumuman: true,
-      },
-    });
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.pengumuman.findMany({
+        where,
+        include: {
+          CategoryPengumuman: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.pengumuman.count({ where }),
+    ]);
+
     return {
       success: true,
-      message: "Success fetch pengumuman",
+      message: "Berhasil ambil pengumuman dengan pagination",
       data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
     };
   } catch (e) {
-    console.error("Find many error:", e);
+    console.error("Error di findMany paginated:", e);
     return {
       success: false,
-      message: "Failed fetch pengumuman",
+      message: "Gagal mengambil data pengumuman",
     };
   }
 }
+
+export default pengumumanFindMany;

src/app/api/[[...slugs]]/_lib/desa/pengumuman/index.ts

@@ -1,19 +1,16 @@
-import Elysia from "elysia";
+import Elysia, { t } from "elysia";
 import { pengumumanCreate } from "./create";
-import pengumumanFindMany from "./find-many";
-import { t } from "elysia";
-import pengumumanCategoryFindMany from "./category";
 import pengumumanDelete from "./del";
 import pengumumanFindById from "./find-by-id";
-import pengumumanUpdate from "./updt";
+import pengumumanFindMany from "./find-many";
 import pengumumanFindFirst from "./findFirst";
 import pengumumanFindRecent from "./findRecent";
+import pengumumanUpdate from "./updt";
 
 const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"] })
-  .get("/category/find-many", pengumumanCategoryFindMany)
   .get("/find-many", pengumumanFindMany)
   .get("/:id", pengumumanFindById)
-  .delete("/delete/:id", pengumumanDelete)
+  .delete("/del/:id", pengumumanDelete)
   .post("/create", pengumumanCreate, {
     body: t.Object({
       judul: t.String(),
@@ -26,7 +23,6 @@ const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"]
   .get("/find-recent", pengumumanFindRecent)
   .put("/:id", pengumumanUpdate, {
     body: t.Object({
-      id: t.String(),
       judul: t.String(),
       deskripsi: t.String(),
       content: t.String(),

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    name: string;
+}
+
+export default async function kategoriPengumumanCreate(context: Context) {
+    const body = (await context.body) as FormCreate;
+
+    try {
+        const result = await prisma.categoryPengumuman.create({
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil membuat kategori pengumuman",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error creating kategori pengumuman:", error);
+        throw new Error("Gagal membuat kategori pengumuman: " + (error as Error).message);
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/del.ts

@@ -0,0 +1,16 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function kategoriPengumumanDelete(context: Context) {
+    const id = context.params.id as string;
+
+    await prisma.categoryPengumuman.delete({
+        where: { id },
+    });
+
+    return {
+        status: 200,
+        success: true,
+        message: "Success delete kategori pengumuman",
+    };
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/findMany.ts

@@ -0,0 +1,16 @@
+import prisma from "@/lib/prisma";
+
+async function kategoriPengumumanFindMany() {
+  const data = await prisma.categoryPengumuman.findMany({
+    include: {
+      _count: {
+        select: {
+          pengumumans: true
+        }
+      }
+    }
+  });
+  return { data };
+}
+
+export default kategoriPengumumanFindMany

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/findUnique.ts

@@ -0,0 +1,46 @@
+import prisma from "@/lib/prisma";
+
+export default async function kategoriPengumumanFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split('/');
+    const id = pathSegments[pathSegments.length - 1];
+    
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return {
+                success: false,
+                message: "ID is required",
+            }
+        }
+
+        const data = await prisma.categoryPengumuman.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Data not found",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success get kategori pengumuman",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil data: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/index.ts

@@ -0,0 +1,33 @@
+import Elysia, { t } from "elysia";
+import kategoriPengumumanCreate from "./create";
+import kategoriPengumumanDelete from "./del";
+import kategoriPengumumanFindMany from "./findMany";
+import kategoriPengumumanFindUnique from "./findUnique";
+import kategoriPengumumanUpdate from "./updt";
+
+const KategoriPengumuman = new Elysia({
+    prefix: "/kategoripengumuman",
+    tags: ["Desa / Pengumuman / Kategori Pengumuman"],
+})
+
+ .post("/create", kategoriPengumumanCreate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+
+  .get("/findMany", kategoriPengumumanFindMany)
+  .get("/:id", async (context) => {
+    const response = await kategoriPengumumanFindUnique(
+      new Request(context.request)
+    );
+    return response;
+  })
+  .put("/:id", kategoriPengumumanUpdate, {
+    body: t.Object({
+      name: t.String(),
+    }),
+  })
+  .delete("/del/:id", kategoriPengumumanDelete);
+
+export default KategoriPengumuman;

src/app/api/[[...slugs]]/_lib/desa/pengumuman/kategori-pengumuman/updt.ts

@@ -0,0 +1,28 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormUpdate = {
+    name: string;
+}
+
+export default async function kategoriPengumumanUpdate(context: Context) {
+    const body = (await context.body) as FormUpdate;
+    const id = context.params.id as string;
+
+    try {
+        const result = await prisma.categoryPengumuman.update({
+            where: { id },
+            data: {
+                name: body.name,
+            },
+        });
+        return {
+            success: true,
+            message: "Berhasil mengupdate kategori pengumuman",
+            data: result,
+        };
+    } catch (error) {
+        console.error("Error updating kategori pengumuman:", error);
+        throw new Error("Gagal mengupdate kategori pengumuman: " + (error as Error).message);
+    }
+}

src/app/api/[[...slugs]]/_lib/desa/pengumuman/updt.ts

@@ -3,37 +3,75 @@ import { Prisma } from "@prisma/client";
 import { Context } from "elysia";
 
 type FormUpdate = Prisma.PengumumanGetPayload<{
-    select: {
-        id: true;
-        judul: true;
-        deskripsi: true;
-        content: true;
-        categoryPengumumanId: true;
-        imageId: true;
-    };
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+    content: true;
+    categoryPengumumanId: true;
+  };
 }>;
 
 async function pengumumanUpdate(context: Context) {
-    const body = context.body as FormUpdate;
-
-    await prisma.pengumuman.update({
-        where: { id: body.id },
-        data: {
-            judul: body.judul,
-            deskripsi: body.deskripsi,
-            content: body.content,
-            categoryPengumumanId: body.categoryPengumumanId,
-        },
+  try {
+    const id = context.params?.id as string; // ambil dari URL
+    const body = (await context.body) as Omit<FormUpdate, "id">;
+  
+    const {
+      judul,
+      deskripsi,
+      content,
+      categoryPengumumanId,
+    } = body;
+  
+    if (!id) {
+      return new Response(
+        JSON.stringify({ success: false, message: "ID tidak boleh kosong" }),
+        { status: 400, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  
+    const existing = await prisma.pengumuman.findUnique({
+      where: { id },
+      include: {
+        CategoryPengumuman: true,
+      },
     });
-
-    return {
+  
+    if (!existing) {
+      return new Response(
+        JSON.stringify({ success: false, message: "pengumuman tidak ditemukan" }),
+        { status: 404, headers: { 'Content-Type': 'application/json' } }
+      );
+    }
+  
+    const updated = await prisma.pengumuman.update({
+      where: { id },
+      data: {
+        judul,
+        deskripsi,
+        content,
+        categoryPengumumanId: categoryPengumumanId || null,
+      },
+    });
+  
+    return new Response(
+      JSON.stringify({
         success: true,
-        message: "Success update pengumuman",
-        data: {
-            ...body,
-        },
-    };
+        message: "pengumuman berhasil diupdate",
+        data: updated,
+      }),
+      { status: 200, headers: { 'Content-Type': 'application/json' } }
+    );
+  } catch (error) {
+    console.error("Error updating pengumuman:", error); 
+    return new Response(
+      JSON.stringify({
+        success: false,
+        message: "Terjadi kesalahan saat mengupdate pengumuman",
+      }),
+      { status: 500, headers: { 'Content-Type': 'application/json' } }
+    );
+  }
 }
-
-export default pengumumanUpdate;
-
+  export default pengumumanUpdate;

src/app/api/[[...slugs]]/_lib/fileStorage/_lib/findMany.ts

@@ -1,12 +1,65 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
-export const fileStorageFindMany = async (context: Context) => {
-  const category = context.query?.category as string | undefined;
-
-  const data = await prisma.fileStorage.findMany({
-    where: category ? { category } : {},
-  });
-
-  return { data };
+type WhereClause = {
+  category?: string;
+  isActive?: boolean;
+  OR?: Array<{
+    name?: { contains: string; mode: 'insensitive' };
+    realName?: { contains: string; mode: 'insensitive' };
+  }>;
+};
+
+export const fileStorageFindMany = async (context: Context) => {
+  try {
+    // Get query parameters with defaults
+    const page = Math.max(Number(context.query?.page) || 1, 1);
+    const limit = 10; // Fixed at 10 items per page
+    const category = context.query?.category as string | undefined;
+    const search = context.query?.search as string | undefined;
+    const skip = (page - 1) * limit;
+
+    // Build where clause with proper TypeScript types
+    const where: WhereClause = { isActive: true };
+    
+    if (category) where.category = category;
+    if (search) {
+      where.OR = [
+        { name: { contains: search, mode: 'insensitive' } },
+        { realName: { contains: search, mode: 'insensitive' } },
+      ];
+    }
+
+    // Get paginated data and total count
+    const [data, total] = await Promise.all([
+      prisma.fileStorage.findMany({
+        where,
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.fileStorage.count({ where }),
+    ]);
+
+    return {
+      data,
+      meta: {
+        page,
+        limit,
+        total,
+        totalPages: Math.ceil(total / limit),
+      },
+    };
+  } catch (error) {
+    console.error('Error in fileStorageFindMany:', error);
+    return {
+      data: [],
+      meta: {
+        page: 1,
+        limit: 10,
+        total: 0,
+        totalPages: 0,
+      },
+    };
+  }
 };

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/create.ts

@@ -1,33 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatCreate = async (context: Context) => {
-  const body = (await context.body) as {
-    group: string;
-    count: number;
-    monthlyStatId: string;
-  };
-
-  try {
-    const created = await prisma.ageStat.create({
-      data: {
-        group: body.group,
-        count: body.count,
-        monthlyStatId: body.monthlyStatId,
-      },
-    });
-
-    return {
-      success: true,
-      message: "Age Stat berhasil dibuat",
-      data: created,
-    };
-  } catch (error) {
-    console.error("Gagal create age stat:", error);
-    return {
-      success: false,
-      message: "Gagal membuat data age stat",
-    };
-  }
-};
-export default ageStatCreate;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/del.ts

@@ -1,24 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatDelete = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    await prisma.ageStat.delete({
-      where: { id },
-    });
-
-    return {
-      success: true,
-      message: "Data age berhasil dihapus",
-    };
-  } catch (error) {
-    console.error("Gagal hapus Age Stat:", error);
-    return {
-      success: false,
-      message: "Gagal menghapus data age stat",
-    };
-  }
-};
-export default ageStatDelete;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/findMany.ts

@@ -1,26 +0,0 @@
-import prisma from "@/lib/prisma";
-
-export const ageStatFindMany = async () => {
-  try {
-    const result = await prisma.ageStat.findMany({
-      include: {
-        MonthlyStat: true,
-      },
-      orderBy: {
-        id: "desc",
-      },
-    });
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Age Stat:", error);
-    return {
-      success: false,
-      message: "Gagal mengambil data age stat",
-    };
-  }
-};
-export default ageStatFindMany;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/findUnique.ts

@@ -1,34 +0,0 @@
-import { Context } from "elysia";
-import prisma from "@/lib/prisma";
-
-export const ageStatFindUnique = async (context: Context) => {
-  const { id } = context.params as { id: string };
-
-  try {
-    const result = await prisma.ageStat.findUnique({
-      where: { id },
-      include: {
-        MonthlyStat: true,
-      },
-    });
-
-    if (!result) {
-      return {
-        success: false,
-        message: "Data age tidak ditemukan",
-      };
-    }
-
-    return {
-      success: true,
-      data: result,
-    };
-  } catch (error) {
-    console.error("Gagal ambil data Age Stat:", error);
-    return {
-      success: false,
-      message: "Terjadi kesalahan saat mengambil data age stat",
-    };
-  }
-};
-export default ageStatFindUnique;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/age/index.ts

@@ -1,31 +0,0 @@
-import Elysia, { t } from "elysia";
-import ageStatCreate from "./create";
-import ageStatDelete from "./del";
-import ageStatFindMany from "./findMany";
-import ageStatFindUnique from "./findUnique";
-import ageStatUpdate from "./updt";
-
-
-const age = new Elysia({
-  prefix: "/age",
-  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Age"],
-})
-  .post("/create", ageStatCreate, {
-    body: t.Object({
-      monthlyStatId: t.String(),
-      group: t.String(),
-      count: t.Number(),
-    }),
-  })
-  .get("/findMany", ageStatFindMany)
-  .get("/:id", ageStatFindUnique)
-  .put("/:id", ageStatUpdate, {
-    body: t.Object({
-      group: t.String(),
-      count: t.Number(),
-      monthlyStatId: t.String(),
-    }),
-  })
-  .delete("/del/:id", ageStatDelete);
-
-export default age;