UI Admin Dashboard Layanan Desa 1 tabs

API Admin Dashboard Layanan Desa 1 Tabs

package.json

@@ -22,8 +22,9 @@
     "@mantine/carousel": "^7.16.2",
     "@mantine/charts": "^7.17.1",
     "@mantine/core": "^7.17.4",
-    "@mantine/dates": "^7.17.4",
+    "@mantine/dates": "^8.1.0",
     "@mantine/dropzone": "^7.17.0",
+    "@mantine/form": "^8.1.0",
     "@mantine/hooks": "^7.17.4",
     "@mantine/tiptap": "^7.17.4",
     "@paljs/types": "^8.1.0",

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

@@ -5,7 +5,6 @@
     "biodata": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</p>",
     "riwayat": "<ul> <li>2021 - 2027: Perbekel Desa Darmasaba</li> <li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li> <li>2020 - Sekarang: Founder Ugawa Record Music Studio</li> <li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li> </ul>",
     "pengalaman": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
-    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>",
-    "imageUrl": "/uploads/seeded-images/profile-ppid/perbekel.png"
+    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>"
   }
 ]

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

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

prisma/schema.prisma

@@ -50,21 +50,41 @@ model AppMenuChild {
 // ========================================= FILE STORAGE ========================================= //
 
 model FileStorage {
-  id          String        @id @default(cuid())
-  name        String        @unique
-  realName    String
-  path        String
-  mimeType    String
-  createdAt   DateTime      @default(now())
-  updatedAt   DateTime      @updatedAt
-  deletedAt   DateTime?
-  isActive    Boolean       @default(true)
-  link        String
-  Berita      Berita[]
-  PotensiDesa PotensiDesa[]
+  id           String         @id @default(cuid())
+  name         String         @unique
+  realName     String
+  path         String
+  mimeType     String
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime?
+  isActive     Boolean        @default(true)
+  link         String
+  Berita       Berita[]
+  PotensiDesa  PotensiDesa[]
+  Posyandu     Posyandu[]
+  ProfilePPID  ProfilePPID[]
+  StrukturPPID StrukturPPID[]
+
+  GalleryFoto GalleryFoto[]
+
+  PelayananSuratKeterangan PelayananSuratKeterangan[]
 }
 
 //========================================= MENU PPID ========================================= //
+
+//========================================= STRUKTUR PPID ========================================= //
+model StrukturPPID {
+  id        String       @id @default(cuid())
+  name      String       @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
+}
+
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
   id        String   @id @default(cuid())
@@ -89,23 +109,23 @@ model DasarHukumPPID {
 
 // ========================================= PROFILE PPID ========================================= //
 model ProfilePPID {
-  id         String   @id @default(cuid())
-  name       String   @db.Text
-  biodata    String   @db.Text
-  riwayat    String   @db.Text
-  pengalaman String   @db.Text
-  unggulan   String   @db.Text
-  imageUrl   String?
-  createdAt  DateTime @default(now())
-  updatedAt  DateTime @updatedAt
-  deletedAt  DateTime @default(now())
-  isActive   Boolean  @default(true)
+  id         String       @id @default(cuid())
+  name       String       @db.Text
+  biodata    String       @db.Text
+  riwayat    String       @db.Text
+  pengalaman String       @db.Text
+  unggulan   String       @db.Text
+  image      FileStorage? @relation(fields: [imageId], references: [id])
+  imageId    String?
+  createdAt  DateTime     @default(now())
+  updatedAt  DateTime     @updatedAt
+  deletedAt  DateTime     @default(now())
+  isActive   Boolean      @default(true)
 }
 
 // ========================================= DAFTAR INFORMASI PUBLIK ========================================= //
 model DaftarInformasiPublik {
   id             String   @id @default(cuid())
-  nomor          Int      @default(autoincrement())
   jenisInformasi String
   deskripsi      String
   tanggal        String
@@ -181,7 +201,7 @@ model FormulirPermohonanKeberatan {
 
 // ========================================= IKM ========================================= //
 model IndeksKepuasanMasyarakat {
-  id        Int      @id @default(autoincrement())
+  id        String   @id @default(cuid())
   label     String
   kepuasan  String
   createdAt DateTime @default(now())
@@ -319,53 +339,54 @@ model CategoryPengumuman {
   isActive    Boolean      @default(true)
 }
 
-// ========================================= IMAGES ========================================= //
-model Images {
-  id          String        @id @default(cuid())
-  url         String
-  label       String        @default("null")
-  active      Boolean       @default(true)
-  createdAt   DateTime      @default(now())
-  updatedAt   DateTime      @updatedAt
-  GalleryFoto GalleryFoto[]
-}
-
-// ========================================= VIDEOS ========================================= //
-model Videos {
-  id           String         @id @default(cuid())
-  url          String
-  label        String         @default("null")
-  active       Boolean        @default(true)
-  createdAt    DateTime       @default(now())
-  updatedAt    DateTime       @updatedAt
-  GalleryVideo GalleryVideo[]
-}
-
 // ========================================= GALLERY ========================================= //
 model GalleryFoto {
-  id               String   @id @default(cuid())
+  id               String       @id @default(cuid())
   name             String
-  image            String
-  createdAt        DateTime @default(now())
-  updatedAt        DateTime @updatedAt
-  deletedAt        DateTime @default(now())
-  isActive         Boolean  @default(true)
-  imagesId         String?  @unique
-  imageGalleryFoto Images?  @relation(fields: [imagesId], references: [id])
+  deskripsi        String       @db.Text
+  createdAt        DateTime     @default(now())
+  updatedAt        DateTime     @updatedAt
+  deletedAt        DateTime     @default(now())
+  isActive         Boolean      @default(true)
+  imagesId         String?      @unique
+  imageGalleryFoto FileStorage? @relation(fields: [imagesId], references: [id])
 }
 
 model GalleryVideo {
-  id                 String   @id @default(cuid())
-  name               String
-  video              String
-  createdAt          DateTime @default(now())
-  updatedAt          DateTime @updatedAt
-  deletedAt          DateTime @default(now())
-  isActive           Boolean  @default(true)
-  videosId           String?  @unique
-  videosGalleryVideo Videos?  @relation(fields: [videosId], references: [id])
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  linkVideo String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
 }
 
+// ========================================= LAYANAN DESA ========================================= //
+model PelayananSuratKeterangan {
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  image FileStorage @relation(fields: [imageId], references: [id])
+  imageId String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model PelayananTelunjukSaktiDesa {
+  id        String   @id @default(cuid())
+  name      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+
 // ========================================= MENU KESEHATAN ========================================= //
 // ========================================= DATA KESEHATAN WARGA ========================================= //
 
@@ -615,3 +636,17 @@ model DoctorSign {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
+
+// ========================================= POSYANDU ========================================= //
+model Posyandu {
+  id        String      @id @default(cuid())
+  name      String
+  nomor     String
+  deskripsi String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}

prisma/seed.ts

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

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

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

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

@@ -0,0 +1,415 @@
+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 fotoForm = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
+  imagesId: z.string().nonempty(),
+});
+
+const videoForm = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
+  linkVideo: z.string().min(1, { message: "Link video is required" }),
+});
+
+const defaultFormFoto = {
+  name: "",
+  deskripsi: "",
+  imagesId: "",
+};
+
+const defaultFormVideo = {
+  name: "",
+  deskripsi: "",
+  linkVideo: "",
+};
+
+const foto = proxy({
+  create: {
+    form: { ...defaultFormFoto },
+    loading: false,
+    async create() {
+      const cek = fotoForm.safeParse(foto.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        foto.create.loading = true;
+        const res = await ApiFetch.api.desa.gallery.foto["create"].post(
+          foto.create.form
+        );
+        if (res.status === 200) {
+          foto.findMany.load();
+          return toast.success("Foto berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan foto");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        foto.create.loading = false;
+      }
+    },
+    resetForm() {
+      foto.create.form = { ...defaultFormFoto };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GalleryFotoGetPayload<{
+          include: {
+            imageGalleryFoto: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.gallery.foto["find-many"].get();
+      if (res.status === 200) {
+        foto.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GalleryFotoGetPayload<{
+      include: {
+        imageGalleryFoto: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/gallery/foto/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          foto.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch foto:", res.statusText);
+          foto.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching foto:", error);
+        foto.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        foto.delete.loading = true;
+        const response = await fetch(`/api/desa/gallery/foto/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Foto berhasil dihapus");
+          await foto.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus foto");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus foto");
+      } finally {
+        foto.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormFoto },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/desa/gallery/foto/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imagesId: data.imagesId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading foto:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = fotoForm.safeParse(foto.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        foto.update.loading = true;
+        const response = await fetch(`/api/desa/gallery/foto/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            imagesId: this.form.imagesId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Foto berhasil diupdate");
+          await foto.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate foto");
+        }
+      } catch (error) {
+        console.error("Error updating foto:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate foto"
+        );
+        return false;
+      } finally {
+        foto.update.loading = false;
+      }
+    },
+    reset() {
+      foto.update.id = "";
+      foto.update.form = { ...defaultFormFoto };
+    },
+  },
+});
+
+const video = proxy({
+  create: {
+    form: { ...defaultFormVideo },
+    loading: false,
+    async create() {
+      const cek = videoForm.safeParse(video.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        video.create.loading = true;
+        const res = await ApiFetch.api.desa.gallery.video["create"].post(
+          video.create.form
+        );
+        if (res.status === 200) {
+          video.findMany.load();
+          return toast.success("Video berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan video");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        video.create.loading = false;
+      }
+    },
+    resetForm() {
+      video.create.form = { ...defaultFormVideo };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GalleryVideoGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.desa.gallery.video["find-many"].get();
+      if (res.status === 200) {
+        video.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GalleryVideoGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/gallery/video/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          video.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch video:", res.statusText);
+          video.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching video:", error);
+        video.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        video.delete.loading = true;
+        const response = await fetch(`/api/desa/gallery/video/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Video berhasil dihapus");
+          await video.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus video");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus video");
+      } finally {
+        video.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormVideo },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/desa/gallery/video/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            linkVideo: data.linkVideo,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading video:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = videoForm.safeParse(video.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        video.update.loading = true;
+        const response = await fetch(`/api/desa/gallery/video/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            linkVideo: this.form.linkVideo,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Video berhasil diupdate");
+          await video.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate video");
+        }
+      } catch (error) {
+        console.error("Error updating video:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate video"
+        );
+        return false;
+      } finally {
+        video.update.loading = false;
+      }
+    },
+    reset() {
+      video.update.id = "";
+      video.update.form = { ...defaultFormVideo };
+    },
+  },
+});
+
+const stateGallery = proxy({
+  foto,
+  video,
+});
+
+export default stateGallery;

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

@@ -0,0 +1,215 @@
+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 templateSuratKeteranganForm = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
+});
+
+const suratKeteranganForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const suratKeterangan = proxy({
+  create: {
+    form: { ...suratKeteranganForm },
+    loading: false,
+    async create() {
+      const cek = templateSuratKeteranganForm.safeParse(
+        suratKeterangan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        suratKeterangan.create.loading = true;
+        const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
+          "create"
+        ].post(suratKeterangan.create.form);
+        if (res.status === 200) {
+          suratKeterangan.findMany.load();
+          return toast.success("Surat Keterangan berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan surat keterangan");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        suratKeterangan.create.loading = false;
+      }
+    },
+    resetForm() {
+      suratKeterangan.create.form = { ...suratKeteranganForm };
+    },
+  },
+  findMany: {
+    data: [] as Prisma.PelayananSuratKeteranganGetPayload<{
+      include: { image: true };
+    }>[],
+    async load() {
+      const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        suratKeterangan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PelayananSuratKeteranganGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/desa/layanan/pelayanansuratketerangan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          suratKeterangan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch surat keterangan:", res.statusText);
+          suratKeterangan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching surat keterangan:", error);
+        suratKeterangan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        suratKeterangan.delete.loading = true;
+        const response = await fetch(
+          `/api/desa/layanan/pelayanansuratketerangan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Surat Keterangan berhasil dihapus");
+          await suratKeterangan.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus surat keterangan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus surat keterangan");
+      } finally {
+        suratKeterangan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...suratKeteranganForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/desa/layanan/pelayanansuratketerangan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching surat keterangan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateSuratKeteranganForm.safeParse(
+        suratKeterangan.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        suratKeterangan.edit.loading = true;
+        const response = await fetch(`/api/desa/layanan/pelayanansuratketerangan/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            deskripsi: this.form.deskripsi,
+            imageId: this.form.imageId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Surat Keterangan berhasil diupdate");
+          await suratKeterangan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate surat keterangan");
+        }
+      } catch (error) {
+        console.error("Error updating surat keterangan:", error);
+        toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat update surat keterangan");
+        return false;
+      } finally {
+        suratKeterangan.edit.loading = false;
+      }
+    },
+  },
+});
+
+const stateLayananDesa = proxy({
+  suratKeterangan,
+});
+
+export default stateLayananDesa;
+

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/admin/(dashboard)/desa/_com/layoutTabLayanan.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Pelayanan Surat Keterangan",
+            value: "pelayanansuratketerangan",
+            href: "/admin/desa/layanan/pelayanan_surat_keterangan"
+        },
+        {
+            label: "Pelayanan Perizinan Berusaha",
+            value: "pelayananperizinanusaha",
+            href: "/admin/desa/layanan/pelayanan_perizinan_berusaha"
+        },
+        {
+            label: "Pelayanan Telunjuk Sakti Desa",
+            value: "pelayanantelunjuksaktidesa",
+            href: "/admin/desa/layanan/pelayanan_telunjuk_sakti_desa"
+        },
+        {
+            label: "Pelayanan Penduduk Non-Permanent",
+            value: "pelayanantelunjuknonpermanent",
+            href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent"
+        }
+    ];
+    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</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsLayanan;

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

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

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

@@ -0,0 +1,119 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function EditFoto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const router = useRouter();
+  const params = useParams();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  useEffect(() => {
+    const loadFoto = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await fotoState.update.load(id);
+        if (data) {
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading foto:', error);
+        toast.error('Gagal memuat data foto');
+      }
+    };
+    loadFoto();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+        fotoState.update.form.imagesId = uploaded.id;
+      }
+      await fotoState.update.update();
+      toast.success('Foto berhasil diperbarui!');
+      router.push('/admin/desa/gallery/foto');
+    } catch (error) {
+      console.error('Error updating foto:', error);
+      toast.error('Terjadi kesalahan saat memperbarui foto');
+    }
+  };
+
+  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 Foto</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+            placeholder='Masukkan judul foto'
+            value={fotoState.update.form.name}
+            onChange={(e) =>
+              (fotoState.update.form.name = e.target.value)
+            }
+          />
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <EditEditor
+              value={fotoState.update.form.deskripsi}
+              onChange={(val) => {
+                fotoState.update.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditFoto;

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

@@ -0,0 +1,112 @@
+'use client'
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+
+function DetailFoto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    fotoState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      fotoState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/gallery/foto")
+    }
+  }
+
+  if (!fotoState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Foto</Text>
+          {fotoState.findUnique.data ? (
+            <Paper key={fotoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{fotoState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal Foto</Text>
+                  <Text fz={"lg"}>{new Date(fotoState.findUnique.data?.createdAt).toDateString()}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: fotoState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 300, md: 350}} src={fotoState.findUnique.data?.imageGalleryFoto?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (fotoState.findUnique.data) {
+                        setSelectedId(fotoState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={fotoState.delete.loading || !fotoState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (fotoState.findUnique.data) {
+                        router.push(`/admin/desa/gallery/foto/${fotoState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!fotoState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailFoto;

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

@@ -1,45 +1,108 @@
 'use client'
-import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
 
 
 
 function CreateFoto() {
+  const fotoState = useProxy(stateGallery.foto)
   const router = useRouter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    fotoState.create.form = {
+      name: "",
+      deskripsi: "",
+      imagesId: "",
+    };
+
+    setPreviewImage(null)
+    setFile(null)
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    fotoState.create.form.imagesId = uploaded.id;
+    await fotoState.create.create();
+    resetForm();
+    router.push("/admin/desa/gallery/foto")
+  };
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Foto</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
-          placeholder='Masukkan judul foto'
+            label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+            placeholder='Masukkan judul foto'
+            value={fotoState.create.form.name}
+            onChange={(val) => {
+              fotoState.create.form.name = val.target.value;
+            }}
           />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal Foto</Text>}
-          placeholder='Masukkan tanggal foto'
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
           />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <CreateEditor
+              value={fotoState.create.form.deskripsi}
+              onChange={(val) => {
+                fotoState.create.form.deskripsi = val;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+    </Box>
   );
 }
 

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

@@ -1,12 +1,29 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import JudulListTab from '../../../_com/jusulListTab';
+import { useProxy } from 'valtio/utils';
+import stateGallery from '../../../_state/desa/gallery';
+import { useShallowEffect } from '@mantine/hooks';
 
 function Foto() {
+  const fotoState = useProxy(stateGallery.foto)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    fotoState.findMany.load()
+  }, [])
+
+  if (!fotoState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+  
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -26,16 +43,20 @@ function Foto() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Foto 1</TableTd>
-              <TableTd>2022-01-01</TableTd>
-              <TableTd>Deskripsi Foto 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/desa/gallery/foto/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {fotoState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
+                <TableTd>
+                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/desa/gallery/foto/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
       </Paper>

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

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

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

@@ -1,35 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import { IconPhoto, IconVideo } from '@tabler/icons-react';
-import Foto from './foto/page';
-import Video from './video/page';
-
-function Gallery() {
-  return (
-    <Box>
-      <Stack gap={"xs"}>
-        <Title order={3}>Gallery</Title>
-        <Tabs color={colors['blue-button']} variant="pills" defaultValue="foto">
-          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value="foto" leftSection={<IconPhoto size={12} />}>
-              Foto
-            </TabsTab>
-            <TabsTab value="video" leftSection={<IconVideo size={12} />}>
-              Video
-            </TabsTab>
-          </TabsList>
-
-          <TabsPanel value="foto">
-            <Foto/>
-          </TabsPanel>
-
-          <TabsPanel value="video">
-            <Video/>
-          </TabsPanel>
-        </Tabs>
-      </Stack>
-    </Box>
-  );
-}
-
-export default Gallery;

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

@@ -0,0 +1,156 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, Flex, Group, Image, Modal, 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 EditVideo() {
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false);
+  const videoState = useProxy(stateGallery.video)
+  const params = useParams()
+  const [formData, setFormData] = useState({
+    name: videoState.findUnique.data?.name || '',
+    deskripsi: videoState.findUnique.data?.deskripsi || '',
+    linkVideo: videoState.findUnique.data?.linkVideo || '',
+  })
+
+  useEffect(() => {
+    const loadVideo = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await videoState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            linkVideo: data.linkVideo || '',
+          });
+        }
+      } catch (error) {
+        console.error('Error loading video:', error);
+        toast.error('Gagal memuat data video');
+      }
+    };
+    loadVideo();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      videoState.update.form = {
+        ...videoState.update.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        linkVideo: formData.linkVideo,
+      };
+      await videoState.update.update();
+      toast.success('Video berhasil diperbarui!');
+      router.push('/admin/desa/gallery/video');
+    } catch (error) {
+      console.error('Error updating video:', error);
+      toast.error('Terjadi kesalahan saat memperbarui video');
+    }
+  }
+
+  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 Video</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+            placeholder='Masukkan judul video'
+            value={formData.name}
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                name: val.target.value,
+              })
+            }}
+          />
+          <Box>
+            <TextInput
+              label={<Text fw={"bold"} fz={"sm"}>Link Video Youtube <Text span c="red" inherit>*</Text></Text>}
+              placeholder='Masukkan link video youtube'
+              value={formData.linkVideo}
+              onChange={(val) => {
+                setFormData({
+                  ...formData,
+                  linkVideo: val.target.value,
+                })
+              }}
+            />
+            <Flex pt={5} align={"center"} gap={"xs"}>
+              <Text c={"dimmed"} fw={"bold"} fz={"xs"}>Cara mendapatkan link video youtube</Text>
+              <ActionIcon size={"xs"} radius={"xl"} color='black' variant='filled' onClick={() => setModalHapus(true)}>
+                <Text fw={"bold"} fz={"xs"} c="white">?</Text>
+              </ActionIcon>
+            </Flex>
+          </Box>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => {
+                setFormData({
+                  ...formData,
+                  deskripsi: val,
+                })
+              }}
+            />
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <Modal
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        title={<Text fw={"bold"} fz={"xl"}>Cara mendapatkan link video youtube</Text>}
+      >
+        <Stack gap={"xs"}>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 1</Text>
+          <Text fz={"sm"}>Buka video youtube yang ingin Anda bagikan lalu klik icon titik tiga</Text>
+          <Image src="/video.png" w={300} alt="" />
+          </Box>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 2</Text>
+          <Text fz={"sm"}>Klik bagikan</Text>
+          <Image src="/Share.png" w={300} alt="" />
+          </Box>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 3</Text>
+          <Text fz={"sm"}>Klik dibagian sematkan</Text>
+          <Image src="/bagikanPostingan.png" w={300} alt="" />
+          </Box>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 4</Text>
+          <Text fz={"sm"}>Lalu copy pada bagaian srcnya aja</Text>
+          <Image src="/sematkan.png" w={300} alt="" />
+          </Box>
+        </Stack>
+      </Modal>
+    </Box>
+  );
+}
+
+export default EditVideo;

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

@@ -0,0 +1,111 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailVideo() {
+  const videoState = useProxy(stateGallery.video)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    videoState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      videoState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/gallery/video")
+    }
+  }
+
+  if (!videoState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Video</Text>
+          {videoState.findUnique.data ? (
+            <Paper key={videoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{videoState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Link Video</Text>
+                  <Text fz={"lg"}>{videoState.findUnique.data?.linkVideo}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal Video</Text>
+                  <Text fz={"lg"}>{new Date(videoState.findUnique.data?.createdAt).toDateString()}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: videoState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (videoState.findUnique.data) {
+                        setSelectedId(videoState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={videoState.delete.loading || !videoState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (videoState.findUnique.data) {
+                        router.push(`/admin/desa/gallery/video/${videoState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!videoState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailVideo;

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

@@ -1,45 +1,114 @@
 'use client'
-import { KeamananEditor } from '@/app/admin/(dashboard)/keamanan/_com/keamananEditor';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { ActionIcon, Box, Button, Flex, Group, Image, Modal, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 
 
 
 function CreateVideo() {
+  const videoState = useProxy(stateGallery.video)
   const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false);
+
+  const resetForm = () => {
+    videoState.create.form = {
+      name: "",
+      deskripsi: "",
+      linkVideo: "",
+    };
+  };
+
+  const handleSubmit = async () => {
+    await videoState.create.create();
+    resetForm();
+    router.push("/admin/desa/gallery/video")
+  };
+
   return (
     <Box>
       <Box mb={10}>
         <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25}/>
+          <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
 
-      <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
           <Title order={4}>Create Video</Title>
           <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
-          placeholder='Masukkan judul video'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal Video</Text>}
-          placeholder='Masukkan tanggal video'
+            label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+            placeholder='Masukkan judul video'
+            value={videoState.create.form.name}
+            onChange={(val) => {
+              videoState.create.form.name = val.target.value;
+            }}
           />
+          <Box>
+            <TextInput
+              label={<Text fw={"bold"} fz={"sm"}>Link Video Youtube <Text span c="red" inherit>*</Text></Text>}
+              placeholder='Masukkan link video youtube'
+              value={videoState.create.form.linkVideo}
+              onChange={(val) => {
+                videoState.create.form.linkVideo = val.target.value;
+              }}
+            />
+            <Flex pt={5} align={"center"} gap={"xs"}>
+              <Text c={"dimmed"} fw={"bold"} fz={"xs"}>Cara mendapatkan link video youtube</Text>
+              <ActionIcon size={"xs"} radius={"xl"} color='black' variant='filled' onClick={() => setModalHapus(true)}>
+                <Text fw={"bold"} fz={"xs"} c="white">?</Text>
+              </ActionIcon>
+            </Flex>
+          </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
-            <KeamananEditor
-              showSubmit={false}
+            <CreateEditor
+              value={videoState.create.form.deskripsi}
+              onChange={(val) => {
+                videoState.create.form.deskripsi = val;
+              }}
             />
           </Box>
           <Group>
-            <Button bg={colors['blue-button']}>Submit</Button>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
           </Group>
-       </Stack>
+        </Stack>
       </Paper>
-   </Box>
+
+      {/* Modal Konfirmasi Hapus */}
+      <Modal
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        title={<Text fw={"bold"} fz={"xl"}>Cara mendapatkan link video youtube</Text>}
+      >
+        <Stack gap={"xs"}>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 1</Text>
+          <Text fz={"sm"}>Buka video youtube yang ingin Anda bagikan lalu klik icon titik tiga</Text>
+          <Image src="/video.png" w={300} alt="" />
+          </Box>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 2</Text>
+          <Text fz={"sm"}>Klik bagikan</Text>
+          <Image src="/Share.png" w={300} alt="" />
+          </Box>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 3</Text>
+          <Text fz={"sm"}>Klik dibagian sematkan</Text>
+          <Image src="/bagikanPostingan.png" w={300} alt="" />
+          </Box>
+          <Box>
+          <Text fw={"bold"} fz={"lg"}>Langkah 4</Text>
+          <Text fz={"sm"}>Lalu copy pada bagaian srcnya aja</Text>
+          <Image src="/sematkan.png" w={300} alt="" />
+          </Box>
+        </Stack>
+      </Modal>
+    </Box>
   );
 }
 

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

@@ -1,12 +1,29 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import JudulListTab from '../../../_com/jusulListTab';
+import { useProxy } from 'valtio/utils';
+import stateGallery from '../../../_state/desa/gallery';
+import { useShallowEffect } from '@mantine/hooks';
 
 function Video() {
+  const videoState = useProxy(stateGallery.video)
   const router = useRouter();
+
+  useShallowEffect(() => {
+    videoState.findMany.load()
+  }, [])
+
+  if (!videoState.findMany.data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+  
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -26,16 +43,20 @@ function Video() {
             </TableTr>
           </TableThead>
           <TableTbody>
-            <TableTr>
-              <TableTd>Video 1</TableTd>
-              <TableTd>2022-01-01</TableTd>
-              <TableTd>Deskripsi Video 1</TableTd>
-              <TableTd>
-                <Button onClick={() => router.push('/admin/desa/gallery/video/detail')}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
+            {videoState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
+                <TableTd>
+                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
       </Paper>

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

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

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

@@ -1,48 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
-import SuratKeterangan from './ui/surat_keterangan/page';
-import PerizinanUsaha from './ui/perizinan_usaha/page';
-import TelunjukSaktiDesa from './ui/telunjuk_sakti_desa/page';
-import PendudukNonPermanent from './ui/penduduk_non_permanent/page';
-
-function Page() {
-  return (
-    <Box py={10}>
-      <Stack >
-        <Title order={3}>Layanan</Title>
-        <Tabs color={colors['blue-button']} variant='pills' defaultValue={"Pelayanan Surat Keterangan"}>
-          <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-            <TabsTab value="Pelayanan Surat Keterangan">
-              Pelayanan Surat Keterangan
-            </TabsTab>
-            <TabsTab value="Pelayanan Perizinan Berusaha">
-              Pelayanan Perizinan Berusaha
-            </TabsTab>
-            <TabsTab value="Pelayanan Telunjuk Sakti Desa">
-              Pelayanan Telunjuk Sakti Desa
-            </TabsTab>
-            <TabsTab value="Pelayanan Penduduk Non-Permanent">
-              Pelayanan Penduduk Non-Permanent
-            </TabsTab>
-          </TabsList>
-
-          <TabsPanel value="Pelayanan Surat Keterangan">
-            <SuratKeterangan />
-          </TabsPanel>
-          <TabsPanel value="Pelayanan Perizinan Berusaha">
-            <PerizinanUsaha />
-          </TabsPanel>
-          <TabsPanel value="Pelayanan Telunjuk Sakti Desa">
-            <TelunjukSaktiDesa />
-          </TabsPanel>
-          <TabsPanel value="Pelayanan Penduduk Non-Permanent">
-            <PendudukNonPermanent />
-          </TabsPanel>
-        </Tabs>
-      </Stack>
-    </Box>
-  );
-}
-
-export default Page;
-

src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/page.tsx

@@ -0,0 +1,43 @@
+import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+
+function SuratKeterangan() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Pelayanan Penduduk Non-Permanent'
+          href='/admin/desa/layanan/pelayanan_penduduk_non_permanent/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Pelayanan Penduduk Non-Permanent</TableTd>
+              <TableTd>Deskripsi Pelayanan Penduduk Non-Permanent</TableTd>
+              <TableTd>
+                <Text>
+                  <Button>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </Text>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default SuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/page.tsx

@@ -0,0 +1,43 @@
+import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+
+function PerizinanBerusaha() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Pelayanan Perizinan Berusaha'
+          href='/admin/desa/layanan/pelayanan_perizinan_berusaha/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Pelayanan Perizinan Berusaha</TableTd>
+              <TableTd>Deskripsi Pelayanan Perizinan Berusaha</TableTd>
+              <TableTd>
+                <Text>
+                  <Button>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </Text>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default PerizinanBerusaha;

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

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

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/page.tsx

@@ -0,0 +1,109 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailSuratKeterangan() {
+  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    suratKeteranganState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      suratKeteranganState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
+    }
+  }
+
+  if (!suratKeteranganState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Surat Keterangan</Text>
+          {suratKeteranganState.findUnique.data ? (
+            <Paper key={suratKeteranganState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{suratKeteranganState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}dangerouslySetInnerHTML={{ __html: suratKeteranganState.findUnique.data?.deskripsi }}></Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (suratKeteranganState.findUnique.data) {
+                        setSelectedId(suratKeteranganState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={suratKeteranganState.delete.loading || !suratKeteranganState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (suratKeteranganState.findUnique.data) {
+                        router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${suratKeteranganState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!suratKeteranganState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailSuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx

@@ -0,0 +1,104 @@
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function CreateSuratKeterangan() {
+  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const router = useRouter()
+
+  const resetForm = () => {
+    stateSurat.create.form = {
+      name: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null)
+    setFile(null)
+  }
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file: file,
+      name: file.name
+    })
+
+    const uploaded = res.data?.data
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar")
+    }
+
+    stateSurat.create.form.imageId = uploaded.id
+
+    await stateSurat.create.create()
+    resetForm()
+    router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
+
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Surat Keterangan</Title>
+          <TextInput
+            value={stateSurat.create.form.name}
+            onChange={(val) => {
+              stateSurat.create.form.name = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
+            placeholder="masukkan nama surat keterangan"
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <CreateEditor
+              value={stateSurat.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateSurat.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          <FileInput
+            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
+            value={file}
+            onChange={async (e) => {
+              if (!e) return;
+              setFile(e);
+              const base64 = await e.arrayBuffer().then((buf) =>
+                "data:image/png;base64," + Buffer.from(buf).toString("base64")
+              );
+              setPreviewImage(base64);
+            }}
+          />
+          {previewImage ? (
+            <Image alt="" src={previewImage} w={200} h={200} />
+          ) : (
+            <Center w={200} h={200} bg={"gray"}>
+              <IconImageInPicture />
+            </Center>
+          )}
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateSuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx

@@ -0,0 +1,71 @@
+'use client'
+import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import colors from '@/con/colors';
+import { Box, Button, Image, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useProxy } from 'valtio/utils';
+import stateLayananDesa from '../../../_state/desa/layananDesa';
+import { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';
+
+function SuratKeterangan() {
+  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    suratKeteranganState.findMany.load()
+  }, [])
+
+  if (!suratKeteranganState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Surat Keterangan'
+          href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {suratKeteranganState.findMany.data?.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                </TableTd>
+                <TableTd>
+                  <Image w={100} src={item.image?.link} alt="gambar" />
+                </TableTd>  
+                <TableTd>
+                  <Text>
+                    <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </Text>
+              </TableTd>
+            </TableTr>
+          ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default SuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx

@@ -0,0 +1,43 @@
+import JudulListTab from '@/app/admin/(dashboard)/_com/jusulListTab';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+
+function SuratKeterangan() {
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulListTab
+          title='List Pelayanan Telunjuk Sakti Desa'
+          href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
+          placeholder='pencarian'
+          searchIcon={<IconSearch size={16} />}
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            <TableTr>
+              <TableTd>Pelayanan Telunjuk Sakti Desa</TableTd>
+              <TableTd>Deskripsi Pelayanan Telunjuk Sakti Desa</TableTd>
+              <TableTd>
+                <Text>
+                  <Button>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </Text>
+              </TableTd>
+            </TableTr>
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default SuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/ui/penduduk_non_permanent/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListPendudukNonPermanent() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Title order={3}>List Penduduk Non-Permanent</Title>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListPendudukNonPermanent;

src/app/admin/(dashboard)/desa/layanan/ui/penduduk_non_permanent/page.tsx

@@ -1,35 +0,0 @@
-import colors from '@/con/colors';
-import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
-import React from 'react';
-import { DesaEditor } from '../../../_com/desaEditor';
-import ListPendudukNonPermanent from './listPage';
-
-function PendudukNonPermanent() {
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack>
-              <Title order={3}>Penduduk Non-Permanent</Title>
-              <Text fw={"bold"}>Deskripsi Penduduk Non-Permanent</Text>
-              <DesaEditor showSubmit={false} />
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListPendudukNonPermanent />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default PendudukNonPermanent;
-

src/app/admin/(dashboard)/desa/layanan/ui/perizinan_usaha/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListPerizinanUsaha() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>List Perizinan Usaha</Title>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListPerizinanUsaha;

src/app/admin/(dashboard)/desa/layanan/ui/perizinan_usaha/page.tsx

@@ -1,40 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Button, Group, Paper, SimpleGrid, Stack, Text, Title } from '@mantine/core';
-import React from 'react';
-import ListPerizinanUsaha from './listPage';
-import { DesaEditor } from '../../../_com/desaEditor';
-
-function PerizinanUsaha() {
-  return (
-    <Box py={10}>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Pelayanan Perizinan Usaha</Title>
-                <Box>
-                  <Text fz={"sm"} fw={"bold"}>Deskripsi Perizinan Usaha</Text>
-                  <DesaEditor
-                    showSubmit={false}
-                  />
-                </Box>
-                <Group>
-                  <Button
-                    mt={10}
-                    bg={colors['blue-button']}
-                  >
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-         <ListPerizinanUsaha />
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default PerizinanUsaha;

src/app/admin/(dashboard)/desa/layanan/ui/surat_keterangan/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListSuratKeterangan() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Title order={3}>List Surat Keterangan</Title>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListSuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/ui/surat_keterangan/page.tsx

@@ -1,48 +0,0 @@
-import colors from '@/con/colors';
-import { Box, SimpleGrid, Paper, Stack, Title, Button, Group, TextInput, Text, Center, Flex } from '@mantine/core';
-import { IconUpload } from '@tabler/icons-react';
-import React from 'react';
-import ListSuratKeterangan from './listPage';
-
-function SuratKeterangan() {
-  return (
-    <Box py={10}>
-      <Stack gap={"xs"}>
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Box>
-            <Paper bg={colors['white-1']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Title order={3}>Pelayanan Surat Keterangan</Title>
-                <TextInput
-                  label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
-                  placeholder='masukkan nama surat keterangan'
-                />
-                <Text fz={"sm"} fw={"bold"}>Upload Gambar Surat Keterangan</Text>
-                <Box bg={colors['BG-trans']} p={"md"}>
-                  <Center>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Center>
-                </Box>
-                <Flex>
-                  <Text fz={"xs"} c={"red"}>*</Text>
-                  <Text fz={"xs"} c={"dimmed"} fw={"bold"}>Upload foto untuk konten surat keterangan</Text>
-                </Flex>
-                <Group>
-                  <Button
-                    mt={10}
-                    bg={colors['blue-button']}
-                  >
-                    Submit
-                  </Button>
-                </Group>
-              </Stack>
-            </Paper>
-          </Box>
-          <ListSuratKeterangan />
-        </SimpleGrid>
-      </Stack>
-    </Box>
-  );
-}
-
-export default SuratKeterangan;

src/app/admin/(dashboard)/desa/layanan/ui/telunjuk_sakti_desa/listPage.tsx

@@ -1,17 +0,0 @@
-import colors from '@/con/colors';
-import { Box, Paper, Stack, Title } from '@mantine/core';
-import React from 'react';
-
-function ListTelunjukSaktiDesa() {
-  return (
-    <Box>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Title order={3}>List Telunjuk Sakti Desa</Title>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default ListTelunjukSaktiDesa;

src/app/admin/(dashboard)/desa/layanan/ui/telunjuk_sakti_desa/page.tsx

@@ -1,36 +0,0 @@
-import colors from '@/con/colors';
-import { Box, SimpleGrid, Paper, Stack, Title, Group, Button, Text } from '@mantine/core';
-import React from 'react';
-import { DesaEditor } from '../../../_com/desaEditor';
-import ListTelunjukSaktiDesa from './listPage';
-
-function TelunjukSaktiDesa() {
-  return (
-    <Box py={10}>
-      <SimpleGrid cols={{ base: 1, md: 2 }}>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'}>
-            <Stack>
-              <Title order={3}>Telunjuk Sakti Desa</Title>
-              <Box>
-                <Text fz={"sm"} fw={"bold"}>Deskripsi Telunjuk Sakti Desa</Text>
-                <DesaEditor showSubmit={false} />
-              </Box>
-              <Group>
-                <Button
-                  mt={10}
-                  bg={colors['blue-button']}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
-        <ListTelunjukSaktiDesa />
-      </SimpleGrid>
-    </Box>
-  );
-}
-
-export default TelunjukSaktiDesa;

src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,9 +1,11 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
 import HeaderSearch from '../../_com/header';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function DataLingkunganDesa() {
   return (
@@ -19,6 +21,7 @@ function DataLingkunganDesa() {
 }
 
 function ListDataLingkunganDesa() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p="md">
@@ -31,7 +34,7 @@ function ListDataLingkunganDesa() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Nama Data Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
                   <TableTh>Deskripsi</TableTh>
                   <TableTh>Detail</TableTh>
@@ -41,15 +44,15 @@ function ListDataLingkunganDesa() {
                 <TableTr>
                   <TableTd>
                     <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Judul</Text>
+                      <Text truncate="end" fz={"sm"}>Lingkungan Desa</Text>
                     </Box>
                   </TableTd>
                   <TableTd>
-                    <Image w={100}  alt="image" />
+                    <Image w={100} src={"/"}  alt="image" />
                   </TableTd>
                   <TableTd>Deskripsi</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/data-lingkungan-desa/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

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

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

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

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

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

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

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

@@ -1,9 +1,11 @@
+'use client'
 import { Box, Button, Image, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import React from 'react';
 import HeaderSearch from '../../_com/header';
 import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import colors from '@/con/colors';
 import JudulList from '../../_com/judulList';
+import { useRouter } from 'next/navigation';
 
 function Page() { 
   return (
@@ -19,6 +21,7 @@ function Page() {
 }
 
 function ListEdukasiLingkungan() {
+  const router = useRouter();
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
@@ -31,9 +34,9 @@ function ListEdukasiLingkungan() {
             <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
               <TableThead>
                 <TableTr>
-                  <TableTh>Judul</TableTh>
+                  <TableTh>Judul Edukasi Lingkungan</TableTh>
                   <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Deskripsi Edukasi Lingkungan</TableTh>
                   <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
@@ -47,9 +50,9 @@ function ListEdukasiLingkungan() {
                   <TableTd>
                     <Image w={100} src="/" alt="image" />
                   </TableTd>
-                  <TableTd>Deskripsi</TableTd>
+                  <TableTd>Deskripsi Edukasi Lingkungan</TableTd>
                   <TableTd>
-                    <Button>
+                    <Button onClick={() => router.push('/admin/lingkungan/edukasi-lingkungan/detail')}>
                       <IconDeviceImacCog size={25} />
                     </Button>
                   </TableTd>

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

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

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

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

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 // import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
-function DetailFoto() {
+function DetailKonservasiAdatBali() {
   const router = useRouter();
   return (
     <Box>
@@ -16,28 +16,24 @@ function DetailFoto() {
       </Box>
       <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Foto</Text>
+          <Text fz={"xl"} fw={"bold"}>Detail Konservasi Adat Bali</Text>
 
           <Paper bg={colors['BG-trans']} p={'md'}>
             <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Judul Foto</Text>
-             <Text>Foto 1</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Tanggal Foto</Text>
-             <Text>2022-01-01</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Deskripsi Foto</Text>
-             <Text>Deskripsi Foto 1</Text>
-             </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Judul Konservasi Adat Bali</Text>
+                <Text fz={"lg"}>Test Judul</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Deskripsi Konservasi Adat Bali</Text>
+                <Text fz={"lg"} >Test Deskripsi</Text>
+              </Box>
               <Box>
                 <Flex gap={"xs"}>
                   <Button color="red">
                     <IconX size={20} />
                   </Button>
-                  <Button onClick={() => router.push('/admin/desa/gallery/foto/edit')} color="green">
+                  <Button onClick={() => router.push('/admin/lingkungan/konservasi-adat-bali/edit')} color="green">
                     <IconEdit size={20} />
                   </Button>
                 </Flex>
@@ -58,5 +54,4 @@ function DetailFoto() {
   );
 }
 
-export default DetailFoto;
-
+export default DetailKonservasiAdatBali;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -2,12 +2,12 @@
 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 } from '@tabler/icons-react';
+import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 
 
 
-function EditVideo() {
+function CreateMekanismeBankSampah() {
   const router = useRouter();
   return (
     <Box>
@@ -19,17 +19,17 @@ function EditVideo() {
 
       <Paper w={{base: '100%', md: '50%'}} bg={colors['white-1']} p={'md'}>
         <Stack gap={"xs"}>
-          <Title order={4}>Edit Video</Title>
+          <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 Video</Text>}
-          placeholder='Masukkan judul video'
-          />
-          <TextInput
-          label={<Text fw={"bold"} fz={"sm"}>Tanggal Video</Text>}
-          placeholder='Masukkan tanggal video'
+          label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+          placeholder='Masukkan judul'
           />
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
             <KeamananEditor
               showSubmit={false}
             />
@@ -43,4 +43,4 @@ function EditVideo() {
   );
 }
 
-export default EditVideo;
+export default CreateMekanismeBankSampah;

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

@@ -1,11 +1,11 @@
 'use client'
 import colors from '@/con/colors';
 import { Box, Button, Flex, Paper, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconImageInPicture, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 // import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
-function DetailVideo() {
+function DetailPengelolaanSampahBankSampah() {
   const router = useRouter();
   return (
     <Box>
@@ -16,28 +16,28 @@ function DetailVideo() {
       </Box>
       <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
         <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Video</Text>
+          <Text fz={"xl"} fw={"bold"}>Detail Mekanisme Bank Sampah</Text>
 
           <Paper bg={colors['BG-trans']} p={'md'}>
             <Stack gap={"xs"}>
-             <Box>
-             <Text fw={"bold"}>Judul Video</Text>
-             <Text>Video 1</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Tanggal Video</Text>
-             <Text>2022-01-01</Text>
-             </Box>
-             <Box>
-             <Text fw={"bold"}>Deskripsi Video</Text>
-             <Text>Deskripsi Video 1</Text>
-             </Box>
+              <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/desa/gallery/video/edit')} color="green">
+                  <Button onClick={() => router.push('/admin/lingkungan/pengelolaan-sampah-bank-sampah/list_pengelolaan_sampah_bank_sampah/edit')} color="green">
                     <IconEdit size={20} />
                   </Button>
                 </Flex>
@@ -58,5 +58,4 @@ function DetailVideo() {
   );
 }
 
-export default DetailVideo;
-
+export default DetailPengelolaanSampahBankSampah;