API & UI Menu Lingkungan, Submenu Penglolaan Sampah

package.json

@@ -53,6 +53,7 @@
     "framer-motion": "^12.23.5",
     "get-port": "^7.1.0",
     "jotai": "^2.12.3",
+    "list": "^2.0.19",
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
     "nanoid": "^5.1.5",

prisma/schema.prisma

@@ -74,28 +74,18 @@ model FileStorage {
   ProgramKesehatan         ProgramKesehatan[]
   PenangananDarurat        PenangananDarurat[]
   KontakDarurat            KontakDarurat[]
-
-  InfoWabahPenyakit InfoWabahPenyakit[]
-
-  KeamananLingkungan KeamananLingkungan[]
-
-  MenuTipsKeamanan MenuTipsKeamanan[]
-
-  Pelapor Pelapor[]
-
-  PasarDesa PasarDesa[]
-
-  KontakDaruratKeamanan KontakDaruratKeamanan[]
-
-  KontakItem KontakItem[]
-
-  Pegawai Pegawai[]
-
-  DesaDigital DesaDigital[]
-
-  KolaborasiInovasi KolaborasiInovasi[]
-
-  InfoTekno InfoTekno[]
+  InfoWabahPenyakit        InfoWabahPenyakit[]
+  KeamananLingkungan       KeamananLingkungan[]
+  MenuTipsKeamanan         MenuTipsKeamanan[]
+  Pelapor                  Pelapor[]
+  PasarDesa                PasarDesa[]
+  KontakDaruratKeamanan    KontakDaruratKeamanan[]
+  KontakItem               KontakItem[]
+  Pegawai                  Pegawai[]
+  DesaDigital              DesaDigital[]
+  KolaborasiInovasi        KolaborasiInovasi[]
+  InfoTekno                InfoTekno[]
+  PengaduanMasyarakat      PengaduanMasyarakat[]
 }
 
 //========================================= MENU PPID ========================================= //
@@ -1405,25 +1395,65 @@ model AjukanIdeInovatif {
 
 // ========================================= LAYANAN ONLINE DESA ========================================= //
 model AdministrasiOnline {
-  id                               String                             @id @default(cuid())
-  name                             String
-  alamat                           String
-  nomorTelepon                     String
-  jenisLayanan                     JenisLayanan                       @relation(fields: [jenisLayananId], references: [id])
-  jenisLayananId                   String
-  createdAt                        DateTime                           @default(now())
-  updatedAt                        DateTime                           @updatedAt
-  deletedAt                        DateTime                           @default(now())
-  isActive                         Boolean                            @default(true)
+  id             String       @id @default(cuid())
+  name           String
+  alamat         String
+  nomorTelepon   String
+  jenisLayanan   JenisLayanan @relation(fields: [jenisLayananId], references: [id])
+  jenisLayananId String
+  createdAt      DateTime     @default(now())
+  updatedAt      DateTime     @updatedAt
+  deletedAt      DateTime     @default(now())
+  isActive       Boolean      @default(true)
 }
 
 model JenisLayanan {
-  id                               String                             @id @default(uuid())
-  nama                             String
-  deskripsi                        String                             @db.Text
-  createdAt                        DateTime                           @default(now())
-  updatedAt                        DateTime                           @updatedAt
-  deletedAt                        DateTime                           @default(now())
-  isActive                         Boolean                            @default(true)
-  AdministrasiOnline               AdministrasiOnline[]
+  id                 String               @id @default(uuid())
+  nama               String
+  deskripsi          String               @db.Text
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  deletedAt          DateTime             @default(now())
+  isActive           Boolean              @default(true)
+  AdministrasiOnline AdministrasiOnline[]
+}
+
+model PengaduanMasyarakat {
+  id                 String         @id @default(cuid())
+  name               String
+  email              String
+  nomorTelepon       String
+  nik                String
+  judulPengaduan     String
+  lokasiKejadian     String
+  image              FileStorage    @relation(fields: [imageId], references: [id])
+  imageId            String
+  deskripsiPengaduan String         @db.Text
+  jenisPengaduan     JenisPengaduan @relation(fields: [jenisPengaduanId], references: [id])
+  jenisPengaduanId   String
+  createdAt          DateTime       @default(now())
+  updatedAt          DateTime       @updatedAt
+  deletedAt          DateTime       @default(now())
+  isActive           Boolean        @default(true)
+}
+
+model JenisPengaduan {
+  id                  String                @id @default(uuid())
+  nama                String
+  createdAt           DateTime              @default(now())
+  updatedAt           DateTime              @updatedAt
+  deletedAt           DateTime              @default(now())
+  isActive            Boolean               @default(true)
+  PengaduanMasyarakat PengaduanMasyarakat[]
+}
+
+// ========================================= PENGELOLAAN SAMPAH ========================================= //
+model PengelolaanSampah {
+  id        String   @id @default(cuid())
+  name      String
+  icon      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
 }

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

@@ -263,6 +263,59 @@ const berita = proxy({
       berita.edit.form = { ...defaultForm };
     },
   },
+  findFirst: {
+    data: null as Prisma.BeritaGetPayload<{
+      include: {
+        image: true;
+        kategoriBerita: true;
+      };
+    }> | null,
+    loading: false,
+    async load() {
+      this.loading = true;
+      try {
+        const res = await ApiFetch.api.desa.berita["find-first"].get();
+        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;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita terbaru:", err);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findRecent: {
+    data: [] as Prisma.BeritaGetPayload<{
+      include: {
+        image: true;
+        kategoriBerita: true;
+      };
+    }>[],
+    loading: false,
+  
+    async load() {
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.desa.berita["find-recent"].get();
+        if (res.status === 200 && res.data?.success) {
+          this.data = res.data.data ?? [];
+        }
+      } catch (error) {
+        console.error("Gagal fetch berita recent:", error);
+      } finally {
+        this.loading = false;
+      }
+    },
+  }
+   
+  
   
 });
 

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

