Fix UI Menu Landing Page, Submenu Profile & Desa Anti Korupsi

UI & API Menu PPID, Submenu Struktur PPID
Test AUTH - 30 Jul
2025-08-01 15:21:01 +08:00 · 2025-07-31 16:22:02 +08:00 · 2025-07-30 12:11:17 +08:00 · 2025-07-29 17:58:17 +08:00 · 2025-07-29 12:29:25 +08:00 · 2025-07-29 11:05:01 +08:00
528 changed files with 35814 additions and 2765 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -14,8 +14,10 @@
  },
  "dependencies": {
    "@cubejs-client/core": "^0.31.0",
+    "@elysiajs/cookie": "^0.8.0",
    "@elysiajs/cors": "^1.2.0",
    "@elysiajs/eden": "^1.3.2",
+    "@elysiajs/jwt": "^1.3.2",
    "@elysiajs/static": "^1.3.0",
    "@elysiajs/stream": "^1.1.0",
    "@elysiajs/swagger": "^1.2.0",
@@ -40,11 +42,14 @@
    "@tiptap/react": "^2.11.7",
    "@tiptap/starter-kit": "^2.11.7",
    "@types/bun": "^1.2.2",
+    "@types/leaflet": "^1.9.20",
    "@types/lodash": "^4.17.16",
    "add": "^2.0.6",
    "animate.css": "^4.1.1",
+    "bcryptjs": "^3.0.2",
    "bun": "^1.2.2",
    "chart.js": "^4.4.8",
+    "classnames": "^2.5.1",
    "dayjs": "^1.11.13",
    "elysia": "^1.3.5",
    "embla-carousel-autoplay": "^8.5.2",
@@ -53,6 +58,8 @@
    "framer-motion": "^12.23.5",
    "get-port": "^7.1.0",
    "jotai": "^2.12.3",
+    "jsonwebtoken": "^9.0.2",
+    "leaflet": "^1.9.4",
    "list": "^2.0.19",
    "lodash": "^4.17.21",
    "motion": "^12.4.1",
@@ -61,11 +68,15 @@
    "next-view-transitions": "^0.3.4",
    "node-fetch": "^3.3.2",
    "p-limit": "^6.2.0",
+    "primeicons": "^7.0.0",
+    "primereact": "^10.9.6",
    "prisma": "^6.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
+    "react-leaflet": "^5.0.0",
    "react-simple-toasts": "^6.1.0",
    "react-toastify": "^11.0.5",
+    "react-transition-group": "^4.4.5",
    "readdirp": "^4.1.1",
    "recharts": "^2.15.3",
    "swr": "^2.3.2",
@@ -75,15 +86,16 @@
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
+    "@types/jsonwebtoken": "^9.0.10",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.6",
+    "parcel": "^2.6.2",
    "postcss": "^8.5.1",
    "postcss-preset-mantine": "^1.17.0",
    "postcss-simple-vars": "^7.0.1",
-    "typescript": "^5",
-    "parcel": "^2.6.2"
+    "typescript": "^5"
  }
 }
