UI & API Pendidikan Non Formal

prisma/data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Fasilitas yang Disediakan",
+      "deskripsi": "<ul><li><p>Buku-buku pelajaran dan alat tulis</p></li><li><p>Ruang belajar nyaman dan kondusif</p></li><li><p>Modul latihan dan pendampingan tugas</p></li><li><p>Minuman ringan dan dukungan motivasi belajar</p></li></ul>"
+    }
+]

prisma/data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Lokasi dan Jadwal",
+      "deskripsi": "<ul><li><p>Lokasi: Balai Banjar / Balai Desa Darmasaba / Perpustakaan Desa</p></li><li><p>Jadwal: Setiap hari Senin, Rabu, dan Jumat pukul 16.00–18.00 WITA</p></li><li><p>Peserta: Terbuka untuk semua siswa SD–SMP di wilayah desa</p></li></ul>"
+    }
+]

prisma/data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Tujuan Program",
+      "deskripsi": "<ul><li><p>Memberikan pendampingan belajar secara gratis bagi siswa SD hingga SMP</p></li><li><p>Membantu siswa dalam menghadapi ujian dan menyelesaikan tugas sekolah</p></li><li><p>Menumbuhkan kepercayaan diri dan kemandirian dalam belajar</p></li><li><p>Meningkatkan kesetaraan pendidikan untuk seluruh anak desa</p></li></ul>"
+    }
+]

prisma/data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Tempat Kegiatan",
+      "deskripsi": "<p>Program Pendidikan Non Formal yang diselenggarakan di Desa Darmasaba meliputi:</p><p>1) Keaksaraan Fungsional</p><ul><li><p>Untuk warga yang belum bisa membaca dan menulis</p></li></ul><p>2) Pendidikan Kesetaraan (Paket A, B, C)</p><ul><li><p>Setara SD, SMP, dan SMA bagi yang tidak menyelesaikan pendidikan formal</p></li></ul><p>3) Pelatihan Keterampilan</p><ul><li><p>Menjahit, memasak, sablon, pertanian, peternakan, hingga teknologi digital</p></li></ul><p>4) Kursus &amp; Pelatihan Soft Skill</p><ul><li><p>Public speaking, pengelolaan keuangan, kepemimpinan pemuda</p></li></ul><p>5) Pendidikan Keluarga &amp; Parenting</p><ul><li><p>Untuk membekali orang tua dalam mendampingi tumbuh kembang anak</p></li></ul>"
+    }
+]

prisma/data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Tempat Kegiatan",
+      "deskripsi": "<ul><li><p>Balai Desa Darmasaba</p></li><li><p>TPK, Perpustakaan Desa, atau Posyandu</p></li><li><p>Bisa juga dilakukan secara mobile atau door to door</p></li></ul>"
+    }
+]

prisma/data/pendidikan/pendidikan-non-formal/tujuan-program2.json

@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Tujuan Program",
+      "deskripsi": "<ul><li><p>Memberikan kesempatan belajar yang fleksibel bagi warga desa</p></li><li><p>Meningkatkan keterampilan hidup dan kemandirian ekonomi</p></li><li><p>Mendorong partisipasi masyarakat dalam pembangunan desa</p></li><li><p>Mengurangi angka putus sekolah dan meningkatkan kualitas SDM</p></li></ul>"
+    }
+]

prisma/data/pendidikan/program-pendidikan-anak/program-unggulan.json

@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Program Unggulan",
+    "deskripsi": "<ul><li><p>Bimbingan Belajar Gratis: Untuk siswa kurang mampu</p></li><li><p>Gerakan Literasi Desa: Meningkatkan minat baca sejak dini</p></li><li><p>Pelatihan Digital untuk Anak dan Remaja</p></li><li><p>Beasiswa Anak Berprestasi &amp; Kurang Mampu</p></li></ul>"
+  }
+]

prisma/data/pendidikan/program-pendidikan-anak/tujuan-program.json

@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Tujuan Program",
+    "deskripsi": "<ul><li><p>Meningkatkan akses pendidikan yang merata dan berkualitas</p></li><li><p>Menumbuhkan semangat belajar sejak dini</p></li><li><p>Membentuk karakter anak yang berakhlak dan berwawasan lingkungan</p></li><li><p>Mendukung tumbuh kembang anak melalui pendekatan pendidikan yang holistik</p></li></ul>"
+  }
+]

prisma/schema.prisma