@@ -68,11 +68,11 @@ const pengumuman = proxy({
   },
   findMany: {
     data: null as
-      | Prisma.PengumumanGetPayload<{ 
-        include: {
+      | Prisma.PengumumanGetPayload<{
+          include: {
             CategoryPengumuman: true;
-        }
-       }>[]
+          };
+        }>[]
       | null,
     async load() {
       const res = await ApiFetch.api.desa.pengumuman["find-many"].get();
@@ -82,30 +82,28 @@ const pengumuman = proxy({
       }
     },
   },
-  // findUnique: {
-  //   data: null as
-  //   | Prisma.PengumumanGetPayload<{
-  //       include: {
-  //           CategoryPengumuman: true;
-  //       }
-  //   }>
-  //   | null,
-  //   async load(id: string) {
-  //     try {
-  //       const res = await fetch(`/api/desa/pengumuman/${id}`);
-  //       if (res.ok) {
-  //         const data = await res.json();
-  //         pengumuman.findUnique.data = data.data ?? null;
-  //       } else {
-  //         console.error('Failed to fetch pengumuman:', res.statusText);
-  //         pengumuman.findUnique.data = null;
-  //       }
-  //     } catch (error) {
-  //       console.error('Error fetching pengumuman:', error);
-  //       pengumuman.findUnique.data = null;
-  //     }
-  //   },
-  // },
+  findUnique: {
+    data: null as Prisma.PengumumanGetPayload<{
+      include: {
+        CategoryPengumuman: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/pengumuman/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          pengumuman.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch pengumuman:", res.statusText);
+          pengumuman.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching pengumuman:", error);
+        pengumuman.findUnique.data = null;
+      }
+    },
+  },
   delete: {
     loading: false,
     async byId(id: string) {
@@ -237,6 +235,55 @@ const pengumuman = proxy({
       }
     },
   },
+  findFirst: {
+    data: null as Prisma.PengumumanGetPayload<{
+      include: {
+        CategoryPengumuman: true;
+      };
+    }> | null,
+    loading: false,
+    async load() {
+      this.loading = true;
+      try {
+        const res = await ApiFetch.api.desa.pengumuman["find-first"].get();
+        if (res.status === 200 && res.data?.success) {
+          // Add type assertion to ensure type safety
+          pengumuman.findFirst.data = res.data
+            .data as Prisma.PengumumanGetPayload<{
+            include: {
+              CategoryPengumuman: true;
+            };
+          }> | null;
+        }
+      } catch (err) {
+        console.error("Gagal fetch pengumuman terbaru:", err);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findRecent: {
+    data: [] as Prisma.PengumumanGetPayload<{
+      include: {
+        CategoryPengumuman: true;
+      };
+    }>[],
+    loading: false,
+
+    async load() {
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.desa.pengumuman["find-recent"].get();
+        if (res.status === 200 && res.data?.success) {
+          this.data = res.data.data ?? [];
+        }
+      } catch (error) {
+        console.error("Gagal fetch pengumuman recent:", error);
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
 });
 
 const stateDesaPengumuman = proxy({

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

@@ -395,9 +395,409 @@ const jenisLayanan = proxy({
   },
 });
 
+// ========================================= PENGADUAN MASYARAKAT ========================================= //
+const templatePengaduanMasyarakatForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  email: z.string().min(1, "Alamat minimal 1 karakter"),
+  nomorTelepon: z.string().min(1, "Nomor telepon minimal 1 karakter"),
+  nik: z.string().min(1, "NIK minimal 1 karakter"),
+  judulPengaduan: z.string().min(1, "Judul pengaduan minimal 1 karakter"),
+  lokasiKejadian: z.string().min(1, "Lokasi kejadian minimal 1 karakter"),
+  deskripsiPengaduan: z.string().min(1, "Deskripsi pengaduan minimal 1 karakter"),
+  jenisPengaduanId: z.string().min(1, "Jenis pengaduan minimal 1 karakter"),
+  imageId: z.string().min(1, "Image minimal 1 karakter"),
+});
+
+const defaultPengaduanMasyarakatForm = {
+  name: "",
+  email: "",
+  nomorTelepon: "",
+  nik: "",
+  judulPengaduan: "",
+  lokasiKejadian: "",
+  deskripsiPengaduan: "",
+  jenisPengaduanId: "",
+  imageId: "",
+};
+
+const pengaduanMasyarakat = proxy({
+  create: {
+    form: { ...defaultPengaduanMasyarakatForm },
+    loading: false,
+    async create() {
+      const cek = templatePengaduanMasyarakatForm.safeParse(
+        pengaduanMasyarakat.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pengaduanMasyarakat.create.loading = true;
+        const res =
+          await ApiFetch.api.inovasi.layananonlinedesa.pengaduanmasyarakat[
+            "create"
+          ].post(pengaduanMasyarakat.create.form);
+        if (res.status === 200) {
+          pengaduanMasyarakat.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        pengaduanMasyarakat.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+    Prisma.PengaduanMasyarakatGetPayload<{
+      include: {
+        jenisPengaduan: true;
+        image: true;
+      };
+    }>
+  > | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+
+    async load(page = 1, limit = 10) {
+      pengaduanMasyarakat.findMany.loading = true;
+      pengaduanMasyarakat.findMany.page = page;
+      try {
+        const res =
+          await ApiFetch.api.inovasi.layananonlinedesa.pengaduanmasyarakat[
+            "find-many"
+          ].get({
+            query: {
+              page,
+              limit,
+            },
+          });
+
+        if (res.status === 200 && res.data?.success) {
+          pengaduanMasyarakat.findMany.data = res.data.data ?? [];
+          pengaduanMasyarakat.findMany.totalPages = res.data.totalPages ?? 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch pengaduan masyarakat paginated:", err);
+      } finally {
+        pengaduanMasyarakat.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PengaduanMasyarakatGetPayload<{
+        include: {
+          jenisPengaduan: true;
+          image: true;
+        };
+      }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/inovasi/layananonlinedesa/pengaduanmasyarakat/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          pengaduanMasyarakat.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch pengaduan masyarakat:", res.statusText);
+          pengaduanMasyarakat.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching pengaduan masyarakat:", error);
+        pengaduanMasyarakat.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pengaduanMasyarakat.delete.loading = true;
+
+        const response = await fetch(
+          `/api/inovasi/layananonlinedesa/pengaduanmasyarakat/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Pengaduan masyarakat berhasil dihapus"
+          );
+          await pengaduanMasyarakat.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pengaduan masyarakat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pengaduan masyarakat");
+      } finally {
+        pengaduanMasyarakat.delete.loading = false;
+      }
+    },
+  },
+});
+// ========================================= JENIS PENGADUAN ========================================= //
+const templateJenisPengaduanForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const defaultJenisPengaduanForm = {
+  nama: "",
+};
+
+const jenisPengaduan = proxy({
+  create: {
+    form: { ...defaultJenisPengaduanForm },
+    loading: false,
+    async create() {
+      const cek = templateJenisPengaduanForm.safeParse(jenisPengaduan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        jenisPengaduan.create.loading = true;
+        const res =
+          await ApiFetch.api.inovasi.layananonlinedesa.pengaduanmasyarakat.jenispengaduan[
+            "create"
+          ].post(jenisPengaduan.create.form);
+        if (res.status === 200) {
+          jenisPengaduan.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        jenisPengaduan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      nama: string;
+    }> | null,
+    async load() {
+      const res =
+        await ApiFetch.api.inovasi.layananonlinedesa.pengaduanmasyarakat.jenispengaduan[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        jenisPengaduan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.JenisPengaduanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/inovasi/layananonlinedesa/pengaduanmasyarakat/jenispengaduan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          jenisPengaduan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          jenisPengaduan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        jenisPengaduan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        jenisPengaduan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/inovasi/layananonlinedesa/pengaduanmasyarakat/jenispengaduan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Jenis pengduan berhasil dihapus");
+          await jenisPengaduan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus jenis pengaduan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus jenis pengaduan");
+      } finally {
+        jenisPengaduan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultJenisPengaduanForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/inovasi/layananonlinedesa/pengaduanmasyarakat/jenispengaduan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading jenis pengaduan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateJenisPengaduanForm.safeParse(jenisPengaduan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        jenisPengaduan.edit.loading = true;
+        const response = await fetch(
+          `/api/inovasi/layananonlinedesa/pengaduanmasyarakat/jenispengaduan/${jenisPengaduan.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: jenisPengaduan.edit.form.nama,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message ||
+                `Gagal mengupdate jenis pengaduan (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui jenis pengaduan"
+            );
+            await jenisPengaduan.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(result.message || "Gagal mengupdate jenis pengaduan");
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating jenis pengaduan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate jenis pengaduan"
+        );
+        return false;
+      } finally {
+        jenisPengaduan.edit.loading = false;
+      }
+    },
+    reset() {
+      jenisPengaduan.edit.id = "";
+      jenisPengaduan.edit.form = { ...defaultJenisPengaduanForm };
+    },
+  },
+});
+
+
 const layananonlineDesa = proxy({
   administrasiOnline,
   jenisLayanan,
+  pengaduanMasyarakat,
+  jenisPengaduan,
 });
 
 export default layananonlineDesa;

src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts

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

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

@@ -24,6 +24,11 @@ function LayoutTabsLayananOnlineDesa({ children }: { children: React.ReactNode }
             value: "pengaduanmasyarakat",
             href: "/admin/inovasi/layanan-online-desa/pengaduan-masyarakat"
         },
+        {
+            label: "Jenis Pengaduan",
+            value: "jenispengaduan",
+            href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan"
+        },
         {
             label: "Informasi Desa",
             value: "informasidesa",

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

@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
+import colors from '@/con/colors';
+import { Box, Button, Group, 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 EditJenisPengaduan() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
+  const state = useProxy(layananonlineDesa.jenisPengaduan);
+
+  const [formData, setFormData] = useState({
+    nama: "",
+  });
+
+  useEffect(() => {
+    const loadJenisPengaduan = async () => {
+      if (!id) return;
+
+      try {
+        const data = await state.edit.load(id);
+
+        if (data) {
+          // pastikan id-nya masuk ke state edit
+          state.edit.id = id;
+          setFormData({
+            nama: data.nama || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading jenis pengaduan:", error);
+        toast.error("Gagal memuat data jenis pengaduan");
+      }
+    };
+
+    loadJenisPengaduan();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.nama.trim()) {
+        toast.error('Nama jenis pengaduan tidak boleh kosong');
+        return;
+      }
+
+      state.edit.form = {
+        nama: formData.nama.trim(),
+      };
+
+      // Safety check tambahan: pastikan ID tidak kosong
+      if (!state.edit.id) {
+        state.edit.id = id; // fallback
+      }
+
+      const success = await state.edit.update();
+
+      if (success) {
+        router.push("/admin/inovasi/layanan-online-desa/jenis-pengaduan");
+      }
+    } catch (error) {
+      console.error("Error updating jenis pengaduan:", error);
+      // toast akan ditampilkan dari fungsi update
+    }
+  };
+
+  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 Jenis Pengaduan</Title>
+          <TextInput
+            value={formData.nama}
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pengaduan</Text>}
+            placeholder='Masukkan nama jenis pengaduan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditJenisPengaduan;

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

@@ -0,0 +1,61 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
+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 CreateJenisPengaduan() {
+  const router = useRouter();
+  const state = useProxy(layananonlineDesa.jenisPengaduan)
+
+  useEffect(() => {
+    state.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    state.create.form = {
+      nama: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await state.create.create();
+    resetForm();
+    router.push("/admin/inovasi/layanan-online-desa/jenis-pengaduan")
+  }
+
+  return (
+    <Box>
+      <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 Jenis Pengaduan</Title>
+            <TextInput
+              value={state.create.form.nama}
+              onChange={(val) => {
+                state.create.form.nama = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Jenis Pengaduan</Text>}
+              placeholder='Masukkan nama jenis pengaduan'
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateJenisPengaduan;

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

@@ -0,0 +1,125 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import layananonlineDesa from '../../../_state/inovasi/layanan-online-desa';
+
+
+
+function JenisPengaduan() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Jenis Pengaduan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListJenisPengaduan search={search} />
+    </Box>
+  );
+}
+
+function ListJenisPengaduan({ search }: { search: string }) {
+  const state = useProxy(layananonlineDesa.jenisPengaduan)
+  const router = useRouter()
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    state.findMany.load()
+  }, [])
+
+  const handleHapus = async () => {
+    if (selectedId) {
+      await state.delete.byId(selectedId);
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+
+  const filteredData = (state.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!state.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Jenis Pengaduan'
+          href='/admin/inovasi/layanan-online-desa/jenis-pengaduan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Jenis Pengaduan</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Hapus</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>
+                  <Button color="green"
+                    onClick={() => {
+                      if (item) {
+                        router.push(`/admin/inovasi/layanan-online-desa/jenis-pengaduan/${item.id}`);
+                      }
+                    }}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button color="red"
+                    onClick={() => {
+                      if (item) {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={!item}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus jenis pengaduan ini?"
+      />
+    </Box>
+  );
+}
+
+export default JenisPengaduan;

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

@@ -0,0 +1,124 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
+import colors from '@/con/colors';
+
+
+function DetailPengaduanMasyarakat() {
+  const pengaduanState = useProxy(layananonlineDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    pengaduanState.pengaduanMasyarakat.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      pengaduanState.pengaduanMasyarakat.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/layanan-online-desa/pengaduan-masyarakat")
+    }
+  }
+
+  if (!pengaduanState.pengaduanMasyarakat.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>
+          <Flex gap={"xs"} justify={"space-between"} mt={10}>
+            <Text fz={"xl"} fw={"bold"}>Detail Pengaduan Masyarakat</Text>
+            <Button
+              onClick={() => {
+                if (pengaduanState.pengaduanMasyarakat.findUnique.data) {
+                  setSelectedId(pengaduanState.pengaduanMasyarakat.findUnique.data.id);
+                  setModalHapus(true);
+                }
+              }}
+              disabled={pengaduanState.pengaduanMasyarakat.delete.loading || !pengaduanState.pengaduanMasyarakat.findUnique.data}
+              color={"red"}
+            >
+              <IconTrash size={20} />
+            </Button>
+          </Flex>
+          {pengaduanState.pengaduanMasyarakat.findUnique.data ? (
+            <Paper key={pengaduanState.pengaduanMasyarakat.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{pengaduanState.pengaduanMasyarakat.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Email</Text>
+                  <Text fz={"lg"}>{pengaduanState.pengaduanMasyarakat.findUnique.data?.email}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nomor Telepon</Text>
+                  <Text fz={"lg"} >{pengaduanState.pengaduanMasyarakat.findUnique.data?.nomorTelepon}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>NIK</Text>
+                  <Text fz={"lg"} >{pengaduanState.pengaduanMasyarakat.findUnique.data?.nik}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul Pengaduan</Text>
+                  <Text fz={"lg"} >{pengaduanState.pengaduanMasyarakat.findUnique.data?.judulPengaduan}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Lokasi Kejadian</Text>
+                  <Text fz={"lg"} >{pengaduanState.pengaduanMasyarakat.findUnique.data?.lokasiKejadian}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi Pengaduan</Text>
+                  <Text fz={"lg"} >{pengaduanState.pengaduanMasyarakat.findUnique.data?.deskripsiPengaduan}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jenis Pengaduan</Text>
+                  <Text fz={"lg"} >{pengaduanState.pengaduanMasyarakat.findUnique.data?.jenisPengaduan?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={pengaduanState.pengaduanMasyarakat.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus administrasi online ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPengaduanMasyarakat;

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

@@ -0,0 +1,99 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Title } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+
+import { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import layananonlineDesa from '../../../_state/inovasi/layanan-online-desa';
+
+function PengaduanMasyarakat() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pengaduan Masyarakat'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPengaduanMasyarakat search={search} />
+    </Box>
+  );
+}
+
+function ListPengaduanMasyarakat({ search }: { search: string }) {
+  const listState = useProxy(layananonlineDesa.pengaduanMasyarakat)
+  const router = useRouter();
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = listState.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10);
+  }, [page]);
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.email.toLowerCase().includes(keyword) ||
+      item.nomorTelepon.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (loading || !data) {
+    return <Skeleton h={500} />;
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Title order={3} mb={10}>List Pengaduan Masyarakat</Title>
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Email</TableTh>
+              <TableTh>Nomor Telepon</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+            <TableTbody style={{ overflowX: "auto" }}>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>{item.email}</TableTd>
+                  <TableTd>{item.nomorTelepon}</TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin//inovasi/layanan-online-desa/administrasi-online/${item.id}`)}>
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+        </Table>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default PengaduanMasyarakat;

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

@@ -4,10 +4,14 @@
 import { Box, rem, Select } from '@mantine/core';
 import {
   IconChartLine,
+  IconClipboardTextFilled,
   IconLeaf,
   IconRecycle,
+  IconScale,
   IconTent,
+  IconTrashFilled,
   IconTrophy,
+  IconTruckFilled,
 } from '@tabler/icons-react';
 import { useEffect, useState } from 'react';
 
@@ -17,6 +21,11 @@ const iconMap = {
   wisata: { label: 'Wisata', icon: IconTent },
   ekonomi: { label: 'Ekonomi', icon: IconChartLine },
   sampah: { label: 'Sampah', icon: IconRecycle },
+  truck: { label: 'Truck', icon: IconTruckFilled },
+  scale: { label: 'Scale', icon: IconScale },
+  clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
+  trash: { label: 'Trash', icon: IconTrashFilled },
+
 };
 
 type IconKey = keyof typeof iconMap;

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

@@ -3,10 +3,14 @@
 import { Box, rem, Select } from '@mantine/core';
 import {
   IconChartLine,
+  IconClipboardTextFilled,
   IconLeaf,
   IconRecycle,
+  IconScale,
   IconTent,
+  IconTrashFilled,
   IconTrophy,
+  IconTruckFilled,
 } from '@tabler/icons-react';
 
 const iconMap = {
@@ -15,6 +19,10 @@ const iconMap = {
   wisata: { label: 'Wisata', icon: IconTent },
   ekonomi: { label: 'Ekonomi', icon: IconChartLine },
   sampah: { label: 'Sampah', icon: IconRecycle },
+  truck: { label: 'Truck', icon: IconTruckFilled },
+  scale: { label: 'Scale', icon: IconScale },
+  clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
+  trash: { label: 'Trash', icon: IconTrashFilled },
 };
 
 type IconKey = keyof typeof iconMap;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/_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 LayoutTabsPengelolaanSampahBankSampah({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "List Pengelolaan Sampah Bank Sampah",
+            value: "listpengelolaansampahbanksampah",
+            href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah"
+        },
+        {
+            label: "Keterangan Bank Sampah Terdekat",
+            value: "keteranganbanksampahterdekat",
+            href: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/keterangan-bank-sampah-terdekat"
+        },
+        
+    ];
+    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}>Layanan Online Desa</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 LayoutTabsPengelolaanSampahBankSampah;

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

@@ -0,0 +1,11 @@
+import LayoutTabsPengelolaanSampahBankSampah from './_lib/layoutTabs';
+
+function PengelolaanSampahBankSampah({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabsPengelolaanSampahBankSampah>
+      {children}
+    </LayoutTabsPengelolaanSampahBankSampah>
+  )
+}
+
+export default PengelolaanSampahBankSampah;

src/app/admin/(dashboard)/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/[id]/page.tsx

@@ -0,0 +1,115 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
+import SelectIconProgramEdit from '@/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIconEdit';
+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';
+
+interface FormProgramKreatif {
+  name: string;
+  icon: string;
+}
+
+type IconKey = 'ekowisata' | 'kompetisi' | 'wisata' | 'ekonomi' | 'sampah' | 'truck' | 'scale' | 'clipboard' | 'trash';
+
+
+function EditProgramKreatifDesa() {
+  const stateSampah = useProxy(pengelolaanSampahState)
+  const params = useParams()
+  const router = useRouter();
+  const [formData, setFormData] = useState<FormProgramKreatif>({
+    name: '',
+    icon: '',
+  })
+
+  useEffect(() => {
+    const loadProgramKreatif = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await stateSampah.update.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          stateSampah.update.id = id;
+
+          stateSampah.update.form = {
+            name: data.name,
+            icon: data.icon,
+          };
+
+          setFormData({
+            name: data.name,
+            icon: data.icon,
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pengelolaan sampah:", error);
+        toast.error("Gagal memuat data pengelolaan sampah");
+      }
+    }
+
+    loadProgramKreatif();
+  }, [params?.id]);
+
+
+
+  const handleSubmit = async () => {
+    try {
+      stateSampah.update.form = {
+        ...stateSampah.update.form,
+        name: formData.name.trim(),
+        icon: formData.icon.trim(),
+      }
+      await stateSampah.update.submit();
+      router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah");
+    } catch (error) {
+      console.error("Error updating pengelolaan sampah:", error);
+      toast.error("Gagal memuat data pengelolaan sampah");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit List Pengelolaan Sampah Bank Sampah</Title>
+          <TextInput
+            value={formData.name}
+            label={<Text fz={"sm"} fw={"bold"}>Nama List Pengelolaan Sampah Bank Sampah</Text>}
+            placeholder="masukkan nama list pengelolaan sampah bank sampah"
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                name: val.target.value
+              })
+            }}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Ikon List Pengelolaan Sampah Bank Sampah</Text>
+            <SelectIconProgramEdit
+              value={formData.icon as IconKey}
+              onChange={(value) => {
+                setFormData((prev) => ({ ...prev, icon: value }));
+                stateSampah.update.form.icon = value;
+              }}
+            />
+          </Box>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditProgramKreatifDesa;

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

@@ -0,0 +1,58 @@
+'use client'
+import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
+import SelectIconProgram from '@/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIcon';
+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 CreatePengelolaanSampahBankSampah() {
+  const stateCreate = useProxy(pengelolaanSampahState)
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      icon: "",
+    }
+  }
+
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+    resetForm();
+    router.push("/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah")
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create List Pengelolaan Sampah Bank Sampah</Title>
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Pengelolaan Sampah Bank Sampah</Text>}
+            placeholder="masukkan nama pengelolaan sampah bank sampah"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Ikon Pengelolaan Sampah Bank Sampah</Text>
+            <SelectIconProgram onChange={(value) => stateCreate.create.form.icon = value} />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePengelolaanSampahBankSampah;

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

@@ -0,0 +1,135 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconChartLine, IconClipboardTextFilled, IconEdit, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled, IconX } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import pengelolaanSampahState from '../../../_state/lingkungan/pengelolaan-sampah';
+import React from 'react';
+
+
+function PengelolaanSampahBankSampah() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='List Pengelolaan Sampah Bank Sampah'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPengelolaanSampahBankSampah search={search} />
+    </Box>
+  );
+}
+
+function ListPengelolaanSampahBankSampah({ search }: { search: string }) {
+  const stateList = useProxy(pengelolaanSampahState)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    stateList.findMany.load()
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateList.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  const filteredData = (stateList.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+      || item.icon.toLowerCase().includes(keyword)
+    );
+  });
+
+  const iconMap: Record<string, React.FC<any>> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+  };
+
+  if (!stateList.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pengelolaan Sampah Bank Sampah'
+          href='/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Pengelolaan Sampah</TableTh>
+              <TableTh>Icon</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd style={{ width: '10%' }}>
+                  {iconMap[item.icon] && (
+                    <Box title={item.icon}>
+                      {React.createElement(iconMap[item.icon], { size: 24 })}
+                    </Box>
+                  )}
+                </TableTd>
+                <TableTd>
+                  <Button color="green" onClick={() => router.push(`/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button color="red" onClick={() => {
+                    setSelectedId(item.id)
+                    setModalHapus(true)
+                  }}>
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus pengelolaan sampah bank sampah ini?'
+      />
+    </Box>
+  );
+}
+
+export default PengelolaanSampahBankSampah;

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

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

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

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

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

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

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

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

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

@@ -1,36 +0,0 @@
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-
-import colors from '@/con/colors';
-import ListPengelolaanSampahBankSampah from './list_pengelolaan_sampah_bank_sampah/page';
-import KeteranganBankSampahTerdekat from './keterangan_bank_sampah_terdekat/page';
-
-
-function PengelolaanSampahBankSampah() {
-  return (
-    <Box>
-      <Stack>
-        <Title order={3}>Pengelolaan Sampah Bank Sampah</Title>
-        <Tabs defaultValue="list" color={colors['blue-button']} variant="pills">
-          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value="list">
-              List Pengelolaan Sampah Bank Sampah
-            </TabsTab>
-            <TabsTab value="maps">
-              Keterangan Bank Sampah Terdekat
-            </TabsTab>
-          </TabsList>
-
-          <TabsPanel value="list">
-            <ListPengelolaanSampahBankSampah />
-          </TabsPanel>
-
-          <TabsPanel value="maps">
-            <KeteranganBankSampahTerdekat />
-          </TabsPanel>
-        </Tabs>
-      </Stack>
-    </Box>
-  )
-}
-
-export default PengelolaanSampahBankSampah;

src/app/admin/_com/list_PageAdmin.tsx

@@ -308,7 +308,7 @@ export const navBar = [
       {
         id: "Lingkungan_1",
         name: "Pengelolaan Sampah (Bank Sampah)",
-        path: "/admin/lingkungan/pengelolaan-sampah-bank-sampah"
+        path: "/admin/lingkungan/pengelolaan-sampah-bank-sampah/list-pengelolaan-sampah-bank-sampah"
       },
       {
         id: "Lingkungan_2",

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

@@ -0,0 +1,30 @@
+import prisma from '@/lib/prisma';
+
+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
+      },
+      include: {
+        image: true,
+        kategoriBerita: true,
+      }
+    });
+
+    return {
+      success: true,
+      message: 'Berhasil ambil berita terbaru',
+      data: result,
+    };
+  } catch (error) {
+    console.error('[findFirstBerita] Error:', error);
+    return {
+      success: false,
+      message: 'Gagal ambil berita terbaru',
+    };
+  }
+}

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

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

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

@@ -5,6 +5,8 @@ import beritaCreate from "./create";
 import beritaDelete from "./del";
 import beritaUpdate from "./updt";
 import findBeritaById from "./find-by-id";
+import beritaFindFirst from "./findFirst";
+import findRecentBerita from "./findRecent";
 
 const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
   .get("/category/find-many", kategoriBeritaFindMany)
@@ -22,6 +24,8 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
       kategoriBeritaId: t.Union([t.String(), t.Null()]),
     }),
   })
+  .get("/find-first", beritaFindFirst)
+  .get("/find-recent", findRecentBerita)
   .delete("/delete/:id", beritaDelete)
   .put(
     "/:id",
@@ -39,5 +43,6 @@ const Berita = new Elysia({ prefix: "/berita", tags: ["Desa/Berita"] })
       }),
     }
   );
+  
 
 export default Berita;

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

@@ -0,0 +1,29 @@
+import prisma from '@/lib/prisma';
+
+export default async function pengumumanFindFirst() {
+  try {
+    const result = await prisma.pengumuman.findFirst({
+      where: {
+        isActive: true, // opsional kalau kamu punya field ini
+      },
+      orderBy: {
+        createdAt: 'desc', // ambil yang paling terbaru
+      },
+      include: {
+        CategoryPengumuman: true,
+      }
+    });
+
+    return {
+      success: true,
+      message: 'Berhasil ambil pengumuman terbaru',
+      data: result,
+    };
+  } catch (error) {
+    console.error('[findFirstPengumuman] Error:', error);
+    return {
+      success: false,
+      message: 'Gagal ambil pengumuman terbaru',
+    };
+  }
+}

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

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

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

@@ -6,6 +6,8 @@ import pengumumanCategoryFindMany from "./category";
 import pengumumanDelete from "./del";
 import pengumumanFindById from "./find-by-id";
 import pengumumanUpdate from "./updt";
+import pengumumanFindFirst from "./findFirst";
+import pengumumanFindRecent from "./findRecent";
 
 const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"] })
   .get("/category/find-many", pengumumanCategoryFindMany)
@@ -20,6 +22,8 @@ const Pengumuman = new Elysia({ prefix: "/pengumuman", tags: ["Desa/Pengumuman"]
       categoryPengumumanId: t.Union([t.String(), t.Null()]),
     }),
   })
+  .get("/find-first", pengumumanFindFirst)
+  .get("/find-recent", pengumumanFindRecent)
   .put("/:id", pengumumanUpdate, {
     body: t.Object({
       id: t.String(),

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

@@ -1,13 +1,13 @@
 import Elysia from "elysia";
 import AdministrasiOnline from "./administrasi-online";
-
+import PengaduanMasyarakat from "./pengaduan-masyarakat";
 
 const LayananOnlineDesa = new Elysia({
   prefix: "/layananonlinedesa",
   tags: ["Inovasi/Layanan Online Desa"],
+})
+.use(AdministrasiOnline)
+.use(PengaduanMasyarakat)
 
 
-
-}).use(AdministrasiOnline);
-
 export default LayananOnlineDesa;

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/create.ts

@@ -0,0 +1,39 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    name: string;
+    email: string;
+    nomorTelepon: string;
+    nik: string;
+    judulPengaduan: string;
+    lokasiKejadian: string;
+    deskripsiPengaduan: string;
+    jenisPengaduanId: string;
+    imageId: string;
+}
+export default async function pengaduanMasyarakatCreate(context: Context){
+    const body = context.body as FormCreate;
+
+    await prisma.pengaduanMasyarakat.create({
+        data: {
+            name: body.name,
+            email: body.email,
+            nomorTelepon: body.nomorTelepon,
+            nik: body.nik,
+            judulPengaduan: body.judulPengaduan,
+            lokasiKejadian: body.lokasiKejadian,
+            deskripsiPengaduan: body.deskripsiPengaduan,
+            jenisPengaduanId: body.jenisPengaduanId,
+            imageId: body.imageId,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create pengaduan masyarakat",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/del.ts

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

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/findMany.ts

@@ -0,0 +1,44 @@
+// /api/berita/findManyPaginated.ts
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+async function pengaduanMasyarakatFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const skip = (page - 1) * limit;
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.pengaduanMasyarakat.findMany({
+        where: { isActive: true },
+        include: {
+          jenisPengaduan: true,
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' }, // opsional, kalau mau urut berdasarkan waktu
+      }),
+      prisma.pengaduanMasyarakat.count({
+        where: { isActive: true }
+      })
+    ]);
+
+    return {
+      success: true,
+      message: "Success fetch pengaduan masyarakat with pagination",
+      data,
+      page,
+      totalPages: Math.ceil(total / limit),
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch pengaduan masyarakat with pagination",
+    };
+  }
+}
+
+export default pengaduanMasyarakatFindMany;

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/index.ts

@@ -0,0 +1,30 @@
+import Elysia from "elysia";
+import pengaduanMasyarakatCreate from "./create";
+import { t } from "elysia";
+import pengaduanMasyarakatDelete from "./del";
+import pengaduanMasyarakatFindMany from "./findMany";
+import pengaduanMasyarakatFindUnique from "./findUnique";
+import JenisPengaduan from "./jenis-pengaduan";
+
+const PengaduanMasyarakat = new Elysia({
+    prefix: "/pengaduanmasyarakat",
+    tags: ["Inovasi/Layanan Online Desa/Pengaduan Masyarakat"],
+})
+.post("/create", pengaduanMasyarakatCreate, {
+    body: t.Object({
+        name: t.String(),
+        email: t.String(),
+        nomorTelepon: t.String(),
+        nik: t.String(),
+        judulPengaduan: t.String(),
+        lokasiKejadian: t.String(),
+        deskripsiPengaduan: t.String(),
+        jenisPengaduanId: t.String(),
+        imageId: t.String(),
+    }),
+})
+.get("/find-many", pengaduanMasyarakatFindMany)
+.get("/:id", pengaduanMasyarakatFindUnique)
+.delete("/del/:id", pengaduanMasyarakatDelete)
+.use(JenisPengaduan)
+export default PengaduanMasyarakat;

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/jenis-pengaduan/create.ts

@@ -0,0 +1,24 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+    nama: string;
+}
+
+export default async function jenisPengaduanCreate(context: Context){
+    const body = context.body as FormCreate;
+
+    await prisma.jenisPengaduan.create({
+        data: {
+            nama: body.nama,
+        }
+    })
+
+    return {
+        success: true,
+        message: "Success create jenis pengaduan",
+        data: {
+            ...body,
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/jenis-pengaduan/del.ts

@@ -0,0 +1,33 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+const jenisPengaduanDelete = async (context: Context) => {
+    const id = context.params.id;
+    if (!id) {
+        return {
+            success: false,
+            message: "ID is required",
+        }
+    }
+
+    const jenisPengaduan = await prisma.jenisPengaduan.delete({
+        where: {
+            id: id,
+        },
+    })
+
+    if(!jenisPengaduan) {
+        return {
+            success: false,
+            message: "Jenis pengaduan tidak ditemukan",
+        }
+    }
+
+    return {
+        success: true,
+        message: "Success delete jenis pengaduan",
+        data: jenisPengaduan,
+    }
+}
+
+export default jenisPengaduanDelete

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/jenis-pengaduan/findMany.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+
+export default async function jenisPengaduanFindMany() {
+    const data = await prisma.jenisPengaduan.findMany();
+    return { 
+        success: true,
+        data: data.map((item: any) => {
+            return {
+                id: item.id,
+                nama: item.nama,
+            }
+        }),
+    };
+}

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/jenis-pengaduan/findUnique.ts

@@ -0,0 +1,47 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export default async function jenisPengaduanFindUnique(context: Context) {
+    const url = new URL(context.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.jenisPengaduan.findUnique({
+            where: { id },
+        });
+
+        if (!data) {
+            return {
+                success: false,
+                message: "Jenis pengaduan tidak ditemukan",
+            }
+        }
+
+        return {
+            success: true,
+            message: "Success find jenis pengaduan",
+            data,
+        }
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return {
+            success: false,
+            message: "Gagal mengambil jenis pengaduan: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/jenis-pengaduan/index.ts

@@ -0,0 +1,29 @@
+import Elysia from "elysia";
+import jenisPengaduanFindMany from "./findMany";
+import jenisPengaduanFindUnique from "./findUnique";
+import jenisPengaduanCreate from "./create";
+import jenisPengaduanUpdate from "./updt";
+import { t } from "elysia";
+import jenisPengaduanDelete from "./del";
+
+const JenisPengaduan = new Elysia({
+  prefix: "/jenispengaduan",
+  tags: ["Inovasi/Layanan Online Desa/Jenis Pengaduan"],
+})
+  .get("/find-many", jenisPengaduanFindMany)
+  .get("/:id", async (context) => {
+    const response = await jenisPengaduanFindUnique(context);
+    return response;
+  })
+  .delete("/del/:id", jenisPengaduanDelete)
+  .post("/create", jenisPengaduanCreate, {
+    body: t.Object({
+      nama: t.String(),
+    }),
+  })
+  .put("/:id", jenisPengaduanUpdate, {
+    body: t.Object({
+      nama: t.String(),
+    }),
+  });
+export default JenisPengaduan;

src/app/api/[[...slugs]]/_lib/inovasi/layanan-online-desa/pengaduan-masyarakat/jenis-pengaduan/updt.ts

@@ -0,0 +1,44 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function jenisPengaduanUpdate(context: Context) {
+  const body = context.body as { nama: string };
+  const id = context.params?.id as string;
+
+  // Validasi ID dan nama
+  if (!id) {
+    return {
+      success: false,
+      message: "ID is required",
+    };
+  }
+
+  if (!body.nama) {
+    return {
+      success: false,
+      message: "Nama is required",
+    };
+  }
+
+  try {
+    const jenisPengaduan = await prisma.jenisPengaduan.update({
+      where: { id },
+      data: {
+        nama: body.nama,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Success update jenis pengaduan",
+      data: jenisPengaduan,
+    };
+  } catch (error) {
+    console.error("Update error:", error);
+    return {
+      success: false,
+      message: "Gagal update jenis pengaduan",
+      error: error instanceof Error ? error.message : String(error),
+    };
+  }
+}

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

@@ -0,0 +1,11 @@
+import Elysia from "elysia";
+import PengelolaanSampah from "./pengelolaan-sampah";
+
+const Lingkungan = new Elysia({
+  prefix: "/api/lingkungan",
+  tags: ["Lingkungan"],
+})
+
+.use(PengelolaanSampah)
+
+export default Lingkungan;

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/create.ts

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

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/del.ts

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

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/findMany.ts

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

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/findUnique.ts

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

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/index.ts

@@ -0,0 +1,37 @@
+import Elysia, { t } from "elysia";
+import pengelolaanSampahCreate from "./create";
+import pengelolaanSampahDelete from "./del";
+import pengelolaanSampahFindMany from "./findMany";
+import pengelolaanSampahFindUnique from "./findUnique";
+import pengelolaanSampahUpdate from "./updt";
+
+const PengelolaanSampah = new Elysia({
+  prefix: "/pengelolaansampah",
+  tags: ["Lingkungan/Pengelolaan Sampah"],
+})
+  .get("/find-many", pengelolaanSampahFindMany)
+  .get("/:id", async (context) => {
+    const response = await pengelolaanSampahFindUnique(context);
+    return response;
+  })
+  .post("/create", pengelolaanSampahCreate, {
+    body: t.Object({
+      name: t.String(),
+      icon: t.String(),
+    }),
+  })
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await pengelolaanSampahUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        icon: t.String(),
+      }),
+    }
+  )
+  .delete("/del/:id", pengelolaanSampahDelete);
+export default PengelolaanSampah;

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/updt.ts

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

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

@@ -20,6 +20,7 @@ import FileStorage from "./_lib/fileStorage";
 import Keamanan from "./_lib/keamanan";
 import Ekonomi from "./_lib/ekonomi";
 import Inovasi from "./_lib/inovasi";
+import Lingkungan from "./_lib/lingkungan";
 
 
 const ROOT = process.cwd();
@@ -83,6 +84,7 @@ const ApiServer = new Elysia()
   .use(FileStorage)
   .use(Ekonomi)
   .use(Inovasi)
+  .use(Lingkungan)
   .onError(({ code }) => {
     if (code === "NOT_FOUND") {
       return {

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/informasi-desa/page.tsx

@@ -1,27 +1,136 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
-import { Box, Paper, Stack, Text } from '@mantine/core';
-import { IconBell } from '@tabler/icons-react';
-import { motion } from 'framer-motion';
+import { Box, Card, Divider, Grid, GridCol, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import BackButton from '../../../desa/layanan/_com/BackButto';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+
+dayjs.extend(relativeTime);
 
 function InformasiDesa() {
+  const stateBerita = useProxy(stateDashboardBerita.berita)
+  const statePengumuman = useProxy(stateDesaPengumuman.pengumuman)
+
+  useEffect(() => {
+    stateBerita.findFirst.load();
+    stateBerita.findRecent.load();
+    statePengumuman.findFirst.load();
+    statePengumuman.findRecent.load();
+  }, []);
+
+  const dataBerita = stateBerita.findFirst.data
+  const dataPengumuman = statePengumuman.findFirst.data
+
+
   return (
-    <Box>
-      <Stack >
-        <motion.div
-          whileHover={{ scale: 1.05 }}
-          whileTap={{ scale: 0.8 }}
-        >
-        <Paper p={'xl'} >
-          <Box>
-          <IconBell size={50} color={colors['blue-button']} />,
-          </Box>
-          <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Informasi Desa</Text>
-          <Text fz={'lg'} c={'black'}>Akses berita dan pengumuman terbaru seputar kegiatan desa</Text>
-        </Paper>
-        </motion.div>
+    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }} >
+        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+          Informasi Desa
+        </Text>
+      </Box>
+      <Box px={{ base: "md", md: 100 }}>
+        <Stack gap={10}>
+        {dataBerita && (
+          <Paper shadow="md" radius="md" p="md">
+            <Grid>
+              <GridCol span={{ md: 6, base: 12 }}>
+                <Image
+                  src={dataBerita.image?.link || "/fallback.jpg"}
+                  alt={dataBerita.judul}
+                  radius="md"
+                  fit="cover"
+                  height={250}
+                  maw={600}
+                />
+              </GridCol>
+              <GridCol span={{ md: 6, base: 12 }}>
+                <Box>
+                  <Text fz="sm" c="dimmed">{dataBerita.kategoriBerita?.name} • {dayjs(dataBerita.createdAt).fromNow()}</Text>
+                  <Title order={1} fw="bold">{dataBerita.judul}</Title>
+                  <Text ta={"justify"} mt="xs" fz="md" dangerouslySetInnerHTML={{ __html: dataBerita.content }} />
+                </Box>
+              </GridCol>
+            </Grid>
+          </Paper>
+        )}
+        <Stack py={10}>
+          <Title order={3}>Berita Terbaru</Title>
+          <Grid>
+            {stateBerita.findRecent.data.map((item) => (
+              <GridCol span={{ base: 12, sm: 6, md: 3 }} key={item.id}>
+                <Card shadow="sm" radius="md" withBorder h="100%">
+                  <Card.Section>
+                    <Image
+                      src={item.image?.link || "/placeholder.jpg"}
+                      alt={item.judul}
+                      height={160} // gambar fix height
+                      fit="cover"
+                    />
+                  </Card.Section>
+                  <Stack gap="xs" mt="sm">
+                    <Text fw={600} lineClamp={2}>
+                      {item.judul}
+                    </Text>
+                    <Text size="sm" color="dimmed" lineClamp={2}>
+                      {item.deskripsi}
+                    </Text>
+                    <Text size="xs" c="gray">
+                      {dayjs(item.createdAt).fromNow()}
+                    </Text>
+                  </Stack>
+                </Card>
+              </GridCol>
+            ))}
+          </Grid>
+
+        </Stack>
+      <Divider color={colors['blue-button']} my="md" />
+      {dataPengumuman && (
+          <Paper shadow="md" radius="md" p="md">
+            <Stack gap={"xs"}>
+              <Title order={1} fw="bold">{dataPengumuman.judul}</Title>
+              <Text fz="sm" c="dimmed">{dataPengumuman.CategoryPengumuman?.name} • {dayjs(dataPengumuman.createdAt).fromNow()}</Text>
+              <Box>
+                <Text ta={"justify"} mt="xs" fz="md" dangerouslySetInnerHTML={{ __html: dataPengumuman.content }} />
+              </Box>
+            </Stack>
+          </Paper>
+        )}
+        <Stack py={10}>
+          <Title order={3}>Pengumuman Terbaru</Title>
+          <Grid>
+            {statePengumuman.findRecent.data.map((item) => (
+              <GridCol span={{ base: 12, sm: 6, md: 3 }} key={item.id}>
+                <Card shadow="sm" radius="md" withBorder h="100%">
+                  <Stack gap="xs" mt="sm">
+                    <Text fw={600} lineClamp={2}>
+                      {item.judul}
+                    </Text>
+                    <Text size="sm" color="dimmed" lineClamp={2}>
+                      {item.deskripsi}
+                    </Text>
+                    <Text size="xs" c="gray">
+                      {dayjs(item.createdAt).fromNow()}
+                    </Text>
+                  </Stack>
+                </Card>
+              </GridCol>
+            ))}
+          </Grid>
+
+        </Stack>
       </Stack>
-    </Box>
+      </Box>
+    </Stack>
   );
 }
 

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/page.tsx

@@ -1,12 +1,16 @@
+
 'use client'
 import colors from '@/con/colors';
-import { Box, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { IconBell } from '@tabler/icons-react';
+import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import AdministrasiOnline from './administrasi-online/page';
-import InformasiDesa from './informasi-desa/page';
 import PengaduanMasyarakat from './pengaduan-masyarakat/page';
 
 function Page() {
+  const router = useRouter()
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -28,7 +32,23 @@ function Page() {
             <Stack gap={'lg'}>
               <AdministrasiOnline />
               <PengaduanMasyarakat />
-              <InformasiDesa />
+              <Box>
+                <Stack>
+                  <motion.div
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.8 }}
+                    onClick={() => router.push('/darmasaba/inovasi/layanan-online-desa/informasi-desa')}
+                  >
+                    <Paper p={'xl'} >
+                      <Box>
+                        <IconBell size={50} color={colors['blue-button']} />
+                      </Box>
+                      <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Informasi Desa</Text>
+                      <Text fz={'lg'} c={'black'}>Akses berita dan pengumuman terbaru seputar kegiatan desa</Text>
+                    </Paper>
+                  </motion.div>
+                </Stack>
+              </Box>
             </Stack>
           </SimpleGrid>
         </Stack>

src/app/darmasaba/(pages)/inovasi/layanan-online-desa/pengaduan-masyarakat/page.tsx

@@ -1,26 +1,211 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
 import colors from '@/con/colors';
-import { Box, Paper, Stack, Text } from '@mantine/core';
-import { IconMessageCircleQuestion } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, Group, Image, Modal, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { useDisclosure } from '@mantine/hooks';
+import { IconImageInPicture, IconMessageCircleQuestion, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { motion } from 'framer-motion';
+import { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
 
 function PengaduanMasyarakat() {
+  const [opened, { open, close }] = useDisclosure(false);
+  const state = useProxy(layananonlineDesa);
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    // ✅ Panggil load data jenis layanan dari backend
+    if (!state.jenisPengaduan.findMany.data) {
+      state.jenisPengaduan.findMany.load();
+    }
+  }, []);
+
+  const resetForm = () => {
+    state.pengaduanMasyarakat.create.form = {
+      name: '',
+      email: '',
+      nomorTelepon: '',
+      nik: '',
+      judulPengaduan: '',
+      lokasiKejadian: '',
+      deskripsiPengaduan: '',
+      jenisPengaduanId: '',
+      imageId: '',
+    };
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+    }
+
+    try {
+      // Upload the image first
+      const uploadRes = await ApiFetch.api.fileStorage.create.post({
+        file: file,
+        name: file.name
+      })
+
+      const uploaded = uploadRes.data?.data
+      if (!uploaded?.id) {
+        return toast.error("Gagal upload gambar")
+      }
+
+      // Set the image ID in the form
+      state.pengaduanMasyarakat.create.form.imageId = uploaded.id
+
+      // Submit the form
+      const success = await state.pengaduanMasyarakat.create.create()
+
+      if (success) {
+        resetForm()
+        close()
+      }
+    } catch (error) {
+      console.error("Error in handleSubmit:", error)
+      toast.error("Terjadi kesalahan saat menyimpan data")
+    }
+  };
   return (
     <Box>
       <Stack >
         <motion.div
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.8 }}
-        > 
-        <Paper p={'xl'} >
-          <Box>
-          <IconMessageCircleQuestion size={50} color={colors['blue-button']} />,
-          </Box>
-          <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Pengaduan Masyarakat</Text>
-          <Text fz={'lg'} c={'black'}>Sampaikan keluhan dan aspirasi Anda melalui platform digital kami</Text>
-        </Paper>
+          onClick={open}
+        >
+          <Paper p={'xl'} >
+            <Box>
+              <IconMessageCircleQuestion size={50} color={colors['blue-button']} />
+            </Box>
+            <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>Pengaduan Masyarakat</Text>
+            <Text fz={'lg'} c={'black'}>Sampaikan keluhan dan aspirasi Anda melalui platform digital kami</Text>
+          </Paper>
         </motion.div>
       </Stack>
+      <Modal
+        opened={opened}
+        onClose={close}
+        radius={0}
+        transitionProps={{ transition: 'fade', duration: 200 }}
+      >
+        <Paper p="md" withBorder>
+          <Stack gap="xs">
+            <Title order={3}>Ajukan Administrasi Online</Title>
+            <TextInput
+              label={<Text fz="sm" fw="bold">Nama</Text>}
+              placeholder="masukkan nama"
+              onChange={(val) => (state.pengaduanMasyarakat.create.form.name = val.target.value)}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Email</Text>}
+              placeholder="masukkan email"
+              onChange={(val) => (state.pengaduanMasyarakat.create.form.email = val.target.value)}
+            />
+            <TextInput
+              type="number"
+              label={<Text fz="sm" fw="bold">Nomor Telepon</Text>}
+              placeholder="masukkan nomor telepon"
+              onChange={(val) => (state.pengaduanMasyarakat.create.form.nomorTelepon = val.target.value)}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">NIK</Text>}
+              placeholder="masukkan nik"
+              onChange={(val) => (state.pengaduanMasyarakat.create.form.nik = val.target.value)}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Judul Pengaduan</Text>}
+              placeholder="masukkan judul pengaduan"
+              onChange={(val) => (state.pengaduanMasyarakat.create.form.judulPengaduan = val.target.value)}
+            />
+            <TextInput
+              label={<Text fz="sm" fw="bold">Lokasi Kejadian</Text>}
+              placeholder="masukkan lokasi kejadian"
+              onChange={(val) => (state.pengaduanMasyarakat.create.form.lokasiKejadian = val.target.value)}
+            />
+            <Box>
+              <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+              <CreateEditor
+                value={state.pengaduanMasyarakat.create.form.deskripsiPengaduan}
+                onChange={(htmlContent) => {
+                  state.pengaduanMasyarakat.create.form.deskripsiPengaduan = htmlContent;
+                }}
+              />
+            </Box>
+            <Select
+              value={state.pengaduanMasyarakat.create.form.jenisPengaduanId}
+              onChange={(val) => {
+                state.pengaduanMasyarakat.create.form.jenisPengaduanId = val ?? "";
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Jenis Pengaduan</Text>}
+              placeholder="Pilih kategori produk"
+              data={
+                state.jenisPengaduan.findMany.data?.map((v) => ({
+                  value: v.id,
+                  label: v.nama,
+                })) || []
+              }
+            />
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Box>
+                <Stack gap="xs">
+                  <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 images here or click to select files
+                        </Text>
+                        <Text size="sm" c="dimmed" inline mt={7}>
+                          Attach as many files as you like, each file should not exceed 5mb
+                        </Text>
+                      </div>
+                    </Group>
+                  </Dropzone>
+                  {previewImage ? (
+                    <Image alt="" src={previewImage} w={200} h={200} />
+                  ) : (
+                    <Center w={200} h={200} bg={"gray"}>
+                      <IconImageInPicture />
+                    </Center>
+                  )}
+                </Stack>
+              </Box>
+            </Box>
+
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>
+              Simpan
+            </Button>
+          </Stack>
+        </Paper>
+      </Modal>
     </Box>
   );
 }

src/app/darmasaba/_com/Navbar.tsx

@@ -34,7 +34,7 @@ export function Navbar() {
             }}
               size={80} radius={"xl"}
             >
-              <Image src="/api/img/darmasaba-icon.png" alt="Logo Desa" width={50} height={50} />
+              <Image src="/darmasaba-icon.png" alt="Logo Desa" width={50} height={50} />
             </ActionIcon>
             <Burger onClick={() => stateNav.mobileOpen = !stateNav.mobileOpen} color={colors["blue-button"]} opened={mobileOpen} />
           </Group>