--- a/prisma/data/landing-page/desa-anti-korupsi/desaantiKorpusi.json
+++ b/prisma/data/landing-page/desa-anti-korupsi/desaantiKorpusi.json
@@ -0,0 +1,128 @@
+[
+    {
+        "id": "cmds9h9ko000pvnberdjnx64b",
+        "name": "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
+        "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA</p>",
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
+        "fileId": ""
+    },
+    {
+        "id": "cmds9sjmz000svnbesv2133of",
+        "name": "1.2 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA",
+        "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA</p>",
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
+        "fileId": ""
+    },
+    {
+        "id": "cmds9tcpi000vvnbev3ebtlnt",
+        "name": "1.3 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
+        "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN</p>",
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
+        "fileId": ""
+    },
+    {
+        "id": "cmds9twvj000yvnbep0pq8dzf",
+        "name": "1.4 PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA",
+        "deskripsi": "<p>PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA</p>",
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
+        "fileId": ""
+    },
+    {
+        "id": "cmds9ugap0011vnbe118yv871",
+        "name": "1.5 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA",
+        "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA</p>",
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsa35310014vnbe6qy6l1rz",
+        "name": "2.1 ADANYA KEGIATAN PENGAWASAN DAN EVALUASI KINERJA PERANGKAT DESA",
+        "deskripsi": "<p>ADANYA KEGIATAN PENGAWASAN DAN EVALUASI KINERJA PERANGKAT DESA</p>",
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsa46590017vnbepp3noso1",
+        "name": "2.2 ADANYA TINDAK LANJUT HASIL PEMBINAAN, PETUNJUK, ARAH, PENGAWASAN, DAN PEMERIKSAAN DARI PEMERINTAH PUSAT/DAERAH",
+        "deskripsi": "<p>ADANYA TINDAK LANJUT HASIL PEMBINAAN, PETUNJUK, ARAH, PENGAWASAN, DAN PEMERIKSAAN DARI PEMERINTAH PUSAT/DAERAH</p>",
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsa5m7z001avnbe4cvfrcz0",
+        "name": "2.3 TIDAK ADANYA APARATUR DESA DALAM 3(TIGA) TAHUN TERAKHIR YANG TERJERAT TINDAKAN PIDANA KORUPSI",
+        "deskripsi": "<p>TIDAK ADANYA APARATUR DESA DALAM 3(TIGA) TAHUN TERAKHIR YANG TERJERAT TINDAKAN PIDANA KORUPSI</p>",
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsa8q5q001dvnbemch8j24x",
+        "name": "3.1 ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT",
+        "deskripsi": "<p>ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT</p>",
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsa9lbi001gvnbequn2ba7m",
+        "name": "3.2 ADANYA SURVEY KEPUASAN MASYARAKAT (SKM) TERHADAP LAYANAN PEMERINTAH DESA",
+        "deskripsi": "<p>ADANYA SURVEY KEPUASAN MASYARAKAT (SKM) TERHADAP LAYANAN PEMERINTAH DESA</p>",
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsaa7aq001jvnbeizh04e67",
+        "name": "3.3 ADANYA KETERBUKAAN AKSES MASYARAKAT TERHADAP INFORMASI LAYANAN PEMERINTAH DESA (KESEHATAN, PENDIDIKAN, SOSIAL, LINGKUNGAN, TRANTIBUMLINMAS, PEKERJAAN UMUM) PEMBANGUNAN, KEPENDUDUKAN, KEUANGAN, DAN PELAYANAN LAINNYA",
+        "deskripsi": "<p>ADANYA KETERBUKAAN AKSES MASYARAKAT TERHADAP INFORMASI LAYANAN PEMERINTAH DESA (KESEHATAN, PENDIDIKAN, SOSIAL, LINGKUNGAN, TRANTIBUMLINMAS, PEKERJAAN UMUM) PEMBANGUNAN, KEPENDUDUKAN, KEUANGAN, DAN PELAYANAN LAINNYA</p>",
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsaaw8d001mvnbek3tfefrk",
+        "name": "3.4 ADANYA MEDIA INFORMASI TENTANG APBDES DI BALAI DESA DAN/ATAU TEMPAT LAIN YANG MUDAH DIAKSES OLEH MASYARAKAT",
+        "deskripsi": "<p>ADANYA MEDIA INFORMASI TENTANG APBDES DI BALAI DESA DAN/ATAU TEMPAT LAIN YANG MUDAH DIAKSES OLEH MASYARAKAT</p>",
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsabhif001pvnbepm06hry6",
+        "name": "3.5 ADANYA MAKLUMAT PELAYANAN",
+        "deskripsi": "<p>ADANYA MAKLUMAT PELAYANAN</p>",
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsag40b001svnbe7krq9khc",
+        "name": "4.1 ADANYA PARTISIPASI DAN KETERLIBATAN MASYARAKAT DALAM PENYUSUNAN RKP DESA",
+        "deskripsi": "<p>ADANYA PARTISIPASI DAN KETERLIBATAN MASYARAKAT DALAM PENYUSUNAN RKP DESA</p>",
+        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsagkaf001vvnbejo26w8sa",
+        "name": "4.2 ADANYA KESADARAN MASYARAKAT DALAM MENCEGAH TERJADINYA PRAKTIK GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
+        "deskripsi": "<p>ADANYA KESADARAN MASYARAKAT DALAM MENCEGAH TERJADINYA PRAKTIK GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN</p>",
+        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsah4qe001yvnbeiy3mwrvb",
+        "name": "4.3 ADANYA KETERLIBATAN LEMBAGA KEMASYARAKATAN DALAM PELAKSANAAN PEMBANGUNAN DESA",
+        "deskripsi": "<p>ADANYA KETERLIBATAN LEMBAGA KEMASYARAKATAN DALAM PELAKSANAAN PEMBANGUNAN DESA</p>",
+        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsak5vn0021vnbemg86aab4",
+        "name": "5.1 ADANYA BUDAYA LOKAL/HUKUM ADAT YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
+        "deskripsi": "<p>ADANYA BUDAYA LOKAL/HUKUM ADAT YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI</p>",
+        "kategoriId": "cmds9govb000mvnbesq8b4y99",
+        "fileId": ""
+    },
+    {
+        "id": "cmdsalc800024vnbezgulhgrb",
+        "name": "5.2 ADANYA TOKOH MASYARAKAT, TOKOH AGAMA, TOKOH ADAT, TOKOH PEMUDA, DAN KAUM PEREMPUAN YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
+        "deskripsi": "<p>ADANYA TOKOH MASYARAKAT, TOKOH AGAMA, TOKOH ADAT, TOKOH PEMUDA, DAN KAUM PEREMPUAN YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI</p>",
+        "kategoriId": "cmds9govb000mvnbesq8b4y99",
+        "fileId": ""
+    }
+]
--- a/prisma/data/landing-page/desa-anti-korupsi/kategoriDesaAntiJKorupsi.json
+++ b/prisma/data/landing-page/desa-anti-korupsi/kategoriDesaAntiJKorupsi.json
@@ -0,0 +1,22 @@
+[
+    {
+        "id": "cmds9es2o000ivnbe1o0swrvh",
+        "name": "PENGUATAN TATA LAKSANA"
+    },
+    {
+        "id": "cmds9f2ua000jvnbeksu1sfwm",
+        "name": "PENGUATAN PENGAWASAN"
+    },
+    {
+        "id": "cmds9fr73000kvnbe6w281dcl",
+        "name": "PENGUATAN KUALITAS PELAYANAN PUBLIK"
+    },
+    {
+        "id": "cmds9g5ow000lvnbel3rkkwrv",
+        "name": "PENGUATAN PARTISIPASI MASYARAKAT"
+    },
+    {
+        "id": "cmds9govb000mvnbesq8b4y99",
+        "name": "KEARIFAN LOKAL"
+    }
+]
--- a/prisma/data/landing-page/profile/mediaSosial.json
+++ b/prisma/data/landing-page/profile/mediaSosial.json
@@ -0,0 +1,32 @@
+[
+  {
+    "id": "cmds8w2q60002vnbe6i8qhkuo",
+    "name": "Telephone Desa Darmasaba",
+    "iconUrl": "081239580000"
+  },
+  {
+    "id": "cmds8z7u20005vnbegyyvnbk0",
+    "name": "Email Desa Darmasaba",
+    "iconUrl": "desadarmasaba@badungkab.go.id"
+  },
+  {
+    "id": "cmds9023u0008vnbe3oxmhwyf",
+    "name": "Desa Darmasaba",
+    "iconUrl": "https://www.youtube.com/channel/UCtPw9WOQO7d2HIKzKgel4Xg"
+  },
+  {
+    "id": "cmds90oul000bvnbe2bqkptoi",
+    "name": "Pemerintah Desa Darmasaba",
+    "iconUrl": "https://www.facebook.com/DarmasabaDesaku"
+  },
+  {
+    "id": "cmds91i4e000evnbe8gtf1gub",
+    "name": "ddarmasaba",
+    "iconUrl": "https://www.instagram.com/ddarmasaba/"
+  },
+  {
+    "id": "cmds92de5000hvnbemlu6sq5x",
+    "name": "desa.darmasaba",
+    "iconUrl": "https://www.tiktok.com/@desa.darmasaba?is_from_webapp=1&sender_device=pc"
+  }
+]
--- a/prisma/data/landing-page/profile/profile.json
+++ b/prisma/data/landing-page/profile/profile.json
@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "name": "I.B Surya Prabhawa Manuaba, S.H., M.H.",
+    "position": "Perbekel Darmasaba periode 2021-2027"
+  }
+]
--- a/prisma/data/landing-page/profile/programInovasi.json
+++ b/prisma/data/landing-page/profile/programInovasi.json
@@ -0,0 +1,50 @@
+[
+  {
+    "id": "cmdr7039z0002vn5rttctt9hn",
+    "name": "Davest",
+    "description": "Darmasaba Village Festval",
+    "link": "https://darmasaba.desa.id/berita/55862-rakor-davest-2024"
+  },
+  {
+    "id": "cmdr755pf0005vn5rp8tyuubw",
+    "name": "Dmangan",
+    "description": "Darmasaba Aman Pangan",
+    "link": "https://darmasaba.desa.id/berita/61452-kader-d-mangan-berhasil-meraih-prestasi-dalam-ajang-lomba-banjar-bali-quis-bbq-tahun-2024"
+  },
+  {
+    "id": "cmdr76nqk0008vn5rdddvcxnr",
+    "name": "Bicara Darmasaba",
+    "description": "Bicara Darmasaba",
+    "link": "https://darmasaba.desa.id/berita/42506-bicara-darmasaba"
+  },
+  {
+    "id": "cmdr77vbw000bvn5rvpmoq31s",
+    "name": "Bares",
+    "description": "Darmasaba Recycling Stock/Exchange",
+    "link": "http://darmasaba.desa.id/berita/56722-bares"
+  },
+  {
+    "id": "cmdr7bxtp000evn5rmy85wihx",
+    "name": "Sajjana Dharma Raksaka",
+    "description": "Sajjana Dharma Raksaka",
+    "link": "https://ppid.badungkab.go.id/storage/dokumen/5RS9dldGkrgzMQq6bKdZsqsVRHI8gffWv4PGfb3r.pdf"
+  },
+  {
+    "id": "cmdr7dlnk000hvn5r9lur3z35",
+    "name": "PDKT",
+    "description": "Perangkat Desa Kuat Teknologi",
+    "link": "https://darmasaba.desa.id/berita/53752-p-d-k-t"
+  },
+  {
+    "id": "cmdr7ftob000mvn5rfhgdtg8v",
+    "name": "GM",
+    "description": "Galah Melah",
+    "link": "https://darmasaba.desa.id/berita/52880-galah-melah"
+  },
+  {
+    "id": "cmdr7glue000pvn5r6onzslju",
+    "name": "Inovasi Desa Darmasaba",
+    "description": "Inovasi Desa Darmasaba",
+    "link": "https://darmasaba.desa.id/produk-lokal-desa"
+  }
+]
--- a/prisma/data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json
+++ b/prisma/data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json
@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Contoh Kegiatan di Desa Darmasaba",
+      "deskripsi": "<ul><li><p>Pelatihan membuat kompos dari sampah rumah tangga</p></li><li><p>Gerakan Jumat Bersih rutin</p></li><li><p>Workshop membuat ecobrick</p></li><li><p>Lomba kebersihan antar banjar</p></li><li><p>Sosialisasi lingkungan di sekolah dan posyandu</p></li></ul>"
+    }
+  ]
--- a/prisma/data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json
+++ b/prisma/data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json
@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Materi Edukasi yang Diberikan",
+    "deskripsi": "<ul><li><p>Pengelolaan Sampah (Pilah sampah organik dan anorganik)</p></li><li><p>Pencegahan pencemaran lingkungan (air, udara, dan tanah)</p></li><li><p>Pemanfaatan lahan hijau dan penghijauan desa</p></li><li><p>Daur ulang dan kreatifitas dari sampah</p></li><li><p>Bahaya pembakaran sampah sembarangan</p></li></ul>"
+  }
+]
--- a/prisma/data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json
+++ b/prisma/data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json
@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Tujuan Edukasi Lingkungan",
+    "deskripsi": "<ul><li><p>Meningkatkan kesadaran masyarakat tentang pentingnya lingkungan bersih dan sehat</p></li><li><p>Mendorong partisipasi warga dalam kegiatan pengelolaan sampah, penghijauan, dan konservasi</p></li><li><p>Mengurangi dampak negatif terhadap lingkungan dari kegiatan manusia</p></li><li><p>Membentuk generasi muda yang peduli terhadap isu-isu lingkungan</p></li></ul>"
+  }
+]
--- a/prisma/data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json
+++ b/prisma/data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json
@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Bentuk Konservasi Berdasarkan Adat",
+      "deskripsi": "<ul><li><p>Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi</p></li><li><p>Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan</p></li><li><p>Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan</p></li><li><p>Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.</p></li><li><p>Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya</p></li></ul>"
+    }
+  ]
--- a/prisma/data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json
+++ b/prisma/data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json
@@ -0,0 +1,7 @@
+[
+    {
+      "id": "edit",
+      "judul": "Filosofi Tri Hita Karuna",
+      "deskripsi": "<ul><li><p>Parahyangan: Hubungan manusia dengan Tuhan</p></li><li><p>Pawongan: Hubungan antar manusia</p></li><li><p>Palemahan: Hubungan manusia dengan alam</p></li></ul>"
+    }
+  ]
--- a/prisma/data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json
+++ b/prisma/data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json
@@ -0,0 +1,7 @@
+[
+  {
+    "id": "edit",
+    "judul": "Nilai Konservasi Adat",
+    "deskripsi": "<ul><li><p>Menjaga keseimbangan ekosistem</p></li><li><p>Melestarikan spiritualitas lokal dan kesucian alam</p></li><li><p>Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan</p></li><li><p>Menjaga keberlangsungan sumber daya alam untuk generasi mendatang</p></li></ul>"
+  }
+]
--- a/prisma/data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json
+++ b/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>"
+    }
+]
--- a/prisma/data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json
+++ b/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>"
+    }
+]
--- a/prisma/data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json
+++ b/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>"
+    }
+]
--- a/prisma/data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json
+++ b/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>"
+    }
+]
--- a/prisma/data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json
+++ b/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>"
+    }
+]
--- a/prisma/data/pendidikan/pendidikan-non-formal/tujuan-program2.json
+++ b/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>"
+    }
+]
--- a/prisma/data/pendidikan/program-pendidikan-anak/program-unggulan.json
+++ b/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>"
+  }
+]
--- a/prisma/data/pendidikan/program-pendidikan-anak/tujuan-program.json
+++ b/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>"
+  }
+]
--- a/prisma/data/ppid/struktur-ppid/pegawai-PPID.json
+++ b/prisma/data/ppid/struktur-ppid/pegawai-PPID.json
@@ -0,0 +1,91 @@
+[
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440001",
+      "namaLengkap": "Ida Bagus Surya Prabhawa Manuaba, S.H.,M.H., NL.P.",
+      "gelarAkademik": "S.H.,M.H.,NL.P.",
+      "tanggalMasuk": "2020-01-01T00:00:00.000Z",
+      "email": "bagus@desa.id",
+      "telepon": "081234567891",
+      "alamat": "Jl. Raya Desa No. 1",
+      "posisiId": "kepala_desa",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440002",
+      "namaLengkap": "I Ketut Suwanta",
+      "gelarAkademik": "S.Pt",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "suwanta@desa.id",
+      "telepon": "081234567892",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "sekretaris_desa",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440006",
+      "namaLengkap": "Ni Wayan Supardiati",
+      "gelarAkademik": "S.Pd",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "supardiati@desa.id",
+      "telepon": "081234567892",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "kaur_keuangan",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440011",
+      "namaLengkap": "I Wayan Agus Juni Artha Saputra",
+      "gelarAkademik": "S.T.",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "agus@desa.id",
+      "telepon": "081234567892",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "kadus_banjar_dinas_menesa",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440012",
+      "namaLengkap": "I Wayan Sueca",
+      "gelarAkademik": "S.H.",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "sueca@desa.id",
+      "telepon": "081234567893",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "kadus_banjar_dinas_darmasaba",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440017",
+      "namaLengkap": "Si Gede Ketut Astawa",
+      "gelarAkademik": "S.T.",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "astawa@desa.id",
+      "telepon": "081234567893",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "kadus_banjar_dinas_bucu",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440018",
+      "namaLengkap": "I Kadek Arya Minarta",
+      "gelarAkademik": "S.T.",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "minarta@desa.id",
+      "telepon": "081234567893",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "kadus_banjar_dinas_gulingan",
+      "isActive": true
+    },
+    {
+      "id": "550e8400-e29b-41d4-a716-446655440021",
+      "namaLengkap": "I Gede Andika Pradnya Diputra",
+      "gelarAkademik": "S.E.",
+      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+      "email": "diputra@desa.id",
+      "telepon": "081234567893",
+      "alamat": "Jl. Raya Desa No. 2",
+      "posisiId": "kadus_banjar_dinas_taman",
+      "isActive": true
+    }
+
+  ]
--- a/prisma/data/ppid/struktur-ppid/posisi-organisasi-PPID.json
+++ b/prisma/data/ppid/struktur-ppid/posisi-organisasi-PPID.json
@@ -0,0 +1,158 @@
+[
+  [
+    {
+      "id": "kepala_desa",
+      "nama": "Kepala Desa",
+      "deskripsi": "Pemimpin desa Darmasaba",
+      "hierarki": 1,
+      "parentId": null
+    },
+    {
+      "id": "kepala_urusan",
+      "nama": "Kepala Urusan",
+      "deskripsi": "Pemimpin urusan desa Darmasaba",
+      "hierarki": 2,
+      "parentId": "kepala_desa"
+    },
+    {
+      "id": "sekretaris_desa",
+      "nama": "Sekretaris Desa",
+      "deskripsi": "Pengelola administrasi desa",
+      "hierarki": 2,
+      "parentId": "kepala_desa"
+    },
+    {
+      "id": "kaur_keuangan",
+      "nama": "Kaur Keuangan",
+      "deskripsi": "Pengelola keuangan desa",
+      "hierarki": 3,
+      "parentId": "kaur_umum"
+    },
+    {
+      "id": "kaur_perencanaan",
+      "nama": "Kaur Perencanaan",
+      "deskripsi": "Penyusun program kerja desa",
+      "hierarki": 3,
+      "parentId": "kaur_umum"
+    },
+    {
+      "id": "kaur_umum",
+      "nama": "Kaur Umum & TU",
+      "deskripsi": "Pelayanan umum dan administrasi",
+      "hierarki": 2,
+      "parentId": "kepala_desa"
+    },
+    {
+      "id": "kasi_pemerintahan",
+      "nama": "Kasi Pemerintahan",
+      "deskripsi": "Urusan pemerintahan dan keamanan",
+      "hierarki": 2,
+      "parentId": "kepala_desa"
+    },
+    {
+      "id": "kasi_pelayanan",
+      "nama": "Kasi Pelayanan",
+      "deskripsi": "Urusan pelayanan masyarakat",
+      "hierarki": 2,
+      "parentId": "kepala_desa"
+    },
+    {
+      "id": "kasi_kesejahteraan",
+      "nama": "Kasi Kesejahteraan",
+      "deskripsi": "Urusan sosial dan kesejahteraan",
+      "hierarki": 2,
+      "parentId": "kepala_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_cabe",
+      "nama": "Kepala Dusun Banjar Dinas Cabe",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Cabe",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_menesa",
+      "nama": "Kepala Dusun Banjar Dinas Menesa",
+      "deskripsi": "Pimpinan wilayah Banjar Menesa",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_penenjoan",
+      "nama": "Kepala Dusun Banjar Dinas Penenjoan",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Penenjoan",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_telanga",
+      "nama": "Kepala Dusun Banjar Dinas Telanga",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Telanga",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_tengah",
+      "nama": "Kepala Dusun Banjar Dinas Tengah",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Tengah",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_baler_pasar",
+      "nama": "Kepala Dusun Banjar Dinas Baler Pasar",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Baler Pasar",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_bucu",
+      "nama": "Kepala Dusun Banjar Dinas Bucu",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Bucu",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_gulingan",
+      "nama": "Kepala Dusun Banjar Dinas Gulingan",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Gulingan",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_bersih",
+      "nama": "Kepala Dusun Banjar Dinas Bersih",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Bersih",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_umahanyar",
+      "nama": "Kepala Dusun Banjar Dinas Umahanyar",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Umahanyar",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_taman",
+      "nama": "Kepala Dusun Banjar Dinas Taman",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Taman",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "kadus_banjar_dinas_darmasaba",
+      "nama": "Kepala Dusun Banjar Dinas Darmasaba",
+      "deskripsi": "Pimpinan wilayah Banjar Dinas Darmasaba",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    },
+    {
+      "id": "staf_desa",
+      "nama": "Staf Desa",
+      "deskripsi": "Staf Desa",
+      "hierarki": 3,
+      "parentId": "sekretaris_desa"
+    }
+  ]
+]
--- a/prisma/data/ppid/struktur-ppid/strukturPPID.json
+++ b/prisma/data/ppid/struktur-ppid/strukturPPID.json
@@ -1,6 +0,0 @@
-[
-    {
-        "id" : "1",
-        "name" : "Struktur PPID"
-    }
-]
--- a/prisma/data/user/role.json
+++ b/prisma/data/user/role.json
@@ -0,0 +1,6 @@
+[
+    {
+        "id": "cmdpm429r0000vnndkcwslt0h",
+        "name": "warga"
+    }
+]
--- a/prisma/migrations/20250718031959_nico_18_jul_25/migration.sql
+++ b/prisma/migrations/20250718031959_nico_18_jul_25/migration.sql
@@ -0,0 +1,67 @@
+-- CreateTable
+CREATE TABLE "PengaduanMasyarakat" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "email" TEXT NOT NULL,
+    "nomorTelepon" TEXT NOT NULL,
+    "nik" TEXT NOT NULL,
+    "judulPengaduan" TEXT NOT NULL,
+    "lokasiKejadian" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "deskripsiPengaduan" TEXT NOT NULL,
+    "jenisPengaduanId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PengaduanMasyarakat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "JenisPengaduan" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "JenisPengaduan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "PengelolaanSampah" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "icon" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PengelolaanSampah_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KeteranganBankSampahTerdekat" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "alamat" TEXT NOT NULL,
+    "namaTempatMaps" TEXT NOT NULL,
+    "linkPetunjukArah" TEXT NOT NULL,
+    "lat" DOUBLE PRECISION NOT NULL,
+    "lng" DOUBLE PRECISION NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KeteranganBankSampahTerdekat_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "PengaduanMasyarakat" ADD CONSTRAINT "PengaduanMasyarakat_jenisPengaduanId_fkey" FOREIGN KEY ("jenisPengaduanId") REFERENCES "JenisPengaduan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/migrations/20250721095104_nico_21_jul_25/migration.sql
+++ b/prisma/migrations/20250721095104_nico_21_jul_25/migration.sql
@@ -0,0 +1,144 @@
+-- CreateTable
+CREATE TABLE "ProgramPenghijauan" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "icon" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ProgramPenghijauan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "DataLingkunganDesa" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "jumlah" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "icon" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "DataLingkunganDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KegiatanDesa" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsiSingkat" TEXT NOT NULL,
+    "deskripsiLengkap" TEXT NOT NULL,
+    "tanggal" TIMESTAMP(3) NOT NULL,
+    "lokasi" TEXT NOT NULL,
+    "partisipan" INTEGER NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+    "kategoriKegiatanId" TEXT NOT NULL,
+
+    CONSTRAINT "KegiatanDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "KategoriKegiatan" (
+    "id" TEXT NOT NULL,
+    "nama" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "KategoriKegiatan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "TujuanEdukasiLingkungan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "TujuanEdukasiLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MateriEdukasiLingkungan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "MateriEdukasiLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ContohEdukasiLingkungan" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ContohEdukasiLingkungan_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "FilosofiTriHita" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "FilosofiTriHita_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "BentukKonservasiBerdasarkanAdat" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "BentukKonservasiBerdasarkanAdat_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "NilaiKonservasiAdat" (
+    "id" TEXT NOT NULL,
+    "judul" TEXT NOT NULL,
+    "deskripsi" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "NilaiKonservasiAdat_pkey" PRIMARY KEY ("id")
+);
+
+-- AddForeignKey
+ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "KegiatanDesa" ADD CONSTRAINT "KegiatanDesa_kategoriKegiatanId_fkey" FOREIGN KEY ("kategoriKegiatanId") REFERENCES "KategoriKegiatan"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/migrations/20250722071634_nico_22_jul_25/migration.sql
+++ b/prisma/migrations/20250722071634_nico_22_jul_25/migration.sql
@@ -0,0 +1,56 @@
+-- CreateTable
+CREATE TABLE "PejabatDesa" (
+    "id" TEXT NOT NULL,
+    "name" VARCHAR(255) NOT NULL,
+    "position" TEXT NOT NULL,
+    "imageId" TEXT,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "PejabatDesa_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "ProgramInovasi" (
+    "id" TEXT NOT NULL,
+    "name" VARCHAR(255) NOT NULL,
+    "description" TEXT,
+    "imageId" TEXT,
+    "link" VARCHAR(255),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3) DEFAULT CURRENT_TIMESTAMP,
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "ProgramInovasi_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "MediaSosial" (
+    "id" TEXT NOT NULL,
+    "imageId" TEXT NOT NULL,
+    "iconUrl" VARCHAR(255),
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+    "deletedAt" TIMESTAMP(3),
+    "isActive" BOOLEAN NOT NULL DEFAULT true,
+
+    CONSTRAINT "MediaSosial_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "PejabatDesa_name_key" ON "PejabatDesa"("name");
+
+-- CreateIndex
+CREATE UNIQUE INDEX "ProgramInovasi_name_key" ON "ProgramInovasi"("name");
+
+-- AddForeignKey
+ALTER TABLE "PejabatDesa" ADD CONSTRAINT "PejabatDesa_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "ProgramInovasi" ADD CONSTRAINT "ProgramInovasi_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "MediaSosial" ADD CONSTRAINT "MediaSosial_imageId_fkey" FOREIGN KEY ("imageId") REFERENCES "FileStorage"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -60,6 +60,7 @@ model FileStorage {
  deletedAt                DateTime?
  isActive                 Boolean                    @default(true)
  link                     String
+  category                 String // "image" / "document" / "other"
  Berita                   Berita[]
  PotensiDesa              PotensiDesa[]
  Posyandu                 Posyandu[]
@@ -86,14 +87,27 @@ model FileStorage {
  KolaborasiInovasi        KolaborasiInovasi[]
  InfoTekno                InfoTekno[]
  PengaduanMasyarakat      PengaduanMasyarakat[]
+  KegiatanDesa             KegiatanDesa[]
+  ProgramInovasi           ProgramInovasi[]
+  PejabatDesa              PejabatDesa[]
+  MediaSosial              MediaSosial[]
+  DesaAntiKorupsi          DesaAntiKorupsi[]
+  SDGSDesa                 SDGSDesa[]
+  APBDesImage              APBDes[]                   @relation("APBDesImage")
+  APBDesFile               APBDes[]                   @relation("APBDesFile")
+  PrestasiDesa             PrestasiDesa[]
+
+  DataPerpustakaan DataPerpustakaan[]
+
+  PegawaiPPID PegawaiPPID[]
 }

-//========================================= MENU PPID ========================================= //
-
-//========================================= STRUKTUR PPID ========================================= //
-model StrukturPPID {
+//========================================= MENU LANDING PAGE ========================================= //
+//========================================= PROFILE ========================================= //
+model PejabatDesa {
  id        String       @id @default(cuid())
-  name      String       @db.Text
+  name      String       @unique @db.VarChar(255)
+  position  String
  image     FileStorage? @relation(fields: [imageId], references: [id])
  imageId   String?
  createdAt DateTime     @default(now())
@@ -102,6 +116,245 @@ model StrukturPPID {
  isActive  Boolean      @default(true)
 }

+model ProgramInovasi {
+  id          String       @id @default(cuid())
+  name        String       @unique @db.VarChar(255)
+  description String?      @db.Text
+  image       FileStorage? @relation(fields: [imageId], references: [id])
+  imageId     String?
+  link        String?      @db.VarChar(255)
+  createdAt   DateTime     @default(now())
+  updatedAt   DateTime     @updatedAt
+  deletedAt   DateTime?    @default(now())
+  isActive    Boolean      @default(true)
+}
+
+model MediaSosial {
+  id        String      @id @default(cuid())
+  name      String
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  iconUrl   String?     @db.VarChar(255)
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime?
+  isActive  Boolean     @default(true)
+}
+
+//========================================= PROFILE ========================================= //
+model DesaAntiKorupsi {
+  id         String                  @id @default(cuid())
+  name       String                  @unique
+  deskripsi  String                  @db.Text
+  kategori   KategoriDesaAntiKorupsi @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+  file       FileStorage?             @relation(fields: [fileId], references: [id])
+  fileId     String?
+  createdAt  DateTime                @default(now())
+  updatedAt  DateTime                @updatedAt
+  deletedAt  DateTime                @default(now())
+  isActive   Boolean                 @default(true)
+}
+
+model KategoriDesaAntiKorupsi {
+  id              String            @id @default(cuid())
+  name            String            @unique
+  createdAt       DateTime          @default(now())
+  updatedAt       DateTime          @updatedAt
+  deletedAt       DateTime          @default(now())
+  isActive        Boolean           @default(true)
+  DesaAntiKorupsi DesaAntiKorupsi[]
+}
+
+//========================================= SDGS Desa ========================================= //
+model SDGSDesa {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  jumlah    String
+  image     FileStorage @relation(fields: [imageId], references: [id])
+  imageId   String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
+//========================================= APBDes ========================================= //
+model APBDes {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  jumlah    String
+  image     FileStorage @relation("APBDesImage", fields: [imageId], references: [id])
+  imageId   String
+  file      FileStorage @relation("APBDesFile", fields: [fileId], references: [id])
+  fileId    String
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+}
+
+//========================================= PRESTASI DESA ========================================= //
+model PrestasiDesa {
+  id         String               @id @default(cuid())
+  name       String               @unique
+  deskripsi  String               @db.Text
+  kategori   KategoriPrestasiDesa @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+  image      FileStorage          @relation(fields: [imageId], references: [id])
+  imageId    String
+  createdAt  DateTime             @default(now())
+  updatedAt  DateTime             @updatedAt
+  deletedAt  DateTime             @default(now())
+  isActive   Boolean              @default(true)
+}
+
+model KategoriPrestasiDesa {
+  id           String         @id @default(cuid())
+  name         String         @unique
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime       @default(now())
+  isActive     Boolean        @default(true)
+  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 ========================================= //
+model StrukturPPID {
+  id                     String                @id @default(cuid())
+  name                   String                @db.Text
+  image                  FileStorage?          @relation(fields: [imageId], references: [id])
+  imageId                String?
+  createdAt              DateTime              @default(now())
+  updatedAt              DateTime              @updatedAt
+  deletedAt              DateTime              @default(now())
+  isActive               Boolean               @default(true)
+  PosisiOrganisasiPPID   PosisiOrganisasiPPID? @relation(fields: [posisiOrganisasiPPIDId], references: [id])
+  posisiOrganisasiPPIDId String?
+  PegawaiPPID            PegawaiPPID?          @relation(fields: [pegawaiPPIDId], references: [id])
+  pegawaiPPIDId          String?
+}
+
+model PosisiOrganisasiPPID {
+  id                 String         @id @default(cuid())
+  nama               String         @db.VarChar(100)
+  deskripsi          String?        @db.Text
+  hierarki           Int
+  pegawai            PegawaiPPID[]
+  strukturOrganisasi StrukturPPID[] // Relasi balik
+  parentId           String?         
+  parent             PosisiOrganisasiPPID? @relation("Parent", fields: [parentId], references: [id])
+  children           PosisiOrganisasiPPID[] @relation("Parent")
+}
+
+model PegawaiPPID {
+  id                 String               @id @default(cuid())
+  namaLengkap        String               @db.VarChar(255)
+  gelarAkademik      String?              @db.VarChar(100)
+  image              FileStorage?         @relation(fields: [imageId], references: [id])
+  imageId            String?
+  tanggalMasuk       DateTime?            @db.Date
+  email              String?              @unique @db.VarChar(255)
+  telepon            String?              @db.VarChar(20)
+  alamat             String?              @db.Text
+  posisiId           String               @db.VarChar(50)
+  isActive           Boolean              @default(true)
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
+  posisi             PosisiOrganisasiPPID @relation(fields: [posisiId], references: [id])
+  strukturOrganisasi StrukturPPID[] // Relasi balik
+}
+
+model StrukturOrganisasiPPID {
+  id                   String           @id @default(uuid())
+  posisiOrganisasiId   String           @db.VarChar(50)
+  pegawaiId            String           @db.Uuid
+  hubunganOrganisasiId String           @db.Uuid
+  posisiOrganisasi     PosisiOrganisasi @relation(fields: [posisiOrganisasiId], references: [id])
+  pegawai              Pegawai          @relation(fields: [pegawaiId], references: [id])
+  createdAt            DateTime         @default(now())
+  updatedAt            DateTime         @updatedAt
+  deletedAt            DateTime?
+  isActive             Boolean          @default(true)
+}
+
 // ========================================= VISI MISI PPID ========================================= //
 model VisiMisiPPID {
  id        String   @id @default(cuid())
@@ -1112,8 +1365,9 @@ model PosisiOrganisasi {
  deskripsi String? @db.Text
  hierarki  Int

-  pegawai            Pegawai[]
-  strukturOrganisasi StrukturOrganisasi[] // Relasi balik
+  pegawai                Pegawai[]
+  strukturOrganisasi     StrukturOrganisasi[] // Relasi balik
+  StrukturOrganisasiPPID StrukturOrganisasiPPID[]

  @@map("posisi_organisasi")
 }
@@ -1138,7 +1392,8 @@ model Pegawai {
  sebagaiAtasan  HubunganOrganisasi[] @relation("AtasanToBawahan")
  sebagaiBawahan HubunganOrganisasi[] @relation("BawahanToAtasan")

-  strukturOrganisasi StrukturOrganisasi[] // Relasi balik
+  strukturOrganisasi     StrukturOrganisasi[] // Relasi balik
+  StrukturOrganisasiPPID StrukturOrganisasiPPID[]

  @@map("pegawai")
 }
@@ -1447,6 +1702,7 @@ model JenisPengaduan {
  PengaduanMasyarakat PengaduanMasyarakat[]
 }

+// ========================================= LINGKUNGAN ========================================= //
 // ========================================= PENGELOLAAN SAMPAH ========================================= //
 model PengelolaanSampah {
  id        String   @id @default(cuid())
@@ -1457,3 +1713,383 @@ model PengelolaanSampah {
  deletedAt DateTime @default(now())
  isActive  Boolean  @default(true)
 }
+
+model KeteranganBankSampahTerdekat {
+  id               String   @id @default(cuid())
+  name             String
+  alamat           String
+  namaTempatMaps   String
+  linkPetunjukArah String
+  lat              Float
+  lng              Float
+  createdAt        DateTime @default(now())
+  updatedAt        DateTime @updatedAt
+  deletedAt        DateTime @default(now())
+  isActive         Boolean  @default(true)
+}
+
+// ========================================= PORGRAM PENGHIJAUAN ========================================= //
+model ProgramPenghijauan {
+  id        String   @id @default(cuid())
+  name      String
+  judul     String   @db.Text //deskripsi singkat
+  deskripsi String   @db.Text //deskripsi panjang
+  icon      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= DATA LINGKUNGAN DESA ========================================= //
+model DataLingkunganDesa {
+  id        String   @id @default(cuid())
+  name      String
+  jumlah    String
+  deskripsi String   @db.Text //deskripsi panjang
+  icon      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= GOTONG ROYONG ========================================= //
+model KegiatanDesa {
+  id                 String           @id @default(uuid())
+  judul              String
+  deskripsiSingkat   String
+  deskripsiLengkap   String
+  tanggal            DateTime
+  lokasi             String
+  partisipan         Int
+  image              FileStorage      @relation(fields: [imageId], references: [id])
+  imageId            String
+  createdAt          DateTime         @default(now())
+  updatedAt          DateTime         @updatedAt
+  deletedAt          DateTime         @default(now())
+  isActive           Boolean          @default(true)
+  kategoriKegiatan   KategoriKegiatan @relation(fields: [kategoriKegiatanId], references: [id])
+  kategoriKegiatanId String
+}
+
+model KategoriKegiatan {
+  id           String         @id @default(cuid())
+  nama         String
+  createdAt    DateTime       @default(now())
+  updatedAt    DateTime       @updatedAt
+  deletedAt    DateTime       @default(now())
+  isActive     Boolean        @default(true)
+  KegiatanDesa KegiatanDesa[]
+}
+
+// ========================================= EDUKASI LINGKUNGAN ========================================= //
+model TujuanEdukasiLingkungan {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model MateriEdukasiLingkungan {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model ContohEdukasiLingkungan {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+// ========================================= KONSERVASI ADAT BALI ========================================= //
+model FilosofiTriHita {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model BentukKonservasiBerdasarkanAdat {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
+
+model NilaiKonservasiAdat {
+  id        String   @id @default(cuid())
+  judul     String   @db.Text
+  deskripsi String   @db.Text
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  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)
+}
+
+// ========================================= BEASISWA DESA ========================================= //
+model KeunggulanProgram {
+  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 BeasiswaPendaftar {
+  id               String           @id @default(cuid())
+  namaLengkap      String
+  nik              String           @unique
+  tempatLahir      String
+  tanggalLahir     DateTime
+  jenisKelamin     JenisKelamin
+  kewarganegaraan  String
+  agama            Agama
+  alamatKTP        String
+  alamatDomisili   String?
+  noHp             String
+  email            String           @unique
+  statusPernikahan StatusPernikahan
+  ukuranBaju       UkuranBaju?
+  isActive         Boolean          @default(true)
+  createdAt        DateTime         @default(now())
+  updatedAt        DateTime         @updatedAt
+}
+
+enum JenisKelamin {
+  LAKI_LAKI
+  PEREMPUAN
+}
+
+enum Agama {
+  ISLAM
+  KRISTEN_PROTESTAN
+  KRISTEN_KATOLIK
+  HINDU
+  BUDDHA
+  KONGHUCU
+  LAINNYA
+}
+
+enum StatusPernikahan {
+  BELUM_MENIKAH
+  MENIKAH
+  JANDA_DUDA
+}
+
+enum UkuranBaju {
+  S
+  M
+  L
+  XL
+  XXL
+  LAINNYA
+}
+
+// ========================================= 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)
+}
+
+// ========================================= PERPUSTAKAAN ========================================= //
+model DataPerpustakaan {
+  id         String       @id @default(cuid())
+  judul      String
+  deskripsi  String       @db.Text
+  kategori   KategoriBuku @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+  image      FileStorage  @relation(fields: [imageId], references: [id])
+  imageId    String
+  createdAt  DateTime     @default(now())
+  updatedAt  DateTime     @updatedAt
+  deletedAt  DateTime     @default(now())
+  isActive   Boolean      @default(true)
+}
+
+model KategoriBuku {
+  id               String             @id @default(cuid())
+  name             String
+  createdAt        DateTime           @default(now())
+  updatedAt        DateTime           @updatedAt
+  deletedAt        DateTime           @default(now())
+  isActive         Boolean            @default(true)
+  DataPerpustakaan DataPerpustakaan[]
+}
+
+model User {
+  id        String   @id @default(cuid())
+  nama      String
+  email     String   @unique
+  password  String
+  role      Role     @relation(fields: [roleId], references: [id])
+  roleId    String
+  isActive  Boolean  @default(true)
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+}
+
+model Role {
+  id        String   @id @default(cuid())
+  name      String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+  User      User[]
+}
+
+// ========================================= DATA PENDIDIKAN ========================================= //
+model DataPendidikan {
+  id        String   @id @default(cuid())
+  name      String
+  jumlah    String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,4 +1,7 @@
 import prisma from "@/lib/prisma";
+import profilePejabatDesa from "./data/landing-page/profile/profile.json";
+import programInovasi from "./data/landing-page/profile/programInovasi.json";
+import mediaSosial from "./data/landing-page/profile/mediaSosial.json";
 import categoryPengumuman from "./data/category-pengumuman.json";
 import kategoriBerita from "./data/kategori-berita.json";
 import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
@@ -9,7 +12,6 @@ import potensi from "./data/list-potensi.json";
 import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
 import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
-import strukturPPID from "./data/ppid/struktur-ppid/strukturPPID.json";
 import pelayananPerizinanBerusaha from "./data/desa/layanan/pelayananPerizinanBerusaha.json";
 import pelayananPendudukNonPermanen from "./data/desa/layanan/pelayanaPendudukNonPermanen.json";
 import sejarahDesa from "./data/desa/profile/sejarah_desa.json";
@@ -21,9 +23,82 @@ import kategoriProduk from "./data/ekonomi/pasar-desa/kategori-produk.json";
 import hubunganOrganisasi from "./data/ekonomi/struktur-organisasi/hubungan-organisasi.json";
 import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi.json";
 import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
-import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json';
+import detailDataPengangguran from "./data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json";
+import tujuanEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json";
+import materiEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
+import contohEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json";
+import nilaiKonservasiAdat from "./data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json";
+import bentukKonservasiBerdasarkanAdat from "./data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json";
+import filosofiTriHita from "./data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.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";
+import posisiOrganisasiPPID from "./data/ppid/struktur-ppid/posisi-organisasi-PPID.json";
+import pegawaiPPID from "./data/ppid/struktur-ppid/pegawai-PPID.json";

 (async () => {
+  // =========== LANDING PAGE ===========
+  // =========== PROFILE ===========
+  for (const p of profilePejabatDesa) {
+    await prisma.pejabatDesa.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        position: p.position,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        position: p.position,
+      },
+    });
+  }
+  console.log(
+    "✅ profilePejabatDesa seeded without imageId (editable later via UI)"
+  );
+
+  // =========== PROGRAM INOVASI ===========
+  for (const p of programInovasi) {
+    await prisma.programInovasi.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        description: p.description,
+        link: p.link,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        description: p.description,
+        link: p.link,
+      },
+    });
+  }
+  console.log("program inovasi success ...");
+
+  // =========== MEDIA SOSIAL ===========
+  for (const p of mediaSosial) {
+    await prisma.mediaSosial.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        iconUrl: p.iconUrl,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        iconUrl: p.iconUrl,
+      },
+    });
+  }
+  console.log("media sosial success ...");
+
+  // =========== LAYANAN ===========
  for (const l of layanan) {
    await prisma.layanan.upsert({
      where: {
@@ -117,7 +192,9 @@ import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-da
      },
    });
  }
-  console.log("✅ profilePerbekel seeded without imageId (editable later via UI)");
+  console.log(
+    "✅ profilePerbekel seeded without imageId (editable later via UI)"
+  );

  for (const l of visiMisiDesa) {
    await prisma.visiMisiDesa.upsert({
@@ -138,6 +215,64 @@ import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-da

  console.log("visi misi desa success ...");

+  // Flatten the nested array structure for posisiOrganisasiPPID
+  const flattenedPosisiOrganisasiPPID = posisiOrganisasiPPID.flat();
+
+  for (const p of flattenedPosisiOrganisasiPPID) {
+    await prisma.posisiOrganisasiPPID.upsert({
+      where: {
+        id: p.id,
+      },
+      update: {
+        nama: p.nama,
+        deskripsi: p.deskripsi,
+        hierarki: p.hierarki,
+        parentId: p.parentId,
+      },
+      create: {
+        id: p.id,
+        nama: p.nama,
+        deskripsi: p.deskripsi,
+        hierarki: p.hierarki,
+        parentId: p.parentId,
+      },
+    });
+  }
+  console.log("posisi organisasi success ...");
+
+  // Flatten the nested array structure for pegawaiPPID
+  const flattenedPegawaiPPID = pegawaiPPID.flat();
+
+  for (const p of flattenedPegawaiPPID) {
+    await prisma.pegawaiPPID.upsert({
+      where: {
+        id: p.id,
+      },
+      update: {
+        namaLengkap: p.namaLengkap,
+        tanggalMasuk: new Date(p.tanggalMasuk),
+        email: p.email,
+        gelarAkademik: p.gelarAkademik,
+        telepon: p.telepon,
+        alamat: p.alamat,
+        posisiId: p.posisiId,
+        isActive: p.isActive,
+      },
+      create: {
+        id: p.id,
+        namaLengkap: p.namaLengkap,
+        tanggalMasuk: new Date(p.tanggalMasuk),
+        email: p.email,
+        gelarAkademik: p.gelarAkademik,
+        telepon: p.telepon,
+        alamat: p.alamat,
+        posisiId: p.posisiId,
+        isActive: p.isActive,
+      },
+    });
+  }
+  console.log("pegawai success ...");
+
  for (const l of pelayananPerizinanBerusaha) {
    await prisma.pelayananPerizinanBerusaha.upsert({
      where: {
@@ -177,22 +312,6 @@ import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-da
  }
  console.log("pelayanan penduduk non permanen success ...");

-  for (const s of strukturPPID) {
-    await prisma.strukturPPID.upsert({
-      where: {
-        id: s.id,
-      },
-      update: {
-        name: s.name,
-      },
-      create: {
-        id: s.id,
-        name: s.name,
-      },
-    });
-  }
-  console.log("struktur ppid success ...");
-
  for (const p of potensi) {
    await prisma.potensi.upsert({
      where: {
@@ -362,7 +481,6 @@ import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-da
  }
  console.log("kategori produk success ...");

-
  for (const p of posisiOrganisasi) {
    await prisma.posisiOrganisasi.upsert({
      where: {
@@ -455,6 +573,260 @@ import detailDataPengangguran from './data/ekonomi/jumlah-pengangguran/detail-da
    });
  }
  console.log("📊 detailDataPengangguran success ...");
+
+  for (const e of tujuanEdukasiLingkungan) {
+    await prisma.tujuanEdukasiLingkungan.upsert({
+      where: {
+        id: e.id,
+      },
+      update: {
+        judul: e.judul,
+        deskripsi: e.deskripsi,
+      },
+      create: {
+        id: e.id,
+        judul: e.judul,
+        deskripsi: e.deskripsi,
+      },
+    });
+  }
+
+  console.log("tujuan edukasi lingkungan success ...");
+
+  for (const m of materiEdukasiLingkungan) {
+    await prisma.materiEdukasiLingkungan.upsert({
+      where: {
+        id: m.id,
+      },
+      update: {
+        judul: m.judul,
+        deskripsi: m.deskripsi,
+      },
+      create: {
+        id: m.id,
+        judul: m.judul,
+        deskripsi: m.deskripsi,
+      },
+    });
+  }
+
+  console.log("materi edukasi lingkungan success ...");
+
+  for (const c of contohEdukasiLingkungan) {
+    await prisma.contohEdukasiLingkungan.upsert({
+      where: {
+        id: c.id,
+      },
+      update: {
+        judul: c.judul,
+        deskripsi: c.deskripsi,
+      },
+      create: {
+        id: c.id,
+        judul: c.judul,
+        deskripsi: c.deskripsi,
+      },
+    });
+  }
+
+  console.log("contoh edukasi lingkungan success ...");
+
+  for (const f of filosofiTriHita) {
+    await prisma.filosofiTriHita.upsert({
+      where: {
+        id: f.id,
+      },
+      update: {
+        judul: f.judul,
+        deskripsi: f.deskripsi,
+      },
+      create: {
+        id: f.id,
+        judul: f.judul,
+        deskripsi: f.deskripsi,
+      },
+    });
+  }
+
+  console.log("filosofi tri hita success ...");
+
+  for (const b of bentukKonservasiBerdasarkanAdat) {
+    await prisma.bentukKonservasiBerdasarkanAdat.upsert({
+      where: {
+        id: b.id,
+      },
+      update: {
+        judul: b.judul,
+        deskripsi: b.deskripsi,
+      },
+      create: {
+        id: b.id,
+        judul: b.judul,
+        deskripsi: b.deskripsi,
+      },
+    });
+  }
+
+  console.log("bentuk konservasi berdasarkan adat success ...");
+
+  for (const n of nilaiKonservasiAdat) {
+    await prisma.nilaiKonservasiAdat.upsert({
+      where: {
+        id: n.id,
+      },
+      update: {
+        judul: n.judul,
+        deskripsi: n.deskripsi,
+      },
+      create: {
+        id: n.id,
+        judul: n.judul,
+        deskripsi: n.deskripsi,
+      },
+    });
+  }
+
+  console.log("nilai konservasi adat success ...");
+
+  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) => {
--- a/public/assets/images/sosmed/telephone-call.png
+++ b/public/assets/images/sosmed/telephone-call.png
--- a/src/app/admin/(dashboard)/_com/leafletMapCreate.tsx
+++ b/src/app/admin/(dashboard)/_com/leafletMapCreate.tsx
@@ -0,0 +1,59 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
+import { useEffect, useState } from 'react';
+import 'leaflet/dist/leaflet.css';
+import L, { LeafletMouseEvent } from 'leaflet';
+
+type Props = {
+  defaultCenter: { lat: number; lng: number };
+  onSelect?: (pos: { lat: number; lng: number }) => void;
+  readOnly?: boolean;
+};
+
+export default function LeafletMap({ defaultCenter, onSelect, readOnly = false }: Props) {
+  const [markerPos, setMarkerPos] = useState(defaultCenter);
+
+  useEffect(() => {
+    // Aman di sini, karena ini hanya jalan di client
+    delete (L.Icon.Default.prototype as any)._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+      iconUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+      shadowUrl:
+        'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+    });
+  }, []);
+
+  function LocationMarker() {
+    useMapEvents({
+      click(e: LeafletMouseEvent) {
+        if (readOnly) return;
+
+        const { lat, lng } = e.latlng;
+        setMarkerPos({ lat, lng });
+        onSelect?.({ lat, lng });
+      },
+    });
+
+    return <Marker position={markerPos} />;
+  }
+
+  return (
+    <MapContainer
+      center={defaultCenter}
+      zoom={16}
+      scrollWheelZoom
+      style={{ height: '100%', width: '100%', zIndex: 0 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      />
+      <LocationMarker />
+    </MapContainer>
+  );
+}
--- a/src/app/admin/(dashboard)/_com/leafletMapEdit.tsx
+++ b/src/app/admin/(dashboard)/_com/leafletMapEdit.tsx
@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { MapContainer, TileLayer, Marker, useMapEvents } from 'react-leaflet';
+import { useState, useEffect } from 'react';
+import 'leaflet/dist/leaflet.css';
+import L, { LeafletMouseEvent } from 'leaflet';
+
+type Props = {
+  initialPosition: { lat: number; lng: number };
+  onChange: (pos: { lat: number; lng: number }) => void;
+};
+
+export default function LeafletMapEdit({ initialPosition, onChange }: Props) {
+  const [markerPos, setMarkerPos] = useState(initialPosition);
+
+  // ✅ Pastikan icon config cuma jalan di client
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      delete (L.Icon.Default.prototype as any)._getIconUrl;
+      L.Icon.Default.mergeOptions({
+        iconRetinaUrl:
+          'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+        iconUrl:
+          'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+        shadowUrl:
+          'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    setMarkerPos(initialPosition);
+  }, [initialPosition]);
+
+  function LocationMarker() {
+    useMapEvents({
+      click(e: LeafletMouseEvent) {
+        const { lat, lng } = e.latlng;
+        setMarkerPos({ lat, lng });
+        onChange({ lat, lng });
+      },
+    });
+
+    return <Marker position={markerPos} />;
+  }
+
+  return (
+    <MapContainer
+      center={markerPos}
+      zoom={16}
+      scrollWheelZoom
+      style={{ height: '100%', width: '100%', zIndex: 0 }}
+    >
+      <TileLayer
+        attribution='&copy; <a href="https://osm.org/copyright">OpenStreetMap</a>'
+        url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+      />
+      <LocationMarker />
+    </MapContainer>
+  );
+}
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIcon.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIcon.tsx
@@ -4,12 +4,19 @@
 import { Box, rem, Select } from '@mantine/core';
 import {
  IconChartLine,
+  IconChristmasTreeFilled,
  IconClipboardTextFilled,
+  IconDroplet,
+  IconHome,
+  IconHomeEco,
  IconLeaf,
  IconRecycle,
  IconScale,
+  IconShieldFilled,
  IconTent,
  IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
  IconTrophy,
  IconTruckFilled,
 } from '@tabler/icons-react';
@@ -25,6 +32,13 @@ const iconMap = {
  scale: { label: 'Scale', icon: IconScale },
  clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
  trash: { label: 'Trash', icon: IconTrashFilled },
+  lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
+  sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
+  ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
+  mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
+  rumah: {label: 'Rumah', icon: IconHome},
+  pohon: {label: 'Pohon', icon: IconTree},
+  air: {label: 'Air', icon: IconDroplet}

 };

--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIconEdit.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/_lib/selectIconEdit.tsx
@@ -3,12 +3,19 @@
 import { Box, rem, Select } from '@mantine/core';
 import {
  IconChartLine,
+  IconChristmasTreeFilled,
  IconClipboardTextFilled,
+  IconDroplet,
+  IconHome,
+  IconHomeEco,
  IconLeaf,
  IconRecycle,
  IconScale,
+  IconShieldFilled,
  IconTent,
  IconTrashFilled,
+  IconTree,
+  IconTrendingUp,
  IconTrophy,
  IconTruckFilled,
 } from '@tabler/icons-react';
@@ -23,6 +30,13 @@ const iconMap = {
  scale: { label: 'Scale', icon: IconScale },
  clipboard: { label: 'Clipboard', icon: IconClipboardTextFilled },
  trash: { label: 'Trash', icon: IconTrashFilled },
+  lingkunganSehat: {label: 'Lingkungan Sehat', icon: IconHomeEco},
+  sumberOksigen: {label: 'Sumber Oksigen', icon: IconChristmasTreeFilled},
+  ekonomiBerkelanjutan: {label: 'Ekonomi Berkelanjutan', icon: IconTrendingUp},
+  mencegahBencana: {label: 'Mencegah Bencana', icon: IconShieldFilled},
+  rumah: {label: 'Rumah', icon: IconHome},
+  pohon: {label: 'Pohon', icon: IconTree},
+  air: {label: 'Air', icon: IconDroplet}
 };

 type IconKey = keyof typeof iconMap;
--- a/src/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin.ts
@@ -5,176 +5,190 @@ import { proxy } from "valtio";
 import { z } from "zod";

 const templateJumlahPendudukMiskin = z.object({
-    year: z.number().min(1, "Data tahun harus diisi"),
-    totalPoorPopulation: z.number().min(1, "Data total penduduk miskin harus diisi"),
+  year: z.number().min(1, "Data tahun harus diisi"),
+  totalPoorPopulation: z
+    .number()
+    .min(1, "Data total penduduk miskin harus diisi"),
 });

 type JumlahPendudukMiskin = Prisma.GrafikJumlahPendudukMiskinGetPayload<{
-    select: {
-        id: true;
-        year: true;
-        totalPoorPopulation: true;
-    };
+  select: {
+    id: true;
+    year: true;
+    totalPoorPopulation: true;
+  };
 }>;

-const defaultForm: Omit<JumlahPendudukMiskin, 'id'> & { id?: string } = {
-    year: 0,
-    totalPoorPopulation: 0,
+const defaultForm: Omit<JumlahPendudukMiskin, "id"> & { id?: string } = {
+  year: 0,
+  totalPoorPopulation: 0,
 };

 const jumlahPendudukMiskin = proxy({
-    create: {
-        form: defaultForm,
-        loading: false,
-        async create() {
-          const cek = templateJumlahPendudukMiskin.safeParse(
-            jumlahPendudukMiskin.create.form
-          );
-          if (!cek.success) {
-            const err = `[${cek.error.issues
-              .map((v) => `${v.path.join(".")}`)
-              .join("\n")}] required`;
-            return toast.error(err);
-          }
-          try {
-            jumlahPendudukMiskin.create.loading = true;
-            const res = await ApiFetch.api.ekonomi.jumlahpendudukmiskin[
-              "create"
-            ].post(jumlahPendudukMiskin.create.form);
-            if (res.status === 200) {
-              const id = res.data?.data?.id;
-              if (id) {
-                toast.success("Success create");
-                jumlahPendudukMiskin.create.form = {
-                  year: 0,
-                  totalPoorPopulation: 0,
-                };
-                jumlahPendudukMiskin.findMany.load();
-                return id;
-              }
-            }
-            return toast.error("failed create");
-          } catch (error) {
-            console.log((error as Error).message);
-          } finally {
-            jumlahPendudukMiskin.create.loading = false;
-          }
-        },
-      },
-      findMany: {
-        data: null as
-          | Prisma.GrafikJumlahPendudukMiskinGetPayload<{
-              select: { id: true; year: true; totalPoorPopulation: true; };
-            }>[]
-          | null,
-        loading: false,
-        async load() {
-          const res = await ApiFetch.api.ekonomi.jumlahpendudukmiskin[
-            "find-many"
-          ].get();
-          if (res.status === 200) {
-            jumlahPendudukMiskin.findMany.data = res.data?.data ?? [];
-          }
-        },
-      },
-      findUnique: {
-        data: null as Prisma.GrafikJumlahPendudukMiskinGetPayload<{
-          select: { id: true; year: true; totalPoorPopulation: true; };
-        }> | null,
-        async load(id: string) {
-          try {
-            const res = await fetch(
-              `/api/ekonomi/jumlahpendudukmiskin/${id}`
-            );
-            if (res.ok) {
-              const data = await res.json();
-              jumlahPendudukMiskin.findUnique.data = data.data ?? null;
-            } else {
-              console.error("Failed to fetch data", res.status, res.statusText);
-              jumlahPendudukMiskin.findUnique.data = null;
-            }
-          } catch (error) {
-            console.error("Error loading grafik jumlah penduduk miskin:", error);
-            jumlahPendudukMiskin.findUnique.data = null;
-          }
-        },
-      },
-      update: {
-        id: "",
-        form: {...defaultForm},
-        loading: false,
-        async byId() {
-          // Method implementation if needed
-        },
-        async submit() {
-          const id = this.id;
-          if (!id) {
-            toast.warn("ID tidak valid");
-            return null;
-          }
-          const cek = templateJumlahPendudukMiskin.safeParse(this.form);
-          if (!cek.success) {
-            const err = `[${cek.error.issues.map((v) => (v.path as string[]).join(".")).join("\n")}] required`;
-            toast.error(err);
-            return null;
-          }
-          this.loading = true;
-          try {
-            const response = await fetch(
-              `/api/ekonomi/jumlahpendudukmiskin/${id}`, {
-              method: "PUT",
-              headers: {
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify(this.form),
-            });
-            const result = await response.json();
-            if (!response.ok || !result?.success) {
-              throw new Error(result?.message || "Gagal update data");
-            }
-            toast.success("Berhasil update data!");
-            await jumlahPendudukMiskin.findMany.load();
-            return result.data;
-          } catch (error) {
-            console.error("Error update data grafik jumlah penduduk miskin:", error);
-            toast.error("Gagal update data grafik jumlah penduduk miskin");
-          } finally {
-            this.loading = false;
-          }
-        },
-      },
-      delete: {
-        loading: false,
-        async byId(id: string) {
-          if (!id) return toast.warn("ID tidak valid");
-    
-          try {
-            jumlahPendudukMiskin.delete.loading = true;
-    
-            const response = await fetch(`/api/ekonomi/jumlahpendudukmiskin/del/${id}`, {
-              method: "DELETE",
-              headers: {
-                "Content-Type": "application/json",
-              },
-            });
-    
-            const result = await response.json();
-    
-            if (response.ok && result?.success) {
-              toast.success(result.message || "Grafik jumlah penduduk miskin berhasil dihapus");
-              await jumlahPendudukMiskin.findMany.load(); // refresh list
-            } else {
-              toast.error(result?.message || "Gagal menghapus grafik jumlah penduduk miskin");
-            }
-          } catch (error) {
-            console.error("Gagal delete grafik jumlah penduduk miskin:", error);
-            toast.error("Terjadi kesalahan saat menghapus grafik jumlah penduduk miskin");
-          } finally {
-            jumlahPendudukMiskin.delete.loading = false;
-          }
-        },
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateJumlahPendudukMiskin.safeParse(
+        jumlahPendudukMiskin.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
      }
-})
-export default jumlahPendudukMiskin
-    
-    
+      try {
+        jumlahPendudukMiskin.create.loading = true;
+        const res = await ApiFetch.api.ekonomi.jumlahpendudukmiskin[
+          "create"
+        ].post(jumlahPendudukMiskin.create.form);
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            jumlahPendudukMiskin.create.form = {
+              year: 0,
+              totalPoorPopulation: 0,
+            };
+            jumlahPendudukMiskin.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        jumlahPendudukMiskin.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.GrafikJumlahPendudukMiskinGetPayload<{
+          select: { id: true; year: true; totalPoorPopulation: true };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.jumlahpendudukmiskin[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        jumlahPendudukMiskin.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.GrafikJumlahPendudukMiskinGetPayload<{
+      select: { id: true; year: true; totalPoorPopulation: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/ekonomi/jumlahpendudukmiskin/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          jumlahPendudukMiskin.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          jumlahPendudukMiskin.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading grafik jumlah penduduk miskin:", error);
+        jumlahPendudukMiskin.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateJumlahPendudukMiskin.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => (v.path as string[]).join("."))
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(
+          `/api/ekonomi/jumlahpendudukmiskin/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await jumlahPendudukMiskin.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error(
+          "Error update data grafik jumlah penduduk miskin:",
+          error
+        );
+        toast.error("Gagal update data grafik jumlah penduduk miskin");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        jumlahPendudukMiskin.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ekonomi/jumlahpendudukmiskin/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Grafik jumlah penduduk miskin berhasil dihapus"
+          );
+          await jumlahPendudukMiskin.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus grafik jumlah penduduk miskin"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete grafik jumlah penduduk miskin:", error);
+        toast.error(
+          "Terjadi kesalahan saat menghapus grafik jumlah penduduk miskin"
+        );
+      } finally {
+        jumlahPendudukMiskin.delete.loading = false;
+      }
+    },
+  },
+});
+export default jumlahPendudukMiskin;
--- a/src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
@@ -0,0 +1,224 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateapbDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+  fileId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultapbdesForm = {
+  name: "",
+  jumlah: "",
+  imageId: "",
+  fileId: "",
+};
+
+const apbdes = proxy({
+  create: {
+    form: { ...defaultapbdesForm },
+    loading: false,
+    async create() {
+      const cek = templateapbDesaForm.safeParse(apbdes.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        apbdes.create.loading = true;
+        const res = await ApiFetch.api.landingpage.apbdes["create"].post({
+          ...apbdes.create.form,
+        });
+
+        if (res.status === 200) {
+          apbdes.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 {
+        apbdes.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.APBDesGetPayload<{
+        include: {
+          image: true;
+          file: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.apbdes["find-many"].get();
+      if (res.status === 200) {
+        apbdes.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.APBDesGetPayload<{
+      include: {
+        image: true;
+        file: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/apbdes/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          apbdes.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          apbdes.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        apbdes.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        apbdes.delete.loading = true;
+
+        const response = await fetch(`/api/landingpage/apbdes/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "apbdes berhasil dihapus");
+          await apbdes.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus apbdes");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus apbdes");
+      } finally {
+        apbdes.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultapbdesForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        apbdes.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/apbdes/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            jumlah: data.jumlah,
+            imageId: data.imageId,
+            fileId: data.fileId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading apbdes:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        apbdes.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateapbDesaForm.safeParse(apbdes.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        apbdes.edit.loading = true;
+        const response = await fetch(`/api/landingpage/apbdes/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            jumlah: this.form.jumlah,
+            imageId: this.form.imageId,
+            fileId: this.form.fileId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update apbdes");
+          await apbdes.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate apbdes");
+        }
+      } catch (error) {
+        console.error("Error updating apbdes:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate apbdes"
+        );
+        return false;
+      } finally {
+        apbdes.edit.loading = false;
+      }
+    },
+    reset() {
+      apbdes.edit.id = "";
+      apbdes.edit.form = { ...defaultapbdesForm };
+    },
+  },
+});
+
+export default apbdes;
--- a/src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts
@@ -0,0 +1,528 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateDesaAntiKorupsiForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  kategoriId: z.string().min(1, "Kategori minimal 1"),
+  fileId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultDesaAntiKorupsiForm = {
+  name: "",
+  deskripsi: "",
+  kategoriId: "",
+  fileId: "",
+};
+
+const desaAntikorupsi = proxy({
+  create: {
+    form: { ...defaultDesaAntiKorupsiForm },
+    loading: false,
+    async create() {
+      const cek = templateDesaAntiKorupsiForm.safeParse(
+        desaAntikorupsi.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        desaAntikorupsi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.desaantikorupsi[
+          "create"
+        ].post({
+          ...desaAntikorupsi.create.form,
+        });
+
+        if (res.status === 200) {
+          desaAntikorupsi.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 {
+        desaAntikorupsi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      desaAntikorupsi.findMany.loading = true;  // Use the full path to access the property
+      desaAntikorupsi.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.desaantikorupsi[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          desaAntikorupsi.findMany.data = res.data.data || [];
+          desaAntikorupsi.findMany.total = res.data.total || 0;
+          desaAntikorupsi.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load media sosial:", res.data?.message);
+          desaAntikorupsi.findMany.data = [];
+          desaAntikorupsi.findMany.total = 0;
+          desaAntikorupsi.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading media sosial:", error);
+        desaAntikorupsi.findMany.data = [];
+        desaAntikorupsi.findMany.total = 0;
+        desaAntikorupsi.findMany.totalPages = 1;
+      } finally {
+        desaAntikorupsi.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DesaAntiKorupsiGetPayload<{
+      include: {
+        file: true;
+        kategori: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/desaantikorupsi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          desaAntikorupsi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          desaAntikorupsi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        desaAntikorupsi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        desaAntikorupsi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/desaantikorupsi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "desa anti korupsi berhasil dihapus");
+          await desaAntikorupsi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus desa anti korupsi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus desa anti korupsi");
+      } finally {
+        desaAntikorupsi.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultDesaAntiKorupsiForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        desaAntikorupsi.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/desaantikorupsi/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            fileId: data.fileId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        desaAntikorupsi.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateDesaAntiKorupsiForm.safeParse(
+        desaAntikorupsi.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        desaAntikorupsi.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/desaantikorupsi/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              kategoriId: this.form.kategoriId,
+              fileId: this.form.fileId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update desa anti korupsi");
+          await desaAntikorupsi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate desa anti korupsi"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate desa anti korupsi"
+        );
+        return false;
+      } finally {
+        desaAntikorupsi.edit.loading = false;
+      }
+    },
+    reset() {
+      desaAntikorupsi.edit.id = "";
+      desaAntikorupsi.edit.form = { ...defaultDesaAntiKorupsiForm };
+    },
+  },
+});
+
+// ========================================= KATEGORI desa anti korupsi ========================================= //
+const kategoriDesaAntiKorupsiForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const kategoriDesaAntiKorupsiDefaultForm = {
+  name: "",
+};
+
+const kategoriDesaAntiKorupsi = proxy({
+  create: {
+    form: { ...kategoriDesaAntiKorupsiDefaultForm },
+    loading: false,
+    async create() {
+      const cek = kategoriDesaAntiKorupsiForm.safeParse(
+        kategoriDesaAntiKorupsi.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kategoriDesaAntiKorupsi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.kategoridak["create"].post(
+          kategoriDesaAntiKorupsi.create.form
+        );
+        if (res.status === 200) {
+          kategoriDesaAntiKorupsi.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 {
+        kategoriDesaAntiKorupsi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      kategoriDesaAntiKorupsi.findMany.loading = true;  // Use the full path to access the property
+      kategoriDesaAntiKorupsi.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.kategoridak[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          kategoriDesaAntiKorupsi.findMany.data = res.data.data || [];
+          kategoriDesaAntiKorupsi.findMany.total = res.data.total || 0;
+          kategoriDesaAntiKorupsi.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load media sosial:", res.data?.message);
+          kategoriDesaAntiKorupsi.findMany.data = [];
+          kategoriDesaAntiKorupsi.findMany.total = 0;
+          kategoriDesaAntiKorupsi.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading media sosial:", error);
+        kategoriDesaAntiKorupsi.findMany.data = [];
+        kategoriDesaAntiKorupsi.findMany.total = 0;
+        kategoriDesaAntiKorupsi.findMany.totalPages = 1;
+      } finally {
+        kategoriDesaAntiKorupsi.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriDesaAntiKorupsiGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/kategoridak/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kategoriDesaAntiKorupsi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriDesaAntiKorupsi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriDesaAntiKorupsi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriDesaAntiKorupsi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/kategoridak/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kategori desa anti korupsi berhasil dihapus");
+          await kategoriDesaAntiKorupsi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kategori desa anti korupsi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kategori desa anti korupsi");
+      } finally {
+        kategoriDesaAntiKorupsi.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...kategoriDesaAntiKorupsiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/landingpage/kategoridak/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = kategoriDesaAntiKorupsiForm.safeParse(
+        kategoriDesaAntiKorupsi.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriDesaAntiKorupsi.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/kategoridak/${kategoriDesaAntiKorupsi.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: kategoriDesaAntiKorupsi.edit.form.name,
+            }),
+          }
+        );
+
+        // 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 kategori desa anti korupsi (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message ||
+                "Berhasil memperbarui kategori desa anti korupsi"
+            );
+            await kategoriDesaAntiKorupsi.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate kategori desa anti korupsi"
+            );
+          }
+        } 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 kategori desa anti korupsi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kategori desa anti korupsi"
+        );
+        return false;
+      } finally {
+        kategoriDesaAntiKorupsi.edit.loading = false;
+      }
+    },
+    reset() {
+      kategoriDesaAntiKorupsi.edit.id = "";
+      kategoriDesaAntiKorupsi.edit.form = {
+        ...kategoriDesaAntiKorupsiDefaultForm,
+      };
+    },
+  },
+});
+
+const korupsiState = proxy({
+  desaAntikorupsi,
+  kategoriDesaAntiKorupsi,
+});
+export default korupsiState;
--- a/src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan-masyarakat.ts
--- a/src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts
@@ -0,0 +1,486 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateprestasiDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+  kategoriId: z.string().min(1, "Kategori minimal 1 karakter"),
+});
+
+const defaultprestasiDesaForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+  kategoriId: "",
+};
+
+const prestasiDesa = proxy({
+  create: {
+    form: { ...defaultprestasiDesaForm },
+    loading: false,
+    async create() {
+      const cek = templateprestasiDesaForm.safeParse(
+        prestasiDesa.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        prestasiDesa.create.loading = true;
+        const res = await ApiFetch.api.landingpage.prestasidesa[
+          "create"
+        ].post({
+          ...prestasiDesa.create.form,
+        });
+
+        if (res.status === 200) {
+          prestasiDesa.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 {
+        prestasiDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.PrestasiDesaGetPayload<{
+        include: {
+          image: true;
+          kategori: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.prestasidesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        prestasiDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PrestasiDesaGetPayload<{
+      include: {
+        image: true;
+        kategori: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/prestasidesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          prestasiDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          prestasiDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        prestasiDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        prestasiDesa.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/prestasidesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "prestasi desa berhasil dihapus");
+          await prestasiDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus prestasi desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus prestasi desa");
+      } finally {
+        prestasiDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultprestasiDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        prestasiDesa.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/prestasidesa/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+            kategoriId: data.kategoriId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading prestasi desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        prestasiDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateprestasiDesaForm.safeParse(
+        prestasiDesa.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        prestasiDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/prestasidesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+              kategoriId: this.form.kategoriId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update prestasi desa");
+          await prestasiDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate prestasi desa"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating prestasi desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate prestasi desa"
+        );
+        return false;
+      } finally {
+        prestasiDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      prestasiDesa.edit.id = "";
+      prestasiDesa.edit.form = { ...defaultprestasiDesaForm };
+    },
+  },
+});
+
+// ========================================= KATEGORI kegiatan ========================================= //
+const kategoriPrestasiForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const kategoriPrestasiDefaultForm = {
+  name: "",
+};
+
+const kategoriPrestasi = proxy({
+  create: {
+    form: { ...kategoriPrestasiDefaultForm },
+    loading: false,
+    async create() {
+      const cek = kategoriPrestasiForm.safeParse(kategoriPrestasi.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kategoriPrestasi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.kategoriprestasi[
+          "create"
+        ].post(kategoriPrestasi.create.form);
+        if (res.status === 200) {
+          kategoriPrestasi.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 {
+        kategoriPrestasi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      name: string;
+    }> | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.kategoriprestasi[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        kategoriPrestasi.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriPrestasiDesaGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/landingpage/kategoriprestasi/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          kategoriPrestasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriPrestasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriPrestasi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriPrestasi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/kategoriprestasi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kategori prestasi berhasil dihapus");
+          await kategoriPrestasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kategori prestasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kategori prestasi");
+      } finally {
+        kategoriPrestasi.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...kategoriPrestasiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/landingpage/kategoriprestasi/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori prestasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = kategoriPrestasiForm.safeParse(kategoriPrestasi.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriPrestasi.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/kategoriprestasi/${kategoriPrestasi.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: kategoriPrestasi.edit.form.name,
+            }),
+          }
+        );
+
+        // 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 kategori prestasi (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui kategori prestasi"
+            );
+            await kategoriPrestasi.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate kategori prestasi"
+            );
+          }
+        } 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 kategori prestasi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kategori prestasi"
+        );
+        return false;
+      } finally {
+        kategoriPrestasi.edit.loading = false;
+      }
+    },
+    reset() {
+      kategoriPrestasi.edit.id = "";
+      kategoriPrestasi.edit.form = { ...kategoriPrestasiDefaultForm };
+    },
+  },
+});
+
+const prestasiState = proxy({
+  prestasiDesa,
+  kategoriPrestasi,
+});
+
+export default prestasiState;
--- a/src/app/admin/(dashboard)/_state/landing-page/profile.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/profile.ts
@@ -0,0 +1,683 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateProgramInovasi = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  description: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  link: z.string().min(1, "Link minimal 1 karakter"),
+});
+
+type ProgramInovasiForm = Prisma.ProgramInovasiGetPayload<{
+  select: {
+    name: true;
+    description: true;
+    imageId: true;
+    link: true;
+  };
+}>;
+
+const programInovasi = proxy({
+  create: {
+    form: {} as ProgramInovasiForm,
+    loading: false,
+    async create() {
+      // Ensure all required fields are non-null
+      const formData = {
+        name: programInovasi.create.form.name || "",
+        description: programInovasi.create.form.description || "",
+        imageId: programInovasi.create.form.imageId || "",
+        link: programInovasi.create.form.link || "",
+      };
+
+      const cek = templateProgramInovasi.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        programInovasi.create.loading = true;
+        const res = await ApiFetch.api.landingpage.programinovasi[
+          "create"
+        ].post(formData);
+        if (res.status === 200) {
+          programInovasi.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programInovasi.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      programInovasi.findMany.loading = true;  // Use the full path to access the property
+      programInovasi.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.programinovasi[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          programInovasi.findMany.data = res.data.data || [];
+          programInovasi.findMany.total = res.data.total || 0;
+          programInovasi.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load pegawai:", res.data?.message);
+          programInovasi.findMany.data = [];
+          programInovasi.findMany.total = 0;
+          programInovasi.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pegawai:", error);
+        programInovasi.findMany.data = [];
+        programInovasi.findMany.total = 0;
+        programInovasi.findMany.totalPages = 1;
+      } finally {
+        programInovasi.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramInovasiGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/programinovasi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programInovasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch program inovasi:", res.statusText);
+          programInovasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching program inovasi:", error);
+        programInovasi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programInovasi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/programinovasi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program inovasi berhasil dihapus");
+          await programInovasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program inovasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program inovasi");
+      } finally {
+        programInovasi.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: {} as ProgramInovasiForm,
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/landingpage/programinovasi/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            description: data.description,
+            imageId: data.imageId,
+            link: data.link,
+          };
+          return data;
+        } else {
+          throw new Error(
+            result?.message || "Gagal mengambil data program inovasi"
+          );
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data program inovasi");
+      } finally {
+        programInovasi.update.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateProgramInovasi.safeParse(programInovasi.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        programInovasi.update.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/programinovasi/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              description: this.form.description,
+              imageId: this.form.imageId,
+              link: this.form.link,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update program inovasi");
+          await programInovasi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update program inovasi");
+        }
+      } catch (error) {
+        console.error("Error updating program inovasi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update program inovasi"
+        );
+        return false;
+      } finally {
+        programInovasi.update.loading = false;
+      }
+    },
+  },
+});
+
+const templatePejabatDesa = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  position: z.string().min(3, "Posisi minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});
+
+const defaultFormPejabatDesa = {
+  name: "",
+  position: "",
+  imageId: "",
+};
+
+type PejabatDesaForm = {
+  id: string;
+  name: string;
+  position: string;
+  imageId: string | null;
+  image?: {
+    id: string;
+    name: string;
+    link: string;
+    path: string;
+    mimeType: string;
+    realName: string;
+    isActive: boolean;
+    createdAt: Date;
+    updatedAt: Date;
+    deletedAt: Date | null;
+  } | null;
+  createdAt: Date;
+  updatedAt: Date;
+  deletedAt: Date | null;
+  isActive: boolean;
+};
+
+const pejabatDesa = proxy({
+  findUnique: {
+    data: null as PejabatDesaForm | null,
+    loading: false,
+    error: null as string | null,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/landingpage/pejabatdesa/${id}`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+        if (result.success) {
+          this.data = result.data;
+          return result.data;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengambil data pejabat desa"
+          );
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load pejabat desa error:", errorMessage);
+        toast.error("Terjadi kesalahan saat mengambil data pejabat desa");
+        return null;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultFormPejabatDesa },
+    loading: false,
+    error: null as string | null,
+    isReadOnly: false,
+
+    initialize(profileData: PejabatDesaForm) {
+      this.id = profileData.id;
+      this.isReadOnly = false; // Semua data bisa diedit
+      this.form = {
+        name: profileData.name || "",
+        position: profileData.position || "",
+        imageId: profileData.imageId || "",
+      };
+    },
+
+    // Update form field
+    updateField(field: keyof typeof defaultFormPejabatDesa, value: string) {
+      this.form[field] = value;
+    },
+
+    // Submit form
+    async submit() {
+      // Validate form
+      const validation = templatePejabatDesa.safeParse(this.form);
+
+      if (!validation.success) {
+        const errors = validation.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return false;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(
+          `/api/landingpage/pejabatdesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update profile");
+          // Refresh profile data
+          await pejabatDesa.findUnique.load(this.id);
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update profile");
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Update profile error:", errorMessage);
+        toast.error("Terjadi kesalahan saat update profile");
+        return false;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.id = "";
+      this.form = { ...defaultFormPejabatDesa };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    },
+  },
+});
+
+const templateMediaSosial = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  iconUrl: z.string().min(3, "Icon URL minimal 3 karakter"),
+});
+
+type MediaSosialForm = {
+  name: string;
+  imageId: string;
+  iconUrl: string;
+};
+
+const mediaSosial = proxy({
+  create: {
+    form: {} as MediaSosialForm,
+    loading: false,
+    async create() {
+      // Ensure all required fields are non-null
+      const formData = {
+        name: mediaSosial.create.form.name || "",
+        imageId: mediaSosial.create.form.imageId || "",
+        iconUrl: mediaSosial.create.form.iconUrl || "",
+      };
+
+      const cek = templateMediaSosial.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mediaSosial.create.loading = true;
+        const res = await ApiFetch.api.landingpage.mediasosial["create"].post(
+          formData
+        );
+        if (res.status === 200) {
+          mediaSosial.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mediaSosial.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      mediaSosial.findMany.loading = true;  // Use the full path to access the property
+      mediaSosial.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.mediasosial[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          mediaSosial.findMany.data = res.data.data || [];
+          mediaSosial.findMany.total = res.data.total || 0;
+          mediaSosial.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load media sosial:", res.data?.message);
+          mediaSosial.findMany.data = [];
+          mediaSosial.findMany.total = 0;
+          mediaSosial.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading media sosial:", error);
+        mediaSosial.findMany.data = [];
+        mediaSosial.findMany.total = 0;
+        mediaSosial.findMany.totalPages = 1;
+      } finally {
+        mediaSosial.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.MediaSosialGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+    
+      mediaSosial.update.loading = true;
+      try {
+        const res = await fetch(`/api/landingpage/mediasosial/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          mediaSosial.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch media sosial:", res.statusText);
+          mediaSosial.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching media sosial:", error);
+        mediaSosial.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        mediaSosial.delete.loading = true;
+
+        const response = await fetch(`/api/landingpage/mediasosial/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Media Sosial berhasil dihapus");
+          await mediaSosial.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus media sosial");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus media sosial");
+      } finally {
+        mediaSosial.delete.loading = false;
+      }
+    },
+  },
+  update: {
+      id: "",
+      form: {} as MediaSosialForm,
+      loading: false,
+  
+      async load(id: string) {
+        if (!id) {
+          toast.warn("ID tidak valid");
+          return null;
+        }
+      
+        mediaSosial.update.loading = true; // ✅ Tambahkan ini di awal
+      
+        try {
+          const response = await fetch(`/api/landingpage/mediasosial/${id}`, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          });
+      
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+      
+          const result = await response.json();
+      
+          if (result?.success) {
+            const data = result.data;
+            this.id = data.id;
+            this.form = {
+              name: data.name || "",
+              imageId: data.imageId || "",
+              iconUrl: data.iconUrl || "",
+            };
+            return data;
+          } else {
+            throw new Error(result?.message || "Gagal mengambil data media sosial");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data media sosial");
+        } finally {
+          mediaSosial.update.loading = false; // ✅ Supaya berhenti loading walau error
+        }
+      },
+      
+      async update() {
+        const cek = templateMediaSosial.safeParse(mediaSosial.update.form);
+        if (!cek.success) {
+          const err = `[${cek.error.issues
+            .map((v) => `${v.path.join(".")}`)
+            .join("\n")}] required`;
+          toast.error(err);
+          return false;
+        }
+  
+        try {
+          mediaSosial.update.loading = true;
+  
+          const response = await fetch(`/api/landingpage/mediasosial/${this.id}`, {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              imageId: this.form.imageId,
+              iconUrl: this.form.iconUrl,
+            }),
+          });
+  
+          if (!response.ok) {
+            const errorData = await response.json().catch(() => ({}));
+            throw new Error(
+              errorData.message || `HTTP error! status: ${response.status}`
+            );
+          }
+  
+          const result = await response.json();
+  
+          if (result.success) {
+            toast.success("Berhasil update media sosial");
+            await mediaSosial.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(result.message || "Gagal update media sosial");
+          }
+        } catch (error) {
+          console.error("Error updating media sosial:", error);
+          toast.error(
+            error instanceof Error
+              ? error.message
+              : "Terjadi kesalahan saat update media sosial"
+          );
+          return false;
+        } finally {
+          mediaSosial.update.loading = false;
+        }
+      },
+    },
+});
+
+const profileLandingPageState = proxy({
+  programInovasi,
+  pejabatDesa,
+  mediaSosial,
+});
+
+export default profileLandingPageState;
--- a/src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts
@@ -0,0 +1,236 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templatesdgsDesaForm = z.object({
+  name: z.string().min(1, "Judul minimal 1 karakter"),
+  jumlah: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  imageId: z.string().min(1, "File minimal 1"),
+});
+
+const defaultsdgsDesaForm = {
+  name: "",
+  jumlah: "",
+  imageId: "",
+};
+
+const sdgsDesa = proxy({
+  create: {
+    form: { ...defaultsdgsDesaForm },
+    loading: false,
+    async create() {
+      const cek = templatesdgsDesaForm.safeParse(
+        sdgsDesa.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        sdgsDesa.create.loading = true;
+        const res = await ApiFetch.api.landingpage.sdgsdesa[
+          "create"
+        ].post({
+          ...sdgsDesa.create.form,
+        });
+
+        if (res.status === 200) {
+          sdgsDesa.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 {
+        sdgsDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.SDGSDesaGetPayload<{
+        include: {
+          image: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.landingpage.sdgsdesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        sdgsDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.SDGSDesaGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/sdgsdesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          sdgsDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          sdgsDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        sdgsDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        sdgsDesa.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/sdgsdesa/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "sdgs desa berhasil dihapus");
+          await sdgsDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus sdgs desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus sdgs desa");
+      } finally {
+        sdgsDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultsdgsDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        sdgsDesa.edit.loading = true;
+
+        const response = await fetch(`/api/landingpage/sdgsdesa/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            jumlah: data.jumlah,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading sdgs desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        sdgsDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templatesdgsDesaForm.safeParse(
+        sdgsDesa.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        sdgsDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/landingpage/sdgsdesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              jumlah: this.form.jumlah,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update sdgs desa");
+          await sdgsDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate sdgs desa"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating sdgs desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate sdgs desa"
+        );
+        return false;
+      } finally {
+        sdgsDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      sdgsDesa.edit.id = "";
+      sdgsDesa.edit.form = { ...defaultsdgsDesaForm };
+    },
+  },
+});
+
+export default sdgsDesa;
--- a/src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts
@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  jumlah: z.string().min(1, "Jumlah minimal 1 karakter"),
+  icon: z.string().min(1, "Icon minimal 1 karakter"),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  jumlah: "",
+  icon: "",
+};
+
+const dataLingkunganDesaState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(dataLingkunganDesaState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        dataLingkunganDesaState.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.datalingkungandesa["create"].post(
+          dataLingkunganDesaState.create.form
+        );
+        if (res.status === 200) {
+          dataLingkunganDesaState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        dataLingkunganDesaState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      dataLingkunganDesaState.findMany.loading = true; // Use the full path to access the property
+      dataLingkunganDesaState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.lingkungan.datalingkungandesa["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          dataLingkunganDesaState.findMany.data = res.data.data || [];
+          dataLingkunganDesaState.findMany.total = res.data.total || 0;
+          dataLingkunganDesaState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load berdasarkan data lingkungan desa :",
+            res.data?.message
+          );
+          dataLingkunganDesaState.findMany.data = [];
+          dataLingkunganDesaState.findMany.total = 0;
+          dataLingkunganDesaState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading berdasarkan data lingkungan desa :", error);
+        dataLingkunganDesaState.findMany.data = [];
+        dataLingkunganDesaState.findMany.total = 0;
+        dataLingkunganDesaState.findMany.totalPages = 1;
+      } finally {
+        dataLingkunganDesaState.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/lingkungan/datalingkungandesa/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            jumlah: data.jumlah,
+            icon: data.icon,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading data lingkungan desa :", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateForm.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/lingkungan/datalingkungandesa/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await dataLingkunganDesaState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data data lingkungan desa");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DataLingkunganDesaGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/lingkungan/datalingkungandesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          dataLingkunganDesaState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          dataLingkunganDesaState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading data lingkungan desa:", error);
+        dataLingkunganDesaState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        dataLingkunganDesaState.delete.loading = true;
+
+        const response = await fetch(`/api/lingkungan/datalingkungandesa/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Data lingkungan desa berhasil dihapus");
+          await dataLingkunganDesaState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus data lingkungan desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus data lingkungan desa");
+      } finally {
+        dataLingkunganDesaState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default dataLingkunganDesaState;
--- a/src/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/edukasi-lingkungan.ts
@@ -0,0 +1,240 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateTujuanEdukasiForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type TujuanEdukasiForm = Prisma.TujuanEdukasiLingkunganGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateTujuanEdukasi = proxy({
+  findById: {
+    data: null as TujuanEdukasiForm | null,
+    loading: false,
+    initialize() {
+      stateTujuanEdukasi.findById.data = {
+        id: '',
+        judul: '',
+        deskripsi: '',
+      } as TujuanEdukasiForm;
+    },
+    async load(id: string) {
+      try {
+        stateTujuanEdukasi.findById.loading = true;
+        const res = await ApiFetch.api.lingkungan.edukasilingkungan.tujuanedukasilingkungan["find-by-id"].get({
+          query: { id },
+        });
+        if (res.status === 200) {
+          stateTujuanEdukasi.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data tujuan edukasi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengambil data tujuan edukasi");
+      } finally {
+        stateTujuanEdukasi.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: TujuanEdukasiForm) {
+      const cek = templateTujuanEdukasiForm.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 {
+        stateTujuanEdukasi.update.loading = true;
+        const res = await ApiFetch.api.lingkungan.edukasilingkungan.tujuanedukasilingkungan["update"].post(data);
+        if (res.status === 200) {
+          toast.success("Data tujuan edukasi berhasil diubah");
+          await stateTujuanEdukasi.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data tujuan edukasi");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error("Terjadi kesalahan saat mengubah data tujuan edukasi");
+      } finally {
+        stateTujuanEdukasi.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateMateriEdukasiLingkunganForm = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  });
+  
+  type MateriEdukasiLingkunganForm = Prisma.MateriEdukasiLingkunganGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+  
+  const stateMateriEdukasiLingkungan = proxy({
+    findById: {
+      data: null as MateriEdukasiLingkunganForm | null,
+      loading: false,
+      initialize() {
+        stateMateriEdukasiLingkungan.findById.data = {
+          id: '',
+          judul: '',
+          deskripsi: '',
+        } as MateriEdukasiLingkunganForm;
+      },
+      async load(id: string) {
+        try {
+          stateMateriEdukasiLingkungan.findById.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.materiedukasilingkungan["find-by-id"].get({
+            query: { id },
+          });
+          if (res.status === 200) {
+            stateMateriEdukasiLingkungan.findById.data = res.data?.data ?? null;
+          } else {
+            toast.error("Gagal mengambil data materi edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data materi edukasi");
+        } finally {
+          stateMateriEdukasiLingkungan.findById.loading = false;
+        }
+      },
+    },
+  
+    update: {
+      loading: false,
+      async save(data: MateriEdukasiLingkunganForm) {
+        const cek = templateMateriEdukasiLingkunganForm.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 {
+          stateMateriEdukasiLingkungan.update.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.materiedukasilingkungan["update"].post(data);
+          if (res.status === 200) {
+            toast.success("Data materi edukasi berhasil diubah");
+            await stateMateriEdukasiLingkungan.findById.load(data.id);
+          } else {
+            toast.error("Gagal mengubah data materi edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengubah data materi edukasi");
+        } finally {
+          stateMateriEdukasiLingkungan.update.loading = false;
+        }
+      },
+    },
+  });
+
+  const templateContohEdukasiLingkunganForm = z.object({
+    judul: z.string().min(3, "Judul minimal 3 karakter"),
+    deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  });
+  
+  type ContohEdukasiLingkunganForm = Prisma.ContohEdukasiLingkunganGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+  
+  const stateContohEdukasiLingkungan = proxy({
+    findById: {
+      data: null as ContohEdukasiLingkunganForm | null,
+      loading: false,
+      initialize() {
+        stateContohEdukasiLingkungan.findById.data = {
+          id: '',
+          judul: '',
+          deskripsi: '',
+        } as ContohEdukasiLingkunganForm;
+      },
+      async load(id: string) {
+        try {
+          stateContohEdukasiLingkungan.findById.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.contohkegiatandesa["find-by-id"].get({
+            query: { id },
+          });
+          if (res.status === 200) {
+            stateContohEdukasiLingkungan.findById.data = res.data?.data ?? null;
+          } else {
+            toast.error("Gagal mengambil data contoh edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengambil data contoh edukasi");
+        } finally {
+          stateContohEdukasiLingkungan.findById.loading = false;
+        }
+      },
+    },
+  
+    update: {
+      loading: false,
+      async save(data: ContohEdukasiLingkunganForm) {
+        const cek = templateContohEdukasiLingkunganForm.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 {
+          stateContohEdukasiLingkungan.update.loading = true;
+          const res = await ApiFetch.api.lingkungan.edukasilingkungan.contohkegiatandesa["update"].post(data);
+          if (res.status === 200) {
+            toast.success("Data contoh edukasi berhasil diubah");
+            await stateContohEdukasiLingkungan.findById.load(data.id);
+          } else {
+            toast.error("Gagal mengubah data contoh edukasi");
+          }
+        } catch (error) {
+          console.error((error as Error).message);
+          toast.error("Terjadi kesalahan saat mengubah data contoh edukasi");
+        } finally {
+          stateContohEdukasiLingkungan.update.loading = false;
+        }
+      },
+    },
+  });
+
+
+const stateEdukasiLingkungan = proxy({
+    stateTujuanEdukasi,
+    stateMateriEdukasiLingkungan,
+    stateContohEdukasiLingkungan
+})
+  
+
+export default stateEdukasiLingkungan;
--- a/src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts
@@ -0,0 +1,492 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateKegiatanDesaForm = z.object({
+  judul: z.string().min(1, "Judul minimal 1 karakter"),
+  deskripsiSingkat: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+  deskripsiLengkap: z.string().min(1, "Deskripsi lengkap minimal 1 karakter"),
+  tanggal: z.date(),
+  lokasi: z.string().min(1, "Lokasi minimal 1 karakter"),
+  partisipan: z.number().min(1, "Partisipan minimal 1"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  kategoriKegiatanId: z.string().min(1, "Kategori kegiatan minimal 1"),
+});
+
+const defaultKegiatanDesaForm = {
+  judul: "",
+  deskripsiSingkat: "",
+  deskripsiLengkap: "",
+  tanggal: new Date(),
+  lokasi: "",
+  partisipan: 0,
+  imageId: "",
+  kategoriKegiatanId: "",
+};
+
+const kegiatanDesa = proxy({
+  create: {
+    form: { ...defaultKegiatanDesaForm },
+    loading: false,
+    async create() {
+      const cek = templateKegiatanDesaForm.safeParse(kegiatanDesa.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kegiatanDesa.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.kegiatandesa["create"].post({
+          ...kegiatanDesa.create.form,
+          tanggal: kegiatanDesa.create.form.tanggal.toISOString(), // ✅ convert Date -> string
+        });
+
+        if (res.status === 200) {
+          kegiatanDesa.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 {
+        kegiatanDesa.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<
+      Prisma.KegiatanDesaGetPayload<{
+        include: {
+          image: true;
+          kategoriKegiatan: true;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
+      if (res.status === 200) {
+        kegiatanDesa.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KegiatanDesaGetPayload<{
+      include: {
+        image: true;
+        kategoriKegiatan: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/lingkungan/kegiatandesa/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kegiatanDesa.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kegiatanDesa.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kegiatanDesa.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kegiatanDesa.delete.loading = true;
+
+        const response = await fetch(`/api/lingkungan/kegiatandesa/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "kegiatan desa berhasil dihapus");
+          await kegiatanDesa.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus pasar desa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pasar desa");
+      } finally {
+        kegiatanDesa.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultKegiatanDesaForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        kegiatanDesa.edit.loading = true;
+
+        const response = await fetch(`/api/lingkungan/kegiatandesa/${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 = {
+            judul: data.judul,
+            deskripsiSingkat: data.deskripsiSingkat,
+            deskripsiLengkap: data.deskripsiLengkap,
+            tanggal: data.tanggal,
+            lokasi: data.lokasi,
+            partisipan: data.partisipan,
+            imageId: data.imageId,
+            kategoriKegiatanId: data.kategoriKegiatanId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kegiatan desa:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        kegiatanDesa.edit.loading = false;
+      }
+    },
+
+    async update() {
+      const cek = templateKegiatanDesaForm.safeParse(kegiatanDesa.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kegiatanDesa.edit.loading = true;
+        const response = await fetch(
+          `/api/lingkungan/kegiatandesa/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              judul: this.form.judul,
+              deskripsiSingkat: this.form.deskripsiSingkat,
+              deskripsiLengkap: this.form.deskripsiLengkap,
+              tanggal:
+                typeof this.form.tanggal === "string"
+                  ? this.form.tanggal
+                  : this.form.tanggal.toISOString(),
+              lokasi: this.form.lokasi,
+              partisipan: this.form.partisipan,
+              imageId: this.form.imageId,
+              kategoriKegiatanId: this.form.kategoriKegiatanId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update kegiatan desa");
+          await kegiatanDesa.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate kegiatan desa");
+        }
+      } catch (error) {
+        console.error("Error updating kegiatan desa:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kegiatan desa"
+        );
+        return false;
+      } finally {
+        kegiatanDesa.edit.loading = false;
+      }
+    },
+    reset() {
+      kegiatanDesa.edit.id = "";
+      kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
+    },
+  },
+});
+
+// ========================================= KATEGORI kegiatan ========================================= //
+const kategoriKegiatanForm = z.object({
+  nama: z.string().min(1, "Nama minimal 1 karakter"),
+});
+
+const kategoriKegiatanDefaultForm = {
+  nama: "",
+};
+
+const kategoriKegiatan = proxy({
+  create: {
+    form: { ...kategoriKegiatanDefaultForm },
+    loading: false,
+    async create() {
+      const cek = kategoriKegiatanForm.safeParse(kategoriKegiatan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        kategoriKegiatan.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.kategorikegiatan[
+          "create"
+        ].post(kategoriKegiatan.create.form);
+        if (res.status === 200) {
+          kategoriKegiatan.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 {
+        kategoriKegiatan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as Array<{
+      id: string;
+      nama: string;
+    }> | null,
+    async load() {
+      const res = await ApiFetch.api.lingkungan.kategorikegiatan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        kategoriKegiatan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriKegiatanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/lingkungan/kategorikegiatan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          kategoriKegiatan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriKegiatan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriKegiatan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriKegiatan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/lingkungan/kategorikegiatan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kategori kegiatan berhasil dihapus");
+          await kategoriKegiatan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kategori kegiatan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kategori kegiatan");
+      } finally {
+        kategoriKegiatan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...kategoriKegiatanDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/lingkungan/kategorikegiatan/${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 kategori kegiatan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = kategoriKegiatanForm.safeParse(kategoriKegiatan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriKegiatan.edit.loading = true;
+        const response = await fetch(
+          `/api/lingkungan/kategorikegiatan/${kategoriKegiatan.edit.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: kategoriKegiatan.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 kategori kegiatan (${response.status})`
+            );
+          }
+
+          if (result.success) {
+            toast.success(
+              result.message || "Berhasil memperbarui kategori kegiatan"
+            );
+            await kategoriKegiatan.findMany.load(); // refresh list
+            return true;
+          } else {
+            throw new Error(
+              result.message || "Gagal mengupdate kategori kegiatan"
+            );
+          }
+        } 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 kategori kegiatan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate kategori kegiatan"
+        );
+        return false;
+      } finally {
+        kategoriKegiatan.edit.loading = false;
+      }
+    },
+    reset() {
+      kategoriKegiatan.edit.id = "";
+      kategoriKegiatan.edit.form = { ...kategoriKegiatanDefaultForm };
+    },
+  },
+});
+
+const gotongRoyongState = proxy({
+  kegiatanDesa,
+  kategoriKegiatan,
+});
+export default gotongRoyongState;
--- a/src/app/admin/(dashboard)/_state/lingkungan/konservasi-adat-bali.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/konservasi-adat-bali.ts
@@ -0,0 +1,274 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateFilosofiTriHitaForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type FilosofiTriHitaForm = Prisma.FilosofiTriHitaGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateFilosofiTriHita = proxy({
+  findById: {
+    data: null as FilosofiTriHitaForm | null,
+    loading: false,
+    initialize() {
+      stateFilosofiTriHita.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as FilosofiTriHitaForm;
+    },
+    async load(id: string) {
+      try {
+        stateFilosofiTriHita.findById.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.filosofitrihitakarana[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateFilosofiTriHita.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data filosofi tri hita karana");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data filosofi tri hita karana"
+        );
+      } finally {
+        stateFilosofiTriHita.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: FilosofiTriHitaForm) {
+      const cek = templateFilosofiTriHitaForm.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 {
+        stateFilosofiTriHita.update.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.filosofitrihitakarana[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data filosofi tri hita karana berhasil diubah");
+          await stateFilosofiTriHita.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data filosofi tri hita karana");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data filosofi tri hita karana"
+        );
+      } finally {
+        stateFilosofiTriHita.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateNilaiKonservasiAdatForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type NilaiKonservasiAdatForm = Prisma.NilaiKonservasiAdatGetPayload<{
+  select: {
+    id: true;
+    judul: true;
+    deskripsi: true;
+  };
+}>;
+
+const stateNilaiKonservasiAdat = proxy({
+  findById: {
+    data: null as NilaiKonservasiAdatForm | null,
+    loading: false,
+    initialize() {
+      stateNilaiKonservasiAdat.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as NilaiKonservasiAdatForm;
+    },
+    async load(id: string) {
+      try {
+        stateNilaiKonservasiAdat.findById.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.nilaikonservasiadatbali[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateNilaiKonservasiAdat.findById.data = res.data?.data ?? null;
+        } else {
+          toast.error("Gagal mengambil data nilai konservasi adat");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data nilai konservasi adat"
+        );
+      } finally {
+        stateNilaiKonservasiAdat.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: NilaiKonservasiAdatForm) {
+      const cek = templateNilaiKonservasiAdatForm.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 {
+        stateNilaiKonservasiAdat.update.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.nilaikonservasiadatbali[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success("Data nilai konservasi adat berhasil diubah");
+          await stateNilaiKonservasiAdat.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data nilai konservasi adat");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data nilai konservasi adat"
+        );
+      } finally {
+        stateNilaiKonservasiAdat.update.loading = false;
+      }
+    },
+  },
+});
+
+const templateBentukKonservasiBerdasarkanAdatForm = z.object({
+  judul: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+});
+
+type BentukKonservasiBerdasarkanAdatForm =
+  Prisma.BentukKonservasiBerdasarkanAdatGetPayload<{
+    select: {
+      id: true;
+      judul: true;
+      deskripsi: true;
+    };
+  }>;
+
+const stateBentukKonservasiBerdasarkanAdat = proxy({
+  findById: {
+    data: null as BentukKonservasiBerdasarkanAdatForm | null,
+    loading: false,
+    initialize() {
+      stateBentukKonservasiBerdasarkanAdat.findById.data = {
+        id: "",
+        judul: "",
+        deskripsi: "",
+      } as BentukKonservasiBerdasarkanAdatForm;
+    },
+    async load(id: string) {
+      try {
+        stateBentukKonservasiBerdasarkanAdat.findById.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.bentukkonservasiberdasarkanadat[
+            "find-by-id"
+          ].get({
+            query: { id },
+          });
+        if (res.status === 200) {
+          stateBentukKonservasiBerdasarkanAdat.findById.data =
+            res.data?.data ?? null;
+        } else {
+          toast.error(
+            "Gagal mengambil data bentuk konservasi berdasarkan adat"
+          );
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengambil data bentuk konservasi berdasarkan adat"
+        );
+      } finally {
+        stateBentukKonservasiBerdasarkanAdat.findById.loading = false;
+      }
+    },
+  },
+
+  update: {
+    loading: false,
+    async save(data: BentukKonservasiBerdasarkanAdatForm) {
+      const cek = templateBentukKonservasiBerdasarkanAdatForm.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 {
+        stateBentukKonservasiBerdasarkanAdat.update.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.konservasiadatbali.bentukkonservasiberdasarkanadat[
+            "update"
+          ].post(data);
+        if (res.status === 200) {
+          toast.success(
+            "Data bentuk konservasi berdasarkan adat berhasil diubah"
+          );
+          await stateBentukKonservasiBerdasarkanAdat.findById.load(data.id);
+        } else {
+          toast.error("Gagal mengubah data bentuk konservasi berdasarkan adat");
+        }
+      } catch (error) {
+        console.error((error as Error).message);
+        toast.error(
+          "Terjadi kesalahan saat mengubah data bentuk konservasi berdasarkan adat"
+        );
+      } finally {
+        stateBentukKonservasiBerdasarkanAdat.update.loading = false;
+      }
+    },
+  },
+});
+
+const stateKonservasiAdatBali = proxy({
+  stateFilosofiTriHita,
+  stateNilaiKonservasiAdat,
+  stateBentukKonservasiBerdasarkanAdat,
+});
+
+export default stateKonservasiAdatBali;
--- a/src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts
@@ -15,12 +15,12 @@ const defaultForm = {
  icon: "",
 };

-const pengelolaanSampahState = proxy({
+const pengelolaanSampah = proxy({
  create: {
    form: { ...defaultForm },
    loading: false,
    async create() {
-      const cek = templateForm.safeParse(pengelolaanSampahState.create.form);
+      const cek = templateForm.safeParse(pengelolaanSampah.create.form);
      if (!cek.success) {
        const err = `[${cek.error.issues
          .map((v) => `${v.path.join(".")}`)
@@ -29,12 +29,12 @@ const pengelolaanSampahState = proxy({
      }

      try {
-        pengelolaanSampahState.create.loading = true;
-        const res = await ApiFetch.api.lingkungan.pengelolaansampah["create"].post(
-          pengelolaanSampahState.create.form
-        );
+        pengelolaanSampah.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.pengelolaansampah[
+          "create"
+        ].post(pengelolaanSampah.create.form);
        if (res.status === 200) {
-          pengelolaanSampahState.findMany.load();
+          pengelolaanSampah.findMany.load();
          return toast.success("success create");
        }
        console.log(res);
@@ -42,7 +42,7 @@ const pengelolaanSampahState = proxy({
      } catch (error) {
        console.log((error as Error).message);
      } finally {
-        pengelolaanSampahState.create.loading = false;
+        pengelolaanSampah.create.loading = false;
      }
    },
  },
@@ -54,33 +54,35 @@ const pengelolaanSampahState = proxy({
    loading: false,
    load: async (page = 1, limit = 10) => {
      // Change to arrow function
-      pengelolaanSampahState.findMany.loading = true; // Use the full path to access the property
-      pengelolaanSampahState.findMany.page = page;
+      pengelolaanSampah.findMany.loading = true; // Use the full path to access the property
+      pengelolaanSampah.findMany.page = page;
      try {
-        const res = await ApiFetch.api.lingkungan.pengelolaansampah["find-many"].get({
+        const res = await ApiFetch.api.lingkungan.pengelolaansampah[
+          "find-many"
+        ].get({
          query: { page, limit },
        });

        if (res.status === 200 && res.data?.success) {
-          pengelolaanSampahState.findMany.data = res.data.data || [];
-          pengelolaanSampahState.findMany.total = res.data.total || 0;
-          pengelolaanSampahState.findMany.totalPages = res.data.totalPages || 1;
+          pengelolaanSampah.findMany.data = res.data.data || [];
+          pengelolaanSampah.findMany.total = res.data.total || 0;
+          pengelolaanSampah.findMany.totalPages = res.data.totalPages || 1;
        } else {
          console.error(
            "Failed to load pengelolaan sampah:",
            res.data?.message
          );
-          pengelolaanSampahState.findMany.data = [];
-          pengelolaanSampahState.findMany.total = 0;
-          pengelolaanSampahState.findMany.totalPages = 1;
+          pengelolaanSampah.findMany.data = [];
+          pengelolaanSampah.findMany.total = 0;
+          pengelolaanSampah.findMany.totalPages = 1;
        }
      } catch (error) {
        console.error("Error loading pengelolaan sampah:", error);
-        pengelolaanSampahState.findMany.data = [];
-        pengelolaanSampahState.findMany.total = 0;
-        pengelolaanSampahState.findMany.totalPages = 1;
+        pengelolaanSampah.findMany.data = [];
+        pengelolaanSampah.findMany.total = 0;
+        pengelolaanSampah.findMany.totalPages = 1;
      } finally {
-        pengelolaanSampahState.findMany.loading = false;
+        pengelolaanSampah.findMany.loading = false;
      }
    },
  },
@@ -95,12 +97,15 @@ const pengelolaanSampahState = proxy({
      }

      try {
-        const response = await fetch(`/api/lingkungan/pengelolaansampah/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/lingkungan/pengelolaansampah/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
@@ -143,19 +148,22 @@ const pengelolaanSampahState = proxy({
      }
      this.loading = true;
      try {
-        const response = await fetch(`/api/lingkungan/pengelolaansampah/${id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(this.form),
-        });
+        const response = await fetch(
+          `/api/lingkungan/pengelolaansampah/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
        const result = await response.json();
        if (!response.ok || !result?.success) {
          throw new Error(result?.message || "Gagal update data");
        }
        toast.success("Berhasil update data!");
-        await pengelolaanSampahState.findMany.load();
+        await pengelolaanSampah.findMany.load();
        return result.data;
      } catch (error) {
        console.error("Error update data:", error);
@@ -174,14 +182,14 @@ const pengelolaanSampahState = proxy({
        const res = await fetch(`/api/lingkungan/pengelolaansampah/${id}`);
        if (res.ok) {
          const data = await res.json();
-          pengelolaanSampahState.findUnique.data = data.data ?? null;
+          pengelolaanSampah.findUnique.data = data.data ?? null;
        } else {
          console.error("Failed to fetch data", res.status, res.statusText);
-          pengelolaanSampahState.findUnique.data = null;
+          pengelolaanSampah.findUnique.data = null;
        }
      } catch (error) {
        console.error("Error loading pengelolaan sampah:", error);
-        pengelolaanSampahState.findUnique.data = null;
+        pengelolaanSampah.findUnique.data = null;
      }
    },
  },
@@ -191,20 +199,25 @@ const pengelolaanSampahState = proxy({
      if (!id) return toast.warn("ID tidak valid");

      try {
-        pengelolaanSampahState.delete.loading = true;
+        pengelolaanSampah.delete.loading = true;

-        const response = await fetch(`/api/lingkungan/pengelolaansampah/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/lingkungan/pengelolaansampah/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );

        const result = await response.json();

        if (response.ok && result?.success) {
-          toast.success(result.message || "pengelolaan sampah berhasil dihapus");
-          await pengelolaanSampahState.findMany.load(); // refresh list
+          toast.success(
+            result.message || "pengelolaan sampah berhasil dihapus"
+          );
+          await pengelolaanSampah.findMany.load(); // refresh list
        } else {
          toast.error(result?.message || "Gagal menghapus pengelolaan sampah");
        }
@@ -212,10 +225,236 @@ const pengelolaanSampahState = proxy({
        console.error("Gagal delete:", error);
        toast.error("Terjadi kesalahan saat menghapus pengelolaan sampah");
      } finally {
-        pengelolaanSampahState.delete.loading = false;
+        pengelolaanSampah.delete.loading = false;
      }
    },
  },
 });

+const templateKeteranganSampahForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  alamat: z.string().min(1, "Alamat minimal 1 karakter"),
+  namaTempatMaps: z.string().min(1, "Nama Tempat Maps minimal 1 karakter"),
+  lat: z.number(),
+  lng: z.number(),
+});
+
+const defaultKeteranganSampahForm = {
+  name: "",
+  alamat: "",
+  namaTempatMaps: "",
+  lat: 0,
+  lng: 0,
+};
+
+
+const keteranganSampah = proxy({
+  create: {
+    form: { ...defaultKeteranganSampahForm },
+    loading: false,
+    async create() {
+      const cek = templateKeteranganSampahForm.safeParse(
+        keteranganSampah.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        keteranganSampah.create.loading = true;
+        const res =
+          await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
+            "create"
+          ].post(keteranganSampah.create.form);
+        if (res.status === 200) {
+          keteranganSampah.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 {
+        keteranganSampah.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KeteranganBankSampahTerdekatGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    async load() {
+      const res = await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        keteranganSampah.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+      data: null as Prisma.KeteranganBankSampahTerdekatGetPayload<{
+        omit: { isActive: true };
+      }> | null,
+      async load(id: string) {
+        try {
+          const res = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`);
+          if (res.ok) {
+            const data = await res.json();
+            keteranganSampah.findUnique.data = data.data ?? null;
+          } else {
+            console.error("Failed to fetch data", res.status, res.statusText);
+            keteranganSampah.findUnique.data = null;
+          }
+        } catch (error) {
+          console.error("Error fetching data:", error);
+          keteranganSampah.findUnique.data = null;
+        }
+      },
+    },
+    delete: {
+        loading: false,
+        async byId(id: string) {
+          if (!id) return toast.warn("ID tidak valid");
+    
+          try {
+            keteranganSampah.delete.loading = true;
+    
+            const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/del/${id}`, {
+              method: "DELETE",
+              headers: {
+                "Content-Type": "application/json",
+              },
+            });
+    
+            const result = await response.json();
+    
+            if (response.ok && result?.success) {
+              toast.success(result.message || "Keterangan sampah berhasil dihapus");
+              await keteranganSampah.findMany.load(); // refresh list
+            } else {
+              toast.error(result?.message || "Gagal menghapus keterangan sampah");
+            }
+          } catch (error) {
+            console.error("Gagal delete:", error);
+            toast.error("Terjadi kesalahan saat menghapus keterangan sampah");
+          } finally {
+            keteranganSampah.delete.loading = false;
+          }
+        },
+      },
+      edit: {
+          id: "",
+          form: { ...defaultKeteranganSampahForm },
+          loading: false,
+      
+          async load(id: string) {
+            if (!id) {
+              toast.warn("ID tidak valid");
+              return null;
+            }
+      
+            try {
+              const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`, {
+                method: "GET",
+                headers: {
+                  "Content-Type": "application/json",
+                },
+              });
+              if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+              }
+              const result = await response.json();
+              if (result?.success) {
+                const data = result.data;
+                this.id = data.id;
+                this.form = {
+                  name: data.name,
+                  alamat: data.alamat,
+                  namaTempatMaps: data.namaTempatMaps,
+                  lat: data.lat,
+                  lng: data.lng,
+                };
+                return data;
+              } else {
+                throw new Error(result?.message || "Gagal memuat data");
+              }
+            } catch (error) {
+              console.error("Error loading keterangan sampah:", error);
+              toast.error(
+                error instanceof Error ? error.message : "Gagal memuat data"
+              );
+              return null;
+            }
+          },
+      
+          async update() {
+            const cek = templateKeteranganSampahForm.safeParse(keteranganSampah.edit.form);
+            if (!cek.success) {
+              const err = `[${cek.error.issues
+                .map((v) => `${v.path.join(".")}`)
+                .join("\n")}] required`;
+              return toast.error(err);
+            }
+      
+            try {
+              keteranganSampah.edit.loading = true;
+              const response = await fetch(
+                `/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${this.id}`,
+                {
+                  method: "PUT",
+                  headers: {
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify({
+                    name: this.form.name,
+                    alamat: this.form.alamat,
+                    namaTempatMaps: this.form.namaTempatMaps,
+                    lat: this.form.lat,
+                    lng: this.form.lng,
+                  }),
+                }
+              );
+              if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(
+                  errorData.message || `HTTP error! status: ${response.status}`
+                );
+              }
+              const result = await response.json();
+              if (result.success) {
+                toast.success("Berhasil update keterangan sampah");
+                await keteranganSampah.findMany.load(); // refresh list
+                return true;
+              } else {
+                throw new Error(result.message || "Gagal mengupdate keterangan sampah");
+              }
+            } catch (error) {
+              console.error("Error updating keterangan sampah:", error);
+              toast.error(
+                error instanceof Error
+                  ? error.message
+                  : "Gagal mengupdate keterangan sampah"
+              );
+              return false;
+            } finally {
+              keteranganSampah.edit.loading = false;
+            }
+          },
+          reset() {
+            keteranganSampah.edit.id = "";
+            keteranganSampah.edit.form = { ...defaultKeteranganSampahForm };
+          },
+        },
+});
+
+const pengelolaanSampahState = proxy({
+  pengelolaanSampah,
+  keteranganSampah,
+});
+
 export default pengelolaanSampahState;
--- a/src/app/admin/(dashboard)/_state/lingkungan/program-penghijauan.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/program-penghijauan.ts
@@ -0,0 +1,227 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(1, "Nama minimal 1 karakter"),
+  deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+  judul: z.string().min(1, "Judul minimal 1 karakter"),
+  icon: z.string().min(1, "Icon minimal 1 karakter"),
+});
+
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  judul: "",
+  icon: "",
+};
+
+const programPenghijauanState = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(programPenghijauanState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        programPenghijauanState.create.loading = true;
+        const res = await ApiFetch.api.lingkungan.programpenghijauan["create"].post(
+          programPenghijauanState.create.form
+        );
+        if (res.status === 200) {
+          programPenghijauanState.findMany.load();
+          return toast.success("success create");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        programPenghijauanState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      programPenghijauanState.findMany.loading = true; // Use the full path to access the property
+      programPenghijauanState.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.lingkungan.programpenghijauan["find-many"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          programPenghijauanState.findMany.data = res.data.data || [];
+          programPenghijauanState.findMany.total = res.data.total || 0;
+          programPenghijauanState.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load grafik berdasarkan program penghijauan:",
+            res.data?.message
+          );
+          programPenghijauanState.findMany.data = [];
+          programPenghijauanState.findMany.total = 0;
+          programPenghijauanState.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading grafik berdasarkan program penghijauan:", error);
+        programPenghijauanState.findMany.data = [];
+        programPenghijauanState.findMany.total = 0;
+        programPenghijauanState.findMany.totalPages = 1;
+      } finally {
+        programPenghijauanState.findMany.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/lingkungan/programpenghijauan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            judul: data.judul,
+            icon: data.icon,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal mengambil data");
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateForm.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/lingkungan/programpenghijauan/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await programPenghijauanState.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data program penghijauan");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.ProgramPenghijauanGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/lingkungan/programpenghijauan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          programPenghijauanState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          programPenghijauanState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        programPenghijauanState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        programPenghijauanState.delete.loading = true;
+
+        const response = await fetch(`/api/lingkungan/programpenghijauan/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Program penghijauan berhasil dihapus");
+          await programPenghijauanState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus program penghijauan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus program penghijauan");
+      } finally {
+        programPenghijauanState.delete.loading = false;
+      }
+    },
+  },
+});
+
+export default programPenghijauanState;
--- a/src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts
@@ -0,0 +1,282 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateBeasiswaPendaftar = z.object({
+  namaLengkap: z.string().min(1, "Nama harus diisi"),
+  nik: z.string().min(1, "NIK harus diisi"),
+  tempatLahir: z.string().min(1, "Tempat lahir harus diisi"),
+  tanggalLahir: z.string().min(1, "Tanggal lahir harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  kewarganegaraan: z.string().min(1, "Kewarganegaraan harus diisi"),
+  agama: z.string().min(1, "Agama harus diisi"),
+  alamatKTP: z.string().min(1, "Alamat KTP harus diisi"),
+  alamatDomisili: z.string().min(1, "Alamat domisili harus diisi"),
+  noHp: z.string().min(1, "No HP harus diisi"),
+  email: z.string().min(1, "Email harus diisi"),
+  statusPernikahan: z.string().min(1, "Status pernikahan harus diisi"),
+  ukuranBaju: z.string().min(1, "Ukuran baju harus diisi"),
+});
+
+const defaultBeasiswaPendaftar = {
+  namaLengkap: "",
+  nik: "",
+  tempatLahir: "",
+  tanggalLahir: "",
+  jenisKelamin: "",
+  kewarganegaraan: "",
+  agama: "",
+  alamatKTP: "",
+  alamatDomisili: "",
+  noHp: "",
+  email: "",
+  statusPernikahan: "",
+  ukuranBaju: "",
+};
+
+const beasiswaPendaftar = proxy({
+  create: {
+    form: { ...defaultBeasiswaPendaftar },
+    loading: false,
+    async create() {
+      const cek = templateBeasiswaPendaftar.safeParse(
+        beasiswaPendaftar.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        beasiswaPendaftar.create.loading = true;
+        const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar[
+          "create"
+        ].post(beasiswaPendaftar.create.form);
+        if (res.status === 200) {
+          beasiswaPendaftar.findMany.load();
+          return toast.success("Data Berhasil Dibuat, Silahkan Menunggu Konfirmasi dari Admin di WhatsApp");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        beasiswaPendaftar.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.BeasiswaPendaftarGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar[
+        "findMany"
+      ].get();
+      if (res.status === 200) {
+        beasiswaPendaftar.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.BeasiswaPendaftarGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/beasiswa/beasiswapendaftar/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          beasiswaPendaftar.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          beasiswaPendaftar.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        beasiswaPendaftar.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        beasiswaPendaftar.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/beasiswapendaftar/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Beasiswa berhasil dihapus");
+          await beasiswaPendaftar.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus beasiswa");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus beasiswa");
+      } finally {
+        beasiswaPendaftar.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultBeasiswaPendaftar },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/beasiswapendaftar/${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 = {
+            namaLengkap: data.namaLengkap,
+            nik: data.nik,
+            tempatLahir: data.tempatLahir,
+            tanggalLahir: data.tanggalLahir,
+            jenisKelamin: data.jenisKelamin,
+            kewarganegaraan: data.kewarganegaraan,
+            agama: data.agama,
+            alamatKTP: data.alamatKTP,
+            alamatDomisili: data.alamatDomisili,
+            noHp: data.noHp,
+            email: data.email,
+            statusPernikahan: data.statusPernikahan,
+            ukuranBaju: data.ukuranBaju,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading beasiswa pendaftar:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateBeasiswaPendaftar.safeParse(
+        beasiswaPendaftar.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        beasiswaPendaftar.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/beasiswapendaftar/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              namaLengkap: this.form.namaLengkap,
+              nik: this.form.nik,
+              tanggalLahir: this.form.tanggalLahir,
+              jenisKelamin: this.form.jenisKelamin,
+              kewarganegaraan: this.form.kewarganegaraan,
+              agama: this.form.agama,
+              alamatKTP: this.form.alamatKTP,
+              alamatDomisili: this.form.alamatDomisili,
+              noHp: this.form.noHp,
+              email: this.form.email,
+              statusPernikahan: this.form.statusPernikahan,
+              ukuranBaju: this.form.ukuranBaju,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update beasiswa pendaftar");
+          await beasiswaPendaftar.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update beasiswa pendaftar");
+        }
+      } catch (error) {
+        console.error("Error updating beasiswa pendaftar:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update beasiswa pendaftar"
+        );
+        return false;
+      } finally {
+        beasiswaPendaftar.update.loading = false;
+      }
+    },
+    reset() {
+      beasiswaPendaftar.update.id = "";
+      beasiswaPendaftar.update.form = { ...defaultBeasiswaPendaftar };
+    },
+  },
+});
+
+const beasiswaDesaState = proxy({
+  beasiswaPendaftar,
+});
+
+export default beasiswaDesaState;
--- a/src/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa.ts
+++ b/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;
--- a/src/app/admin/(dashboard)/_state/pendidikan/data-pendidikan.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/data-pendidikan.ts
@@ -0,0 +1,178 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateDataPendidikan = z.object({
+  name: z.string().min(1, "Data nama harus diisi"),
+  jumlah: z.string().min(1, "Data jumlah harus diisi"),
+});
+
+type DataPendidikan = Prisma.DataPendidikanGetPayload<{
+  select: {
+    id: true;
+    name: true;
+    jumlah: true;
+  };
+}>;
+
+const defaultForm: Omit<DataPendidikan, "id"> & { id?: string } = {
+  name: "",
+  jumlah: "",
+};
+
+const dataPendidikan = proxy({
+  create: {
+    form: defaultForm,
+    loading: false,
+    async create() {
+      const cek = templateDataPendidikan.safeParse(dataPendidikan.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        dataPendidikan.create.loading = true;
+        const res = await ApiFetch.api.pendidikan.datapendidikan["create"].post(
+          dataPendidikan.create.form
+        );
+        if (res.status === 200) {
+          const id = res.data?.data?.id;
+          if (id) {
+            toast.success("Success create");
+            dataPendidikan.create.form = {
+              name: "",
+              jumlah: "",
+            };
+            dataPendidikan.findMany.load();
+            return id;
+          }
+        }
+        return toast.error("failed create");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        dataPendidikan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DataPendidikanGetPayload<{
+          select: { id: true; name: true; jumlah: true };
+        }>[]
+      | null,
+    loading: false,
+    async load() {
+      const res = await ApiFetch.api.pendidikan.datapendidikan[
+        "findMany"
+      ].get();
+      if (res.status === 200) {
+        dataPendidikan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DataPendidikanGetPayload<{
+      select: { id: true; name: true; jumlah: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/pendidikan/datapendidikan/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          dataPendidikan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          dataPendidikan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading data pendidikan:", error);
+        dataPendidikan.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateDataPendidikan.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => (v.path as string[]).join("."))
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/pendidikan/datapendidikan/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await dataPendidikan.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data data pendidikan:", error);
+        toast.error("Gagal update data data pendidikan");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        dataPendidikan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/datapendidikan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Data berhasil dihapus");
+          await dataPendidikan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus data");
+        }
+      } catch (error) {
+        console.error("Gagal delete data pendidikan:", error);
+        toast.error("Terjadi kesalahan saat menghapus data pendidikan");
+      } finally {
+        dataPendidikan.delete.loading = false;
+      }
+    },
+  },
+});
+export default dataPendidikan;
--- a/src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts
+++ b/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;
--- a/src/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal.ts
+++ b/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;
--- a/src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts
@@ -0,0 +1,478 @@
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateDataPerpustakaan = z.object({
+  judul: z.string().min(1, "Judul harus diisi"),
+  deskripsi: z.string().min(1, "Deskripsi harus diisi"),
+  imageId: z.string().min(1, "Image ID harus diisi"),
+  kategoriId: z.string().min(1, "Kategori ID harus diisi"),
+});
+
+const defaultDataPerpustakaan = {
+  judul: "",
+  deskripsi: "",
+  imageId: "",
+  kategoriId: "",
+};
+
+const dataPerpustakaan = proxy({
+  create: {
+    form: { ...defaultDataPerpustakaan },
+    loading: false,
+    async create() {
+      const cek = templateDataPerpustakaan.safeParse(
+        dataPerpustakaan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        dataPerpustakaan.create.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
+            "create"
+          ].post(dataPerpustakaan.create.form);
+        if (res.status === 200) {
+          dataPerpustakaan.findMany.load();
+          return toast.success("Data Data Perpustakaan Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        dataPerpustakaan.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.DataPerpustakaanGetPayload<{
+      include: {
+        kategori: true;
+        image: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
+          "findMany"
+        ].get();
+      if (res.status === 200) {
+        dataPerpustakaan.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DataPerpustakaanGetPayload<{
+      include: {
+        kategori: true;
+        image: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/perpustakaandigital/dataperpustakaan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          dataPerpustakaan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          dataPerpustakaan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        dataPerpustakaan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        dataPerpustakaan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/dataperpustakaan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Data Perpustakaan berhasil dihapus");
+          await dataPerpustakaan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Data Perpustakaan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Perpustakaan");
+      } finally {
+        dataPerpustakaan.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultDataPerpustakaan },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/dataperpustakaan/${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 = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+            kategoriId: data.kategoriId,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading perpustakaan digital:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateDataPerpustakaan.safeParse(
+        dataPerpustakaan.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        dataPerpustakaan.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/dataperpustakaan/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              judul: this.form.judul,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+              kategoriId: this.form.kategoriId,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data perpustakaan digital");
+          await dataPerpustakaan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update data perpustakaan digital"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating data perpustakaan digital:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data perpustakaan digital"
+        );
+        return false;
+      } finally {
+        dataPerpustakaan.update.loading = false;
+      }
+    },
+    reset() {
+      dataPerpustakaan.update.id = "";
+      dataPerpustakaan.update.form = { ...defaultDataPerpustakaan };
+    },
+  },
+});
+
+const templateKategoriBuku = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultKategoriBuku = {
+  name: "",
+};
+
+const kategoriBuku = proxy({
+  create: {
+    form: { ...defaultKategoriBuku },
+    loading: false,
+    async create() {
+      const cek = templateKategoriBuku.safeParse(kategoriBuku.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kategoriBuku.create.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
+            "create"
+          ].post(kategoriBuku.create.form);
+        if (res.status === 200) {
+          kategoriBuku.findMany.load();
+          return toast.success("Data Kategori Buku Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        kategoriBuku.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.KategoriBukuGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
+          "findMany"
+        ].get();
+      if (res.status === 200) {
+        kategoriBuku.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KategoriBukuGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/perpustakaandigital/kategoribuku/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          kategoriBuku.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kategoriBuku.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kategoriBuku.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kategoriBuku.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/kategoribuku/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Kategori Buku berhasil dihapus"
+          );
+          await kategoriBuku.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Data Kategori Buku");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Kategori Buku");
+      } finally {
+        kategoriBuku.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKategoriBuku },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/kategoribuku/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading kategori buku:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKategoriBuku.safeParse(kategoriBuku.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kategoriBuku.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/kategoribuku/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kategori buku");
+          await kategoriBuku.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data kategori buku");
+        }
+      } catch (error) {
+        console.error("Error updating data kategori buku:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kategori buku"
+        );
+        return false;
+      } finally {
+        kategoriBuku.update.loading = false;
+      }
+    },
+    reset() {
+      kategoriBuku.update.id = "";
+      kategoriBuku.update.form = { ...defaultKategoriBuku };
+    },
+  },
+});
+
+const perpustakaanDigitalState = proxy({
+  dataPerpustakaan,
+  kategoriBuku,
+});
+
+export default perpustakaanDigitalState;
--- a/src/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak.ts
+++ b/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;
--- a/src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
+++ b/src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
@@ -1,169 +1,683 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";

 const templateForm = z.object({
-    name: z.string().min(3, "Nama minimal 3 karakter"),
-    imageId: z.string().min(1, "Gambar wajib dipilih"),
-})
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});

 const defaultForm = {
-    name: "",
-    imageId: "",
+  name: "",
+  imageId: "",
 };

 type StrukturPPIDForm = Prisma.StrukturPPIDGetPayload<{
-    select: {
-        id: true;
-        name: true;
-        imageId: true;
-        image?: {
-            select: {
-                link: true;
-            };
-        };
+  select: {
+    id: true;
+    name: true;
+    imageId: true;
+    image?: {
+      select: {
+        link: true;
+      };
    };
+  };
 }>;

-const stateStrukturPPID = proxy({
-    struktur: {
-        data: null as StrukturPPIDForm | null,
-        loading: false,
-        error: null as string | null,
+const stateStruktur = proxy({
+  struktur: {
+    data: null as StrukturPPIDForm | null,
+    loading: false,
+    error: null as string | null,

-        async load(id: string) {
-            if(!id) {
-                toast.warn("ID tidak valid")
-                return null
-            }
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }

-            this.loading = true;
-            this.error = null;
+      this.loading = true;
+      this.error = null;

-            try {
-                const response = await fetch(`/api/ppid/strukturppid/${id}`);
-                
-                if(!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`)
-                }
+      try {
+        const response = await fetch(`/api/ppid/strukturppid/${id}`);

-                const result = await response.json();
-
-                if(result.success) {
-                    this.data = result.data;
-                    return result.data
-                } else {
-                    throw new Error(result.message || "Gagal mengambil data struktur")
-                }
-            } catch (error) {
-                const errorMessage = (error as Error).message;
-                this.error = errorMessage;
-                console.error("Load struktur error:", errorMessage);
-                toast.error("Terjadi kesalahan saat mengambil data struktur");
-                return null;
-            } finally {
-                this.loading = false;
-            }
-        },
-
-        reset() {
-            this.data = null;
-            this.error = null;
-            this.loading = false;
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
        }
-    },

-    editStruktur: {
-        id: "",
-        form: { ...defaultForm },
-        loading: false,
-        error: null as string | null,
-        isReadOnly: false,
+        const result = await response.json();

-        initialize(strukturData: StrukturPPIDForm) {
-            this.id = strukturData.id;
-            this.isReadOnly = false;
-            this.form = {
-                name: strukturData.name || "",
-                imageId: strukturData.imageId || "",
-            };
-        },
-
-        updateField(field: keyof typeof defaultForm, value: string) {
-            this.form[field] = value;
-        },
-
-        async submit() {
-            const validation = templateForm.safeParse(this.form);
-
-            if (!validation.success) {
-                const errors = validation.error.issues
-                .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
-                .join(", ");
-                toast.error(`Form tidak valid: ${errors}`);
-                return false;
-            }
-
-            this.loading = true;
-            this.error = null;
-            
-            try {
-               const response = await fetch(`/api/ppid/strukturppid/${this.id}`, {
-                method: "PUT",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify(this.form),
-               }) 
-
-               if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
-               }
-
-               const result = await response.json();
-
-               if (result.success) {
-                toast.success("Berhasil update struktur");
-                await stateStrukturPPID.struktur.load(this.id);
-                return true;
-               } else {
-                throw new Error(result.message || "Gagal update struktur");
-               }
-            } catch (error) {
-                const errorMessage = (error as Error).message;
-                this.error = errorMessage;
-                console.error("Update struktur error:", errorMessage);
-                toast.error("Terjadi kesalahan saat update struktur");
-                return false;
-            } finally {
-                this.loading = false;
-            }
-        },
-
-        reset() {
-            this.id = "";
-            this.form = { ...defaultForm };
-            this.error = null;
-            this.loading = false;
-            this.isReadOnly = false;
+        if (result.success) {
+          this.data = result.data;
+          return result.data;
+        } else {
+          throw new Error(result.message || "Gagal mengambil data struktur");
        }
-    },
-
-    async loadForEdit(id: string) {
-        const strukturData = await this.struktur.load(id);
-        if (strukturData) {
-            this.editStruktur.initialize(strukturData);
-        }
-        return strukturData;
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load struktur error:", errorMessage);
+        toast.error("Terjadi kesalahan saat mengambil data struktur");
+        return null;
+      } finally {
+        this.loading = false;
+      }
    },

    reset() {
-        this.struktur.reset();
-        this.editStruktur.reset();
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    },
+  },
+
+  editStruktur: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    error: null as string | null,
+    isReadOnly: false,
+
+    initialize(strukturData: StrukturPPIDForm) {
+      this.id = strukturData.id;
+      this.isReadOnly = false;
+      this.form = {
+        name: strukturData.name || "",
+        imageId: strukturData.imageId || "",
+      };
+    },
+
+    updateField(field: keyof typeof defaultForm, value: string) {
+      this.form[field] = value;
+    },
+
+    async submit() {
+      const validation = templateForm.safeParse(this.form);
+
+      if (!validation.success) {
+        const errors = validation.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return false;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/ppid/strukturppid/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update struktur");
+          await stateStruktur.struktur.load(this.id);
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update struktur");
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Update struktur error:", errorMessage);
+        toast.error("Terjadi kesalahan saat update struktur");
+        return false;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.id = "";
+      this.form = { ...defaultForm };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    },
+  },
+
+  async loadForEdit(id: string) {
+    const strukturData = await this.struktur.load(id);
+    if (strukturData) {
+      this.editStruktur.initialize(strukturData);
    }
-})
+    return strukturData;
+  },
+
+  reset() {
+    this.struktur.reset();
+    this.editStruktur.reset();
+  },
+});
+
+const templatePosisiOrganisasi = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  deskripsi: z.string().optional(),
+  hierarki: z.number().int().positive("Hierarki harus angka positif"),
+});
+
+const posisiOrganisasiDefaultForm = {
+  nama: "",
+  deskripsi: "",
+  hierarki: 0,
+};
+
+const posisiOrganisasi = proxy({
+  create: {
+    form: { ...posisiOrganisasiDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templatePosisiOrganisasi.safeParse(this.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((v) => v.message).join("\n");
+        return toast.error(err);
+      }
+
+      try {
+        this.loading = true;
+        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
+          "create"
+        ].post(this.form);
+        if (res.status === 200) {
+          toast.success("Berhasil menambahkan posisi organisasi");
+          posisiOrganisasi.findMany.load();
+          this.reset();
+        } else {
+          toast.error(res.data?.message || "Gagal menambahkan posisi");
+        }
+      } catch (error) {
+        console.error("Create error:", error);
+        toast.error("Terjadi kesalahan saat menambahkan posisi");
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.form = { ...posisiOrganisasiDefaultForm };
+    },
+  },
+
+  findUnique: {
+    data: null as Prisma.StrukturOrganisasiPPIDGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ppid/strukturppid/posisiorganisasi/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          posisiOrganisasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch posisiOrganisasi:", res.statusText);
+          posisiOrganisasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching posisiOrganisasi:", error);
+        posisiOrganisasi.findUnique.data = null;
+      }
+    },
+  },
+
+  edit: {
+    id: "",
+    form: { ...posisiOrganisasiDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/ppid/strukturppid/posisiorganisasi/${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,
+            deskripsi: data.deskripsi,
+            hierarki: data.hierarki,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading posisi organisasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templatePosisiOrganisasi.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        this.loading = true;
+        const response = await fetch(
+          `/api/ppid/strukturppid/posisiorganisasi/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              deskripsi: this.form.deskripsi,
+              hierarki: this.form.hierarki,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success("Berhasil update posisi organisasi");
+          await posisiOrganisasi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate posisi organisasi"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating posisi organisasi:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate posisi organisasi"
+        );
+        return false;
+      } finally {
+        this.loading = false;
+      }
+    },
+    reset() {
+      this.id = "";
+      this.form = { ...posisiOrganisasiDefaultForm };
+    },
+  },
+
+  findMany: {
+    data: [] as Array<{
+      id: string;
+      nama: string;
+      deskripsi: string | null;
+      hierarki: number;
+    }>,
+    async load() {
+      try {
+        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
+          "find-many"
+        ].get();
+        if (res.status === 200) {
+          // The API now returns the id field, so we can use it directly
+          this.data = res.data?.data ?? [];
+        }
+      } catch (error) {
+        console.error("Find many error:", error);
+        this.data = [];
+      }
+    },
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        posisiOrganisasi.delete.loading = true;
+
+        const response = await fetch(
+          `/api/ppid/strukturppid/posisiorganisasi/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Posisi organisasi berhasil dihapus");
+          await posisiOrganisasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus posisi organisasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus posisi organisasi");
+      } finally {
+        posisiOrganisasi.delete.loading = false;
+      }
+    },
+  },
+});
+
+const templatePegawai = z.object({
+  namaLengkap: z.string().min(1, "Nama wajib diisi"),
+  gelarAkademik: z.string().min(1, "Gelar Akademik wajib diisi"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  tanggalMasuk: z.string().min(1, "Tanggal masuk wajib diisi"), // ISO format
+  email: z.string().email("Email tidak valid").optional(),
+  telepon: z.string().min(1, "Telepom wajib diisi"),
+  alamat: z.string().min(1, "Alamat wajib diisi"),
+  posisiId: z.string().min(1, "Posisi wajib diisi"),
+  isActive: z.boolean().default(true),
+});
+
+const pegawaiDefaultForm = {
+  namaLengkap: "",
+  gelarAkademik: "",
+  imageId: "",
+  tanggalMasuk: "",
+  email: "",
+  telepon: "",
+  alamat: "",
+  posisiId: "",
+  isActive: true,
+};
+
+const pegawai = proxy({
+  create: {
+    form: { ...pegawaiDefaultForm },
+    loading: false,
+    async submit() {
+      const cek = templatePegawai.safeParse(pegawai.create.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+
+      try {
+        pegawai.create.loading = true;
+        const res = await ApiFetch.api.ppid.strukturppid.pegawai[
+          "create"
+        ].post(pegawai.create.form);
+        if (res.status === 200) {
+          toast.success("Pegawai berhasil ditambahkan");
+          await pegawai.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan pegawai");
+      } finally {
+        pegawai.create.loading = false;
+      }
+    },
+  },
+
+  // In struktur-organisasi.ts
+findMany: {
+  data: null as any[] | null,
+  page: 1,
+  totalPages: 1,
+  total: 0,
+  loading: false,
+  load: async (page = 1, limit = 10) => {  // Change to arrow function
+    pegawai.findMany.loading = true;  // Use the full path to access the property
+    pegawai.findMany.page = page;
+    try {
+      const res = await ApiFetch.api.ppid.strukturppid.pegawai[
+        "find-many"
+      ].get({
+        query: { page, limit },
+      });
+
+      if (res.status === 200 && res.data?.success) {
+        pegawai.findMany.data = res.data.data || [];
+        pegawai.findMany.total = res.data.total || 0;
+        pegawai.findMany.totalPages = res.data.totalPages || 1;
+      } else {
+        console.error("Failed to load pegawai:", res.data?.message);
+        pegawai.findMany.data = [];
+        pegawai.findMany.total = 0;
+        pegawai.findMany.totalPages = 1;
+      }
+    } catch (error) {
+      console.error("Error loading pegawai:", error);
+      pegawai.findMany.data = [];
+      pegawai.findMany.total = 0;
+      pegawai.findMany.totalPages = 1;
+    } finally {
+      pegawai.findMany.loading = false;
+    }
+  },
+},
+  findUnique: {
+    data: null as
+      | (Prisma.PegawaiGetPayload<{
+          include: { posisi: true; image: true };
+        }> & { isActive: boolean })
+      | null,
+    async load(id: string) {
+      const res = await fetch(`/api/ppid/strukturppid/pegawai/${id}`);
+      if (res.ok) {
+        const json = await res.json();
+        pegawai.findUnique.data = json.data
+          ? {
+              ...json.data,
+              isActive: json.data.isActive ?? json.data.aktif ?? true, // Fallback ke aktif:true jika tidak ada data
+            }
+          : null;
+      } else {
+        pegawai.findUnique.data = null;
+      }
+    },
+  },
+
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pegawai.delete.loading = true;
+        const res = await fetch(
+          `/api/ppid/strukturppid/pegawai/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
+        const json = await res.json();
+        if (res.ok) {
+          toast.success(json.message ?? "Berhasil hapus pegawai");
+          await pegawai.findMany.load();
+        } else {
+          toast.error(json.message ?? "Gagal hapus pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus");
+      } finally {
+        pegawai.delete.loading = false;
+      }
+    },
+  },
+
+  edit: {
+    id: "",
+    form: { ...pegawaiDefaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/ppid/strukturppid/pegawai/${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 = {
+            namaLengkap: data.namaLengkap,
+            gelarAkademik: data.gelarAkademik,
+            imageId: data.imageId,
+            tanggalMasuk: data.tanggalMasuk,
+            email: data.email,
+            telepon: data.telepon,
+            alamat: data.alamat,
+            posisiId: data.posisiId,
+            isActive: data.isActive,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading berita:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async submit() {
+      const cek = templatePegawai.safeParse(pegawai.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        pegawai.edit.loading = true;
+
+        // Format tanggalMasuk to ISO string if it exists
+        const formattedTanggalMasuk = this.form.tanggalMasuk
+          ? new Date(this.form.tanggalMasuk).toISOString()
+          : undefined;
+
+        const response = await fetch(
+          `/api/ppid/strukturppid/pegawai/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              id: this.id,
+              namaLengkap: this.form.namaLengkap,
+              gelarAkademik: this.form.gelarAkademik,
+              imageId: this.form.imageId || null,
+              tanggalMasuk: formattedTanggalMasuk,
+              email: this.form.email,
+              telepon: this.form.telepon,
+              alamat: this.form.alamat,
+              posisiId: this.form.posisiId,
+              isActive: this.form.isActive,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update pegawai");
+          await pegawai.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update pegawai");
+        }
+      } catch (error) {
+        console.error("Error updating pegawai:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update pegawai"
+        );
+        return false;
+      } finally {
+        pegawai.edit.loading = false;
+      }
+    },
+
+    reset() {
+      pegawai.edit.id = "";
+      pegawai.edit.form = { ...pegawaiDefaultForm };
+    },
+  },
+});
+
+const stateStrukturPPID = proxy({
+  stateStruktur,
+  posisiOrganisasi,
+  pegawai
+});

 export default stateStrukturPPID;
-    
--- a/src/app/admin/(dashboard)/_state/user/user-state.ts
+++ b/src/app/admin/(dashboard)/_state/user/user-state.ts
@@ -0,0 +1,456 @@
+import { proxy } from 'valtio'
+import { toast } from 'react-toastify'
+import ApiFetch from '@/lib/api-fetch'
+import { Prisma } from '@prisma/client'
+import { z } from 'zod'
+
+// 1. Validasi Zod
+const userSchema = z.object({
+  nama: z.string().min(1, 'Nama harus diisi'),
+  email: z.string().email('Email tidak valid'),
+  password: z.string().min(6, 'Password minimal 6 karakter'),
+  roleId: z.string().optional(),
+})
+
+const defaultForm = { nama: '', email: '', password: '', roleId: '' }
+
+// 2. State Valtio
+const userState = proxy({
+  // Register
+  register: {
+    form: { ...defaultForm },
+    loading: false,
+    async submit() {
+      const valid = userSchema.omit({ roleId: true }).safeParse(userState.register.form)
+      if (!valid.success) {
+        const err = valid.error.issues.map(i => i.message).join(', ')
+        return toast.error(err)
+      }
+      try {
+        userState.register.loading = true
+        const res = await ApiFetch.api.user.register.post(userState.register.form)
+        if (res.status === 200) {
+          toast.success('Registrasi berhasil, silakan login')
+          userState.register.form = { ...defaultForm } // reset
+        } else {
+          toast.error(res.data?.message || 'Gagal registrasi')
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Terjadi kesalahan saat registrasi')
+      } finally {
+        userState.register.loading = false
+      }
+    },
+  },
+
+  // Login
+  login: {
+    form: { email: '', password: '' },
+    loading: false,
+    async submit() {
+      try {
+        userState.login.loading = true
+        const res = await ApiFetch.api.user.login.post(userState.login.form)
+        if (res.status === 200) {
+          toast.success('Login berhasil')
+          const token = res.data?.data?.token
+          if (typeof token === 'string') {
+            localStorage.setItem('token', token)
+            // Optional: simpan user role untuk otorisasi
+            const user = res.data?.data?.user
+            localStorage.setItem('user', JSON.stringify(user))
+          }
+        } else {
+          toast.error(res.data?.message || 'Login gagal')
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Terjadi kesalahan saat login')
+      } finally {
+        userState.login.loading = false
+      }
+    },
+  },
+
+  // CRUD User (untuk admin)
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create(isAdmin = false) {
+      const valid = userSchema.safeParse(userState.create.form)
+      if (!valid.success) {
+        const err = valid.error.issues.map(i => i.message).join(', ')
+        return toast.error(err)
+      }
+      try {
+        userState.create.loading = true
+        const endpoint = isAdmin ? 'create' : 'register'
+        const res = await ApiFetch.api.user[endpoint].post(userState.create.form)
+        if (res.status === 200) {
+          toast.success('User berhasil dibuat')
+          userState.findMany.load() // refresh list
+          userState.create.form = { ...defaultForm } // reset form
+        } else {
+          toast.error(res.data?.message || 'Gagal membuat user')
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal membuat user')
+      } finally {
+        userState.create.loading = false
+      }
+    },
+  },
+
+  // Find Many
+  findMany: {
+    data: [] as Prisma.UserGetPayload<{ include: { role: true } }>[],
+    loading: false,
+    async load() {
+      this.loading = true
+      try {
+        const res = await ApiFetch.api.user.findMany.get()
+        if (res.status === 200) {
+          this.data = res.data?.data || []
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal muat data user')
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  // Find Unique
+  findUnique: {
+    data: null as Prisma.UserGetPayload<{ include: { role: true } }> | null,
+    loading: false,
+    async load(id: string) {
+      this.loading = true
+      try {
+        const res = await fetch(`/api/user/findUnique/${id}`)
+        const data = await res.json()
+        if (res.status === 200) {
+          this.data = data.data
+        } else {
+          toast.error(data.message)
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal ambil data user')
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  // Update
+  update: {
+    id: '',
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      this.loading = true
+      try {
+        const res = await fetch(`/api/user/findUnique/${id}`)
+        const data = await res.json()
+        if (res.status === 200) {
+          const user = data.data
+          this.id = user.id
+          this.form = {
+            nama: user.nama,
+            email: user.email,
+            password: '', // jangan kirim password lama
+            roleId: user.roleId,
+          }
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal muat data')
+      } finally {
+        this.loading = false
+      }
+    },
+    async submit() {
+      this.loading = true
+      try {
+        const res = await fetch(`/api/user/update/${this.id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(this.form),
+        })
+        const data = await res.json()
+        if (res.status === 200) {
+          toast.success('Update berhasil')
+          userState.findMany.load()
+        } else {
+          toast.error(data.message || 'Gagal update')
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal update user')
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+
+  // Delete (Soft Delete)
+  delete: {
+    loading: false,
+    async submit(id: string) {
+      this.loading = true
+      try {
+        const res = await fetch(`/api/user/del/${id}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+        })
+        const data = await res.json()
+        if (res.status === 200) {
+          toast.success('User dinonaktifkan')
+          userState.findMany.load()
+        } else {
+          toast.error(data.message || 'Gagal hapus')
+        }
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal hapus user')
+      } finally {
+        this.loading = false
+      }
+    },
+  },
+})
+
+const templateRole = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultRole = {
+  name: "",
+};
+
+const roleState = proxy({
+  create: {
+    form: { ...defaultRole },
+    loading: false,
+    async create() {
+      const cek = templateRole.safeParse(roleState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        roleState.create.loading = true;
+        const res =
+          await ApiFetch.api.role[
+            "create"
+          ].post(roleState.create.form);
+        if (res.status === 200) {
+          roleState.findMany.load();
+          return toast.success("Data role Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        roleState.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.RoleGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    loading: false,
+    async load() {
+      const res =
+        await ApiFetch.api.role[
+          "findMany"
+        ].get();
+      if (res.status === 200) {
+        roleState.findMany.data = res.data?.data ?? [];
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.RoleGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/role/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          roleState.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          roleState.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        roleState.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        roleState.delete.loading = true;
+
+        const response = await fetch(
+          `/api/role/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data role berhasil dihapus"
+          );
+          await roleState.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus Data role");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data role");
+      } finally {
+        roleState.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultRole },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/role/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading role:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateRole.safeParse(roleState.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        roleState.update.loading = true;
+
+        const response = await fetch(
+          `/api/role/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data role");
+          await roleState.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data role");
+        }
+      } catch (error) {
+        console.error("Error updating data role:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data role"
+        );
+        return false;
+      } finally {
+        roleState.update.loading = false;
+      }
+    },
+    reset() {
+      roleState.update.id = "";
+      roleState.update.form = { ...defaultRole };
+    },
+  },
+});
+
+const user = proxy({
+  userState,
+  roleState,
+})
+
+export default user
--- a/src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/maskot_desa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/maskot_desa/page.tsx
@@ -148,7 +148,6 @@ function Page() {
                    <Text fz={"md"} fw={"bold"}>Gambar</Text>
                    <Box w={{ base: '100%', md: '50%' }}>
                      <Dropzone
-
                        onDrop={(files) => {
                          const newImages = files.map((file) => ({
                            file,
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/_lib/layoutTabs.tsx
@@ -12,17 +12,17 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
    {
      label: "Posisi Organisasi",
      value: "posisiorganisasi",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi"
+      href: "/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/posisi-organisasi"
    },
    {
      label: "Pegawai",
      value: "pegawai",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai"
+      href: "/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai"
    },
    {
      label: "Hubungan Organisasi",
      value: "hubunganorganisasi",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi"
+      href: "/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/hubungan-organisasi"
    },
  ];
  const curentTab = tabs.find(tab => tab.href === pathname)
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx
@@ -126,7 +126,7 @@ export default function EditPegawai() {
      const success = await stateOrganisasi.edit.submit();

      if (success) {
-        router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+        router.push("/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai");
      }
    } catch (error) {
      console.error("Error updating pegawai:", error);
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx
@@ -25,7 +25,7 @@ function DetailPegawai() {
      statePegawai.delete.byId(selectedId)
      setModalHapus(false)
      setSelectedId(null)
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai")
+      router.push("/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai")
    }
  }

@@ -120,7 +120,7 @@ function DetailPegawai() {
                  <Button
                    onClick={() => {
                      if (statePegawai.findUnique.data) {
-                        router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${statePegawai.findUnique.data.id}/edit`);
+                        router.push(`/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai/${statePegawai.findUnique.data.id}/edit`);
                      }
                    }}
                    disabled={!statePegawai.findUnique.data}
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx
@@ -64,7 +64,7 @@ function CreatePegawai() {
      // Reset form dan redirect
      resetForm();
      toast.success("Data pegawai berhasil ditambahkan");
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+      router.push("/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai");
    } catch (error) {
      console.error("Error creating pegawai:", error);
      toast.error("Terjadi kesalahan saat menambahkan pegawai");
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx
@@ -78,7 +78,7 @@ function ListPegawai({ search }: { search: string }) {
      <Paper bg={colors['white-1']} p={'md'} h={{base: 770, md: 650}}>
        <JudulList
          title='List Pegawai'
-          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create'
+          href='/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai/create'
        />
        <Box style={{ overflowX: "auto" }}>
          <Table striped withTableBorder withRowBorders>
@@ -131,7 +131,7 @@ function ListPegawai({ search }: { search: string }) {
                    </Group>
                  </TableTd>
                  <TableTd>
-                    <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/pegawai/${item.id}`)}>
                      <IconDeviceImacCog size={25} />
                    </Button>
                  </TableTd>
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/[id]/page.tsx
@@ -68,7 +68,7 @@ function EditPosisiOrganisasi() {
      const success = await stateOrganisasi.edit.update();

      if (success) {
-        router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi");
+        router.push("/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/posisi-organisasi");
      }
    } catch (error) {
      console.error("Error updating posisi organisasi:", error);
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create/page.tsx
@@ -27,7 +27,7 @@ function CreatePosisiOrganisasi() {
    const handleSubmit = async () => {
        await stateOrganisasi.create.submit();
        resetForm();
-        router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi")
+        router.push("/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/posisi-organisasi")
    };

    return (
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx
@@ -67,7 +67,7 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
      <Paper bg={colors['white-1']} p={'md'}>
        <JudulList
          title='List Posisi Organisasi'
-          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create'
+          href='/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/posisi-organisasi/create'
        />
        <Table striped withTableBorder withRowBorders>
          <TableThead>
@@ -91,7 +91,7 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
                  <Button color="green" 
                   onClick={() => {
                    if (item) {
-                      router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`);
+                      router.push(`/admin/ekonomi/Struktur-Organisasi-dan-SK-Pengurus-BUMDesa/posisi-organisasi/${item.id}`);
                    }
                  }}
                   >
--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/_lib/layoutTabs.tsx
@@ -28,13 +28,7 @@ function LayoutTabsLayananOnlineDesa({ children }: { children: React.ReactNode }
            label: "Jenis Pengaduan",
            value: "jenispengaduan",
            href: "/admin/inovasi/layanan-online-desa/jenis-pengaduan"
-        },
-        {
-            label: "Informasi Desa",
-            value: "informasidesa",
-            href: "/admin/inovasi/layanan-online-desa/informasi-desa"
        }
-        
    ];
    const curentTab = tabs.find(tab => tab.href === pathname)
    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/edit/page.tsx
@@ -9,7 +9,7 @@ import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import SelectIconProgramEdit from '../../_lib/selectIconEdit';
+import SelectIconProgramEdit from '../../../../_com/selectIconEdit';

 interface FormProgramKreatif {
  name: string;
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/[id]/page.tsx
@@ -3,7 +3,7 @@
 import colors from '@/con/colors';
 import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconChartLine, IconEdit, IconLeaf, IconRecycle, IconTent, IconTrophy, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconChartLine, IconChristmasTreeFilled, IconClipboard, IconEdit, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconShieldFilled, IconTent, IconTrash, IconTrendingUp, IconTrophy, IconTruck, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -25,6 +25,14 @@ function DetailProgramKreatifDesa() {
    wisata: IconTent,
    ekonomi: IconChartLine,
    sampah: IconRecycle,
+    truck: IconTruck,
+    scale: IconScale,
+    clipboard: IconClipboard,
+    trash: IconTrash,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
  };

  useShallowEffect(() => {
--- a/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/program-kreatif-desa/create/page.tsx
@@ -6,7 +6,7 @@ import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import programKreatifState from '../../../_state/inovasi/program-kreatif';
-import SelectIconProgram from '../_lib/selectIcon';
+import SelectIconProgram from '../../../_com/selectIcon';


 function CreateProgramKreatifDesa() {
--- a/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
+++ b/src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx
@@ -21,7 +21,7 @@ function KeamananLingkungan() {
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
      />
-      <ListKeamananLingkungan search={search}/>
+      <ListKeamananLingkungan search={search} />
    </Box>
  );
 }
--- a/src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/[id]/edit/page.tsx
@@ -0,0 +1,258 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+"use client";
+
+
+import apbdes from "@/app/admin/(dashboard)/_state/landing-page/apbdes";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } 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 EditAPBDes() {
+  const apbdesState = useProxy(apbdes);
+  const router = useRouter();
+  const params = useParams();
+
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewDoc, setPreviewDoc] = useState<string | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [docFile, setDocFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: apbdesState.edit.form.name || '',
+    jumlah: apbdesState.edit.form.jumlah || '',
+    imageId: apbdesState.edit.form.imageId || '',
+    fileId: apbdesState.edit.form.fileId || ''
+  });
+
+  // Load sdgs desa by id saat pertama kali
+  useEffect(() => {
+    const loadKolaborasi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await apbdesState.edit.load(id); // akses langsung, bukan dari proxy
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            jumlah: data.jumlah || '',
+            imageId: data.imageId || '',
+            fileId: data.fileId || ''
+          });
+          if (data.image) {
+            if (data?.image?.link) {
+              setPreviewImage(data.image.link);
+            }
+          }
+          if (data.file) {
+            if (data?.file?.link) {
+              setPreviewDoc(data.file.link);
+            }
+          }
+        }
+      } catch (error) {
+        console.error("Error loading apbdes:", error);
+        toast.error("Gagal memuat data apbdes");
+      }
+    };
+
+    loadKolaborasi();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+
+    try {
+      // edit global state with form data
+      apbdesState.edit.form = {
+        ...apbdesState.edit.form,
+        name: formData.name,
+        jumlah: formData.jumlah,
+        imageId: formData.imageId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file image baru, upload
+      if (imageFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // edit imageId in global state
+        apbdesState.edit.form.imageId = uploaded.id;
+      }
+
+      // Jika ada file doc baru, upload
+      if (docFile) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload doc");
+        }
+
+        // edit fileId in global state
+        apbdesState.edit.form.fileId = uploaded.id;
+      }
+
+      await apbdesState.edit.update();
+      toast.success("apbdes berhasil diperbarui!");
+      router.push("/admin/landing-page/APBDes");
+    } catch (error) {
+      console.error("Error updating apbdes:", error);
+      toast.error("Terjadi kesalahan saat memperbarui apbdes");
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit APBDes</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
+            placeholder="masukkan nama"
+          />
+
+          <TextInput
+            value={formData.jumlah}
+            onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
+            placeholder="masukkan jumlah"
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setImageFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih image
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Image</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Doc</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setDocFile(selectedFile);
+                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format doc
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewDoc ? (
+                  <iframe
+                    src={previewDoc}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada doc tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Button onClick={handleSubmit}>Simpan</Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditAPBDes;
--- a/src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/[id]/page.tsx
@@ -0,0 +1,126 @@
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { ActionIcon, Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconFile, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import apbdes from '../../../_state/landing-page/apbdes';
+
+function DetailAPBDes() {
+  const apbdesState = useProxy(apbdes)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    apbdesState.findUnique.load(params?.id as string)
+  }, [])
+
+
+  const handleHapus = () => {
+    if (selectedId) {
+      apbdesState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/landing-page/APBDes")
+    }
+  }
+
+  if (!apbdesState.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 APBDes</Text>
+          {apbdesState.findUnique.data ? (
+            <Paper key={apbdesState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama APBDes</Text>
+                  <Text fz={"lg"}>{apbdesState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Jumlah</Text>
+                  <Text fz={"lg"}>{apbdesState.findUnique.data?.jumlah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={apbdesState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                  {apbdesState.findUnique.data?.file?.link ? (
+                    <ActionIcon
+                      component="a"
+                      href={apbdesState.findUnique.data.file.link}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      variant="transparent"
+                    >
+                      <IconFile size={25} color={colors['blue-button']}/>
+                    </ActionIcon>
+                  ) : (
+                    <Text>Tidak ada dokumen tersedia</Text>
+                  )}
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (apbdesState.findUnique.data) {
+                        setSelectedId(apbdesState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={apbdesState.delete.loading || !apbdesState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (apbdesState.findUnique.data) {
+                        router.push(`/admin/landing-page/APBDes/${apbdesState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!apbdesState.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 APBDes ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailAPBDes;
--- a/src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx
@@ -0,0 +1,215 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconFile, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+import apbdes from '../../../_state/landing-page/apbdes';
+
+
+function CreateAPBDes() {
+  const router = useRouter();
+  const stateAPBDes = useProxy(apbdes)
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewDoc, setPreviewDoc] = useState<string | null>(null);
+  const [imageFile, setImageFile] = useState<File | null>(null);
+  const [docFile, setDocFile] = useState<File | null>(null);
+  
+
+
+  useEffect(() => {
+    stateAPBDes.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateAPBDes.create.form = {
+      name: "",
+      jumlah: "",
+      imageId: "",
+      fileId: "",
+    };
+    setImageFile(null);
+    setDocFile(null);
+    setPreviewImage(null);
+  };
+  const handleSubmit = async () => {
+    if (!imageFile || !docFile) {
+      return toast.warn("Pilih gambar dan dokumen terlebih dahulu");
+    }
+  
+    try {
+      const [uploadImageRes, uploadDocRes] = await Promise.all([
+        ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name }),
+        ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name }),
+      ]);
+  
+      const imageId = uploadImageRes?.data?.data?.id;
+      const fileId = uploadDocRes?.data?.data?.id;
+  
+      if (!imageId || !fileId) {
+        return toast.error("Gagal mengupload file");
+      }
+  
+      stateAPBDes.create.form.imageId = imageId;
+      stateAPBDes.create.form.fileId = fileId;
+  
+      await stateAPBDes.create.create();
+  
+      toast.success("Berhasil menambahkan APBDes");
+      resetForm();
+      router.push("/admin/landing-page/APBDes");
+    } catch (error) {
+      console.error("Gagal submit:", error);
+      toast.error("Gagal menyimpan data");
+    }
+  };
+  
+  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 APBDes</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Image</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setImageFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format image
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewImage ? (
+                  <iframe
+                    src={previewImage}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada image tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Dokumen</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setDocFile(selectedFile);
+                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format dokumen
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewDoc ? (
+                  <iframe
+                    src={previewDoc}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateAPBDes.create.form.name}
+            onChange={(val) => {
+              stateAPBDes.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+           <TextInput
+           type='number'
+            value={stateAPBDes.create.form.jumlah}
+            onChange={(val) => {
+              stateAPBDes.create.form.jumlah = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
+            placeholder='Masukkan jumlah'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateAPBDes;
--- a/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/apbdes/page.tsx
@@ -1,11 +1,113 @@
-import React from 'react';
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { ActionIcon, Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconFile, 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 apbdes from '../../_state/landing-page/apbdes';

-function Page() {
+
+function APBDes() {
+  const [search, setSearch] = useState('');
  return (
-    <div>
-      APBDes
-    </div>
+    <Box>
+      <HeaderSearch
+        title='APBDes'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListAPBDes search={search} />
+    </Box>
  );
 }

-export default Page;
+function ListAPBDes({ search }: { search: string }) {
+  const listState = useProxy(apbdes)
+  const router = useRouter();
+  useEffect(() => {
+    listState.findMany.load()
+  }, [])
+
+  const filteredData = (listState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.jumlah.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 APBDes'
+            href='/admin/landing-page/APBDes/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama APBDes</TableTh>
+                  <TableTh>Jumlah APBDes</TableTh>
+                  <TableTh>Document</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Text truncate="end" fz={"sm"}>{item.jumlah}</Text>
+                    </TableTd>
+                    <TableTd>
+                      {item.file?.link ? (
+                        <ActionIcon
+                          component="a"
+                          href={item.file.link}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          variant='transparent'
+                        >
+                          <IconFile size={25} color={colors['blue-button']}/>
+                        </ActionIcon>
+                      ) : (
+                        <Text>Tidak ada dokumen tersedia</Text>
+                      )}
+                    </TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/APBDes/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+    </Box>
+  )
+}
+
+export default APBDes;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.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: "List Desa Anti Korupsi",
+            value: "listDesaAntiKorupsi",
+            href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi"
+        },
+        {
+            label: "Kategori Desa Anti Korupsi",
+            value: "kategoriDesaAntiKorupsi",
+            href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi"
+        },
+    ];
+    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}>Desa Anti Korupsi</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;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/[id]/page.tsx
@@ -0,0 +1,98 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+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 EditKategoriDesaAntiKorupsi() {
+  const router = useRouter();
+  const params = useParams();
+  const id = params?.id as string;
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
+
+  const [formData, setFormData] = useState({
+    name: "",
+  });
+
+  useEffect(() => {
+    const loadKategorikegiatan = async () => {
+      if (!id) return;
+
+      try {
+        const data = await stateKategori.edit.load(id);
+
+        if (data) {
+          // pastikan id-nya masuk ke state edit
+          stateKategori.edit.id = id;
+          setFormData({
+            name: data.name || '',
+          });
+        }
+      } catch (error) {
+        console.error("Error loading kategori desa anti korupsi:", error);
+        toast.error("Gagal memuat data kategori desa anti korupsi");
+      }
+    };
+
+    loadKategorikegiatan();
+  }, [id]);
+
+  const handleSubmit = async () => {
+    try {
+      if (!formData.name.trim()) {
+        toast.error('Nama kategori desa anti korupsi tidak boleh kosong');
+        return;
+      }
+
+      stateKategori.edit.form = {
+        name: formData.name.trim(),
+      };
+
+      // Safety check tambahan: pastikan ID tidak kosong
+      if (!stateKategori.edit.id) {
+        stateKategori.edit.id = id; // fallback
+      }
+
+      const success = await stateKategori.edit.update();
+
+      if (success) {
+        router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
+      }
+    } catch (error) {
+      console.error("Error updating kategori desa anti korupsi:", 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 Kategori Desa Anti Korupsi</Title>
+          <TextInput
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
+            placeholder='Masukkan nama kategori desa anti korupsi'
+          />
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditKategoriDesaAntiKorupsi;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/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 korupsiState from '../../../../_state/landing-page/desa-anti-korupsi';
+
+function CreateKategoriDesaAntiKorupsi() {
+  const router = useRouter();
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
+
+  useEffect(() => {
+    stateKategori.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateKategori.create.form = {
+      name: "",
+    };
+  }
+
+  const handleSubmit = async () => {
+    await stateKategori.create.create();
+    resetForm();
+    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi")
+  }
+
+  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 Kategori Desa Anti Korupsi</Title>
+            <TextInput
+              value={stateKategori.create.form.name}
+              onChange={(val) => {
+                stateKategori.create.form.name = val.target.value;
+              }}
+              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
+              placeholder='Masukkan nama kategori desa anti korupsi'
+            />
+            <Group>
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+            </Group>
+          </Stack>
+        </Paper>
+      </Box>
+    </Box>
+  );
+}
+
+export default CreateKategoriDesaAntiKorupsi;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx
@@ -0,0 +1,162 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
+
+
+function KategoriDesaAntiKorupsi() {
+  const [search, setSearch] = useState("")
+  return (
+    <Box>
+      <HeaderSearch
+        title='Kategori Desa Anti Korupsi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListKategoriKegiatan search={search} />
+    </Box>
+  );
+}
+
+function ListKategoriKegiatan({ search }: { search: string }) {
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateKategori.findMany;
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateKategori.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+    }
+  }
+
+  useEffect(() => {
+    load(page, 10)
+  }, [page])
+
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.name?.toLowerCase().includes(keyword)
+      );
+    })
+  }, [data, search]);
+
+  // Handle loading state
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={300} />
+      </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Kategori Kegiatan'
+            href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Delete</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+          </Box>
+        </Paper>
+      </Box>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Kategori Kegiatan'
+          href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
+        />
+        <Box style={{ overflowY: "auto" }}>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Kategori</TableTh>
+                <TableTh>Edit</TableTh>
+                <TableTh>Delete</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>
+                    <Button color="green" onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${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>
+        </Box>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus kategori kegiatan ini?'
+      />
+    </Box>
+  );
+}
+
+export default KategoriDesaAntiKorupsi
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/layout.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/layout.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import LayoutTabs from './_lib/layouTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabs>
+      {children}
+    </LayoutTabs>
+  );
+}
+
+export default Layout;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/edit/page.tsx
@@ -0,0 +1,229 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { useProxy } from 'valtio/utils';
+
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
+import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+
+import colors from '@/con/colors';
+
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+import ApiFetch from '@/lib/api-fetch';
+import { Dropzone } from '@mantine/dropzone';
+import { toast } from 'react-toastify';
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+
+interface FormDesaAntiKorupsi {
+  name: string;
+  deskripsi: string;
+  kategoriId: string;
+  fileId: string;
+}
+
+function EditDesaAntiKorupsi() {
+  const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi)
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const params = useParams()
+  const router = useRouter()
+  const [formData, setFormData] = useState<FormDesaAntiKorupsi>({
+    name: '',
+    deskripsi: '',
+    kategoriId: '',
+    fileId: '',
+  })
+
+  useEffect(() => {
+    const loadDesaAntiKorupsi = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await desaAntiKorupsiState.edit.load(id);
+        if (data) {
+          // ⬇️ FIX PENTING: tambahkan ini
+          desaAntiKorupsiState.edit.id = id;
+
+          desaAntiKorupsiState.edit.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            fileId: data.fileId,
+          };
+
+          setFormData({
+            name: data.name,
+            deskripsi: data.deskripsi,
+            kategoriId: data.kategoriId,
+            fileId: data.fileId,
+          });
+
+          if (data?.file?.link) {
+            setPreviewFile(data.file.link)
+          }
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error("Gagal memuat data program penghijauan");
+      }
+    }
+
+    loadDesaAntiKorupsi();
+  }, [params?.id]);
+
+
+  const handleSubmit = async () => {
+
+    try {
+      // Update global state with form data
+      desaAntiKorupsiState.edit.form = {
+        ...desaAntiKorupsiState.edit.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        kategoriId: formData.kategoriId || '',
+        fileId: formData.fileId // Keep existing imageId if not changed
+      };
+
+      // Jika ada file baru, upload
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
+        // Update imageId in global state
+        desaAntiKorupsiState.edit.form.fileId = uploaded.id;
+      }
+
+      await desaAntiKorupsiState.edit.update();
+      toast.success("desa anti korupsi berhasil diperbarui!");
+      router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi");
+    } catch (error) {
+      console.error("Error updating desa anti korupsi:", error);
+      toast.error("Terjadi kesalahan saat memperbarui desa anti korupsi");
+    }
+  };
+
+  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 Desa Anti Korupsi</Text>
+          {desaAntiKorupsiState.findUnique.data ? (
+            <Paper key={desaAntiKorupsiState.findUnique.data.id}>
+              <Stack gap={"xs"}>
+                <TextInput
+                  value={formData.name}
+                  onChange={(val) => {
+                    setFormData({
+                      ...formData,
+                      name: val.target.value
+                    })
+                  }}
+                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+                  placeholder='Masukkan judul'
+                />
+                <Box>
+                  <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+                  <EditEditor
+                    value={formData.deskripsi}
+                    onChange={(val) => {
+                      setFormData({
+                        ...formData,
+                        deskripsi: val
+                      })
+                    }}
+                  />
+                </Box>
+                <Select
+                  value={formData.kategoriId}
+                  onChange={(val) => {
+                    setFormData({
+                      ...formData,
+                      kategoriId: val ?? ""
+                    })
+                  }}
+                  label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+                  placeholder="Pilih kategori"
+                  data={
+                    korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
+                      value: v.id,
+                      label: v.name,
+                    })) || []
+                  }
+                />
+                <Box>
+                  <Text fz={"md"} fw={"bold"}>File Document</Text>
+                  <Box>
+                    <Dropzone
+                      onDrop={(files) => {
+                        const selectedFile = files[0]; // Ambil file pertama
+                        if (selectedFile) {
+                          setFile(selectedFile);
+                          setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
+                        }
+                      }}
+                      onReject={() => toast.error('File tidak valid.')}
+                      maxSize={5 * 1024 ** 2} // Maks 5MB
+                      accept={{
+                        'application/*': ['.pdf', '.doc', '.docx'],
+                      }}
+                    >
+                      <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                        <Dropzone.Accept>
+                          <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                        </Dropzone.Accept>
+                        <Dropzone.Reject>
+                          <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                        </Dropzone.Reject>
+                        <Dropzone.Idle>
+                          <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                        </Dropzone.Idle>
+
+                        <div>
+                          <Text size="xl" inline>
+                            Drag file ke sini atau klik untuk pilih file
+                          </Text>
+                          <Text size="sm" c="dimmed" inline mt={7}>
+                            Maksimal 5MB dan harus format document
+                          </Text>
+                        </div>
+                      </Group>
+                    </Dropzone>
+                    <Box>
+                      <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                      {previewFile ? (
+                        <iframe
+                          src={previewFile}
+                          width="100%"
+                          height="500px"
+                          style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                        />
+                      ) : (
+                        <Text>Tidak ada dokumen tersedia</Text>
+                      )}
+                    </Box>
+                  </Box>
+                </Box>
+                <Group>
+                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+                </Group>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditDesaAntiKorupsi;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/[id]/page.tsx
@@ -0,0 +1,122 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+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(korupsiState.desaAntikorupsi)
+  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/desa-anti-korupsi/list-desa-anti-korupsi")
+    }
+  }
+
+  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 Desa Anti Korupsi</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?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{detailState.findUnique.data?.kategori?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                  {detailState.findUnique.data?.file?.link ? (
+                    <iframe
+                      src={detailState.findUnique.data.file.link}
+                      width="100%"
+                      height="500px"
+                      style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                    />
+                  ) : (
+                    <Text>Tidak ada dokumen tersedia</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/desa-anti-korupsi/list-desa-anti-korupsi/${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 desa anti korupsi ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailKegiatanDesa;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create/page.tsx
@@ -0,0 +1,166 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+function CreateDesaAntiKorupsi() {
+  const router = useRouter();
+  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi)
+  const [previewFile, setPreviewFile] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+
+  useEffect(() => {
+    stateKorupsi.findMany.load();
+    korupsiState.kategoriDesaAntiKorupsi.findMany.load();
+  }, []);
+
+  const resetForm = () => {
+    stateKorupsi.create.form = {
+      name: "",
+      deskripsi: "",
+      kategoriId: "",
+      fileId: "",
+    };
+    setFile(null);
+    setPreviewFile(null);
+  };
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file pdf terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    })
+
+    const uploaded = res.data?.data;
+
+    if (!uploaded?.id) {
+      return toast.error("Gagal mengupload file");
+    }
+
+    stateKorupsi.create.form.fileId = uploaded.id;
+
+    await stateKorupsi.create.create();
+
+    resetForm();
+    router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
+  }
+  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 Kegiatan Desa</Title>
+          <Box>
+            <Text fz={"md"} fw={"bold"}>File Document</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{
+                  'application/*': ['.pdf', '.doc', '.docx'],
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag file ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format document
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              <Box>
+                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
+                {previewFile ? (
+                  <iframe
+                    src={previewFile}
+                    width="100%"
+                    height="500px"
+                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
+                  />
+                ) : (
+                  <Text>Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+            </Box>
+          </Box>
+          <TextInput
+            value={stateKorupsi.create.form.name}
+            onChange={(val) => {
+              stateKorupsi.create.form.name = val.target.value;
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
+          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateKorupsi.create.form.deskripsi}
+              onChange={(val) => {
+                stateKorupsi.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <Select
+            value={stateKorupsi.create.form.kategoriId}
+            onChange={(val) => {
+              stateKorupsi.create.form.kategoriId = val ?? "";
+            }}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder="Pilih kategori"
+            data={
+              korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
+            }
+          />
+
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateDesaAntiKorupsi;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/page.tsx
@@ -0,0 +1,151 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useMemo, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
+
+function DesaAntiKorupsi() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='List Desa Anti Korupsi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListDesaAntiKorupsi search={search} />
+    </Box>
+  );
+}
+
+function ListDesaAntiKorupsi({ search }: { search: string }) {
+  const listState = useProxy(korupsiState.desaAntikorupsi)
+  const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = listState.findMany;
+
+  useEffect(() => {
+    load(page, 10);
+  }, [page]);
+
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.name?.toLowerCase().includes(keyword) ||
+        item.deskripsi?.toLowerCase().includes(keyword) ||
+        item.kategori?.name?.toLowerCase().includes(keyword)
+      );
+    })
+      .sort((a, b) => b.createdAt - a.createdAt);
+  }, [data, search]);
+
+  // Handle loading state
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={300} />
+      </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Desa Anti Korupsi'
+            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Kategori</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+          </Box>
+        </Paper>
+      </Box>
+    );
+  }
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Desa Anti Korupsi'
+            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
+          />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama Desa Anti Korupsi</TableTh>
+                  <TableTh>Deskripsi Desa Anti Korupsi</TableTh>
+                  <TableTh>Kategori Desa Anti Korupsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.kategori?.name}</TableTd>
+                    <TableTd>
+                      <Button onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo(0, 0);
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  )
+}
+
+export default DesaAntiKorupsi;
--- a/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/page.tsx
+++ b/src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/page.tsx
@@ -1,11 +0,0 @@
-import React from 'react';
-
-function Page() {
-  return (
-    <div>
-      Desa Anti Korupsi
-    </div>
-  );
-}
-
-export default Page;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTabs.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/layout.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/edit/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/[id]/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/create/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-bulanan/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/edit/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/[id]/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/create/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-gender-stat/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/edit/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/[id]/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/create/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/list-survey/page.tsx
+++ b/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;
--- a/src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/page.tsx
+++ b/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;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nico	54312e9486	Fix UI Menu Landing Page, Submenu Profile & Desa Anti Korupsi	2025-08-01 15:21:01 +08:00
nico	024d5517fa	UI & API Menu PPID, Submenu Struktur PPID	2025-07-31 16:22:02 +08:00
nico	4e61695649	Test AUTH - 30 Jul	2025-07-30 12:11:17 +08:00
nico	c11cc421a4	UI & API Menu Pendidikan, Submenu Perpustakaan Digital	2025-07-29 17:58:17 +08:00
nico	0109886e00	UI & API Menu Pendidikan, Submenu Beasiswa tab beasiswa pendaftar	2025-07-29 12:29:25 +08:00
nico	50e8999205	UI & API Menu Pendidikan, Submenu Data Pendidikan	2025-07-29 11:05:01 +08:00
nico	e2e1672c80	UI & API Pendidikan Non Formal	2025-07-28 17:51:42 +08:00
nico	ac0eb926eb	UI & API Menu Pendidikan & Submenu Bimbingan Belajar Desa	2025-07-28 16:45:36 +08:00
nico	b24bcd8019	UI & API Menu Pendidikan, Submenu Info Sekolah	2025-07-28 14:17:42 +08:00
nico	5601e59922	UI & API Menu Landing Page	2025-07-28 10:18:24 +08:00
nico	a25cfe8b8a	API & UI Menu Landing Page, Submenu Prestasi Desa	2025-07-24 14:49:53 +08:00
nico	b745bd4623	API & UI Menu Landing Page, Submenu SDGs Desa & APBDes	2025-07-24 11:53:58 +08:00
nico	bdf751ec3d	UI & API Menu Landing Page, Submenu Desa Anti Korupsi	2025-07-23 17:12:33 +08:00
nico	1bc6dd8dbf	UI & API Menu LandingPage, Submenu Profile	2025-07-23 12:19:10 +08:00
nico	88a10538a7	API & UI Menu Landing Page, Submenu Profile, Tabs 1 & 2 sisa tabs 3	2025-07-23 10:08:02 +08:00
nico	d4efcacf1b	API & UI Menu Landing Page, Submenu Profile	2025-07-22 17:13:56 +08:00
nico	9b2201ea57	FIX UI & API Menu Lingkungan Submenu Gotong Royong	2025-07-22 11:53:15 +08:00
nico	80a7df663e	API & UI Menu Lingkungan, Submenu Gotong Royong	2025-07-22 11:24:19 +08:00
nico	9dfcda7687	Pertama	2025-07-21 15:23:50 +08:00
nico	e2f75ff3ad	API & UI Menu Lingkungan, Submenu Edukas Lingkungan	2025-07-18 21:24:51 +08:00
nico	f05a096633	pertama	2025-07-18 17:42:10 +08:00
nico	9c55869aa6	pertama	2025-07-18 17:40:57 +08:00
nico	6e5d45fa20	pertama	2025-07-18 17:31:31 +08:00
nico	e5373b4823	pertama	2025-07-18 17:28:55 +08:00
nico	928cd048c0	pertama	2025-07-18 17:27:54 +08:00
nico	41f54772e9	API & UI Menu Lingkungan, Submenu Data Lingkungan Desa	2025-07-18 17:11:13 +08:00
nico	cd343badb2	API & UI Menu Lingkungan, Submenu Program Penghijauan	2025-07-18 16:27:38 +08:00
nico	4025771a4d	API & UI Menu Lingkungan Submenu Pengelolaan Sampah	2025-07-18 15:01:43 +08:00