@@ -95,8 +95,7 @@ model FileStorage {
   SDGSDesa                 SDGSDesa[]
   APBDesImage              APBDes[]                   @relation("APBDesImage")
   APBDesFile               APBDes[]                   @relation("APBDesFile")
-
+  PrestasiDesa             PrestasiDesa[]
-  PrestasiDesa PrestasiDesa[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -216,6 +215,81 @@ model KategoriPrestasiDesa {
   PrestasiDesa PrestasiDesa[]
 }
 
+//========================================= INDEKS KEPUASAN MASYARAKAT ========================================= //
+// Entitas Survey
+model Survey {
+  id               String        @id @default(cuid())
+  title            String // Judul survei
+  totalRespondents Int // Total jumlah responden
+  averageScore     Float // Rata-rata skor
+  monthlyStats     MonthlyStat[]
+  createdAt        DateTime      @default(now())
+  updatedAt        DateTime      @updatedAt
+  deletedAt        DateTime      @default(now())
+  isActive         Boolean       @default(true)
+}
+
+// Entitas Statistik Bulanan
+model MonthlyStat {
+  id               String         @id @default(cuid())
+  month            String // Nama bulan (e.g., "Januari", "Februari")
+  respondentsCount Int // Jumlah responden per bulan
+  surveyId         String         @unique(map: "monthly_stat_survey_id_month_key")
+  survey           Survey         @relation(fields: [surveyId], references: [id])
+  AgeStat          AgeStat[]
+  ResponseStat     ResponseStat[]
+  genderStat       genderStat[]
+  createdAt        DateTime       @default(now())
+  updatedAt        DateTime       @updatedAt
+  deletedAt        DateTime       @default(now())
+  isActive         Boolean        @default(true)
+}
+
+// Entitas Gender
+
+model genderStat {
+  id               String       @id @default(cuid())
+  laki             Int
+  perempuan        Int
+  percentLaki      Float
+  percentPerempuan Float
+  total            Int
+  createdAt        DateTime     @default(now())
+  updatedAt        DateTime     @updatedAt
+  deletedAt        DateTime     @default(now())
+  isActive         Boolean      @default(true)
+  MonthlyStat      MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
+  monthlyStatId    String?
+}
+
+// Entitas Age
+
+model AgeStat {
+  id            String       @id @default(cuid())
+  group         String // "18-44", "45+" dll
+  count         Int
+  createdAt     DateTime     @default(now())
+  updatedAt     DateTime     @updatedAt
+  deletedAt     DateTime     @default(now())
+  isActive      Boolean      @default(true)
+  MonthlyStat   MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
+  monthlyStatId String?
+}
+
+// Entitas Response
+
+model ResponseStat {
+  id            String       @id @default(cuid())
+  label         String // BAIK / BURUK
+  count         Int
+  createdAt     DateTime     @default(now())
+  updatedAt     DateTime     @updatedAt
+  deletedAt     DateTime     @default(now())
+  isActive      Boolean      @default(true)
+  MonthlyStat   MonthlyStat? @relation(fields: [monthlyStatId], references: [id])
+  monthlyStatId String?
+}
+
 //========================================= MENU PPID ========================================= //
 
 //========================================= STRUKTUR PPID ========================================= //
@@ -1717,3 +1791,133 @@ model NilaiKonservasiAdat {
   deletedAt DateTime @default(now())
   isActive  Boolean  @default(true)
 }
+
+// ========================================= MENU PENDIDIKAN ========================================= //
+// ========================================= INFO SEKOLAH & PAUD ========================================= //
+model JenjangPendidikan {
+  id        String    @id @default(cuid())
+  nama      String // TK/PAUD, SD, SMP, SMA/SMK
+  lembagas  Lembaga[] // Relasi ke lembaga
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime  @default(now())
+  isActive  Boolean   @default(true)
+}
+
+model Lembaga {
+  id                String            @id @default(cuid())
+  nama              String
+  jenjangPendidikan JenjangPendidikan @relation(fields: [jenjangId], references: [id])
+  jenjangId         String
+  siswa             Siswa[]
+  pengajar          Pengajar[]
+  createdAt         DateTime          @default(now())
+  updatedAt         DateTime          @updatedAt
+  deletedAt         DateTime          @default(now())
+  isActive          Boolean           @default(true)
+}
+
+model Siswa {
+  id        String   @id @default(cuid())
+  nama      String
+  lembaga   Lembaga  @relation(fields: [lembagaId], references: [id])
+  lembagaId String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model Pengajar {
+  id        String   @id @default(cuid())
+  nama      String
+  lembaga   Lembaga  @relation(fields: [lembagaId], references: [id])
+  lembagaId String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= PROGRAM PENDIDIKAN ANAK ========================================= //
+model TujuanProgram {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model ProgramUnggulan {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= BIMBINGAN BELAJAR DESA ========================================= //
+model TujuanBimbinganBelajarDesa {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model LokasiJadwalBimbinganBelajarDesa {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model FasilitasBimbinganBelajarDesa {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= PENDIDIKAN NON FORMAL ========================================= //
+model TujuanPendidikanNonFormal {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model TempatKegiatan {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model JenisProgramYangDiselenggarakan {
+  id        String   @id @default(cuid())
+  judul      String
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}

prisma/seed.ts

@@ -29,6 +29,15 @@ import nilaiKonservasiAdat from './data/lingkungan/konservasi-adat-bali/nilai-ko
 import bentukKonservasiBerdasarkanAdat from './data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json';
 import filosofiTriHita from './data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json';
 import profilePejabatDesa from './data/landing-page/profile.json';
+import tujuanProgram from './data/pendidikan/program-pendidikan-anak/tujuan-program.json';
+import tujuanProgram2 from './data/pendidikan/pendidikan-non-formal/tujuan-program2.json';
+import programUnggulan from './data/pendidikan/program-pendidikan-anak/program-unggulan.json';
+import tujuanBimbinganBelajarDesa from './data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json';
+import lokasiJadwalBimbinganBelajarDesa from './data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json';
+import fasilitasBimbinganBelajarDesa from './data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json';
+import tempatKegiatan from './data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json';
+import jenisProgramYangDiselenggarakan from './data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json';
+
 
 (async () => {
   for (const l of layanan) {
@@ -594,6 +603,134 @@ import profilePejabatDesa from './data/landing-page/profile.json';
   }
   console.log("✅ profilePejabatDesa seeded without imageId (editable later via UI)");
 
+  for (const t of tujuanProgram) {
+    await prisma.tujuanProgram.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ tujuan program seeded (editable later via UI)");
+
+  for (const t of programUnggulan) {
+    await prisma.programUnggulan.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ program unggulan seeded (editable later via UI)");
+
+  for (const t of tujuanBimbinganBelajarDesa) {
+    await prisma.tujuanBimbinganBelajarDesa.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ tujuan bimbingan belajar desa seeded (editable later via UI)");
+
+  for (const t of lokasiJadwalBimbinganBelajarDesa) {
+    await prisma.lokasiJadwalBimbinganBelajarDesa.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ lokasi jadwal bimbingan belajar desa seeded (editable later via UI)");
+
+  for (const t of fasilitasBimbinganBelajarDesa) {
+    await prisma.fasilitasBimbinganBelajarDesa.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ fasilitas bimbingan belajar desa seeded (editable later via UI)");
+
+  for (const t of tujuanProgram2) {
+    await prisma.tujuanPendidikanNonFormal.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ fasilitas bimbingan belajar desa seeded (editable later via UI)");
+
+  for (const t of tempatKegiatan) {
+    await prisma.tempatKegiatan.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ fasilitas bimbingan belajar desa seeded (editable later via UI)");
+
+  for (const t of jenisProgramYangDiselenggarakan) {
+    await prisma.jenisProgramYangDiselenggarakan.upsert({
+      where: { id: t.id },
+      update: {
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+      create: {
+        id: t.id,
+        judul: t.judul,
+        deskripsi: t.deskripsi,
+      },
+    });
+  }
+  console.log("✅ fasilitas bimbingan belajar desa seeded (editable later via UI)");
+
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

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

@@ -23,9 +23,7 @@ const apbdes = proxy({
     form: { ...defaultapbdesForm },
     loading: false,
     async create() {
-      const cek = templateapbDesaForm.safeParse(
+      const cek = templateapbDesaForm.safeParse(apbdes.create.form);
-        apbdes.create.form
-      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -34,9 +32,7 @@ const apbdes = proxy({
       }
       try {
         apbdes.create.loading = true;
-        const res = await ApiFetch.api.landingpage.apbdes[
+        const res = await ApiFetch.api.landingpage.apbdes["create"].post({
-          "create"
-        ].post({
           ...apbdes.create.form,
         });
 
@@ -63,9 +59,7 @@ const apbdes = proxy({
       }>
     > | null,
     async load() {
-      const res = await ApiFetch.api.landingpage.apbdes[
+      const res = await ApiFetch.api.landingpage.apbdes["find-many"].get();
-        "find-many"
-      ].get();
       if (res.status === 200) {
         apbdes.findMany.data = res.data?.data ?? [];
       }
@@ -102,15 +96,12 @@ const apbdes = proxy({
       try {
         apbdes.delete.loading = true;
 
-        const response = await fetch(
+        const response = await fetch(`/api/landingpage/apbdes/del/${id}`, {
-          `/api/landingpage/apbdes/del/${id}`,
+          method: "DELETE",
-          {
+          headers: {
-            method: "DELETE",
+            "Content-Type": "application/json",
-            headers: {
+          },
-              "Content-Type": "application/json",
+        });
-            },
-          }
-        );
 
         const result = await response.json();
 
@@ -177,9 +168,7 @@ const apbdes = proxy({
     },
 
     async update() {
-      const cek = templateapbDesaForm.safeParse(
+      const cek = templateapbDesaForm.safeParse(apbdes.edit.form);
-        apbdes.edit.form
-      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -189,21 +178,18 @@ const apbdes = proxy({
 
       try {
         apbdes.edit.loading = true;
-        const response = await fetch(
+        const response = await fetch(`/api/landingpage/apbdes/${this.id}`, {
-          `/api/landingpage/apbdes/${this.id}`,
+          method: "PUT",
-          {
+          headers: {
-            method: "PUT",
+            "Content-Type": "application/json",
-            headers: {
+          },
-              "Content-Type": "application/json",
+          body: JSON.stringify({
-            },
+            name: this.form.name,
-            body: JSON.stringify({
+            jumlah: this.form.jumlah,
-              name: this.form.name,
+            imageId: this.form.imageId,
-              jumlah: this.form.jumlah,
+            fileId: this.form.fileId,
-              imageId: this.form.imageId,
+          }),
-              fileId: this.form.fileId,
+        });
-            }),
-          }
-        );
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
           throw new Error(
@@ -216,16 +202,12 @@ const apbdes = proxy({
           await apbdes.findMany.load(); // refresh list
           return true;
         } else {
-          throw new Error(
+          throw new Error(result.message || "Gagal mengupdate apbdes");
-            result.message || "Gagal mengupdate apbdes"
-          );
         }
       } catch (error) {
         console.error("Error updating apbdes:", error);
         toast.error(
-          error instanceof Error
+          error instanceof Error ? error.message : "Gagal mengupdate apbdes"
-            ? error.message
-            : "Gagal mengupdate apbdes"
         );
         return false;
       } finally {
@@ -239,4 +221,4 @@ const apbdes = proxy({
   },
 });
 
-export default apbdes;
+export default apbdes;

src/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa.ts

@@ -0,0 +1,260 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// ========================================= TUJUAN PROGRAM ========================================= //
+
+const templateTujuanProgramForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TujuanProgramForm = Prisma.TujuanBimbinganBelajarDesaGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateTujuanProgram = proxy({
+  findById: {
+    data: null as TujuanProgramForm | null,
+    loading: false,
+    initialize() {
+      stateTujuanProgram.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as TujuanProgramForm;
+    },
+    async load(id: string) {
+      try {
+        stateTujuanProgram.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.bimbinganbelajardesa.tujuanprogram[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateTujuanProgram.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tujuan program");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data tujuan program");
+      } finally {
+        stateTujuanProgram.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TujuanProgramForm) {
+      const cek = templateTujuanProgramForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateTujuanProgram.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.bimbinganbelajardesa.tujuanprogram[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data tujuan program berhasil diubah");
+          await stateTujuanProgram.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tujuan program");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data tujuan program");
+      } finally {
+        stateTujuanProgram.update.loading = false;
+      }
+    },
+  },
+});
+
+// ========================================= LOKASI DAN JADWAL ========================================= //
+
+const templateLokasiDanJadwalForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type LokasiDanJadwalForm = Prisma.LokasiJadwalBimbinganBelajarDesaGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const lokasiDanJadwalState = proxy({
+  findById: {
+    data: null as LokasiDanJadwalForm | null,
+    loading: false,
+    initialize() {
+      lokasiDanJadwalState.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as LokasiDanJadwalForm;
+    },
+    async load(id: string) {
+      try {
+        lokasiDanJadwalState.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.bimbinganbelajardesa.lokasidanjadwal[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          lokasiDanJadwalState.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data lokasi dan jadwal");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data lokasi dan jadwal");
+      } finally {
+        lokasiDanJadwalState.findById.loading = false;
+      }
+    },
+  },
+  update: {
+    loading: false,
+    async save(data: LokasiDanJadwalForm) {
+      const cek = templateLokasiDanJadwalForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        lokasiDanJadwalState.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.bimbinganbelajardesa.lokasidanjadwal[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data lokasi dan jadwal berhasil diubah");
+          await lokasiDanJadwalState.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data lokasi dan jadwal");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data lokasi dan jadwal");
+      } finally {
+        lokasiDanJadwalState.update.loading = false;
+      }
+    },
+  },
+});
+
+// ========================================= FASILITAS YANG DISEDIAKAN ========================================= //
+
+const templateFasilitasYangDisediakanForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type FasilitasYangDisediakanForm = Prisma.FasilitasBimbinganBelajarDesaGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const fasilitasYangDisediakanState = proxy({
+  findById: {
+    data: null as FasilitasYangDisediakanForm | null,
+    loading: false,
+    initialize() {
+      fasilitasYangDisediakanState.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as FasilitasYangDisediakanForm;
+    },
+    async load(id: string) {
+      try {
+        fasilitasYangDisediakanState.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.bimbinganbelajardesa.fasilitasyangdisediakan[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          fasilitasYangDisediakanState.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data fasilitas yang disediakan");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data fasilitas yang disediakan");
+      } finally {
+        fasilitasYangDisediakanState.findById.loading = false;
+      }
+    },
+  },
+  update: {
+    loading: false,
+    async save(data: FasilitasYangDisediakanForm) {
+      const cek = templateFasilitasYangDisediakanForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        fasilitasYangDisediakanState.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.bimbinganbelajardesa.fasilitasyangdisediakan[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data fasilitas yang disediakan berhasil diubah");
+          await fasilitasYangDisediakanState.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data fasilitas yang disediakan");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data fasilitas yang disediakan");
+      } finally {
+        fasilitasYangDisediakanState.update.loading = false;
+      }
+    },
+  },
+});
+
+const stateBimbinganBelajarDesa = proxy({
+  stateTujuanProgram,
+  lokasiDanJadwalState,
+  fasilitasYangDisediakanState,
+});
+
+export default stateBimbinganBelajarDesa;

src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts

@@ -0,0 +1,998 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// ========================================= JENJANG PENDIDIKAN ========================================= //
+const jenjangPendidikanForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const jenjangPendidikanDefaultForm = {
+  nama: "",
+};
+
+const jenjangPendidikan = proxy({
+  create: {
+    form: { ...jenjangPendidikanDefaultForm },
+    loading: false,
+    async create() {
+      const cek = jenjangPendidikanForm.safeParse(
+        jenjangPendidikan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        jenjangPendidikan.create.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
+            "create"
+          ].post(jenjangPendidikan.create.form);
+        if (res.status === 200) {
+          jenjangPendidikan.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        jenjangPendidikan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      nama: string;
+    }> | null,
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        jenjangPendidikan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.JenjangPendidikanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/infosekolahpaud/jenjangpendidikan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          jenjangPendidikan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          jenjangPendidikan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        jenjangPendidikan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        jenjangPendidikan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/jenjangpendidikan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "jenjang pendidikan berhasil dihapus"
+          );
+          await jenjangPendidikan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus jenjang pendidikan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus jenjang pendidikan");
+      } finally {
+        jenjangPendidikan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...jenjangPendidikanDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/jenjangpendidikan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading jenjang pendidikan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = jenjangPendidikanForm.safeParse(jenjangPendidikan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        jenjangPendidikan.edit.loading = true;
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/jenjangpendidikan/${jenjangPendidikan.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: jenjangPendidikan.edit.form.nama,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message ||
+                `Gagal mengupdate jenjang pendidikan (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui jenjang pendidikan"
+            );
+            await jenjangPendidikan.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate jenjang pendidikan"
+            );
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating jenjang pendidikan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate jenjang pendidikan"
+        );
+        return false;
+      } finally {
+        jenjangPendidikan.edit.loading = false;
+      }
+    },
+    reset() {
+      jenjangPendidikan.edit.id = "";
+      jenjangPendidikan.edit.form = { ...jenjangPendidikanDefaultForm };
+    },
+  },
+});
+
+// ========================================= LEMBAGA PENDIDIKAN ========================================= //
+
+const lembagaPendidikanForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+  jenjangId: z.string().min(1, "Jenjang pendidikan minimal 1"),
+});
+
+const lembagaPendidikanDefaultForm = {
+  nama: "",
+  jenjangId: "",
+};
+
+const lembagaPendidikan = proxy({
+  create: {
+    form: { ...lembagaPendidikanDefaultForm },
+    loading: false,
+    async create() {
+      const cek = lembagaPendidikanForm.safeParse(
+        lembagaPendidikan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        lembagaPendidikan.create.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
+            "create"
+          ].post(lembagaPendidikan.create.form);
+        if (res.status === 200) {
+          lembagaPendidikan.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        lembagaPendidikan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.LembagaGetPayload<{
+        include: {
+          jenjangPendidikan: true;
+          siswa: true;
+          pengajar: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        lembagaPendidikan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.LembagaGetPayload<{
+      include: {
+        jenjangPendidikan: true;
+        siswa: true;
+        pengajar: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/infosekolahpaud/lembagapendidikan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          lembagaPendidikan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          lembagaPendidikan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        lembagaPendidikan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        lembagaPendidikan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/lembagapendidikan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "lembaga pendidikan berhasil dihapus"
+          );
+          await lembagaPendidikan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus lembaga pendidikan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus lembaga pendidikan");
+      } finally {
+        lembagaPendidikan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...lembagaPendidikanDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/lembagapendidikan/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            jenjangId: data.jenjangId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading lembaga pendidikan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = lembagaPendidikanForm.safeParse(lembagaPendidikan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        lembagaPendidikan.edit.loading = true;
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/lembagapendidikan/${lembagaPendidikan.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: lembagaPendidikan.edit.form.nama,
+              jenjangId: lembagaPendidikan.edit.form.jenjangId,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message ||
+                `Gagal mengupdate lembaga pendidikan (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui lembaga pendidikan"
+            );
+            await lembagaPendidikan.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate lembaga pendidikan"
+            );
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating lembaga pendidikan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate lembaga pendidikan"
+        );
+        return false;
+      } finally {
+        lembagaPendidikan.edit.loading = false;
+      }
+    },
+    reset() {
+      lembagaPendidikan.edit.id = "";
+      lembagaPendidikan.edit.form = { ...lembagaPendidikanDefaultForm };
+    },
+  },
+});
+
+// ========================================= SISWA ========================================= //
+
+const siswaForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+  lembagaId: z.string().min(1, "lembaga pendidikan minimal 1"),
+});
+
+const siswaDefaultForm = {
+  nama: "",
+  lembagaId: "",
+};
+
+const siswa = proxy({
+  create: {
+    form: { ...siswaDefaultForm },
+    loading: false,
+    async create() {
+      const cek = siswaForm.safeParse(siswa.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        siswa.create.loading = true;
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
+          "create"
+        ].post(siswa.create.form);
+        if (res.status === 200) {
+          siswa.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        siswa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.SiswaGetPayload<{
+        include: {
+          lembaga: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        siswa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.SiswaGetPayload<{
+      include: {
+        lembaga: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/pendidikan/infosekolahpaud/siswa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          siswa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          siswa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        siswa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        siswa.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/siswa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "siswa berhasil dihapus");
+          await siswa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus siswa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus siswa");
+      } finally {
+        siswa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...siswaDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/siswa/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            lembagaId: data.lembagaId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = siswaForm.safeParse(siswa.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        siswa.edit.loading = true;
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/siswa/${siswa.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: siswa.edit.form.nama,
+              lembagaId: siswa.edit.form.lembagaId,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message || `Gagal mengupdate siswa (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(result.message || "Berhasil memperbarui siswa");
+            await siswa.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(result.message || "Gagal mengupdate siswa");
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating siswa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate siswa"
+        );
+        return false;
+      } finally {
+        siswa.edit.loading = false;
+      }
+    },
+    reset() {
+      siswa.edit.id = "";
+      siswa.edit.form = { ...siswaDefaultForm };
+    },
+  },
+});
+
+// ========================================= PENGAJAR ========================================= //
+
+const pengajarForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+  lembagaId: z.string().min(1, "lembaga pendidikan minimal 1"),
+});
+
+const pengajarDefaultForm = {
+  nama: "",
+  lembagaId: "",
+};
+
+const pengajar = proxy({
+  create: {
+    form: { ...pengajarDefaultForm },
+    loading: false,
+    async create() {
+      const cek = pengajarForm.safeParse(pengajar.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        pengajar.create.loading = true;
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
+          "create"
+        ].post(pengajar.create.form);
+        if (res.status === 200) {
+          pengajar.findMany.load();
+          return toast.success("Data berhasil ditambahkan");
+        }
+        return toast.error("Gagal menambahkan data");
+      } catch (error) {
+        console.log(error);
+        toast.error("Gagal menambahkan data");
+      } finally {
+        pengajar.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.PengajarGetPayload<{
+        include: {
+          lembaga: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        pengajar.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PengajarGetPayload<{
+      include: {
+        lembaga: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          pengajar.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          pengajar.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        pengajar.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pengajar.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/pengajar/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "pengajar berhasil dihapus");
+          await pengajar.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pengajar");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pengajar");
+      } finally {
+        pengajar.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...pengajarDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/pengajar/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            lembagaId: data.lembagaId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = pengajarForm.safeParse(pengajar.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pengajar.edit.loading = true;
+        const response = await fetch(
+          `/api/pendidikan/infosekolahpaud/pengajar/${pengajar.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: pengajar.edit.form.nama,
+              lembagaId: pengajar.edit.form.lembagaId,
+            }),
+          }
+        );
+
+        // Clone the response to avoid 'body already read' error
+        const responseClone = response.clone();
+
+        try {
+          const result = await response.json();
+
+          if (!response.ok) {
+            console.error(
+              "Update failed with status:",
+              response.status,
+              "Response:",
+              result
+            );
+            throw new Error(
+              result?.message || `Gagal mengupdate pengajar (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(result.message || "Berhasil memperbarui pengajar");
+            await pengajar.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(result.message || "Gagal mengupdate pengajar");
+          }
+        } catch (error) {
+          // If JSON parsing fails, try to get the response text for better error messages
+          try {
+            const text = await responseClone.text();
+            console.error("Error response text:", text);
+            throw new Error(`Gagal memproses respons dari server: ${text}`);
+          } catch (textError) {
+            console.error("Error parsing response as text:", textError);
+            console.error("Original error:", error);
+            throw new Error("Gagal memproses respons dari server");
+          }
+        }
+      } catch (error) {
+        console.error("Error updating pengajar:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate pengajar"
+        );
+        return false;
+      } finally {
+        pengajar.edit.loading = false;
+      }
+    },
+    reset() {
+      pengajar.edit.id = "";
+      pengajar.edit.form = { ...pengajarDefaultForm };
+    },
+  },
+});
+
+const infoSekolahPaud = proxy({
+  jenjangPendidikan,
+  lembagaPendidikan,
+  siswa,
+  pengajar,
+});
+
+export default infoSekolahPaud;

src/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal.ts

@@ -0,0 +1,267 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// ========================================= TUJUAN PENDIDIKAN NON FORMAL ========================================= //
+
+const templateTujuanPendidikanNonFormalForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TujuanPendidikanNonFormalForm =
+  Prisma.TujuanPendidikanNonFormalGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+
+const stateTujuanPendidikanNonFormal = proxy({
+  findById: {
+    data: null as TujuanPendidikanNonFormalForm | null,
+    loading: false,
+    initialize() {
+      stateTujuanPendidikanNonFormal.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as TujuanPendidikanNonFormalForm;
+    },
+    async load(id: string) {
+      try {
+        stateTujuanPendidikanNonFormal.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.pendidikannonformal.tujuanpendidikannonformal[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateTujuanPendidikanNonFormal.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tujuan pendidikan non formal");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data tujuan pendidikan non formal"
+        );
+      } finally {
+        stateTujuanPendidikanNonFormal.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TujuanPendidikanNonFormalForm) {
+      const cek = templateTujuanPendidikanNonFormalForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateTujuanPendidikanNonFormal.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.pendidikannonformal.tujuanpendidikannonformal[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data tujuan pendidikan non formal berhasil diubah");
+          await stateTujuanPendidikanNonFormal.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tujuan pendidikan non formal");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data tujuan pendidikan non formal"
+        );
+      } finally {
+        stateTujuanPendidikanNonFormal.update.loading = false;
+      }
+    },
+  },
+});
+
+// ========================================= TEMPAT KEGIATAN ========================================= //
+
+const templateTempatKegiatanForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TempatKegiatanForm = Prisma.TempatKegiatanGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateTempatKegiatan = proxy({
+  findById: {
+    data: null as TempatKegiatanForm | null,
+    loading: false,
+    initialize() {
+      stateTempatKegiatan.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as TempatKegiatanForm;
+    },
+    async load(id: string) {
+      try {
+        stateTempatKegiatan.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.pendidikannonformal.tempatkegiatan[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateTempatKegiatan.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tempat kegiatan");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data tempat kegiatan");
+      } finally {
+        stateTempatKegiatan.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TempatKegiatanForm) {
+      const cek = templateTempatKegiatanForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateTempatKegiatan.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.pendidikannonformal.tempatkegiatan[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data tempat kegiatan berhasil diubah");
+          await stateTempatKegiatan.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tempat kegiatan");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data tempat kegiatan");
+      } finally {
+        stateTempatKegiatan.update.loading = false;
+      }
+    },
+  },
+});
+
+// ========================================= JENIS PROGRAM YANG DISELENGGARAKAN ========================================= //
+
+const templateJenisProgramForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type JenisProgramForm = Prisma.JenisProgramYangDiselenggarakanGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateJenisProgram = proxy({
+  findById: {
+    data: null as JenisProgramForm | null,
+    loading: false,
+    initialize() {
+      stateJenisProgram.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as JenisProgramForm;
+    },
+    async load(id: string) {
+      try {
+        stateJenisProgram.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.pendidikannonformal.jenisprogramyangdiselenggarakan[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateJenisProgram.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data jenis program");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data jenis program");
+      } finally {
+        stateJenisProgram.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: JenisProgramForm) {
+      const cek = templateJenisProgramForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateJenisProgram.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.pendidikannonformal.jenisprogramyangdiselenggarakan[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data jenis program berhasil diubah");
+          await stateJenisProgram.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data jenis program");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data jenis program");
+      } finally {
+        stateJenisProgram.update.loading = false;
+      }
+    },
+  },
+});
+
+const pendidikanNonFormalState = proxy({
+  stateTujuanPendidikanNonFormal,
+  stateTempatKegiatan,
+  stateJenisProgram,
+});
+
+export default pendidikanNonFormalState;

src/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak.ts

@@ -0,0 +1,181 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// ========================================= TUJUAN PROGRAM ========================================= //
+
+const templateTujuanProgramForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TujuanProgramForm = Prisma.TujuanProgramGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateTujuanProgram = proxy({
+  findById: {
+    data: null as TujuanProgramForm | null,
+    loading: false,
+    initialize() {
+      stateTujuanProgram.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as TujuanProgramForm;
+    },
+    async load(id: string) {
+      try {
+        stateTujuanProgram.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.programpendidikananak.tujuanprogram[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateTujuanProgram.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tujuan program");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data tujuan program");
+      } finally {
+        stateTujuanProgram.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TujuanProgramForm) {
+      const cek = templateTujuanProgramForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        stateTujuanProgram.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.programpendidikananak.tujuanprogram[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data tujuan program berhasil diubah");
+          await stateTujuanProgram.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tujuan program");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data tujuan program");
+      } finally {
+        stateTujuanProgram.update.loading = false;
+      }
+    },
+  },
+});
+
+// ========================================= PROGRAM UNGGULAN ========================================= //
+
+const templateProgramUnggulanForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type ProgramUnggulanForm = Prisma.ProgramUnggulanGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const programUnggulanState = proxy({
+  findById: {
+    data: null as ProgramUnggulanForm | null,
+    loading: false,
+    initialize() {
+      programUnggulanState.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as ProgramUnggulanForm;
+    },
+    async load(id: string) {
+      try {
+        programUnggulanState.findById.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.programpendidikananak.programunggulan[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          programUnggulanState.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data program pendidikan anak");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data program pendidikan anak"
+        );
+      } finally {
+        programUnggulanState.findById.loading = false;
+      }
+    },
+  },
+  update: {
+    loading: false,
+    async save(data: ProgramUnggulanForm) {
+      const cek = templateProgramUnggulanForm.safeParse(data);
+      if (!cek.success) {
+        const errors = cek.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return;
+      }
+
+      try {
+        programUnggulanState.update.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.programpendidikananak.programunggulan[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data program pendidikan anak berhasil diubah");
+          await programUnggulanState.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data program pendidikan anak");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data program pendidikan anak"
+        );
+      } finally {
+        programUnggulanState.update.loading = false;
+      }
+    },
+  },
+});
+
+const stateProgramPendidikanAnak = proxy({
+  stateTujuanProgram,
+  programUnggulanState,
+});
+
+export default stateProgramPendidikanAnak;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTabs.tsx

@@ -0,0 +1,67 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "List Survey",
+            value: "listSurvey",
+            href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-survey"
+        },
+        {
+            label: "List Bulanan",
+            value: "listBulanan",
+            href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-bulanan"
+        },
+        {
+          label: "List Gender Stat",
+          value: "listGenderStat",
+          href: "/admin/landing-page/indeks-kepuasan-masyarakat/list-gender-stat"
+        }
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Indeks Kepuasan Masyarakat</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabs;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Page() {
-  return (
-    <div>
-      Indeks Kepuasan MAsyarakat
-    </div>
-  );
-}
-
-export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/bimbinganBelajarDesaTextEditor.tsx

@@ -0,0 +1,99 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useEffect } from 'react';
+
+export function BimbinganBelajarDesaTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent || '<p></p>');
+    }
+  }, [initialContent, editor]);
+
+  return (
+    <Stack >
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/_lib/layoutTabs.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Tujuan Program",
+      value: "tujuan-program",
+      href: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program"
+    },
+    {
+      label: "Lokasi dan Jadwal",
+      value: "lokasi-dan-jadwal",
+      href: "/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal"
+    },
+    {
+      label: "Fasilitas yang disediakan",
+      value: "fasilitas-yang-disediakan",
+      href: "/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan"
+    },
+    
+  ];
+  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}>Bimbingan Belajar Desa</Title>
+      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          {tabs.map((e, i) => (
+            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanProgram() {
+  const router = useRouter()
+  const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Fasilitas Yang Disediakan</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <BimbinganBelajarDesaTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanProgram;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Fasilitas Yang Disediakan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/layout.tsx

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

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanProgram() {
+  const router = useRouter()
+  const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Lokasi Dan Jadwal</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <BimbinganBelajarDesaTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanProgram;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Lokasi Dan Jadwal</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/page.tsx

@@ -1,74 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-
-function BimbinganBelajarDesa() {
-  return (
-    <Box>
-      <HeaderSearch
-      title='Bimbingan Belajar Desa'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListBimbinganBelajarDesa/>
-    </Box>
-  );
-}
-
-function ListBimbinganBelajarDesa() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Bimbingan Belajar Desa'
-          href='/admin/pendidikan/bimbingan-belajar-desa/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nomor</TableTh>
-                  <TableTh>Nama Lengkap</TableTh>
-                  <TableTh>Nomor Telepon</TableTh>
-                  <TableTh>Email</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>1</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Email</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default BimbinganBelajarDesa;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const BimbinganBelajarDesaTextEditor = dynamic(() => import('../../_lib/bimbinganBelajarDesaTextEditor').then(mod => mod.BimbinganBelajarDesaTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanProgram() {
+  const router = useRouter()
+  const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Tujuan Program</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <BimbinganBelajarDesaTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanProgram;

src/app/admin/(dashboard)/pendidikan/bimbingan-belajar-desa/tujuan-program/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateBimbinganBelajarDesa from '../../../_state/pendidikan/bimbingan-belajar-desa';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Tujuan Program</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/bimbingan-belajar-desa/tujuan-program/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/_lib/layoutTabs.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Jenjang Pendidikan",
+      value: "jenjangPendidikan",
+      href: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
+    },
+    {
+      label: "Lembaga",
+      value: "lembaga",
+      href: "/admin/pendidikan/info-sekolah-paud/lembaga"
+    },
+    {
+      label: "Siswa",
+      value: "siswa",
+      href: "/admin/pendidikan/info-sekolah-paud/siswa"
+    },
+    {
+      label: "Pengajar",
+      value: "pengajar",
+      href: "/admin/pendidikan/info-sekolah-paud/pengajar"
+    },
+  ];
+  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}>Info Sekolah & PAUD</Title>
+      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          {tabs.map((e, i) => (
+            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/[id]/page.tsx

@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+function EditJenjangPendidikan() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
+  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
+
+  const [formData, setFormData] = useState({
+    nama: "",
+  });
+
+  useEffect(() => {
+    const loadJenjangPendidikan = async () => {
+      if (!id) return;
+
+      try {
+        const data = await stateJenjang.edit.load(id);
+
+        if (data) {
+          // pastikan id-nya masuk ke state edit
+          stateJenjang.edit.id = id;
+          setFormData({
+            nama: data.nama || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading jenjang pendidikan:", error);
+        toast.error("Gagal memuat data jenjang pendidikan");
+      }
+    };
+
+    loadJenjangPendidikan();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.nama.trim()) {
+        toast.error('Nama jenjang pendidikan tidak boleh kosong');
+        return;
+      }
+
+      stateJenjang.edit.form = {
+        nama: formData.nama.trim(),
+      };
+
+      // Safety check tambahan: pastikan ID tidak kosong
+      if (!stateJenjang.edit.id) {
+        stateJenjang.edit.id = id; // fallback
+      }
+
+      const success = await stateJenjang.edit.update();
+
+      if (success) {
+        router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan");
+      }
+    } catch (error) {
+      console.error("Error updating jenjang pendidikan:", error);
+      // toast akan ditampilkan dari fungsi update
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Jenjang Pendidikan</Title>
+          <TextInput
+            value={formData.nama}
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
+            placeholder='Masukkan nama jenjang pendidikan'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditJenjangPendidikan;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/create/page.tsx

@@ -0,0 +1,61 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
+
+function CreateJenjangPendidikan() {
+  const router = useRouter();
+  const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan)
+
+  useEffect(() => {
+    stateJenjang.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateJenjang.create.form = {
+      nama: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateJenjang.create.create();
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan")
+  }
+
+  return (
+    <Box>
+      <Box>
+        <Box mb={10}>
+          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+            <IconArrowBack color={colors['blue-button']} size={25} />
+          </Button>
+        </Box>
+
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Jenjang Pendidikan</Title>
+            <TextInput
+              value={stateJenjang.create.form.nama}
+              onChange={(val) => {
+                stateJenjang.create.form.nama = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Jenjang Pendidikan</Text>}
+              placeholder='Masukkan nama jenjang pendidikan'
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateJenjangPendidikan;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/jenjang-pendidikan/page.tsx

@@ -0,0 +1,112 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+
+
+function JenjangPendidikan() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Jenjang Pendidikan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListJenjangPendidikan search={search} />
+    </Box>
+  );
+}
+
+function ListJenjangPendidikan({ search }: { search: string }) {
+  const stateList = useProxy(infoSekolahPaud.jenjangPendidikan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateList.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  useShallowEffect(() => {
+    stateList.findMany.load()
+  }, [])
+
+  const filteredData = (stateList.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateList.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Jenjang Pendidikan'
+          href='/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Jenjang Pendidikan</TableTh>
+              <TableTh>Edit</TableTh>
+              <TableTh>Delete</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>
+                  <Button color="green" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan/${item.id}`)}>
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button color="red" onClick={() => {
+                    setSelectedId(item.id)
+                    setModalHapus(true)
+                  }}>
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus jenjang pendidikan ini?'
+      />
+    </Box>
+  );
+}
+
+export default JenjangPendidikan;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/layout.tsx

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

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/lembaga/[id]/edit/page.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { IconArrowBack } from '@tabler/icons-react';
+
+
+export default function EditLembaga() {
+  const router = useRouter();
+  const { id } = useParams<{ id: string }>();
+  const state = useProxy(infoSekolahPaud.lembagaPendidikan);
+  const jenjangPendidikanList = infoSekolahPaud.jenjangPendidikan.findMany.data;
+
+  const [form, setForm] = useState({
+    nama: '',
+    jenjangId: '',
+  });
+
+  useEffect(() => {
+    infoSekolahPaud.jenjangPendidikan.findMany.load();
+
+    if (id) {
+      state.edit.load(id).then(data => {
+        if (data) {
+          setForm({
+            nama: data.nama,
+            jenjangId: data.jenjangId,
+          });
+        }
+      });
+    }
+  }, [id]);
+
+  const handleSubmit = async () => {
+    if (!form.nama || !form.jenjangId) {
+      toast.warn("Nama dan jenjang pendidikan harus diisi");
+      return;
+    }
+
+    state.edit.id = id;
+    state.edit.form = form;
+
+    const result = await state.edit.update();
+
+    if (result) {
+      toast.success("Data berhasil diperbarui");
+      router.push('/admin/pendidikan/info-sekolah-paud/lembaga');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack>
+          <Title order={3}>Edit Lembaga</Title>
+          <TextInput
+            label="Nama Lembaga"
+            placeholder="Masukkan nama lembaga"
+            value={form.nama}
+            onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
+          />
+          <Select
+            label="Jenjang Pendidikan"
+            placeholder="Pilih jenjang pendidikan"
+            searchable
+            data={jenjangPendidikanList?.map(p => ({
+              value: p.id,
+              label: p.nama,
+            })) || []}
+            value={form.jenjangId}
+            onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
+          />
+          <Button onClick={handleSubmit} color="blue">Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/lembaga/[id]/page.tsx

@@ -0,0 +1,115 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+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 colors from '@/con/colors';
+
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+
+function DetailLembaga() {
+  const detailState = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    detailState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      detailState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
+    }
+  }
+
+  if (!detailState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Lembaga</Text>
+          {detailState.findUnique.data ? (
+            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jenjang Pendidikan</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.jenjangPendidikan?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah Siswa</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.siswa?.length}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah Pengajar</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.pengajar?.length}</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        setSelectedId(detailState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={detailState.delete.loading || !detailState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${detailState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!detailState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus lembaga ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailLembaga;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/lembaga/create/page.tsx

@@ -0,0 +1,76 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import infoSekolahPaud from '../../../../_state/pendidikan/info-sekolah-paud';
+
+function CreateLembaga() {
+  const router = useRouter();
+  const stateLembaga = useProxy(infoSekolahPaud.lembagaPendidikan)
+
+  useEffect(() => {
+    stateLembaga.findMany.load();
+    infoSekolahPaud.jenjangPendidikan.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateLembaga.create.form = {
+      nama: "",
+      jenjangId: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateLembaga.create.create();
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/lembaga")
+  }
+
+  return (
+    <Box>
+      <Box>
+        <Box mb={10}>
+          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+            <IconArrowBack color={colors['blue-button']} size={25} />
+          </Button>
+        </Box>
+
+        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+          <Stack gap={"xs"}>
+            <Title order={4}>Create Lembaga</Title>
+            <TextInput
+              value={stateLembaga.create.form.nama}
+              onChange={(val) => {
+                stateLembaga.create.form.nama = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Lembaga</Text>}
+              placeholder='Masukkan nama lembaga'
+            />
+            <Select
+              label="Jenjang Pendidikan"
+              placeholder="Pilih jenjang pendidikan"
+              searchable
+              data={infoSekolahPaud.jenjangPendidikan.findMany.data?.map(j => ({
+                value: j.id,
+                label: j.nama,
+              })) || []}
+              value={stateLembaga.create.form.jenjangId}
+              onChange={(val) => {
+                stateLembaga.create.form.jenjangId = val || '';
+              }}
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateLembaga;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/lembaga/page.tsx

@@ -0,0 +1,89 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+
+
+function Lembaga() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Lembaga'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListLembaga search={search} />
+    </Box>
+  );
+}
+
+function ListLembaga({ search }: { search: string }) {
+  const stateList = useProxy(infoSekolahPaud.lembagaPendidikan)
+  const router = useRouter()
+
+
+  useShallowEffect(() => {
+    stateList.findMany.load()
+  }, [])
+
+  const filteredData = (stateList.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.jenjangPendidikan?.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!stateList.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Lembaga'
+          href='/admin/pendidikan/info-sekolah-paud/lembaga/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Lembaga</TableTh>
+              <TableTh>Jenjang Pendidikan</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>{item.nama}</TableTd>
+                <TableTd>{item.jenjangPendidikan?.nama}</TableTd>
+                <TableTd>
+                  <Button color="blue" onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/lembaga/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+    </Box>
+  );
+}
+
+export default Lembaga;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/page.tsx

@@ -1,69 +0,0 @@
-'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 InfoSekolahPaud() {
-  return (
-    <Box>
-      <HeaderSearch
-      title='Info Sekolah & PAUD'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListInfoSekolahPaud/>
-    </Box>
-  );
-}
-
-function ListInfoSekolahPaud() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-          <JudulList
-          title='List Info Sekolah & PAUD'
-          href='/admin/pendidikan/info-sekolah-paud/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Sekolah PAUD</TableTh>
-                  <TableTh>Gambar</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>Sekolah PAUD</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Image w={100} src={"/"}  alt="image" />
-                  </TableTd>
-                  <TableTd>Deskripsi</TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/info-sekolah-paud/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default InfoSekolahPaud;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/[id]/edit/page.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+interface FormPengajar {
+  nama: string;
+  lembagaId: string;
+}
+
+function EditPengajar() {
+  const pengajarState = useProxy(infoSekolahPaud.pengajar)
+  const params = useParams()
+  const router = useRouter()
+
+  const [formData, setFormData] = useState<FormPengajar>({
+    nama: '',
+    lembagaId: ''
+  })
+
+  useEffect(() => {
+    const loadPengajar = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await pengajarState.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            lembagaId: data.lembagaId || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading pengajar:", error);
+        toast.error("Gagal memuat data pengajar");
+      }
+    }
+    infoSekolahPaud.lembagaPendidikan.findMany.load()
+    loadPengajar();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      pengajarState.edit.form = {
+        ...pengajarState.edit.form,
+        nama: formData.nama.trim(),
+        lembagaId: formData.lembagaId.trim(),
+      }
+      await pengajarState.edit.update()
+      router.push("/admin/pendidikan/info-sekolah-paud/pengajar");
+    } catch (error) {
+      console.error("Error updating pengajar:", error);
+      toast.error("Terjadi kesalahan saat memperbarui pengajar");
+    }
+  }
+
+  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 Pengajar</Title>
+          <TextInput
+            value={formData.nama}
+            label={<Text fz="sm" fw="bold">Nama Pengajar</Text>}
+            placeholder="masukkan nama siswa"
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+          />
+          <Select
+            label="Lembaga Pendidikan"
+            data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
+              value: k.id,
+              label: k.nama
+            })) ?? []}
+            value={formData.lembagaId}
+            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPengajar;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/[id]/page.tsx

@@ -0,0 +1,107 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+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 colors from '@/con/colors';
+
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+
+function DetailPengajar() {
+  const detailState = useProxy(infoSekolahPaud.pengajar)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    detailState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      detailState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
+    }
+  }
+
+  if (!detailState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Pengajar</Text>
+          {detailState.findUnique.data ? (
+            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Lembaga</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        setSelectedId(detailState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={detailState.delete.loading || !detailState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${detailState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!detailState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus pengajar ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPengajar;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/create/page.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+function CreatePengajar() {
+  const router = useRouter();
+  const stateCreate = useProxy(infoSekolahPaud.pengajar)
+
+  useEffect(() => {
+    stateCreate.findMany.load();
+    infoSekolahPaud.lembagaPendidikan.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      nama: "",
+      lembagaId: "",
+    };
+  };
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/pengajar")
+  }
+  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 Pengajar</Title>
+          <TextInput
+            value={stateCreate.create.form.nama}
+            onChange={(val) => {
+              stateCreate.create.form.nama = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+          />
+          <Select
+            value={stateCreate.create.form.lembagaId}
+            onChange={(val) => {
+              stateCreate.create.form.lembagaId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
+            placeholder="Pilih lembaga"
+            data={
+              infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama,
+              })) || []
+            }
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreatePengajar;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/pengajar/page.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+
+function Pengajar() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pengajar'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPengajar search={search} />
+    </Box>
+  );
+}
+
+function ListPengajar({ search }: { search: string }) {
+  const listState = useProxy(infoSekolahPaud.pengajar)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.lembaga.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Pengajar'
+            href='/admin/pendidikan/info-sekolah-paud/pengajar/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Pengajar</TableTh>
+                  <TableTh>Lembaga</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.nama}</TableTd>
+                    <TableTd>{item.lembaga.nama}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/pengajar/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default Pengajar;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/[id]/edit/page.tsx

@@ -0,0 +1,100 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+interface FormSiswa {
+  nama: string;
+  lembagaId: string;
+}
+
+function EditSiswa() {
+  const siswaState = useProxy(infoSekolahPaud.siswa)
+  const params = useParams()
+  const router = useRouter()
+
+  const [formData, setFormData] = useState<FormSiswa>({
+    nama: '',
+    lembagaId: ''
+  })
+
+  useEffect(() => {
+    const loadSiswa = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await siswaState.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            lembagaId: data.lembagaId || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        toast.error("Gagal memuat data siswa");
+      }
+    }
+    infoSekolahPaud.lembagaPendidikan.findMany.load()
+    loadSiswa();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      siswaState.edit.form = {
+        ...siswaState.edit.form,
+        nama: formData.nama.trim(),
+        lembagaId: formData.lembagaId.trim(),
+      }
+      await siswaState.edit.update()
+      router.push("/admin/pendidikan/info-sekolah-paud/siswa");
+    } catch (error) {
+      console.error("Error updating siswa:", error);
+      toast.error("Terjadi kesalahan saat memperbarui siswa");
+    }
+  }
+
+  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 Siswa</Title>
+          <TextInput
+            value={formData.nama}
+            label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
+            placeholder="masukkan nama siswa"
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+          />
+          <Select
+            label="Lembaga Pendidikan"
+            data={infoSekolahPaud.lembagaPendidikan.findMany.data?.map(k => ({
+              value: k.id,
+              label: k.nama
+            })) ?? []}
+            value={formData.lembagaId}
+            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+          />
+          <Button bg={colors['blue-button']} onClick={handleSubmit} >
+            Simpan
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditSiswa;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/[id]/page.tsx

@@ -0,0 +1,107 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+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 colors from '@/con/colors';
+
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+
+function DetailSiswa() {
+  const detailState = useProxy(infoSekolahPaud.siswa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    detailState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      detailState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/pendidikan/info-sekolah-paud/siswa")
+    }
+  }
+
+  if (!detailState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={40} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Siswa</Text>
+          {detailState.findUnique.data ? (
+            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Lembaga</Text>
+                  <Text fz={"lg"} >{detailState.findUnique.data?.lembaga?.nama}</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        setSelectedId(detailState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={detailState.delete.loading || !detailState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (detailState.findUnique.data) {
+                        router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${detailState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!detailState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus siswa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailSiswa;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/create/page.tsx

@@ -0,0 +1,75 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+
+
+function CreateSiswa() {
+  const router = useRouter();
+  const stateCreate = useProxy(infoSekolahPaud.siswa)
+
+  useEffect(() => {
+    stateCreate.findMany.load();
+    infoSekolahPaud.lembagaPendidikan.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      nama: "",
+      lembagaId: "",
+    };
+  };
+  const handleSubmit = async () => {
+    await stateCreate.create.create();
+
+    resetForm();
+    router.push("/admin/pendidikan/info-sekolah-paud/siswa")
+  }
+  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 Siswa</Title>
+          <TextInput
+            value={stateCreate.create.form.nama}
+            onChange={(val) => {
+              stateCreate.create.form.nama = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+          />
+          <Select
+            value={stateCreate.create.form.lembagaId}
+            onChange={(val) => {
+              stateCreate.create.form.lembagaId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Lembaga</Text>}
+            placeholder="Pilih lembaga"
+            data={
+              infoSekolahPaud.lembagaPendidikan.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.nama,
+              })) || []
+            }
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateSiswa;

src/app/admin/(dashboard)/pendidikan/info-sekolah-paud/siswa/page.tsx

@@ -0,0 +1,90 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import infoSekolahPaud from '../../../_state/pendidikan/info-sekolah-paud';
+
+function Siswa() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Siswa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListSiswa search={search} />
+    </Box>
+  );
+}
+
+function ListSiswa({ search }: { search: string }) {
+  const listState = useProxy(infoSekolahPaud.siswa)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword) ||
+      item.lembaga.nama.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Siswa'
+            href='/admin/pendidikan/info-sekolah-paud/siswa/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Siswa</TableTh>
+                  <TableTh>Lembaga</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.nama}</TableTd>
+                    <TableTd>{item.lembaga.nama}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/pendidikan/info-sekolah-paud/siswa/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default Siswa;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/layoutTabs.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Tujuan Program",
+      value: "tujuan-program",
+      href: "/admin/pendidikan/pendidikan-non-formal/tujuan-program"
+    },
+    {
+      label: "Tempat Kegiatan",
+      value: "tempat-kegiatan",
+      href: "/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan"
+    },
+    {
+      label: "Jenis Program yang Diselenggarakan",
+      value: "jenis-program-yang-diselenggarakan",
+      href: "/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan"
+    },
+    
+  ];
+  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}>Pendidikan Non Formal</Title>
+      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          {tabs.map((e, i) => (
+            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/_lib/pendidikanNonFormalTextEditor.tsx

@@ -0,0 +1,99 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useEffect } from 'react';
+
+export function PendidikanNonFormalTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent || '<p></p>');
+    }
+  }, [initialContent, editor]);
+
+  return (
+    <Stack >
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const JenisProgramYangDiselenggarakanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
+  ssr: false,
+});
+
+function EditJenisProgramYangDiselenggarakan() {
+  const router = useRouter()
+  const editState = useProxy(pendidikanNonFormalState.stateJenisProgram)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Jenis Program Yang Diselenggarakan</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <JenisProgramYangDiselenggarakanTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditJenisProgramYangDiselenggarakan;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import pendidikanNonFormalState from '../../../_state/pendidikan/pendidikan-non-formal';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(pendidikanNonFormalState.stateJenisProgram)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Jenis Program Yang Diselenggarakan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/layout.tsx

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

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/page.tsx

@@ -1,74 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-
-function PendidikanNonFormal() {
-  return (
-    <Box>
-      <HeaderSearch
-      title='Pendidikan Non Formal'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListPendidikanNonFormal/>
-    </Box>
-  );
-}
-
-function ListPendidikanNonFormal() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Pendidikan Non Formal'
-          href='/admin/pendidikan/pendidikan-non-formal/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nomor</TableTh>
-                  <TableTh>Nama Lengkap</TableTh>
-                  <TableTh>Nomor Telepon</TableTh>
-                  <TableTh>Email</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>1</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Email</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default PendidikanNonFormal;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const TempatKegiatanTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
+  ssr: false,
+});
+
+function EditTempatKegiatan() {
+  const router = useRouter()
+  const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Tempat Kegiatan</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <TempatKegiatanTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTempatKegiatan;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tempat-kegiatan/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(statePendidikanNonFormal.stateTempatKegiatan)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Tempat Kegiatan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const PendidikanNonFormalTextEditor = dynamic(() => import('../../_lib/pendidikanNonFormalTextEditor').then(mod => mod.PendidikanNonFormalTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanProgram() {
+  const router = useRouter()
+  const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Tujuan Program</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <PendidikanNonFormalTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanProgram;

src/app/admin/(dashboard)/pendidikan/pendidikan-non-formal/tujuan-program/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import statePendidikanNonFormal from '../../../_state/pendidikan/pendidikan-non-formal';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(statePendidikanNonFormal.stateTujuanPendidikanNonFormal)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Pendidikan Non Formal</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/layoutTabs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabs({ children }: { children: React.ReactNode }) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const tabs = [
+    {
+      label: "Program Unggulan",
+      value: "program-unggulan",
+      href: "/admin/pendidikan/program-pendidikan-anak/program-unggulan"
+    },
+    {
+      label: "Tujuan Program",
+      value: "tujuan-program",
+      href: "/admin/pendidikan/program-pendidikan-anak/tujuan-program"
+    },
+  ];
+  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}>Program Pendidikan Anak</Title>
+      <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+        <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+          {tabs.map((e, i) => (
+            <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value}>
+            {/* Konten dummy, bisa diganti tergantung routing */}
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
+}
+
+export default LayoutTabs;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/_lib/programPendidikanAnakTextEditor.tsx

@@ -0,0 +1,100 @@
+'use client'
+import { Button, Stack } from '@mantine/core';
+import { Link, RichTextEditor } from '@mantine/tiptap';
+import Highlight from '@tiptap/extension-highlight';
+import SubScript from '@tiptap/extension-subscript';
+import Superscript from '@tiptap/extension-superscript';
+import TextAlign from '@tiptap/extension-text-align';
+import Underline from '@tiptap/extension-underline';
+import { useEditor } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useEffect } from 'react';
+
+
+export function ProgramPendidikanAnakTextEditor({ onSubmit, onChange, showSubmit = true, initialContent = '', }: { 
+  onSubmit?: (val: string) => void, 
+  onChange: (val: string) => void, 
+  showSubmit?: boolean,
+  initialContent?: string }) {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link,
+      Superscript,
+      SubScript,
+      Highlight,
+      TextAlign.configure({ types: ['heading', 'paragraph'] }),
+    ],
+    immediatelyRender: false,
+    content: initialContent,
+    onUpdate : ({editor}) => {
+      onChange(editor.getHTML())
+    }
+  });
+
+  useEffect(() => {
+    if (editor && initialContent !== editor.getHTML()) {
+      editor.commands.setContent(initialContent || '<p></p>');
+    }
+  }, [initialContent, editor]);
+
+  return (
+    <Stack >
+      <RichTextEditor editor={editor}>
+        <RichTextEditor.Toolbar sticky stickyOffset={60}>
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Bold />
+            <RichTextEditor.Italic />
+            <RichTextEditor.Underline />
+            <RichTextEditor.Strikethrough />
+            <RichTextEditor.ClearFormatting />
+            <RichTextEditor.Highlight />
+            <RichTextEditor.Code />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.H1 />
+            <RichTextEditor.H2 />
+            <RichTextEditor.H3 />
+            <RichTextEditor.H4 />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Blockquote />
+            <RichTextEditor.Hr />
+            <RichTextEditor.BulletList />
+            <RichTextEditor.OrderedList />
+            <RichTextEditor.Subscript />
+            <RichTextEditor.Superscript />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Link />
+            <RichTextEditor.Unlink />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.AlignLeft />
+            <RichTextEditor.AlignCenter />
+            <RichTextEditor.AlignJustify />
+            <RichTextEditor.AlignRight />
+          </RichTextEditor.ControlsGroup>
+
+          <RichTextEditor.ControlsGroup>
+            <RichTextEditor.Undo />
+            <RichTextEditor.Redo />
+          </RichTextEditor.ControlsGroup>
+        </RichTextEditor.Toolbar>
+
+        <RichTextEditor.Content />
+      </RichTextEditor>
+      {showSubmit && (
+        <Button onClick={() => {
+          if (!editor) return
+          onSubmit?.(editor?.getHTML())
+        }}>Submit</Button>
+      )}
+    </Stack>
+  );
+}

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/layout.tsx

@@ -0,0 +1,11 @@
+'use client'
+import LayoutTabs from "./_lib/layoutTabs"
+
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  )
+}

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/page.tsx

@@ -1,74 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
-
-function ProgramPendidikanAnak() {
-  return (
-    <Box>
-      <HeaderSearch
-      title='Program Pendidikan Anak'
-      placeholder='pencarian'
-      searchIcon={<IconSearch size={20} />}
-      />
-      <ListProgramPendidikanAnak/>
-    </Box>
-  );
-}
-
-function ListProgramPendidikanAnak() {
-  const router = useRouter();
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Program Pendidikan Anak'
-          href='/admin/pendidikan/program-pendidikan-anak/create'
-          />
-          <Box style={{overflowX: 'auto'}}>
-            <Table striped withRowBorders withTableBorder style={{minWidth: '700px'}}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nomor</TableTh>
-                  <TableTh>Nama Lengkap</TableTh>
-                  <TableTh>Nomor Telepon</TableTh>
-                  <TableTh>Email</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                <TableTr>
-                  <TableTd>
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>1</Text>
-                    </Box>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nama Lengkap</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Nomor Telepon</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Text truncate="end" fz={"sm"}>Email</Text>
-                  </TableTd>
-                  <TableTd>
-                    <Button onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/detail')}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-    </Box>
-  )
-}
-
-export default ProgramPendidikanAnak;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanProgram() {
+  const router = useRouter()
+  const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Program Unggulan</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <ProgramPendidikanAnakTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanProgram;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/program-unggulan/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateProgramPendidikanAnak from '../../../_state/pendidikan/program-pendidikan-anak';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(stateProgramPendidikanAnak.programUnggulanState)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Program Unggulan</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/edit/page.tsx

@@ -0,0 +1,86 @@
+'use client'
+import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack } from '@tabler/icons-react';
+import dynamic from 'next/dynamic';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+const ProgramPendidikanAnakTextEditor = dynamic(() => import('../../_lib/programPendidikanAnakTextEditor').then(mod => mod.ProgramPendidikanAnakTextEditor), {
+  ssr: false,
+});
+
+function EditTujuanProgram() {
+  const router = useRouter()
+  const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram)
+  const [judul, setJudul] = useState('');
+  const [content, setContent] = useState('');
+
+  useShallowEffect(() => {
+    if (!editState.findById.data) {
+      editState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+    }
+  }, []);
+
+  useEffect(() => {
+    if (editState.findById.data) {
+      setJudul(editState.findById.data.judul ?? '')
+      setContent(editState.findById.data.deskripsi ?? '')
+    }
+  }, [editState.findById.data])
+
+  const submit = () => {
+    if (editState.findById.data) {
+      editState.findById.data.judul = judul;
+      editState.findById.data.deskripsi = content;
+      editState.update.save(editState.findById.data)
+    }
+    router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program')
+  }
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Tujuan Program</Title>
+              <TextInput
+                label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+                value={judul}
+                onChange={(e) => setJudul(e.target.value)}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
+              <ProgramPendidikanAnakTextEditor
+                showSubmit={false}
+                onChange={setContent}
+                initialContent={content}
+              />
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={submit}
+                  loading={editState.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
+      </Stack>
+    </Box>
+  );
+}
+
+export default EditTujuanProgram;

src/app/admin/(dashboard)/pendidikan/program-pendidikan-anak/tujuan-program/page.tsx

@@ -0,0 +1,54 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import stateProgramPendidikanAnak from '../../../_state/pendidikan/program-pendidikan-anak';
+
+function Page() {
+  const router = useRouter()
+  const listPreview = useProxy(stateProgramPendidikanAnak.stateTujuanProgram)
+  useShallowEffect(() => {
+    listPreview.findById.load('edit')
+  }, [])
+
+  if (!listPreview.findById.data) {
+    return (
+      <Stack>
+        <Skeleton radius={10} h={800} />
+      </Stack>
+    )
+  }
+  return (
+    <Paper bg={colors['white-1']} p={'md'} radius={10}>
+      <Stack gap={"22"}>
+        <Grid>
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={2}>Preview Tujuan Program</Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Button bg={colors['blue-button']} onClick={() => router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program/edit')}>
+              <IconEdit size={16} />
+            </Button>
+          </GridCol>
+        </Grid>
+        <Box>
+          <Stack gap={'lg'}>
+            <Paper p={"xl"} bg={colors['BG-trans']}>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "h3", md: "h2" }} fw={"bold"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.judul }} />
+              </Box>
+              <Box px={{ base: 0, md: 30 }}>
+                <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: listPreview.findById.data.deskripsi }} />
+              </Box>
+            </Paper>
+          </Stack>
+        </Box>
+      </Stack>
+    </Paper>
+  )
+}
+
+export default Page;

src/app/admin/_com/list_PageAdmin.tsx

@@ -17,7 +17,7 @@ export const navBar = [
       {
         id: "Landing_Page_3",
         name: "Indeks Kepuasan Masyarakat",
-        path: "/admin/landing-page/indeks-kepuasan-masyarakat"
+        path: "/admin/landing-page/indeks-kepuasan-masyarakat/list-survey"
       },
       {
         id: "Landing_Page_4",
@@ -344,7 +344,7 @@ export const navBar = [
       {
         id: "Pendidikan_1",
         name: "Info Sekolah & PAUD",
-        path: "/admin/pendidikan/info-sekolah-paud"
+        path: "/admin/pendidikan/info-sekolah-paud/jenjang-pendidikan"
       },
       {
         id: "Pendidikan_2",
@@ -354,17 +354,17 @@ export const navBar = [
       {
         id: "Pendidikan_3",
         name: "Program Pendidikan Anak",
-        path: "/admin/pendidikan/program-pendidikan-anak"
+        path: "/admin/pendidikan/program-pendidikan-anak/program-unggulan"
       },
       {
         id: "Pendidikan_4",
         name: "Bimbingan Belajar Desa",
-        path: "/admin/pendidikan/bimbingan-belajar-desa"
+        path: "/admin/pendidikan/bimbingan-belajar-desa/tujuan-program"
       },
       {
         id: "Pendidikan_5",
         name: "Pendidikan Non Formal",
-        path: "/admin/pendidikan/pendidikan-non-formal"
+        path: "/admin/pendidikan/pendidikan-non-formal/tujuan-program"
       },
       {
         id: "Pendidikan_6",

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export const ageStatUpdate = async (context: Context) => {
+  const { id } = context.params as { id: string };
+  const body = (await context.body) as {
+    group?: string;
+    count?: number;
+    monthlyStatId?: string;
+  };
+
+  try {
+    const updated = await prisma.ageStat.update({
+      where: { id },
+      data: {
+        group: body.group,
+        count: body.count,
+        monthlyStatId: body.monthlyStatId,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Data age berhasil diperbarui",
+      data: updated,
+    };
+  } catch (error) {
+    console.error("Gagal update Age Stat:", error);
+    return {
+      success: false,
+      message: "Gagal memperbarui data age stat",
+    };
+  }
+};
+export default ageStatUpdate;

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

@@ -0,0 +1,40 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export const genderStatCreate = async (context: Context) => {
+  const body = (await context.body) as {
+    laki: number;
+    perempuan: number;
+    monthlyStatId: string;
+  };
+
+  const total = body.laki + body.perempuan;
+  const percentLaki = total > 0 ? Number(((body.laki / total) * 100).toFixed(2)) : 0;
+const percentPerempuan = total > 0 ? Number(((body.perempuan / total) * 100).toFixed(2)) : 0;
+
+  try {
+    const created = await prisma.genderStat.create({
+    data: {
+      laki: body.laki,
+      perempuan: body.perempuan,
+      total,
+      percentLaki: Number(percentLaki),
+      percentPerempuan: Number(percentPerempuan),
+      monthlyStatId: body.monthlyStatId,
+    },
+  });
+
+    return {
+      success: true,
+      message: "Gender Stat berhasil dibuat",
+      data: created,
+    };
+  } catch (error) {
+    console.error("Gagal create gender stat:", error);
+    return {
+      success: false,
+      message: "Gagal membuat data gender stat",
+    };
+  }
+};
+export default genderStatCreate;

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

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

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

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

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

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

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

@@ -0,0 +1,37 @@
+import Elysia, { t } from "elysia";
+import genderStatCreate from "./create";
+import genderStatDelete from "./del";
+import genderStatFindMany from "./findMany";
+import genderStatFindUnique from "./findUnique";
+import genderStatUpdate from "./updt";
+
+
+const gender = new Elysia({
+  prefix: "/gender",
+  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Gender"],
+})
+  .post("/create", genderStatCreate, {
+    body: t.Object({
+      monthlyStatId: t.String(),
+      laki: t.Number(),
+      perempuan: t.Number(),
+      total: t.Number(),
+      percentLaki: t.Number(),
+      percentPerempuan: t.Number(),
+    }),
+  })
+  .get("/findMany", genderStatFindMany)
+  .get("/:id", genderStatFindUnique)
+  .put("/:id", genderStatUpdate, {
+    body: t.Object({
+      laki: t.Number(),
+      perempuan: t.Number(),
+      monthlyStatId: t.String(),
+      total: t.Number(),
+      percentLaki: t.Number(),
+      percentPerempuan: t.Number(),
+    }),
+  })
+  .delete("/del/:id", genderStatDelete);
+
+export default gender;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/gender/updt.ts

@@ -0,0 +1,42 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export const genderStatUpdate = async (context: Context) => {
+  const { id } = context.params as { id: string };
+  const body = (await context.body) as {
+    laki?: number;
+    perempuan?: number;
+    monthlyStatId?: string;
+  };
+
+  const total = (body.laki ?? 0) + (body.perempuan ?? 0);
+  const percentLaki = total > 0 ? Number(((body.laki ?? 0) / total) * 100).toFixed(2) : 0;
+  const percentPerempuan = total > 0 ? Number(((body.perempuan ?? 0) / total) * 100).toFixed(2) : 0;
+
+  try {
+    const updated = await prisma.genderStat.update({
+      where: { id },
+      data: {
+        laki: body.laki,
+        perempuan: body.perempuan,
+        total,
+        percentLaki: Number(percentLaki),
+        percentPerempuan: Number(percentPerempuan),
+        monthlyStatId: body.monthlyStatId,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Data gender berhasil diperbarui",
+      data: updated,
+    };
+  } catch (error) {
+    console.error("Gagal update Gender Stat:", error);
+    return {
+      success: false,
+      message: "Gagal memperbarui data gender stat",
+    };
+  }
+};
+export default genderStatUpdate;

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

@@ -0,0 +1,20 @@
+import Elysia from "elysia";
+import gender from "./gender";
+import monthlyStat from "./monthly-stat";
+import survey from "./survey";
+import response from "./response";
+import age from "./age";
+
+
+const IndeksKepuasanMasyarakat = new Elysia({
+  prefix: "/indekskepuasanmasyarakat",
+  tags: ["Landing Page/Profile/Indeks Kepuasan Masyarakat"],
+})
+.use(gender)
+.use(monthlyStat)
+.use(survey)
+.use(response)
+.use(age)
+
+
+export default IndeksKepuasanMasyarakat

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

@@ -0,0 +1,33 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export const createMonthlyStat = async (context: Context) => {
+  const body = await context.body as {
+    month: string;
+    respondentsCount: number;
+    surveyId: string;
+  };
+
+  try {
+    const created = await prisma.monthlyStat.create({
+      data: {
+        month: body.month,
+        respondentsCount: body.respondentsCount,
+        surveyId: body.surveyId,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Monthly stat berhasil dibuat",
+      data: created,
+    };
+  } catch (error) {
+    console.error("Gagal create monthly stat:", error);
+    return {
+      success: false,
+      message: "Gagal membuat monthly stat",
+    };
+  }
+};
+export default createMonthlyStat;

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

@@ -0,0 +1,26 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export const deleteMonthlyStat = async (context: Context) => {
+  const { id } = context.params as { id: string };
+
+  try {
+    await prisma.monthlyStat.delete({
+      where: { id },
+    });
+
+    return {
+      success: true,
+      message: "Data statistik bulanan berhasil dihapus",
+    };
+  } catch (error) {
+    console.error("Gagal hapus MonthlyStat:", error);
+    return {
+      success: false,
+      message: "Gagal menghapus data statistik bulanan",
+    };
+  }
+};
+
+export default deleteMonthlyStat;
+

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

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

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

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

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

@@ -0,0 +1,31 @@
+import Elysia, { t } from "elysia";
+import createMonthlyStat from "./create";
+import deleteMonthlyStat from "./del";
+import findManyMonthlyStat from "./findMany";
+import findUniqueMonthlyStat from "./findUnique";
+import updateMonthlyStat from "./updt";
+
+
+const surveyResponse = new Elysia({
+  prefix: "/monthlystat",
+  tags: ["Landing Page/Indeks Kepuasan Masyarakat/Survey Response"],
+})
+  .post("/create", createMonthlyStat, {
+    body: t.Object({
+      month: t.String(),
+      respondentsCount: t.Number(),
+      surveyId: t.String(),
+    }),
+  })
+  .get("/findMany", findManyMonthlyStat)
+  .get("/:id", findUniqueMonthlyStat)
+  .put("/:id", updateMonthlyStat, {
+    body: t.Object({
+      month: t.String(),
+      respondentsCount: t.Number(),
+      surveyId: t.String(),
+    }),
+  })
+  .delete("/del/:id", deleteMonthlyStat);
+
+export default surveyResponse;

src/app/api/[[...slugs]]/_lib/landing_page/indeks-kepuasan-masyarakat/monthly-stat/updt.ts

@@ -0,0 +1,34 @@
+import { Context } from "elysia";
+import prisma from "@/lib/prisma";
+
+export const updateMonthlyStat = async (context: Context) => {
+  const { id } = context.params as { id: string };
+  const body = await context.body as {
+    month?: string;
+    respondentsCount?: number;
+  };
+
+  try {
+    const updated = await prisma.monthlyStat.update({
+      where: { id },
+      data: {
+        month: body.month,
+        respondentsCount: body.respondentsCount,
+      },
+    });
+
+    return {
+      success: true,
+      message: "Data MonthlyStat berhasil diupdate",
+      data: updated,
+    };
+  } catch (error) {
+    console.error("Gagal update MonthlyStat:", error);
+    return {
+      success: false,
+      message: "Gagal mengupdate data statistik bulanan",
+    };
+  }
+};
+
+export default updateMonthlyStat;

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

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

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

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

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

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