Test foto gdrive

2025-08-20 11:49:57 +08:00
559 changed files with 24930 additions and 44271 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -3,9 +3,11 @@
  "version": "0.1.5",
  "private": true,
  "scripts": {
-    "dev": "bun --bun next dev",
-    "build": "bun --bun next build",
-    "start": "bun --bun next start"
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "prisma:seed": "bun run prisma/seed.ts"
  },
  "prisma": {
    "seed": "bun run prisma/seed.ts"
@@ -55,8 +57,6 @@
    "form-data": "^4.0.2",
    "framer-motion": "^12.23.5",
    "get-port": "^7.1.0",
-    "iron-session": "^8.0.4",
-    "jose": "^6.1.0",
    "jotai": "^2.12.3",
    "jsonwebtoken": "^9.0.2",
    "leaflet": "^1.9.4",
@@ -64,7 +64,7 @@
    "lodash": "^4.17.21",
    "motion": "^12.4.1",
    "nanoid": "^5.1.5",
-    "next": "^15.5.2",
+    "next": "15.1.6",
    "next-view-transitions": "^0.3.4",
    "node-fetch": "^3.3.2",
    "p-limit": "^6.2.0",
@@ -73,7 +73,6 @@
    "prisma": "^6.3.1",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
-    "react-international-phone": "^4.6.0",
    "react-leaflet": "^5.0.0",
    "react-simple-toasts": "^6.1.0",
    "react-toastify": "^11.0.5",
--- a/prisma/data/desa/layanan/pelayananSuratKeterangan.json
+++ b/prisma/data/desa/layanan/pelayananSuratKeterangan.json
@@ -47,7 +47,9 @@
    {
        "id" : "cmdxy754q000svniiiz8oqyo0",
        "name" : "Surat Keterangan Belum Kawin",
-        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Khusus bagi yang berstatus duda atau janda melampirkan fotocopy akta cerai atau dokumen pendukung lainnya</p></li></ul><p>Alur Pelayanan :</p>"
+        "deskripsi" : "<p>Persyaratan Dokumen :</p><ul><li><p>Pengantar Kelian Banjar Dinas di Wilayah Masing - masing</p></li><li><p>Fotocopy KTP atau Kartu Keluarga</p></li><li><p>Khusus bagi yang berstatus duda atau janda melampirkan fotocopy akta cerai atau dokumen pendukung lainnya</p></li></ul><p>Alur Pelayanan :</p>",
+        "imageId" : "cmeilibnt000007i66s5f73ss",
+        "image2Id" : "cmeilvjmp000007kz9kll5bd2"
    },
    {
        "id" : "cmdxy8pi2000wvnii48fc1sxd",
--- a/prisma/data/file-storage.json
+++ b/prisma/data/file-storage.json
@@ -0,0 +1,29 @@
+[
+  {
+    "id": "cmeijzdwk000207lb2u4u96wn",
+    "name": "foto_kades",
+    "realName": "kades.jpg",
+    "path": "uploads/images/kades.jpg",
+    "mimeType": "image/jpeg",
+    "link": "https://drive.google.com/file/d/18C_kzKfEWvsGepAHASb2FIwXyyrzMdu2",
+    "category": "image"
+  },
+  {
+    "id": "cmeilibnt000007i66s5f73ss",
+    "name": "surat-keterangan-belum-kawin",
+    "realName": "surat-keterangan-belum-kawin.jpg",
+    "path": "uploads/images/surat-keterangan-belum-kawin.jpg",
+    "mimeType": "image/jpeg",
+    "link": "https://drive.google.com/file/d/1S6p1gSlgf5fRt6f3UOtB7r3MIHQ4-BlU",
+    "category": "image"
+  },
+  {
+    "id": "cmeilvjmp000007kz9kll5bd2",
+    "name": "skema-surat-keterangan-belum-kawin",
+    "realName": "skema-surat-keterangan-belum-kawin.jpg",
+    "path": "uploads/images/skema-surat-keterangan-belum-kawin.jpg",
+    "mimeType": "image/jpeg",
+    "link": "https://drive.google.com/file/d/1vTXobCipplsNj21BefDuEDTHsb-CbyAz",
+    "category": "image"
+  }
+]
--- a/prisma/data/landing-page/desa-anti-korupsi/desaantiKorpusi.json
+++ b/prisma/data/landing-page/desa-anti-korupsi/desaantiKorpusi.json
@@ -3,108 +3,126 @@
        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
+        "fileId": ""
    },
    {
        "id": "cmdsa8q5q001dvnbemch8j24x",
        "name": "3.1 ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT",
        "deskripsi": "<p>ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
+        "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"
+        "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"
+        "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"
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
+        "fileId": ""
    },
    {
        "id": "cmdsabhif001pvnbepm06hry6",
        "name": "3.5 ADANYA MAKLUMAT PELAYANAN",
        "deskripsi": "<p>ADANYA MAKLUMAT PELAYANAN</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
+        "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"
+        "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"
+        "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"
+        "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"
+        "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"
+        "kategoriId": "cmds9govb000mvnbesq8b4y99",
+        "fileId": ""
    }
 ]
--- a/prisma/data/landing-page/desa-anti-korupsi/kategoriDesaAntiJKorupsi.json
+++ b/prisma/data/landing-page/desa-anti-korupsi/kategoriDesaAntiJKorupsi.json
--- a/prisma/data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json
+++ b/prisma/data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json
@@ -1,14 +1,8 @@
 [
    {
-        "id": "cmeppcwzk0000vn5exmudcipd",
-        "jenisInformasi": "Potensi Desa",
-        "deskripsi": "<p>“Potensi desa adalah segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa. Adapun potensi yang dimiliki Desa Darmasaba yaitu:</p><ol><li><p>TPS3R Pudak Mesari</p></li><li><p>Bumdes Pudak Mesari</p></li><li><p>Pertanian</p></li><li><p>Jogging Track Tegeh Aban, Karang Gadon dan Munduk Uma Desa</p></li><li><p>Taman Beji Cengana</p></li><li><p>Dam Tanah Putih</p></li><li><p>Gumuh Sari Water Park</p></li><li><p>UMKM</p></li><li><p>Kawasan Kuliner</p></li><li><p>IKM berbasis Pengolahan Pangan</p></li><li><p>Genteng</p></li><li><p>Peternakan Ikan Lele</p></li><li><p>Pemotongan Daging”</p></li></ol>",
-        "tanggal": "2021-05-25"
-    },
-    {
-        "id": "cmeppieay0001vn5e8qe658ub",
-        "jenisInformasi": "Layanan Surat Keterangan Desa",
-        "deskripsi": "<p>“Desa Darmasaba menyediakan berbagai jenis layanan surat keterangan untuk kebutuhan administratif, antara lain:</p><ul><li><p>Surat Keterangan Domisili Organisasi</p></li><li><p>Surat Keterangan Penghasilan</p></li><li><p>Surat Keterangan Tidak Mampu</p></li><li><p>Surat Keterangan Kelahiran</p></li><li><p>Surat Keterangan Usaha</p></li><li><p>Surat Keterangan Tempat Usaha</p></li><li><p>Surat Keterangan Belum Kawin</p></li><li><p>Surat Keterangan Kelakuan Baik (Pengantar SKCK)</p></li><li><p>Surat Keterangan Kematian</p></li><li><p>Surat Keterangan Perbedaan Biodata Diri</p></li><li><p>Surat Keterangan Yatim/Piatu/Yatim Piatu<br>Untuk surat keterangan lainnya, masyarakat dapat berkonsultasi langsung ke kantor Perbekel Darmasaba.”<br><em>(Sumber: Laman Layanan Desa Darmasaba)</em></p></li></ul>",
-        "tanggal": "2025-02-21"
+        "id": "1",
+        "jenisInformasi": "Peraturan Desa",
+        "deskripsi": "Dokumen yang berisi kebijakan dan regulasi desa",
+        "tanggal": "15 Januari 2024"
    }
 ]
--- a/prisma/data/ppid/profile-ppid/profilePPid.json
+++ b/prisma/data/ppid/profile-ppid/profilePPid.json
@@ -5,6 +5,7 @@
    "biodata": "<p>I.B Surya Prabhawa Manuaba, S.H., M.H., adalah Perbekel Darmasaba periode 2021-2027, seorang advokat, pendiri Mantra Legal Consultants & Advocates, serta aktif di bidang musik dan akademis. Dia menempuh pendidikan hukum di Universitas Udayana dan Universitas Mahasaraswati Denpasar, serta memiliki pengalaman luas di berbagai organisasi dan kepemimpinan.</p>",
    "riwayat": "<ul> <li>2021 - 2027: Perbekel Desa Darmasaba</li> <li>2015 - Sekarang: Founder & Managing Director Mantra Legal Consultants & Advocates</li> <li>2020 - Sekarang: Founder Ugawa Record Music Studio</li> <li>2010 - 2016: Dosen Fakultas Hukum Universitas Mahasaraswati Denpasar</li> </ul>",
    "pengalaman": "<ul> <li>1996 – 1997: Ketua OSIS SMP Negeri 1 Abiansemal</li><li>1999 – 2000: Ketua OSIS SMA Negeri 1 Mengwi</li> <li>2008 – 2009: Ketua BEM Universitas Mahasaraswati Denpasar</li> <li>2008 – 2010: Ketua Sekaa Taruna Sila Dharma, Banjar Tengah, Desa Adat Tegal, Darmasaba</li> <li>2020 – Sekarang: Pengurus Young Lawyer Committee Peradi Denpasar</li> <li>2021 – Sekarang: Dewan Kehormatan Himpunan Pengusaha Muda Indonesia (HIPMI) Badung</li> <li>2023 – 2028: Komite Tetap Advokasi – Bidang Hukum dan Regulasi Kamar Dagang dan Industri Badung</li> </ul>",
-    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>"
+    "unggulan": "<h3>Pemberdayaan Ekonomi dan UMKM</h3> <ul> <li>Pelatihan dan pendampingan UMKM lokal</li> <li>Program bantuan modal usaha bagi pelaku usaha kecil</li><li>Digitalisasi UMKM untuk meningkatkan pemasaran produk lokal</li></ul>",
+    "imageId": "cmeijzdwk000207lb2u4u96wn"
  }
 ]
--- a/prisma/data/user/role.json
+++ b/prisma/data/user/role.json
@@ -0,0 +1,6 @@
+[
+    {
+        "id": "cmdpm429r0000vnndkcwslt0h",
+        "name": "warga"
+    }
+]
--- a/prisma/data/user/roles.json
+++ b/prisma/data/user/roles.json
@@ -1,29 +0,0 @@
-[
-    {
-      "id": "1",
-      "name": "ADMIN DESA",
-      "description": "Administrator Desa",
-      "permissions": ["manage_users", "manage_content", "view_reports"],
-      "isActive": true,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    },
-    {
-      "id": "2",
-      "name": "ADMIN KESEHATAN",
-      "description": "Administrator Bidang Kesehatan",
-      "permissions": ["manage_health_data", "view_reports"],
-      "isActive": true,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    },
-    {
-      "id": "3",
-      "name": "ADMIN SEKOLAH",
-      "description": "Administrator Sekolah",
-      "permissions": ["manage_school_data", "view_reports"],
-      "isActive": true,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    }
-  ]
--- a/prisma/data/user/users.json
+++ b/prisma/data/user/users.json
@@ -1,32 +0,0 @@
-[
-    {
-      "id": "1",
-      "nama": "Admin Desa",
-      "nomor": "089647037426",
-      "roleId": "1",
-      "isActive": true,
-      "lastLogin": "2025-08-31T10:00:00.000Z",
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    },
-    {
-      "id": "2",
-      "nama": "Admin Kesehatan",
-      "nomor": "082339004198",
-      "roleId": "2",
-      "isActive": true,
-      "lastLogin": null,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    },
-    {
-      "id": "3",
-      "nama": "Admin Sekolah",
-      "nomor": "085237157222",
-      "roleId": "3",
-      "isActive": true,
-      "lastLogin": null,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    }
-  ]
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -85,6 +85,7 @@ model FileStorage {
  KontakItem                     KontakItem[]
  Pegawai                        Pegawai[]
  DesaDigital                    DesaDigital[]
+  KolaborasiInovasi              KolaborasiInovasi[]
  InfoTekno                      InfoTekno[]
  PengaduanMasyarakat            PengaduanMasyarakat[]
  KegiatanDesa                   KegiatanDesa[]
@@ -99,8 +100,6 @@ model FileStorage {
  DataPerpustakaan               DataPerpustakaan[]
  PegawaiPPID                    PegawaiPPID[]
  PerbekelDariMasaKeMasa         PerbekelDariMasaKeMasa[]
-
-  MitraKolaborasi MitraKolaborasi[]
 }

 //========================================= MENU LANDING PAGE ========================================= //
@@ -202,8 +201,8 @@ model PrestasiDesa {
  deskripsi  String               @db.Text
  kategori   KategoriPrestasiDesa @relation(fields: [kategoriId], references: [id])
  kategoriId String
-  image      FileStorage?         @relation(fields: [imageId], references: [id])
-  imageId    String?
+  image      FileStorage          @relation(fields: [imageId], references: [id])
+  imageId    String
  createdAt  DateTime             @default(now())
  updatedAt  DateTime             @updatedAt
  deletedAt  DateTime             @default(now())
@@ -224,7 +223,7 @@ model KategoriPrestasiDesa {
 model Responden {
  id             String                 @id @default(cuid())
  name           String                 @unique
-  tanggal        DateTime               @db.Date // misal: 2025-05-01
+  tanggal        String // misal: 2025-05-01
  jenisKelamin   JenisKelaminResponden  @relation(fields: [jenisKelaminId], references: [id])
  jenisKelaminId String
  rating         PilihanRatingResponden @relation(fields: [ratingId], references: [id])
@@ -293,9 +292,6 @@ model PosisiOrganisasiPPID {
  pegawai            PegawaiPPID[]
  strukturOrganisasi StrukturPPID[] // Relasi balik
  parentId           String?
-  isActive           Boolean                @default(true)
-  createdAt          DateTime               @default(now())
-  updatedAt          DateTime               @updatedAt
  parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
  children           PosisiOrganisasiPPID[] @relation("Parent")
 }
@@ -1551,7 +1547,7 @@ model DataDemografiPekerjaan {
 model DetailDataPengangguran {
  id                     String   @id @default(uuid()) @db.Uuid
  month                  String   @db.VarChar(20)
-  year                   DateTime
+  year                   Int
  totalUnemployment      Int
  educatedUnemployment   Int
  uneducatedUnemployment Int
@@ -1639,27 +1635,18 @@ model ProgramKreatif {

 // ========================================= KOLABORASI INOVASI ========================================= //
 model KolaborasiInovasi {
-  id          String   @id @default(cuid())
+  id          String      @id @default(cuid())
  name        String
  tahun       Int
-  slug        String   @db.Text //deskripsi singkat
-  deskripsi   String   @db.Text //deskripsi panjang
+  slug        String      @db.Text //deskripsi singkat
+  deskripsi   String      @db.Text //deskripsi panjang
  kolaborator String
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
-  deletedAt   DateTime @default(now())
-  isActive    Boolean  @default(true)
-}
-
-model MitraKolaborasi {
-  id        String       @id @default(cuid())
-  name      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)
+  image       FileStorage @relation(fields: [imageId], references: [id])
+  imageId     String
+  createdAt   DateTime    @default(now())
+  updatedAt   DateTime    @updatedAt
+  deletedAt   DateTime    @default(now())
+  isActive    Boolean     @default(true)
 }

 // ========================================= INFO TEKHNOLOGI TEPAT GUNA ========================================= //
@@ -2103,66 +2090,26 @@ model KategoriBuku {
  DataPerpustakaan DataPerpustakaan[]
 }

-// ========================================= USER ========================================= //
-
 model User {
-  id        String    @id @default(cuid())
-  username  String
-  nomor     String    @unique
-  role      Role      @relation(fields: [roleId], references: [id])
-  roleId    String    @default("1")
-  instansi  String?
-  UserSession UserSession? // Nama instansi (Puskesmas, Sekolah, dll)
-  isActive  Boolean   @default(true)
-  lastLogin DateTime?
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime?
-}
-
-model Role {
-  id          String    @id @default(cuid())
-  name        String    @unique // ADMIN_DESA, ADMIN_KESEHATAN, ADMIN_SEKOLAH
-  description String?
-  permissions Json // Menyimpan permission dalam format JSON
-  isActive    Boolean   @default(true)
-  createdAt   DateTime  @default(now())
-  updatedAt   DateTime  @updatedAt
-  deletedAt   DateTime?
-  users       User[]
-
-  @@map("roles")
-}
-
-model KodeOtp {
  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
-  nomor     String
-  otp       Int
 }

-// Tabel untuk menyimpan permission
-model Permission {
-  id          String   @id @default(cuid())
-  name        String   @unique
-  description String?
-  createdAt   DateTime @default(now())
-  updatedAt   DateTime @updatedAt
-
-  @@map("permissions")
-}
-
-model UserSession {
-  id        String    @id @default(cuid())
-  token     String
-  expires   DateTime?
-  active    Boolean   @default(true)
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @default(now()) @updatedAt
-  User      User      @relation(fields: [userId], references: [id])
-  userId    String    @unique
+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 ========================================= //
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -1,119 +1,85 @@
 import prisma from "@/lib/prisma";
+import fs from "fs/promises";
+import path from "path";
 import profilePejabatDesa from "./data/landing-page/profile/profile.json";
+import penghargaan from "./data/landing-page/penghargaan/penghargaan.json";
 import programInovasi from "./data/landing-page/profile/programInovasi.json";
 import mediaSosial from "./data/landing-page/profile/mediaSosial.json";
-import desaAntiKorupsi from "./data/landing-page/desa-anti-korupsi/desaantiKorpusi.json";
-import kategoriDesaAntiKorupsi from "./data/landing-page/desa-anti-korupsi/kategoriDesaAntiKorupsi.json";
 import sdgsDesa from "./data/landing-page/sdgs-desa/sdgs-desa.json";
 import apbdes from "./data/landing-page/apbdes/apbdes.json";
-import kategoriPrestasiDesa from "./data/landing-page/prestasi-desa/kategori-prestasi.json";
-import prestasiDesa from "./data/landing-page/prestasi-desa/prestasi-desa.json";
-import penghargaan from "./data/landing-page/penghargaan/penghargaan.json";
-import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
-import pegawaiPPID from "./data/ppid/struktur-ppid/pegawai-PPID.json";
-import posisiOrganisasiPPID from "./data/ppid/struktur-ppid/posisi-organisasi-PPID.json";
-import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
-import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
-import jenisKelamin from "./data/ppid/ikm/jenis-kelamin/jenis-kelamin.json";
-import daftarInformasiPublik from "./data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json"
-import pilihanRatingResponden from "./data/ppid/ikm/pilihan-rating-responden/rating-responden.json";
-import umurResponden from "./data/ppid/ikm/umur-responden/umur-responden.json";
-import categoryPengumuman from "./data/category-pengumuman.json";
-import pelayananPerizinanBerusaha from "./data/desa/layanan/pelayananPerizinanBerusaha.json";
 import pelayananSuratKeterangan from "./data/desa/layanan/pelayananSuratKeterangan.json";
-import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSaktiDesa.json";
-import pelayananPendudukNonPermanen from "./data/desa/layanan/pelayanaPendudukNonPermanen.json";
-import lambangDesa from "./data/desa/profile/lambang_desa.json";
-import maskotDesa from "./data/desa/profile/maskot_desa.json";
-import profilPerbekel from "./data/desa/profile/profil_perbekel.json";
-import sejarahDesa from "./data/desa/profile/sejarah_desa.json";
-import visiMisiDesa from "./data/desa/profile/visi_misi_desa.json";
-import detailDataPengangguran from "./data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json";
-import kategoriProduk from "./data/ekonomi/pasar-desa/kategori-produk.json";
-import hubunganOrganisasi from "./data/ekonomi/struktur-organisasi/hubungan-organisasi.json";
-import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
-import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi.json";
+import categoryPengumuman from "./data/category-pengumuman.json";
 import kategoriBerita from "./data/kategori-berita.json";
-import contohEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json";
-import materiEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
-import tujuanEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.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 nilaiKonservasiAdat from "./data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json";
 import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
 import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInformasi.json";
 import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
+import layanan from "./data/list-layanan.json";
 import potensi from "./data/list-potensi.json";
-import fasilitasBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json";
-import lokasiJadwalBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json";
-import tujuanBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json";
-import jenisProgramYangDiselenggarakan from "./data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json";
-import tempatKegiatan from "./data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json";
+import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
+import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
+import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
+import jenisKelamin from "./data/ppid/ikm/jenis-kelamin/jenis-kelamin.json";
+import pilihanRatingResponden from "./data/ppid/ikm/pilihan-rating-responden/rating-responden.json";
+import umurResponden from "./data/ppid/ikm/umur-responden/umur-responden.json";
+import pelayananPerizinanBerusaha from "./data/desa/layanan/pelayananPerizinanBerusaha.json";
+import pelayananPendudukNonPermanen from "./data/desa/layanan/pelayanaPendudukNonPermanen.json";
+import sejarahDesa from "./data/desa/profile/sejarah_desa.json";
+import visiMisiDesa from "./data/desa/profile/visi_misi_desa.json";
+import lambangDesa from "./data/desa/profile/lambang_desa.json";
+import maskotDesa from "./data/desa/profile/maskot_desa.json";
+import profilPerbekel from "./data/desa/profile/profil_perbekel.json";
+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 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 tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-program.json";
-import roles from "./data/user/roles.json";
-import users from "./data/user/users.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";
+import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSaktiDesa.json";

 (async () => {
-  // =========== USER & ROLE ===========
-  // In your seed.ts
-// =========== ROLES ===========
-console.log("🔄 Seeding roles...");
-for (const r of roles) {
-  await prisma.role.upsert({
-    where: { id: r.id },
-    update: {
-      name: r.name,
-      description: r.description,
-      permissions: r.permissions,
-      isActive: r.isActive,
-    },
-    create: {
-      id: r.id,
-      name: r.name,
-      description: r.description,
-      permissions: r.permissions,
-      isActive: r.isActive,
-    },
-  });
-}
-console.log("✅ Roles seeded");
+  //seed file storage
+  const filePath = path.join(__dirname, "data/file-storage.json");
+  const rawData = await fs.readFile(filePath, "utf-8");
+  const files = JSON.parse(rawData);

-// =========== USERS ===========
-console.log("🔄 Seeding users...");
-for (const u of users) {
-  // First verify the role exists
-  const roleExists = await prisma.role.findUnique({
-    where: { id: u.roleId }
-  });
-  
-  if (!roleExists) {
-    console.error(`❌ Role with id ${u.roleId} not found for user ${u.nama}`);
-    continue;
+  console.log(`Seeding ${files.length} file(s) into FileStorage...`);
+
+  for (const file of files) {
+    await prisma.fileStorage.upsert({
+      where: { name: file.name },
+      update: {},
+      create: {
+        id: file.id,
+        name: file.name,
+        realName: file.realName,
+        path: file.path,
+        link: file.link,
+        category: file.category,
+        mimeType: file.mimeType,
+        isActive: file.isActive ?? true,
+      },
+    });
  }

-  await prisma.user.upsert({
-    where: { id: u.id },
-    update: {
-      username: u.nama,
-      nomor: u.nomor,
-      roleId: u.roleId,
-      isActive: u.isActive,
-    },
-    create: {
-      id: u.id,
-      username: u.nama,
-      nomor: u.nomor,
-      roleId: u.roleId,
-      isActive: u.isActive,
-    },
-  });
-}
-console.log("✅ Users seeded");
+  console.log("✅ Seeding selesai!");
+
  // =========== LANDING PAGE ===========
-  // =========== SUBMENU PROFILE ===========
-  // =========== PROFILE PEJABAT DESA ===========
+  // =========== PROFILE ===========
  for (const p of profilePejabatDesa) {
    await prisma.pejabatDesa.upsert({
      where: { id: p.id },
@@ -168,90 +134,6 @@ console.log("✅ Users seeded");
  }
  console.log("media sosial success ...");

-  // =========== SUBMENU DESA ANTI KORUPSI ===========
-  // =========== KATEGORI DESA ANTI KORUPSI ===========
-  for (const k of kategoriDesaAntiKorupsi) {
-    await prisma.kategoriDesaAntiKorupsi.upsert({
-      where: { id: k.id },
-      update: {
-        name: k.name,
-      },
-      create: {
-        id: k.id,
-        name: k.name,
-      },
-    });
-  }
-  console.log("kategori desa anti korupsi success ...");
-
-  // =========== DESA ANTI KORUPSI ===========
-  for (const p of desaAntiKorupsi) {
-    await prisma.desaAntiKorupsi.upsert({
-      where: { id: p.id },
-      update: {
-        name: p.name,
-        deskripsi: p.deskripsi,
-        kategoriId: p.kategoriId,
-      },
-      create: {
-        id: p.id,
-        name: p.name,
-        deskripsi: p.deskripsi,
-        kategoriId: p.kategoriId,
-      },
-    });
-  }
-  console.log("desa anti korupsi success ...");
-
-  // =========== KATEGORI DESA ANTI KORUPSI ===========
-  for (const p of kategoriDesaAntiKorupsi) {
-    await prisma.kategoriDesaAntiKorupsi.upsert({
-      where: { id: p.id },
-      update: {
-        name: p.name,
-      },
-      create: {
-        id: p.id,
-        name: p.name,
-      },
-    });
-  }
-  console.log("desa anti korupsi success ...");
-
-  // =========== KATEGORI PRESTASI DESA===========
-  for (const c of kategoriPrestasiDesa) {
-    await prisma.kategoriPrestasiDesa.upsert({
-      where: { id: c.id },
-      update: {
-        name: c.name,
-      },
-      create: {
-        id: c.id,
-        name: c.name,
-      },
-    });
-  }
-  console.log("kategori prestasi desa success ...");
-
-  // =========== PRESTASI DESA===========
-  for (const p of prestasiDesa) {
-    await prisma.prestasiDesa.upsert({
-      where: { id: p.id },
-      update: {
-        name: p.name,
-        deskripsi: p.deskripsi,
-        kategoriId: p.kategoriId,
-      },
-      create: {
-        id: p.id,
-        name: p.name,
-        deskripsi: p.deskripsi,
-        kategoriId: p.kategoriId,
-      },
-    });
-  }
-  console.log("prestasi desa success ...");
-
  // =========== PENGHARGAAN ===========
  for (const p of penghargaan) {
    await prisma.penghargaan.upsert({
@@ -273,16 +155,26 @@ console.log("✅ Users seeded");

  // =========== LAYANAN DESA ===========
  for (const p of pelayananSuratKeterangan) {
+    // Skip if required image references don't exist
+    if (!p.imageId || !p.image2Id) {
+      console.warn(`Skipping ${p.name} due to missing image references`);
+      continue;
+    }
+
    await prisma.pelayananSuratKeterangan.upsert({
      where: { id: p.id },
      update: {
        name: p.name,
        deskripsi: p.deskripsi,
+        imageId: p.imageId,
+        image2Id: p.image2Id,
      },
      create: {
        id: p.id,
        name: p.name,
        deskripsi: p.deskripsi,
+        imageId: p.imageId,
+        image2Id: p.image2Id,
      },
    });
  }
@@ -306,6 +198,23 @@ console.log("✅ Users seeded");
  }
  console.log("pelayanan surat keterangan success ...");

+  // =========== LAYANAN ===========
+  for (const l of layanan) {
+    await prisma.layanan.upsert({
+      where: {
+        name: l.name,
+      },
+      update: {
+        name: l.name,
+      },
+      create: {
+        name: l.name,
+      },
+    });
+  }
+
+  console.log("layanan success ...");
+
  // =========== SDGSDesa ===========
  for (const l of sdgsDesa) {
    await prisma.sDGSDesa.upsert({
@@ -346,9 +255,6 @@ console.log("✅ Users seeded");

  console.log("sdgs desa success ...");

-  // =========== MENU DESA ===========
-  // =========== SUBMENU PROFILE ===========
-  // =========== SEJARAH DESA ===========
  for (const l of sejarahDesa) {
    await prisma.sejarahDesa.upsert({
      where: {
@@ -368,7 +274,6 @@ console.log("✅ Users seeded");

  console.log("sejarah desa success ...");

-  // =========== MASKOT DESA ===========
  for (const l of maskotDesa) {
    await prisma.maskotDesa.upsert({
      where: {
@@ -388,7 +293,6 @@ console.log("✅ Users seeded");

  console.log("maskot desa success ...");

-  // =========== LAMBANG DESA ===========
  for (const l of lambangDesa) {
    await prisma.lambangDesa.upsert({
      where: {
@@ -408,7 +312,6 @@ console.log("✅ Users seeded");

  console.log("lambang desa success ...");

-  // =========== PROFIL PERBEKEL ===========
  for (const c of profilPerbekel) {
    await prisma.profilPerbekel.upsert({
      where: { id: c.id },
@@ -433,7 +336,6 @@ console.log("✅ Users seeded");
    "✅ profilePerbekel seeded without imageId (editable later via UI)"
  );

-  // =========== VISI MISI DESA ===========
  for (const l of visiMisiDesa) {
    await prisma.visiMisiDesa.upsert({
      where: {
@@ -453,35 +355,6 @@ console.log("✅ Users seeded");

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

-  // =========== MENU PPID ===========
-  // =========== SUBMENU PROFILE PPID ===========
-  for (const c of profilePPID) {
-    await prisma.profilePPID.upsert({
-      where: { id: c.id },
-      update: {
-        name: c.name,
-        biodata: c.biodata,
-        riwayat: c.riwayat,
-        pengalaman: c.pengalaman,
-        unggulan: c.unggulan,
-        // imageId tidak di-update
-      },
-      create: {
-        id: c.id,
-        name: c.name,
-        biodata: c.biodata,
-        riwayat: c.riwayat,
-        pengalaman: c.pengalaman,
-        unggulan: c.unggulan,
-        // imageId tidak di-create
-      },
-    });
-  }
-  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
-
-  // =========== SUBMENU STRUKTUR PPID ===========
-  // =========== POSISI ORGANISASI PPID ===========
-
  const flattenedPosisi = posisiOrganisasiPPID.flat();

  // ✅ Urutkan berdasarkan hierarki
@@ -506,9 +379,9 @@ console.log("✅ Users seeded");
      create: p,
    });
  }
-  console.log("posisi organisasi berhasil");
+  console.log("✅ Posisi organisasi berhasil");

-  // =========== PEGAWAI PPID ===========
+  // 2. Seed Pegawai
  const flattenedPegawai = pegawaiPPID.flat();
  for (const p of flattenedPegawai) {
    await prisma.pegawaiPPID.upsert({
@@ -517,70 +390,7 @@ console.log("✅ Users seeded");
      create: p,
    });
  }
-  console.log("pegawai berhasil");
-
-  // =========== SUBMENU VISI MISI PPID ===========
-
-  for (const v of visiMisiPPID) {
-    await prisma.visiMisiPPID.upsert({
-      where: {
-        id: v.id,
-      },
-      update: {
-        misi: v.misi,
-        visi: v.visi,
-      },
-      create: {
-        id: v.id,
-        misi: v.misi,
-        visi: v.visi,
-      },
-    });
-  }
-  console.log("visi misi PPID success ...");
-
-  // =========== SUBMENU DASAR HUKUM PPID ===========
-  for (const v of dasarHukumPPID) {
-    await prisma.dasarHukumPPID.upsert({
-      where: {
-        id: v.id,
-      },
-      update: {
-        judul: v.judul,
-        content: v.content,
-      },
-      create: {
-        id: v.id,
-        judul: v.judul,
-        content: v.content,
-      },
-    });
-  }
-  console.log("dasar hukum PPID success ...");
-
-    // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
-    for (const v of daftarInformasiPublik) {
-      // Convert string date to Date object
-      const tanggal = new Date(v.tanggal);
-      
-      await prisma.daftarInformasiPublik.upsert({
-        where: {
-          id: v.id,
-        },
-        update: {
-          jenisInformasi: v.jenisInformasi,
-          deskripsi: v.deskripsi,
-          tanggal: tanggal,
-        },
-        create: {
-          id: v.id,
-          jenisInformasi: v.jenisInformasi,
-          deskripsi: v.deskripsi,
-          tanggal: tanggal,
-        },
-      });
-    }
-    console.log("daftar informasi publik PPID success ...");
+  console.log("✅ Pegawai berhasil");

  for (const l of pelayananPerizinanBerusaha) {
    await prisma.pelayananPerizinanBerusaha.upsert({
@@ -714,6 +524,48 @@ console.log("✅ Users seeded");
  }
  console.log("cara memperoleh salinan informasi success ...");

+  for (const c of profilePPID) {
+    await prisma.profilePPID.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        imageId: c.imageId,
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        imageId: c.imageId,
+      },
+    });
+  }
+  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
+
+  for (const v of visiMisiPPID) {
+    await prisma.visiMisiPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        misi: v.misi,
+        visi: v.visi,
+      },
+      create: {
+        id: v.id,
+        misi: v.misi,
+        visi: v.visi,
+      },
+    });
+  }
+  console.log("visi misi PPID success ...");
+
  for (const j of jenisKelamin) {
    await prisma.jenisKelaminResponden.upsert({
      where: {
@@ -762,6 +614,24 @@ console.log("✅ Users seeded");
  }
  console.log("umur responden success ...");

+  for (const v of dasarHukumPPID) {
+    await prisma.dasarHukumPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        judul: v.judul,
+        content: v.content,
+      },
+      create: {
+        id: v.id,
+        judul: v.judul,
+        content: v.content,
+      },
+    });
+  }
+  console.log("dasar hukum PPID success ...");
+
  for (const k of kategoriProduk) {
    await prisma.kategoriProduk.upsert({
      where: {
@@ -849,12 +719,9 @@ console.log("✅ Users seeded");
  console.log("hubungan organisasi success ...");

  for (const d of detailDataPengangguran) {
-    // Convert the year to a Date object (using January 1st of the year as the date)
-    const yearAsDate = new Date(d.year, 0, 1);
-
    await prisma.detailDataPengangguran.upsert({
      where: {
-        month_year: { month: d.month, year: yearAsDate },
+        month_year: { month: d.month, year: d.year },
      },
      update: {
        totalUnemployment: d.totalUnemployment,
@@ -864,7 +731,7 @@ console.log("✅ Users seeded");
      },
      create: {
        month: d.month,
-        year: yearAsDate,
+        year: d.year,
        totalUnemployment: d.totalUnemployment,
        educatedUnemployment: d.educatedUnemployment,
        uneducatedUnemployment: d.uneducatedUnemployment,
--- a/src/app/admin/(dashboard)/_com/LeafletMultiMarkerMap.tsx
+++ b/src/app/admin/(dashboard)/_com/LeafletMultiMarkerMap.tsx
@@ -1,62 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-'use client';
-
-import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
-import { LatLngExpression } from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import L from 'leaflet';
-import { useEffect } from 'react';
-
-type MarkerData = {
-  position: [number, number];
-  popup: string;
-};
-
-type Props = {
-  center: [number, number];
-  markers: MarkerData[];
-  zoom?: number;
-  scrollWheelZoom?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-export default function LeafletMultiMarkerMap({
-  center,
-  markers,
-  zoom = 13,
-  scrollWheelZoom = true,
-  className = '',
-  style = { height: '100%', width: '100%', zIndex: 0 },
-}: Props) {
-  // Fix for default marker icons in Next.js
-  useEffect(() => {
-    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',
-    });
-  }, []);
-
-  return (
-    <div className={className} style={style}>
-      <MapContainer
-        center={center as LatLngExpression}
-        zoom={zoom}
-        scrollWheelZoom={scrollWheelZoom}
-        style={{ height: '100%', width: '100%' }}
-      >
-        <TileLayer
-          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-        />
-        {markers.map((marker, index) => (
-          <Marker key={index} position={marker.position as LatLngExpression}>
-            <Popup>{marker.popup}</Popup>
-          </Marker>
-        ))}
-      </MapContainer>
-    </div>
-  );
-}
--- a/src/app/admin/(dashboard)/_state/desa/berita.ts
+++ b/src/app/admin/(dashboard)/_state/desa/berita.ts
@@ -74,18 +74,18 @@ const berita = proxy({
    totalPages: 1,
    loading: false,
    search: "",
-    load: async (page = 1, limit = 10, search = "", kategori = "") => {
+   load: async (page = 1, limit = 10, search = "", kategori = "") => {
      berita.findMany.loading = true; // ✅ Akses langsung via nama path
      berita.findMany.page = page;
      berita.findMany.search = search;
-
+  
      try {
        const query: any = { page, limit };
        if (search) query.search = search;
        if (kategori) query.kategori = kategori;
-
+    
        const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
-
+    
        if (res.status === 200 && res.data?.success) {
          berita.findMany.data = res.data.data ?? [];
          berita.findMany.totalPages = res.data.totalPages ?? 1;
@@ -368,37 +368,11 @@ const kategoriBerita = proxy({
        isActive: true;
      };
    }>[],
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      kategoriBerita.findMany.loading = true; // ✅ Akses langsung via nama path
-      kategoriBerita.findMany.page = page;
-      kategoriBerita.findMany.search = search;
-
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-
-        const res = await ApiFetch.api.desa.kategoriberita[
-          "findMany"
-        ].get({ query });
-
-        if (res.status === 200 && res.data?.success) {
-          kategoriBerita.findMany.data = res.data.data ?? [];
-          kategoriBerita.findMany.totalPages =
-            res.data.totalPages ?? 1;
-        } else {
-          kategoriBerita.findMany.data = [];
-          kategoriBerita.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch kategori berita paginated:", err);
-        kategoriBerita.findMany.data = [];
-        kategoriBerita.findMany.totalPages = 1;
-      } finally {
-        kategoriBerita.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.desa.kategoriberita["findMany"].get();
+      if (res.status === 200) {
+        kategoriBerita.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/desa/layananDesa.ts
+++ b/src/app/admin/(dashboard)/_state/desa/layananDesa.ts
@@ -30,6 +30,7 @@ const templateTelunjukSaktiDesaForm = z.object({
  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
 });

+
 const templatePelayananPerizinanBerusaha = z.object({
  name: z.string().min(3, "Nama minimal 3 karakter"),
  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
@@ -71,6 +72,7 @@ const pelayananPendudukNonPermanenForm = {
  deskripsi: "",
 };

+
 const suratKeterangan = proxy({
  create: {
    form: { ...suratKeteranganForm },
@@ -111,21 +113,16 @@ const suratKeterangan = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      suratKeterangan.findMany.loading = true; // Use the full path to access the property
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      suratKeterangan.findMany.loading = true;  // Use the full path to access the property
      suratKeterangan.findMany.page = page;
-      suratKeterangan.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
        const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
          "find-many"
        ].get({
-          query,
+          query: { page, limit },
        });
-
+  
        if (res.status === 200 && res.data?.success) {
          suratKeterangan.findMany.data = res.data.data || [];
          suratKeterangan.findMany.total = res.data.total || 0;
@@ -344,34 +341,28 @@ const pelayananTelunjukSaktiDesa = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      pelayananTelunjukSaktiDesa.findMany.loading = true; // Use the full path to access the property
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      pelayananTelunjukSaktiDesa.findMany.loading = true;  // Use the full path to access the property
      pelayananTelunjukSaktiDesa.findMany.page = page;
-      pelayananTelunjukSaktiDesa.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
        const res = await ApiFetch.api.desa.layanan.pelayanantelunjuksaktidesa[
          "find-many"
        ].get({
-          query,
+          query: { page, limit },
        });
-
+  
        if (res.status === 200 && res.data?.success) {
          pelayananTelunjukSaktiDesa.findMany.data = res.data.data || [];
          pelayananTelunjukSaktiDesa.findMany.total = res.data.total || 0;
-          pelayananTelunjukSaktiDesa.findMany.totalPages =
-            res.data.totalPages || 1;
+          pelayananTelunjukSaktiDesa.findMany.totalPages = res.data.totalPages || 1;
        } else {
-          console.error("Failed to load surat keterangan:", res.data?.message);
+          console.error("Failed to load telunjuk sakti desa:", res.data?.message);
          pelayananTelunjukSaktiDesa.findMany.data = [];
-          suratKeterangan.findMany.total = 0;
-          suratKeterangan.findMany.totalPages = 1;
+          pelayananTelunjukSaktiDesa.findMany.total = 0;
+          pelayananTelunjukSaktiDesa.findMany.totalPages = 1;
        }
      } catch (error) {
-        console.error("Error loading surat keterangan:", error);
+        console.error("Error loading telunjuk sakti desa:", error);
        pelayananTelunjukSaktiDesa.findMany.data = [];
        pelayananTelunjukSaktiDesa.findMany.total = 0;
        pelayananTelunjukSaktiDesa.findMany.totalPages = 1;
@@ -419,9 +410,7 @@ const pelayananTelunjukSaktiDesa = proxy({
        );
        const result = await response.json();
        if (response.ok) {
-          toast.success(
-            result.message || "Telunjuk Sakti Desa berhasil dihapus"
-          );
+          toast.success(result.message || "Telunjuk Sakti Desa berhasil dihapus");
          await pelayananTelunjukSaktiDesa.findMany.load(); // refresh list
        } else {
          toast.error(result.message || "Gagal menghapus telunjuk sakti desa");
@@ -512,9 +501,7 @@ const pelayananTelunjukSaktiDesa = proxy({
        }
        const result = await response.json();
        if (result.success) {
-          toast.success(
-            result.message || "Telunjuk Sakti Desa berhasil diupdate"
-          );
+          toast.success(result.message || "Telunjuk Sakti Desa berhasil diupdate");
          await pelayananTelunjukSaktiDesa.findMany.load(); // refresh list
          return true;
        } else {
@@ -535,7 +522,7 @@ const pelayananTelunjukSaktiDesa = proxy({
      }
    },
  },
-});
+})

 const pelayananPerizinanBerusaha = proxy({
  findById: {
@@ -609,7 +596,9 @@ const pelayananPerizinanBerusaha = proxy({
      } catch (error) {
        console.error("Error fetching pelayanan perizinan berusaha:", error);
        toast.error(
-          error instanceof Error ? error.message : "Gagal memuat data"
+          error instanceof Error
+            ? error.message
+            : "Gagal memuat data"
        );
        return null;
      }
@@ -724,7 +713,9 @@ const pelayananPendudukNonPermanen = proxy({
      } catch (error) {
        console.error("Error fetching pelayanan penduduk non permanen:", error);
        toast.error(
-          error instanceof Error ? error.message : "Gagal memuat data"
+          error instanceof Error
+            ? error.message
+            : "Gagal memuat data"
        );
        return null;
      }
--- a/src/app/admin/(dashboard)/_state/desa/penghargaan.ts
+++ b/src/app/admin/(dashboard)/_state/desa/penghargaan.ts
@@ -56,21 +56,16 @@ const penghargaanState = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      penghargaanState.findMany.loading = true; // Use the full path to access the property
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
+      penghargaanState.findMany.loading = true;  // Use the full path to access the property
      penghargaanState.findMany.page = page;
-      penghargaanState.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
        const res = await ApiFetch.api.desa.penghargaan[
          "find-many"
        ].get({
-          query,
+          query: { page, limit },
        });
-
+  
        if (res.status === 200 && res.data?.success) {
          penghargaanState.findMany.data = res.data.data || [];
          penghargaanState.findMany.total = res.data.total || 0;
--- a/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
+++ b/src/app/admin/(dashboard)/_state/desa/pengumuman.ts
@@ -55,39 +55,11 @@ const category = proxy({
        pengumumans: number;
      };
    })[],
-    page: 1,
-    totalPages: 1,
-    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
-      category.findMany.loading = true;  // Use the full path to access the property
-      category.findMany.page = page;
-      category.findMany.search = search;
-      try {
-        const res = await ApiFetch.api.desa.kategoripengumuman[
-          "findMany"
-        ].get({
-          query: { page, limit },
-        });
-  
-        if (res.status === 200 && res.data?.success) {
-          category.findMany.data = res.data.data || [];
-          category.findMany.total = res.data.total || 0;
-          category.findMany.totalPages = res.data.totalPages || 1;
-        } else {
-          console.error("Failed to load potensi desa:", res.data?.message);
-          category.findMany.data = [];
-          category.findMany.total = 0;
-          category.findMany.totalPages = 1;
-        }
-      } catch (error) {
-        console.error("Error loading potensi desa:", error);
-        category.findMany.data = [];
-        category.findMany.total = 0;
-        category.findMany.totalPages = 1;
-      } finally {
-        category.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.desa.kategoripengumuman["findMany"].get();
+      if (res.status === 200) {
+        category.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/desa/potensi.ts
+++ b/src/app/admin/(dashboard)/_state/desa/potensi.ts
@@ -56,11 +56,9 @@ const potensiDesa = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
      potensiDesa.findMany.loading = true;  // Use the full path to access the property
      potensiDesa.findMany.page = page;
-      potensiDesa.findMany.search = search;
      try {
        const res = await ApiFetch.api.desa.potensi[
          "find-many"
@@ -300,34 +298,11 @@ const kategoriPotensi = proxy({
        isActive: true;
      };
    }>[],
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      kategoriPotensi.findMany.loading = true; // ✅ Akses langsung via nama path
-      kategoriPotensi.findMany.page = page;
-      kategoriPotensi.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.desa.kategoripotensi["findMany"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          kategoriPotensi.findMany.data = res.data.data ?? [];
-          kategoriPotensi.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          kategoriPotensi.findMany.data = [];
-          kategoriPotensi.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch kategori potensi paginated:", err);
-        kategoriPotensi.findMany.data = [];
-        kategoriPotensi.findMany.totalPages = 1;
-      } finally {
-        kategoriPotensi.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.desa.kategoripotensi["findMany"].get();
+      if (res.status === 200) {
+        kategoriPotensi.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -62,39 +61,13 @@ const lowonganKerjaState = proxy({
  findMany: {
    data: null as
      | Prisma.LowonganPekerjaanGetPayload<{
-          omit: {
-            isActive: true;
-          };
+          omit: { isActive: true };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      lowonganKerjaState.findMany.loading = true; // ✅ Akses langsung via nama path
-      lowonganKerjaState.findMany.page = page;
-      lowonganKerjaState.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.ekonomi.lowongankerja["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          lowonganKerjaState.findMany.data = res.data.data ?? [];
-          lowonganKerjaState.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          lowonganKerjaState.findMany.data = [];
-          lowonganKerjaState.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch lowongan kerja paginated:", err);
-        lowonganKerjaState.findMany.data = [];
-        lowonganKerjaState.findMany.totalPages = 1;
-      } finally {
-        lowonganKerjaState.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.ekonomi.lowongankerja["find-many"].get();
+      if (res.status === 200) {
+        lowonganKerjaState.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -54,47 +53,22 @@ const pasarDesa = proxy({
    },
  },
  findMany: {
-    data: null as
-      | Prisma.PasarDesaGetPayload<{
-          include: {
-            image: true;
-            KategoriToPasar: {
-              include: {
-                kategori: true;
-              };
+    data: null as Array<
+      Prisma.PasarDesaGetPayload<{
+        include: {
+          image: true;
+          KategoriToPasar: {
+            include: {
+              kategori: true;
            };
          };
-        }>[]
-      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "", categoryId?: string) => {
-      pasarDesa.findMany.loading = true;
-      pasarDesa.findMany.page = page;
-      pasarDesa.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        if (categoryId) query.categoryId = categoryId;
-    
-        const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          pasarDesa.findMany.data = res.data.data ?? [];
-          pasarDesa.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          pasarDesa.findMany.data = [];
-          pasarDesa.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch keamanan lingkungan paginated:", err);
-        pasarDesa.findMany.data = [];
-        pasarDesa.findMany.totalPages = 1;
-      } finally {
-        pasarDesa.findMany.loading = false;
+        };
+      }>
+    > | null,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get();
+      if (res.status === 200) {
+        pasarDesa.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -298,41 +272,14 @@ const kategoriProduk = proxy({
    },
  },
  findMany: {
-    data: null as
-      | Prisma.KategoriProdukGetPayload<{
-          omit: {
-            isActive: true;
-          };
-        }>[]
-      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search2: "",
-   load: async (page = 1, limit = 10, search2 = "") => {
-      kategoriProduk.findMany.loading = true; // ✅ Akses langsung via nama path
-      kategoriProduk.findMany.page = page;
-      kategoriProduk.findMany.search2 = search2;
-  
-      try {
-        const query: any = { page, limit };
-        if (search2) query.search2 = search2;
-    
-        const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          kategoriProduk.findMany.data = res.data.data ?? [];
-          kategoriProduk.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          kategoriProduk.findMany.data = [];
-          kategoriProduk.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch kategori produk paginated:", err);
-        kategoriProduk.findMany.data = [];
-        kategoriProduk.findMany.totalPages = 1;
-      } finally {
-        kategoriProduk.findMany.loading = false;
+    data: null as Array<{
+      id: string;
+      nama: string;
+    }> | null,
+    async load() {
+      const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get();
+      if (res.status === 200) {
+        kategoriProduk.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -12,7 +11,8 @@ const templateForm = z.object({
  statistik: z.object({
    tahun: z.string().min(1, "Tahun minimal 1 karakter"),
    jumlah: z.string().min(1, "Jumlah minimal 1 karakter"),
-  }),
+  })
+    
 });

 const defaultForm = {
@@ -21,8 +21,8 @@ const defaultForm = {
  ikonUrl: "",
  statistik: {
    tahun: "",
-    jumlah: "",
-  },
+    jumlah: ""
+  }
 };

 const programKemiskinanState = proxy({
@@ -64,35 +64,12 @@ const programKemiskinanState = proxy({
      };
    }>[],
    loading: false,
-    page: 1,
-    totalPages: 1,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      programKemiskinanState.findMany.loading = true; // ✅ Akses langsung via nama path
-      programKemiskinanState.findMany.page = page;
-      programKemiskinanState.findMany.search = search;
-
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-
-        const res = await ApiFetch.api.ekonomi.programkemiskinan[
-          "find-many"
-        ].get({ query });
-
-        if (res.status === 200 && res.data?.success) {
-          programKemiskinanState.findMany.data = res.data.data ?? [];
-          programKemiskinanState.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          programKemiskinanState.findMany.data = [];
-          programKemiskinanState.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch program kemiskinan paginated:", err);
-        programKemiskinanState.findMany.data = [];
-        programKemiskinanState.findMany.totalPages = 1;
-      } finally {
-        programKemiskinanState.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.ekonomi.programkemiskinan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        programKemiskinanState.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/inovasi/desa-digital.ts
+++ b/src/app/admin/(dashboard)/_state/inovasi/desa-digital.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -56,34 +55,10 @@ const desaDigitalState = proxy({
          };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      desaDigitalState.findMany.loading = true; // ✅ Akses langsung via nama path
-      desaDigitalState.findMany.page = page;
-      desaDigitalState.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.inovasi.desadigital["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          desaDigitalState.findMany.data = res.data.data ?? [];
-          desaDigitalState.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          desaDigitalState.findMany.data = [];
-          desaDigitalState.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch desa digital paginated:", err);
-        desaDigitalState.findMany.data = [];
-        desaDigitalState.findMany.totalPages = 1;
-      } finally {
-        desaDigitalState.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.inovasi.desadigital["find-many"].get();
+      if (res.status === 200) {
+        desaDigitalState.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/inovasi/info-tekno.ts
+++ b/src/app/admin/(dashboard)/_state/inovasi/info-tekno.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -56,34 +55,10 @@ const infoTeknoState = proxy({
          };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      infoTeknoState.findMany.loading = true; // ✅ Akses langsung via nama path
-      infoTeknoState.findMany.page = page;
-      infoTeknoState.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.inovasi.infotekno["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          infoTeknoState.findMany.data = res.data.data ?? [];
-          infoTeknoState.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          infoTeknoState.findMany.data = [];
-          infoTeknoState.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch info teknologi paginated:", err);
-        infoTeknoState.findMany.data = [];
-        infoTeknoState.findMany.totalPages = 1;
-      } finally {
-        infoTeknoState.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.inovasi.infotekno["find-many"].get();
+      if (res.status === 200) {
+        infoTeknoState.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi.ts
+++ b/src/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi.ts
@@ -6,11 +6,12 @@ import { proxy } from "valtio";
 import { z } from "zod";

 const templateForm = z.object({
-    name: z.string().min(1, "Nama kolaborasi inovasi harus diisi"),
-    tahun: z.number().min(1900, "Tahun tidak valid").max(new Date().getFullYear() + 1, "Tahun tidak boleh lebih dari tahun depan"),
-    slug: z.string().min(1, "Slug harus dihasilkan otomatis"),
-    deskripsi: z.string().min(1, "Deskripsi harus diisi"),
-    kolaborator: z.string().min(1, "Kolaborator harus diisi"),
+    name: z.string().min(1, "Nama minimal 1 karakter"),
+    tahun: z.number().min(4, "Tahun minimal 4 karakter"),
+    slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
+    deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
+    kolaborator: z.string().min(1, "Kolaborator minimal 1 karakter"),
+    imageId: z.string().min(1, "Image ID minimal 1 karakter"),
 })

 const defaultForm = {
@@ -19,6 +20,7 @@ const defaultForm = {
    slug: "",
    deskripsi: "",
    kolaborator: "",
+    imageId: "",
 }

 const kolaborasiInovasiState = proxy({
@@ -26,37 +28,27 @@ const kolaborasiInovasiState = proxy({
    form: { ...defaultForm },
    loading: false,
    async create() {
-      try {
-        // Validate form
-        const validation = templateForm.safeParse(kolaborasiInovasiState.create.form);
-        if (!validation.success) {
-          const errorMessages = validation.error.issues
-            .map(issue => `- ${issue.path.join('.')}: ${issue.message}`)
-            .join('\n');
-          return toast.error(`Validasi gagal:\n${errorMessages}`);
-        }
+      const cek = templateForm.safeParse(kolaborasiInovasiState.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }

+      try {
        kolaborasiInovasiState.create.loading = true;
-        
        const res = await ApiFetch.api.inovasi.kolaborasiinovasi["create"].post(
          kolaborasiInovasiState.create.form
        );
-        
        if (res.status === 200) {
-          await kolaborasiInovasiState.findMany.load();
-          return { success: true, data: res.data };
+          kolaborasiInovasiState.findMany.load();
+          return toast.success("success create");
        }
-        
-        console.error('Create failed:', res);
-        toast.error(res.data?.message || "Gagal menyimpan data");
-        return { success: false, error: res.data };
+        console.log(res);
+        return toast.error("failed create");
      } catch (error) {
-        console.error('Error in create:', error);
-        toast.error("Terjadi kesalahan saat menyimpan data");
-        return { 
-          success: false, 
-          error: error instanceof Error ? error.message : 'Unknown error' 
-        };
+        console.log((error as Error).message);
      } finally {
        kolaborasiInovasiState.create.loading = false;
      }
@@ -68,21 +60,13 @@ const kolaborasiInovasiState = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    year: "",
-    load: async (page = 1, limit = 10, search = "", year?: string) => {
-      kolaborasiInovasiState.findMany.loading = true;
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      kolaborasiInovasiState.findMany.loading = true; // Use the full path to access the property
      kolaborasiInovasiState.findMany.page = page;
-      kolaborasiInovasiState.findMany.search = search;
-      kolaborasiInovasiState.findMany.year = year || "";
-
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        if (year) query.year = year;
-        
        const res = await ApiFetch.api.inovasi.kolaborasiinovasi["find-many"].get({
-          query,
+          query: { page, limit },
        });

        if (res.status === 200 && res.data?.success) {
@@ -140,6 +124,7 @@ const kolaborasiInovasiState = proxy({
            slug: data.slug,
            deskripsi: data.deskripsi,
            kolaborator: data.kolaborator,
+            imageId: data.imageId,
          };
          return data;
        } else {
@@ -194,7 +179,7 @@ const kolaborasiInovasiState = proxy({
  },
  findUnique: {
    data: null as Prisma.KolaborasiInovasiGetPayload<{
-      omit: { isActive: true };
+      include: { image: true };
    }> | null,
    async load(id: string) {
      try {
--- a/src/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi.ts
+++ b/src/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi.ts
@@ -1,229 +0,0 @@
-/* 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 mitraKolaborasiForm = z.object({
-  name: z.string().min(1, { message: "Name is required" }),
-  imageId: z.string().nonempty(),
-});
-
-const defaultForm = {
-  name: "",
-  imageId: "",
-};
-
-const mitraKolaborasi = proxy({
-  create: {
-    form: { ...defaultForm },
-    loading: false,
-    async create() {
-      const cek = mitraKolaborasiForm.safeParse(mitraKolaborasi.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-      try {
-        mitraKolaborasi.create.loading = true;
-        const res = await ApiFetch.api.inovasi.mitrakolaborasi["create"].post(
-          mitraKolaborasi.create.form
-        );
-        if (res.status === 200) {
-          mitraKolaborasi.findMany.load();
-          return toast.success("mitraKolaborasi berhasil disimpan!");
-        }
-        return toast.error("Gagal menyimpan mitraKolaborasi");
-      } catch (error) {
-        console.log((error as Error).message);
-      } finally {
-        mitraKolaborasi.create.loading = false;
-      }
-    },
-    resetForm() {
-      mitraKolaborasi.create.form = { ...defaultForm };
-    },
-  },
-  findMany: {
-    data: null as
-      | Prisma.MitraKolaborasiGetPayload<{
-          include: {
-            image: true;
-          };
-        }>[]
-      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      mitraKolaborasi.findMany.loading = true; // ✅ Akses langsung via nama path
-      mitraKolaborasi.findMany.page = page;
-      mitraKolaborasi.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.inovasi.mitrakolaborasi["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          mitraKolaborasi.findMany.data = res.data.data ?? [];
-          mitraKolaborasi.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          mitraKolaborasi.findMany.data = [];
-          mitraKolaborasi.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch mitraKolaborasi paginated:", err);
-        mitraKolaborasi.findMany.data = [];
-        mitraKolaborasi.findMany.totalPages = 1;
-      } finally {
-        mitraKolaborasi.findMany.loading = false;
-      }
-    },
-  },
-  findUnique: {
-    data: null as Prisma.MitraKolaborasiGetPayload<{
-      include: {
-        image: true;
-      };
-    }> | null,
-    async load(id: string) {
-      try {
-        const res = await fetch(`/api/inovasi/mitrakolaborasi/${id}`);
-        if (res.ok) {
-          const data = await res.json();
-          mitraKolaborasi.findUnique.data = data.data ?? null;
-        } else {
-          console.error("Failed to fetch mitraKolaborasi:", res.statusText);
-          mitraKolaborasi.findUnique.data = null;
-        }
-      } catch (error) {
-        console.error("Error fetching mitraKolaborasi:", error);
-        mitraKolaborasi.findUnique.data = null;
-      }
-    },
-  },
-  delete: {
-    loading: false,
-    async byId(id: string) {
-      if (!id) return toast.warn("ID tidak valid");
-      try {
-        mitraKolaborasi.delete.loading = true;
-        const response = await fetch(`/api/inovasi/mitrakolaborasi/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
-        const result = await response.json();
-        if (response.ok) {
-          toast.success(result.message || "mitraKolaborasi berhasil dihapus");
-          await mitraKolaborasi.findMany.load(); // refresh list
-        } else {
-          toast.error(result.message || "Gagal menghapus mitraKolaborasi");
-        }
-      } catch (error) {
-        console.error("Gagal delete:", error);
-        toast.error("Terjadi kesalahan saat menghapus mitraKolaborasi");
-      } finally {
-        mitraKolaborasi.delete.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/inovasi/mitrakolaborasi/${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,
-          };
-          return data;
-        } else {
-          throw new Error(result.message || "Gagal memuat data");
-        }
-      } catch (error) {
-        console.error("Error loading mitraKolaborasi:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal memuat data"
-        );
-        return null;
-      }
-    },
-    async update() {
-      const cek = mitraKolaborasiForm.safeParse(mitraKolaborasi.update.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        toast.error(err);
-        return false;
-      }
-      try {
-        mitraKolaborasi.update.loading = true;
-        const response = await fetch(`/api/inovasi/mitrakolaborasi/${this.id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify({
-            name: this.form.name,
-            imageId: this.form.imageId,
-          }),
-        });
-        if (!response.ok) {
-          const errorData = await response.json().catch(() => ({}));
-          throw new Error(
-            errorData.message || `HTTP error! status: ${response.status}`
-          );
-        }
-        const result = await response.json();
-        if (result.success) {
-          toast.success(result.message || "mitraKolaborasi berhasil diupdate");
-          await mitraKolaborasi.findMany.load(); // refresh list
-          return true;
-        } else {
-          throw new Error(result.message || "Gagal mengupdate mitraKolaborasi");
-        }
-      } catch (error) {
-        console.error("Error updating mitraKolaborasi:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal mengupdate mitraKolaborasi"
-        );
-        return false;
-      } finally {
-        mitraKolaborasi.update.loading = false;
-      }
-    },
-    reset() {
-      mitraKolaborasi.update.id = "";
-      mitraKolaborasi.update.form = { ...defaultForm };
-    },
-  },
-});
-
-export default mitraKolaborasi;
--- a/src/app/admin/(dashboard)/_state/keamanan/tips-keamanan.ts
+++ b/src/app/admin/(dashboard)/_state/keamanan/tips-keamanan.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -54,39 +53,15 @@ const tipsKeamananState = proxy({
  findMany: {
    data: null as
      | Prisma.MenuTipsKeamananGetPayload<{
-          include: {
-            image: true;
-          };
+          include: { image: true };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      tipsKeamananState.findMany.loading = true; // ✅ Akses langsung via nama path
-      tipsKeamananState.findMany.page = page;
-      tipsKeamananState.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.keamanan.menutipskeamanan["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          tipsKeamananState.findMany.data = res.data.data ?? [];
-          tipsKeamananState.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          tipsKeamananState.findMany.data = [];
-          tipsKeamananState.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch menu tips keamanan paginated:", err);
-        tipsKeamananState.findMany.data = [];
-        tipsKeamananState.findMany.totalPages = 1;
-      } finally {
-        tipsKeamananState.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.keamanan.menutipskeamanan[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        tipsKeamananState.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/artikelKesehatan.ts
@@ -115,38 +115,27 @@ const artikelKesehatanState = proxy({
          };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      artikelKesehatanState.findMany.loading = true; // ✅ Akses langsung via nama path
-      artikelKesehatanState.findMany.page = page;
-      artikelKesehatanState.findMany.search = search;
-
+    async load() {
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-
-        const res = await ApiFetch.api.kesehatan["artikel-kesehatan"][
+        this.loading = true;
+        const res = await (ApiFetch.api.kesehatan as any)["artikel-kesehatan"][
          "find-many"
-        ].get({ query });
+        ].get();

-        if (res.status === 200 && res.data?.success) {
-          artikelKesehatanState.findMany.data =
-            res.data.data ?? [];
-          artikelKesehatanState.findMany.totalPages =
-            res.data.totalPages ?? 1;
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
        } else {
-          artikelKesehatanState.findMany.data = [];
-          artikelKesehatanState.findMany.totalPages = 1;
+          toast.error("Gagal memuat data artikel kesehatan");
        }
+
+        return res;
      } catch (err) {
-        console.error("Gagal fetch artikel kesehatan paginated:", err);
-        artikelKesehatanState.findMany.data = [];
-        artikelKesehatanState.findMany.totalPages = 1;
+        toast.error("Terjadi error saat load data");
+        console.error("LOAD ERROR:", err);
+        throw err;
      } finally {
-        artikelKesehatanState.findMany.loading = false;
+        this.loading = false;
      }
    },
  },
@@ -291,9 +280,12 @@ const artikelKesehatanState = proxy({
    async byId(id: string) {
      try {
        artikelKesehatanState.delete.loading = true;
-        const res = await fetch(`/api/kesehatan/artikel-kesehatan/del/${id}`, {
-          method: "DELETE",
-        });
+        const res = await fetch(
+          `/api/kesehatan/artikel-kesehatan/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );

        const result = await res.json();
        if (res.ok && result.success) {
--- a/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/fasilitasKesehatan.ts
@@ -116,38 +116,27 @@ const fasilitasKesehatan = proxy({
          };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      fasilitasKesehatanState.fasilitasKesehatan.findMany.loading = true; // ✅ Akses langsung via nama path
-      fasilitasKesehatanState.fasilitasKesehatan.findMany.page = page;
-      fasilitasKesehatanState.fasilitasKesehatan.findMany.search = search;
-
+    async load() {
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
+        this.loading = true;
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "fasilitas-kesehatan"
+        ]["find-many"].get();

-        const res = await ApiFetch.api.kesehatan["fasilitas-kesehatan"][
-          "find-many"
-        ].get({ query });
-
-        if (res.status === 200 && res.data?.success) {
-          fasilitasKesehatanState.fasilitasKesehatan.findMany.data =
-            res.data.data ?? [];
-          fasilitasKesehatanState.fasilitasKesehatan.findMany.totalPages =
-            res.data.totalPages ?? 1;
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
        } else {
-          fasilitasKesehatanState.fasilitasKesehatan.findMany.data = [];
-          fasilitasKesehatanState.fasilitasKesehatan.findMany.totalPages = 1;
+          toast.error("Gagal memuat data fasilitas kesehatan");
        }
+
+        return res;
      } catch (err) {
-        console.error("Gagal fetch fasilitas kesehatan paginated:", err);
-        fasilitasKesehatanState.fasilitasKesehatan.findMany.data = [];
-        fasilitasKesehatanState.fasilitasKesehatan.findMany.totalPages = 1;
+        toast.error("Terjadi error saat load data");
+        console.error("LOAD ERROR:", err);
+        throw err;
      } finally {
-        fasilitasKesehatanState.fasilitasKesehatan.findMany.loading = false;
+        this.loading = false;
      }
    },
  },
@@ -569,7 +558,7 @@ const dokter = proxy({

 const fasilitasKesehatanState = proxy({
  fasilitasKesehatan,
-  dokter,
+  dokter
 });

 export default fasilitasKesehatanState;
--- a/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan.ts
@@ -120,36 +120,27 @@ const jadwalkegiatanState = proxy({
          };
        }>[]
      | null,
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      jadwalkegiatanState.findMany.loading = true; // ✅ Akses langsung via nama path
-      jadwalkegiatanState.findMany.page = page;
-      jadwalkegiatanState.findMany.search = search;
-
+    async load() {
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
+        this.loading = true;
+        const res = await (ApiFetch.api.kesehatan as any)[
+          "jadwal-kegiatan"
+        ]["find-many"].get();

-        const res = await ApiFetch.api.kesehatan["jadwal-kegiatan"][
-          "find-many"
-        ].get({ query });
-
-        if (res.status === 200 && res.data?.success) {
-          jadwalkegiatanState.findMany.data = res.data.data ?? [];
-          jadwalkegiatanState.findMany.totalPages = res.data.totalPages ?? 1;
+        if (res.status === 200) {
+          this.data = res.data?.data ?? [];
        } else {
-          jadwalkegiatanState.findMany.data = [];
-          jadwalkegiatanState.findMany.totalPages = 1;
+          toast.error("Gagal memuat data jadwal kegiatan");
        }
+
+        return res;
      } catch (err) {
-        console.error("Gagal fetch jadwal kegiatan paginated:", err);
-        jadwalkegiatanState.findMany.data = [];
-        jadwalkegiatanState.findMany.totalPages = 1;
+        toast.error("Terjadi error saat load data");
+        console.error("LOAD ERROR:", err);
+        throw err;
      } finally {
-        jadwalkegiatanState.findMany.loading = false;
+        this.loading = false;
      }
    },
  },
@@ -236,42 +227,29 @@ const jadwalkegiatanState = proxy({
          content: jadwalkegiatanState.edit.form.content,
          informasiJadwalKegiatan: {
            name: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.name,
-            tanggal:
-              jadwalkegiatanState.edit.form.informasiJadwalKegiatan.tanggal,
+            tanggal: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.tanggal,
            waktu: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.waktu,
-            lokasi:
-              jadwalkegiatanState.edit.form.informasiJadwalKegiatan.lokasi,
+            lokasi: jadwalkegiatanState.edit.form.informasiJadwalKegiatan.lokasi,
          },
          layananJadwalKegiatan: {
-            content:
-              jadwalkegiatanState.edit.form.layananJadwalKegiatan.content,
+            content: jadwalkegiatanState.edit.form.layananJadwalKegiatan.content,
          },
          deskripsiJadwalKegiatan: {
-            deskripsi:
-              jadwalkegiatanState.edit.form.deskripsiJadwalKegiatan.deskripsi,
+            deskripsi: jadwalkegiatanState.edit.form.deskripsiJadwalKegiatan.deskripsi,
          },
          syaratKetentuanJadwalKegiatan: {
-            content:
-              jadwalkegiatanState.edit.form.syaratKetentuanJadwalKegiatan
-                .content,
+            content: jadwalkegiatanState.edit.form.syaratKetentuanJadwalKegiatan.content,
          },
          dokumenJadwalKegiatan: {
-            content:
-              jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
+            content: jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
          },
          pendaftaranJadwalKegiatan: {
            name: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.name,
-            tanggal:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
-            namaOrangtua:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan
-                .namaOrangtua,
-            nomor:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
-            alamat:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
-            catatan:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
+            tanggal: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
+            namaOrangtua: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.namaOrangtua,
+            nomor: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
+            alamat: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
+            catatan: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
          },
        };

@@ -308,7 +286,7 @@ const jadwalkegiatanState = proxy({
  },
  delete: {
    loading: false,
-    async byId(id: string) {
+    async byId(id: string){
      try {
        jadwalkegiatanState.delete.loading = true;
        const res = await fetch(`/api/kesehatan/jadwal-kegiatan/del/${id}`, {
@@ -327,7 +305,7 @@ const jadwalkegiatanState = proxy({
      } finally {
        jadwalkegiatanState.delete.loading = false;
      }
-    },
+    }
  },
 });

--- a/src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/apbdes.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -51,50 +50,18 @@ const apbdes = proxy({
    },
  },
  findMany: {
-    data: null as
-      | Prisma.APBDesGetPayload<{
-          include: {
-            image: true;
-            file: true;
-          };
-        }>[]
-      | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
-      apbdes.findMany.loading = true;  // Use the full path to access the property
-      apbdes.findMany.page = page;
-      apbdes.findMany.search = search;
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        
-        const res = await ApiFetch.api.landingpage.apbdes[
-          "findMany"
-        ].get({
-          query
-        });
-  
-        if (res.status === 200 && res.data?.success) {
-          apbdes.findMany.data = res.data.data || [];
-          apbdes.findMany.total = res.data.total || 0;
-          apbdes.findMany.totalPages = res.data.totalPages || 1;
-        } else {
-          console.error("Failed to load pegawai:", res.data?.message);
-          apbdes.findMany.data = [];
-          apbdes.findMany.total = 0;
-          apbdes.findMany.totalPages = 1;
-        }
-      } catch (error) {
-        console.error("Error loading pegawai:", error);
-        apbdes.findMany.data = [];
-        apbdes.findMany.total = 0;
-        apbdes.findMany.totalPages = 1;
-      } finally {
-        apbdes.findMany.loading = false;
+    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 ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts
@@ -60,22 +60,16 @@ const desaAntikorupsi = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      desaAntikorupsi.findMany.loading = true; // Use the full path to access the property
+    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;
-      desaAntikorupsi.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-
        const res = await ApiFetch.api.landingpage.desaantikorupsi[
          "findMany"
        ].get({
-          query,
+          query: { page, limit },
        });
-
+  
        if (res.status === 200 && res.data?.success) {
          desaAntikorupsi.findMany.data = res.data.data || [];
          desaAntikorupsi.findMany.total = res.data.total || 0;
@@ -311,25 +305,20 @@ const kategoriDesaAntiKorupsi = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      kategoriDesaAntiKorupsi.findMany.loading = true; // Use the full path to access the property
+    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;
-      kategoriDesaAntiKorupsi.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-
-        const res = await ApiFetch.api.landingpage.kategoridak["findMany"].get({
-          query,
+        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;
+          kategoriDesaAntiKorupsi.findMany.totalPages = res.data.totalPages || 1;
        } else {
          console.error("Failed to load media sosial:", res.data?.message);
          kategoriDesaAntiKorupsi.findMany.data = [];
@@ -374,30 +363,27 @@ const kategoriDesaAntiKorupsi = proxy({
      try {
        kategoriDesaAntiKorupsi.delete.loading = true;

-        const response = await fetch(`/api/landingpage/kategoridak/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        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"
-          );
+          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"
-          );
+          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"
-        );
+        toast.error("Terjadi kesalahan saat menghapus kategori desa anti korupsi");
      } finally {
        kategoriDesaAntiKorupsi.delete.loading = false;
      }
--- a/src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/prestasi-desa.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -59,43 +58,16 @@ const prestasiDesa = proxy({
      Prisma.PrestasiDesaGetPayload<{
        include: {
          image: true;
-          kategori: {
-            select: {
-              id: true;
-              name: true;
-            };
-          };
+          kategori: true;
        };
      }>
    > | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      prestasiDesa.findMany.loading = true; // ✅ Akses langsung via nama path
-      prestasiDesa.findMany.page = page;
-      prestasiDesa.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.landingpage.prestasidesa["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          prestasiDesa.findMany.data = res.data.data ?? [];
-          prestasiDesa.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          prestasiDesa.findMany.data = [];
-          prestasiDesa.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch prestasi desa paginated:", err);
-        prestasiDesa.findMany.data = [];
-        prestasiDesa.findMany.totalPages = 1;
-      } finally {
-        prestasiDesa.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.landingpage.prestasidesa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        prestasiDesa.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -311,34 +283,12 @@ const kategoriPrestasi = proxy({
      id: string;
      name: string;
    }> | null,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      kategoriPrestasi.findMany.loading = true; // ✅ Akses langsung via nama path
-      kategoriPrestasi.findMany.page = page;
-      kategoriPrestasi.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.landingpage.kategoriprestasi["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          kategoriPrestasi.findMany.data = res.data.data ?? [];
-          kategoriPrestasi.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          kategoriPrestasi.findMany.data = [];
-          kategoriPrestasi.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch kategori prestasi paginated:", err);
-        kategoriPrestasi.findMany.data = [];
-        kategoriPrestasi.findMany.totalPages = 1;
-      } finally {
-        kategoriPrestasi.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.landingpage.kategoriprestasi[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        kategoriPrestasi.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/landing-page/profile.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/profile.ts
@@ -65,19 +65,14 @@ const programInovasi = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
+    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;
-      programInovasi.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        
        const res = await ApiFetch.api.landingpage.programinovasi[
          "findMany"
        ].get({
-          query
+          query: { page, limit },
        });
  
        if (res.status === 200 && res.data?.success) {
@@ -487,19 +482,14 @@ const mediaSosial = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
+    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;
-      mediaSosial.findMany.search = search;
-      try { 
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        
+      try {
        const res = await ApiFetch.api.landingpage.mediasosial[
          "findMany"
        ].get({
-          query,
+          query: { page, limit },
        });
  
        if (res.status === 200 && res.data?.success) {
--- a/src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/sdgs-desa.ts
@@ -58,19 +58,14 @@ const sdgsDesa = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
+    load: async (page = 1, limit = 10) => {  // Change to arrow function
      sdgsDesa.findMany.loading = true;  // Use the full path to access the property
      sdgsDesa.findMany.page = page;
-      sdgsDesa.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        
        const res = await ApiFetch.api.landingpage.sdgsdesa[
          "findMany"
        ].get({
-          query,
+          query: { page, limit },
        });
  
        if (res.status === 200 && res.data?.success) {
--- a/src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts
@@ -56,17 +56,13 @@ const dataLingkunganDesaState = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
+    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;
-      dataLingkunganDesaState.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
        const res = await ApiFetch.api.lingkungan.datalingkungandesa["find-many"].get({
-          query,
+          query: { page, limit },
        });

        if (res.status === 200 && res.data?.success) {
--- a/src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -68,46 +67,10 @@ const kegiatanDesa = proxy({
        };
      }>
    > | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "", kategori = "") => {
-      // Change to arrow function
-      kegiatanDesa.findMany.loading = true; // Use the full path to access the property
-      kegiatanDesa.findMany.page = page;
-      kegiatanDesa.findMany.search = search;
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        if (kategori) query.kategori = kategori;
-        const res = await ApiFetch.api.lingkungan.kegiatandesa[
-          "find-many"
-        ].get({
-          query,
-        });
-
-        if (res.status === 200 && res.data?.success) {
-          kegiatanDesa.findMany.data = res.data.data || [];
-          kegiatanDesa.findMany.total = res.data.total || 0;
-          kegiatanDesa.findMany.totalPages = res.data.totalPages || 1;
-        } else {
-          console.error(
-            "Failed to load kegiatan desa:",
-            res.data?.message
-          );
-          kegiatanDesa.findMany.data = [];
-          kegiatanDesa.findMany.total = 0;
-          kegiatanDesa.findMany.totalPages = 1;
-        }
-      } catch (error) {
-        console.error("Error loading kegiatan desa:", error);
-        kegiatanDesa.findMany.data = [];
-        kegiatanDesa.findMany.total = 0;
-        kegiatanDesa.findMany.totalPages = 1;
-      } finally {
-        kegiatanDesa.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
+      if (res.status === 200) {
+        kegiatanDesa.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -281,35 +244,6 @@ const kegiatanDesa = proxy({
      kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
    },
  },
-  findFirst: {
-    data: null as Prisma.KegiatanDesaGetPayload<{
-      include: {
-        image: true;
-        kategoriKegiatan: true;
-      };
-    }> | null,
-    loading: false,
-    // findFirst.load()
-    async load(kategori?: string) {
-      this.loading = true;
-      try {
-        const res = await ApiFetch.api.lingkungan.kegiatandesa["find-first"].get({
-          query: kategori ? { kategori } : {},
-        });
-
-        if (res.status === 200 && res.data?.success) {
-          this.data = res.data.data || null;
-        } else {
-          this.data = null;
-        }
-      } catch (err) {
-        console.error("Gagal fetch kegiatan desa terbaru:", err);
-        this.data = null;
-      } finally {
-        this.loading = false;
-      }
-    },
-  },
 });

 // ========================================= KATEGORI kegiatan ========================================= //
@@ -335,7 +269,9 @@ const kategoriKegiatan = proxy({
      }
      try {
        kategoriKegiatan.create.loading = true;
-        const res = await ApiFetch.api.lingkungan.kategorikegiatan["create"].post(kategoriKegiatan.create.form);
+        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");
@@ -369,7 +305,9 @@ const kategoriKegiatan = proxy({
    }> | null,
    async load(id: string) {
      try {
-        const res = await fetch(`/api/lingkungan/kategorikegiatan/${id}`);
+        const res = await fetch(
+          `/api/lingkungan/kategorikegiatan/${id}`
+        );
        if (res.ok) {
          const data = await res.json();
          kategoriKegiatan.findUnique.data = data.data ?? null;
@@ -429,12 +367,15 @@ const kategoriKegiatan = proxy({
      }

      try {
-        const response = await fetch(`/api/lingkungan/kategorikegiatan/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        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}`);
        }
--- a/src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts
@@ -52,19 +52,15 @@ const pengelolaanSampah = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
+    load: async (page = 1, limit = 10) => {
      // Change to arrow function
      pengelolaanSampah.findMany.loading = true; // Use the full path to access the property
      pengelolaanSampah.findMany.page = page;
-      pengelolaanSampah.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
        const res = await ApiFetch.api.lingkungan.pengelolaansampah[
          "find-many"
        ].get({
-          query,
+          query: { page, limit },
        });

        if (res.status === 200 && res.data?.success) {
@@ -269,7 +265,7 @@ const keteranganSampah = proxy({
      try {
        keteranganSampah.create.loading = true;
        const res =
-          await ApiFetch.api.lingkungan.keteranganbankterdekat[
+          await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
            "create"
          ].post(keteranganSampah.create.form);
        if (res.status === 200) {
@@ -291,47 +287,14 @@ const keteranganSampah = proxy({
          omit: { isActive: true };
        }>[]
      | null,
-      page: 1,
-      totalPages: 1,
-      total: 0,
-      loading: false,
-      search: "",
-      load: async (page = 1, limit = 10, search = "") => {
-        // Change to arrow function
-        keteranganSampah.findMany.loading = true; // Use the full path to access the property
-        keteranganSampah.findMany.page = page;
-        keteranganSampah.findMany.search = search;
-        try {
-          const query: any = { page, limit };
-          if (search) query.search = search;
-          const res = await ApiFetch.api.lingkungan.keteranganbankterdekat[
-            "find-many"
-          ].get({
-            query,
-          });
-  
-          if (res.status === 200 && res.data?.success) {
-            keteranganSampah.findMany.data = res.data.data || [];
-            keteranganSampah.findMany.total = res.data.total || 0;
-            keteranganSampah.findMany.totalPages = res.data.totalPages || 1;
-          } else {
-            console.error(
-              "Failed to load keterangan bank sampah terdekat:",
-              res.data?.message
-            );
-            keteranganSampah.findMany.data = [];
-            keteranganSampah.findMany.total = 0;
-            keteranganSampah.findMany.totalPages = 1;
-          }
-        } catch (error) {
-          console.error("Error loading keterangan bank sampah terdekat:", error);
-          keteranganSampah.findMany.data = [];
-          keteranganSampah.findMany.total = 0;
-          keteranganSampah.findMany.totalPages = 1;
-        } finally {
-          keteranganSampah.findMany.loading = false;
-        }
-      },
+    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<{
@@ -339,7 +302,7 @@ const keteranganSampah = proxy({
      }> | null,
      async load(id: string) {
        try {
-          const res = await fetch(`/api/lingkungan/keteranganbankterdekat/${id}`);
+          const res = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`);
          if (res.ok) {
            const data = await res.json();
            keteranganSampah.findUnique.data = data.data ?? null;
@@ -361,7 +324,7 @@ const keteranganSampah = proxy({
          try {
            keteranganSampah.delete.loading = true;
    
-            const response = await fetch(`/api/lingkungan/keteranganbankterdekat/del/${id}`, {
+            const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/del/${id}`, {
              method: "DELETE",
              headers: {
                "Content-Type": "application/json",
@@ -396,7 +359,7 @@ const keteranganSampah = proxy({
            }
      
            try {
-              const response = await fetch(`/api/lingkungan/keteranganbankterdekat/${id}`, {
+              const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`, {
                method: "GET",
                headers: {
                  "Content-Type": "application/json",
@@ -441,7 +404,7 @@ const keteranganSampah = proxy({
            try {
              keteranganSampah.edit.loading = true;
              const response = await fetch(
-                `/api/lingkungan/keteranganbankterdekat/${this.id}`,
+                `/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${this.id}`,
                {
                  method: "PUT",
                  headers: {
--- a/src/app/admin/(dashboard)/_state/lingkungan/program-penghijauan.ts
+++ b/src/app/admin/(dashboard)/_state/lingkungan/program-penghijauan.ts
@@ -56,17 +56,13 @@ const programPenghijauanState = proxy({
    totalPages: 1,
    total: 0,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
+    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;
-      programPenghijauanState.findMany.search = search;
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
        const res = await ApiFetch.api.lingkungan.programpenghijauan["find-many"].get({
-          query,
+          query: { page, limit },
        });

        if (res.status === 200 && res.data?.success) {
--- a/src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts
@@ -1,12 +1,9 @@
-/* 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";

-// ========================================= BEASISWA PENDAFTAR ========================================= //
-
 const templateBeasiswaPendaftar = z.object({
  namaLengkap: z.string().min(1, "Nama harus diisi"),
  nik: z.string().min(1, "NIK harus diisi"),
@@ -79,34 +76,13 @@ const beasiswaPendaftar = proxy({
        isActive: true;
      };
    }>[],
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      beasiswaPendaftar.findMany.loading = true; // ✅ Akses langsung via nama path
-      beasiswaPendaftar.findMany.page = page;
-      beasiswaPendaftar.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar["findMany"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          beasiswaPendaftar.findMany.data = res.data.data ?? [];
-          beasiswaPendaftar.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          beasiswaPendaftar.findMany.data = [];
-          beasiswaPendaftar.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch beasiswa pendaftar paginated:", err);
-        beasiswaPendaftar.findMany.data = [];
-        beasiswaPendaftar.findMany.totalPages = 1;
-      } finally {
-        beasiswaPendaftar.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar[
+        "findMany"
+      ].get();
+      if (res.status === 200) {
+        beasiswaPendaftar.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -299,260 +275,8 @@ const beasiswaPendaftar = proxy({
  },
 });

-// ========================================= KEUNGGULAN PROGRAM ========================================= //
-const templateKeunggulanProgram = z.object({
-judul: z.string().min(1, "Judul harus diisi"),
-deskripsi: z.string().min(1, "Deskripsi harus diisi"),
-});
-
-const defaultKeunggulanProgram = {
-judul: "",
-deskripsi: "",
-};
-
-const keunggulanProgram = proxy({
-  create: {
-    form: { ...defaultKeunggulanProgram },
-    loading: false,
-    async create() {
-      const cek = templateKeunggulanProgram.safeParse(
-        keunggulanProgram.create.form
-      );
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-
-      try {
-        keunggulanProgram.create.loading = true;
-        const res = await ApiFetch.api.pendidikan.beasiswa.keunggulanprogram[
-          "create"
-        ].post(keunggulanProgram.create.form);
-        if (res.status === 200) {
-          keunggulanProgram.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 {
-        keunggulanProgram.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: [] as Prisma.KeunggulanProgramGetPayload<{
-      omit: {
-        isActive: true;
-      };
-    }>[],
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      keunggulanProgram.findMany.loading = true; // ✅ Akses langsung via nama path
-      keunggulanProgram.findMany.page = page;
-      keunggulanProgram.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.pendidikan.beasiswa.keunggulanprogram["findMany"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          keunggulanProgram.findMany.data = res.data.data ?? [];
-          keunggulanProgram.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          keunggulanProgram.findMany.data = [];
-          keunggulanProgram.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch keunggulan program paginated:", err);
-        keunggulanProgram.findMany.data = [];
-        keunggulanProgram.findMany.totalPages = 1;
-      } finally {
-        keunggulanProgram.findMany.loading = false;
-      }
-    },
-  },
-  findUnique: {
-    data: null as Prisma.KeunggulanProgramGetPayload<{
-      omit: {
-        isActive: true;
-      };
-    }> | null,
-    loading: false,
-    async load(id: string) {
-      try {
-        const res = await fetch(
-          `/api/pendidikan/beasiswa/keunggulanprogram/${id}`
-        );
-        if (res.ok) {
-          const data = await res.json();
-          keunggulanProgram.findUnique.data = data.data ?? null;
-        } else {
-          console.error("Failed to fetch data", res.status, res.statusText);
-          keunggulanProgram.findUnique.data = null;
-        }
-      } catch (error) {
-        console.error("Error fetching data:", error);
-        keunggulanProgram.findUnique.data = null;
-      }
-    },
-  },
-  delete: {
-    loading: false,
-    async delete(id: string) {
-      if (!id) return toast.warn("ID tidak valid");
-
-      try {
-        keunggulanProgram.delete.loading = true;
-
-        const response = await fetch(
-          `/api/pendidikan/beasiswa/keunggulanprogram/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
-
-        const result = await response.json();
-
-        if (response.ok && result?.success) {
-          toast.success(result.message || "Keunggulan Program berhasil dihapus");
-          await keunggulanProgram.findMany.load(); // refresh list
-        } else {
-          toast.error(result?.message || "Gagal menghapus keunggulan program");
-        }
-      } catch (error) {
-        console.error("Gagal delete:", error);
-        toast.error("Terjadi kesalahan saat menghapus keunggulan program");
-      } finally {
-        keunggulanProgram.delete.loading = false;
-      }
-    },
-  },
-  update: {
-    id: "",
-    form: { ...defaultKeunggulanProgram },
-    loading: false,
-    async load(id: string) {
-      if (!id) {
-        toast.warn("ID tidak valid");
-        return null;
-      }
-
-      try {
-        const response = await fetch(
-          `/api/pendidikan/beasiswa/keunggulanprogram/${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,
-          };
-          return data; // Return the loaded data
-        } else {
-          throw new Error(result?.message || "Gagal memuat data");
-        }
-      } catch (error) {
-        console.error("Error loading keunggulan program:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal memuat data"
-        );
-        return null;
-      }
-    },
-    async update() {
-      const cek = templateKeunggulanProgram.safeParse(
-        keunggulanProgram.update.form
-      );
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        toast.error(err);
-        return false;
-      }
-
-      try {
-        keunggulanProgram.update.loading = true;
-
-        const response = await fetch(
-          `/api/pendidikan/beasiswa/keunggulanprogram/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              judul: this.form.judul,
-              deskripsi: this.form.deskripsi,
-            }),
-          }
-        );
-
-        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 keunggulan program");
-          await keunggulanProgram.findMany.load(); // refresh list
-          return true;
-        } else {
-          throw new Error(result.message || "Gagal update keunggulan program");
-        }
-      } catch (error) {
-        console.error("Error updating keunggulan program:", error);
-        toast.error(
-          error instanceof Error
-            ? error.message
-            : "Terjadi kesalahan saat update keunggulan program"
-        );
-        return false;
-      } finally {
-        keunggulanProgram.update.loading = false;
-      }
-    },
-    reset() {
-      keunggulanProgram.update.id = "";
-      keunggulanProgram.update.form = { ...defaultKeunggulanProgram };
-    },
-  },
-});
-
-
 const beasiswaDesaState = proxy({
  beasiswaPendaftar,
-  keunggulanProgram
 });

 export default beasiswaDesaState;
--- a/src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -52,46 +51,13 @@ const jenjangPendidikan = proxy({
      id: string;
      nama: string;
    }> | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      jenjangPendidikan.findMany.loading = true; // Use the full path to access the property
-      jenjangPendidikan.findMany.page = page;
-      jenjangPendidikan.findMany.search = search;
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        const res =
-          await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
-            "find-many"
-          ].get({
-            query,
-          });
-
-        if (res.status === 200 && res.data?.success) {
-          jenjangPendidikan.findMany.data = res.data.data || [];
-          jenjangPendidikan.findMany.total = res.data.total || 0;
-          jenjangPendidikan.findMany.totalPages = res.data.totalPages || 1;
-        } else {
-          console.error(
-            "Failed to load jenjang pendidikan:",
-            res.data?.message
-          );
-          jenjangPendidikan.findMany.data = [];
-          jenjangPendidikan.findMany.total = 0;
-          jenjangPendidikan.findMany.totalPages = 1;
-        }
-      } catch (error) {
-        console.error("Error loading jenjang pendidikan:", error);
-        jenjangPendidikan.findMany.data = [];
-        jenjangPendidikan.findMany.total = 0;
-        jenjangPendidikan.findMany.totalPages = 1;
-      } finally {
-        jenjangPendidikan.findMany.loading = false;
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        jenjangPendidikan.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -333,64 +299,18 @@ const lembagaPendidikan = proxy({
      Prisma.LembagaGetPayload<{
        include: {
          jenjangPendidikan: true;
+          siswa: true;
+          pengajar: true;
        };
-      }> & {
-        siswa?: [];
-        pengajar?: [];
-      }
+      }>
    > | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
-      lembagaPendidikan.findMany.loading = true;
-      lembagaPendidikan.findMany.page = page;
-      lembagaPendidikan.findMany.search = search;
-      
-      try {
-        const query: any = { 
-          page, 
-          limit, 
-          ...(search && { search }),
-          ...(jenjangPendidikan && { jenjangPendidikanId: jenjangPendidikan })
-        };
-        
-        console.log('Fetching lembaga with query:', query);
-        
-        const res = await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan["find-many"].get({ query });
-        
-        console.log('API Response:', res);
-
-        if (res.status === 200 && res.data?.success) {
-          const data = Array.isArray(res.data.data) ? res.data.data : [];
-          const total = typeof res.data.total === 'number' ? res.data.total : 0;
-          const totalPages = typeof res.data.totalPages === 'number' ? res.data.totalPages : 1;
-          
-          lembagaPendidikan.findMany.data = data;
-          lembagaPendidikan.findMany.total = total;
-          lembagaPendidikan.findMany.totalPages = totalPages;
-          
-          console.log('Successfully loaded lembaga data:', {
-            count: data.length,
-            total,
-            totalPages
-          });
-        } else {
-          console.error(
-            "Failed to load lembaga pendidikan:",
-            res.data?.message || 'No error message provided'
-          );
-          throw new Error(res.data?.message || 'Failed to load lembaga pendidikan');
-        }
-      } catch (error) {
-        console.error("Error loading lembaga pendidikan:", error);
-        lembagaPendidikan.findMany.data = [];
-        lembagaPendidikan.findMany.total = 0;
-        lembagaPendidikan.findMany.totalPages = 1;
-      } finally {
-        lembagaPendidikan.findMany.loading = false;
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
+          "find-many"
+        ].get();
+      if (res.status === 200) {
+        lembagaPendidikan.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -634,55 +554,16 @@ const siswa = proxy({
    data: null as Array<
      Prisma.SiswaGetPayload<{
        include: {
-          lembaga: {
-            include: {
-              jenjangPendidikan: true;
-            };
-          };
+          lembaga: true;
        };
      }>
    > | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    jenjangPendidikan: "",
-    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
-      siswa.findMany.loading = true;
-      siswa.findMany.page = page;
-      siswa.findMany.search = search;
-      siswa.findMany.jenjangPendidikan = jenjangPendidikan;
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        if (jenjangPendidikan) query.jenjangPendidikanName = jenjangPendidikan;
-        const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
-          "find-many"
-        ].get({
-          query,
-        });
-
-        if (res.status === 200 && res.data?.success) {
-          siswa.findMany.data = res.data.data || [];
-          siswa.findMany.total = res.data.total || 0;
-          siswa.findMany.totalPages = res.data.totalPages || 1;
-        } else {
-          console.error(
-            "Failed to load siswa:",
-            res.data?.message
-          );
-          siswa.findMany.data = [];
-          siswa.findMany.total = 0;
-          siswa.findMany.totalPages = 1;
-        }
-      } catch (error) {
-        console.error("Error loading siswa:", error);
-        siswa.findMany.data = [];
-        siswa.findMany.total = 0;
-        siswa.findMany.totalPages = 1;
-      } finally {
-        siswa.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        siswa.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -913,56 +794,16 @@ const pengajar = proxy({
    data: null as Array<
      Prisma.PengajarGetPayload<{
        include: {
-          lembaga: {
-            include: {
-              jenjangPendidikan: true
-            }
-          }
+          lembaga: true;
        };
      }>
    > | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    jenjangPendidikan: "",
-    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
-      // Change to arrow function
-      pengajar.findMany.loading = true; // Use the full path to access the property
-      pengajar.findMany.page = page;
-      pengajar.findMany.search = search;
-      pengajar.findMany.jenjangPendidikan = jenjangPendidikan;
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-        if (jenjangPendidikan) query.jenjangPendidikanId = jenjangPendidikan;
-        const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
-          "find-many"
-        ].get({
-          query,
-        });
-
-        if (res.status === 200 && res.data?.success) {
-          pengajar.findMany.data = res.data.data || [];
-          pengajar.findMany.total = res.data.total || 0;
-          pengajar.findMany.totalPages = res.data.totalPages || 1;
-        } else {
-          console.error(
-            "Failed to load pengajar:",
-            res.data?.message
-          );
-          pengajar.findMany.data = [];
-          pengajar.findMany.total = 0;
-          pengajar.findMany.totalPages = 1;
-        }
-      } catch (error) {
-        console.error("Error loading pengajar:", error);
-        pengajar.findMany.data = [];
-        pengajar.findMany.total = 0;
-        pengajar.findMany.totalPages = 1;
-      } finally {
-        pengajar.findMany.loading = false;
+    async load() {
+      const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
+        "find-many"
+      ].get();
+      if (res.status === 200) {
+        pengajar.findMany.data = res.data?.data ?? [];
      }
    },
  },
@@ -974,9 +815,7 @@ const pengajar = proxy({
    }> | null,
    async load(id: string) {
      try {
-        const res = await fetch(
-          `/api/pendidikan/infosekolahpaud/pengajar/${id}`
-        );
+        const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
        if (res.ok) {
          const data = await res.json();
          pengajar.findUnique.data = data.data ?? null;
@@ -1109,8 +948,7 @@ const pengajar = proxy({
              result
            );
            throw new Error(
-              result?.message ||
-                `Gagal mengupdate pengajar (${response.status})`
+              result?.message || `Gagal mengupdate pengajar (${response.status})`
            );
          }

--- a/src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -55,46 +54,23 @@ const dataPerpustakaan = proxy({
    },
  },
  findMany: {
-      data: null as
-        | Prisma.DataPerpustakaanGetPayload<{
-            include: {
-              image: true;
-              kategori: true;
-            };
-          }>[]
-        | null,
-      page: 1,
-      totalPages: 1,
-      loading: false,
-      search: "",
-     load: async (page = 1, limit = 10, search = "", kategori = "") => {
-        dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
-        dataPerpustakaan.findMany.page = page;
-        dataPerpustakaan.findMany.search = search;
-    
-        try {
-          const query: any = { page, limit };
-          if (search) query.search = search;
-          if (kategori) query.kategori = kategori;
-      
-          const res = await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan["findMany"].get({ query });
-      
-          if (res.status === 200 && res.data?.success) {
-            dataPerpustakaan.findMany.data = res.data.data ?? [];
-            dataPerpustakaan.findMany.totalPages = res.data.totalPages ?? 1;
-          } else {
-            dataPerpustakaan.findMany.data = [];
-            dataPerpustakaan.findMany.totalPages = 1;
-          }
-        } catch (err) {
-          console.error("Gagal fetch data perpustakaan paginated:", err);
-          dataPerpustakaan.findMany.data = [];
-          dataPerpustakaan.findMany.totalPages = 1;
-        } finally {
-          dataPerpustakaan.findMany.loading = false;
-        }
-      },
+    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: {
@@ -317,34 +293,14 @@ const kategoriBuku = proxy({
        isActive: true;
      };
    }>[],
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      kategoriBuku.findMany.loading = true; // ✅ Akses langsung via nama path
-      kategoriBuku.findMany.page = page;
-      kategoriBuku.findMany.search = search;
-  
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku["findMany"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          kategoriBuku.findMany.data = res.data.data ?? [];
-          kategoriBuku.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          kategoriBuku.findMany.data = [];
-          kategoriBuku.findMany.totalPages = 1;
-        }
-      } catch (err) {
-        console.error("Gagal fetch data kategori buku paginated:", err);
-        kategoriBuku.findMany.data = [];
-        kategoriBuku.findMany.totalPages = 1;
-      } finally {
-        kategoriBuku.findMany.loading = false;
+    async load() {
+      const res =
+        await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
+          "findMany"
+        ].get();
+      if (res.status === 200) {
+        kategoriBuku.findMany.data = res.data?.data ?? [];
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
+++ b/src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
@@ -348,34 +348,18 @@ const posisiOrganisasi = proxy({
      deskripsi: string | null;
      hierarki: number;
    }>,
-    page: 1,
-    totalPages: 1,
-    loading: false,
-    search: "",
-   load: async (page = 1, limit = 10, search = "") => {
-      posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
-      posisiOrganisasi.findMany.page = page;
-      posisiOrganisasi.findMany.search = search;
-  
+    async load() {
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi["find-many"].get({ query });
-    
-        if (res.status === 200 && res.data?.success) {
-          posisiOrganisasi.findMany.data = res.data.data ?? [];
-          posisiOrganisasi.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          posisiOrganisasi.findMany.data = [];
-          posisiOrganisasi.findMany.totalPages = 1;
+        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 (err) {
-        console.error("Gagal fetch posisi organisasi paginated:", err);
-        posisiOrganisasi.findMany.data = [];
-        posisiOrganisasi.findMany.totalPages = 1;
-      } finally {
-        posisiOrganisasi.findMany.loading = false;
+      } catch (error) {
+        console.error("Find many error:", error);
+        this.data = [];
      }
    },
  },
@@ -454,9 +438,9 @@ const pegawai = proxy({

      try {
        pegawai.create.loading = true;
-        const res = await ApiFetch.api.ppid.strukturppid.pegawai["create"].post(
-          pegawai.create.form
-        );
+        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();
@@ -473,55 +457,42 @@ const pegawai = proxy({
  },

  // In struktur-organisasi.ts
-  findMany: {
-    data: null as
-      | Prisma.PegawaiPPIDGetPayload<{
-          include: {
-            image: true;
-            posisi: true;
-          };
-        }>[]
-      | null,
-    page: 1,
-    totalPages: 1,
-    total: 0,
-    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      pegawai.findMany.loading = true; // Use the full path to access the property
-      pegawai.findMany.page = page;
-      pegawai.findMany.search = search;
-      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
+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 },
+      });

-        const res = await ApiFetch.api.ppid.strukturppid.pegawai[
-          "find-many"
-        ].get({
-          query,
-        });
-
-        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);
+      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;
-      } finally {
-        pegawai.findMany.loading = false;
      }
-    },
+    } 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<{
@@ -550,9 +521,12 @@ const pegawai = proxy({
      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 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");
@@ -581,12 +555,15 @@ const pegawai = proxy({
      }

      try {
-        const response = await fetch(`/api/ppid/strukturppid/pegawai/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        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}`);
@@ -700,7 +677,7 @@ const pegawai = proxy({
 const stateStrukturPPID = proxy({
  stateStruktur,
  posisiOrganisasi,
-  pegawai,
+  pegawai
 });

 export default stateStrukturPPID;
--- a/src/app/admin/(dashboard)/_state/user/user-state.ts
+++ b/src/app/admin/(dashboard)/_state/user/user-state.ts
@@ -1,43 +1,124 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { proxy } from "valtio";
-import { toast } from "react-toastify";
-import ApiFetch from "@/lib/api-fetch";
-import { Prisma } from "@prisma/client";
-import { z } from "zod";
+import { proxy } from 'valtio'
+import { toast } from 'react-toastify'
+import ApiFetch from '@/lib/api-fetch'
+import { Prisma } from '@prisma/client'
+import { z } from 'zod'

-// State Valtio
+// 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 } }>[],
-    page: 1,
-    totalPages: 1,
    loading: false,
-    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      userState.findMany.loading = true; // ✅ Akses langsung via nama path
-      userState.findMany.page = page;
-      userState.findMany.search = search;
-
+    async load() {
+      this.loading = true
      try {
-        const query: any = { page, limit };
-        if (search) query.search = search;
-
-        const res = await ApiFetch.api.user["findMany"].get({ query });
-
-        if (res.status === 200 && res.data?.success) {
-          userState.findMany.data = res.data.data ?? [];
-          userState.findMany.totalPages = res.data.totalPages ?? 1;
-        } else {
-          userState.findMany.data = [];
-          userState.findMany.totalPages = 1;
+        const res = await ApiFetch.api.user.findMany.get()
+        if (res.status === 200) {
+          this.data = res.data?.data || []
        }
-      } catch (err) {
-        console.error("Gagal fetch user paginated:", err);
-        userState.findMany.data = [];
-        userState.findMany.totalPages = 1;
+      } catch (e) {
+        console.error(e)
+        toast.error('Gagal muat data user')
      } finally {
-        userState.findMany.loading = false;
+        this.loading = false
      }
    },
  },
@@ -47,20 +128,71 @@ const userState = proxy({
    data: null as Prisma.UserGetPayload<{ include: { role: true } }> | null,
    loading: false,
    async load(id: string) {
-      this.loading = true;
+      this.loading = true
      try {
-        const res = await fetch(`/api/user/findUnique/${id}`);
-        const data = await res.json();
+        const res = await fetch(`/api/user/findUnique/${id}`)
+        const data = await res.json()
        if (res.status === 200) {
-          this.data = data.data;
+          this.data = data.data
        } else {
-          toast.error(data.message);
+          toast.error(data.message)
        }
      } catch (e) {
-        console.error(e);
-        toast.error("Gagal ambil data user");
+        console.error(e)
+        toast.error('Gagal ambil data user')
      } finally {
-        this.loading = false;
+        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
      }
    },
  },
@@ -69,63 +201,35 @@ const userState = proxy({
  delete: {
    loading: false,
    async submit(id: string) {
-      this.loading = true;
+      this.loading = true
      try {
        const res = await fetch(`/api/user/del/${id}`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-        });
-        const data = await res.json();
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+        })
+        const data = await res.json()
        if (res.status === 200) {
-          toast.success("User dinonaktifkan");
-          userState.findMany.load();
+          toast.success('User dinonaktifkan')
+          userState.findMany.load()
        } else {
-          toast.error(data.message || "Gagal hapus");
+          toast.error(data.message || 'Gagal hapus')
        }
      } catch (e) {
-        console.error(e);
-        toast.error("Gagal hapus user");
+        console.error(e)
+        toast.error('Gagal hapus user')
      } finally {
-        this.loading = false;
+        this.loading = false
      }
    },
  },
-  updateActive: {
-    loading: false,
-    async submit(id: string, isActive: boolean) {
-      this.loading = true;
-      try {
-        const res = await fetch(`/api/user/updt`, {
-          method: "PUT",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ id, isActive }),
-        });
-
-        const data = await res.json();
-        if (res.status === 200 && data.success) {
-          toast.success(data.message);
-          userState.findMany.load(userState.findMany.page, 10, userState.findMany.search);
-        } else {
-          toast.error(data.message || "Gagal update status user");
-        }
-      } catch (e) {
-        console.error(e);
-        toast.error("Gagal update status user");
-      } finally {
-        this.loading = false;
-      }
-    },
-  },
-});
+})

 const templateRole = z.object({
  name: z.string().min(1, "Nama harus diisi"),
-  permissions: z.array(z.string()).min(1, "Permission harus diisi"),
 });

 const defaultRole = {
  name: "",
-  permissions: [] as string[],
 };

 const roleState = proxy({
@@ -143,9 +247,10 @@ const roleState = proxy({

      try {
        roleState.create.loading = true;
-        const res = await ApiFetch.api.role["create"].post(
-          roleState.create.form
-        );
+        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");
@@ -168,7 +273,10 @@ const roleState = proxy({
    }>[],
    loading: false,
    async load() {
-      const res = await ApiFetch.api.role["findMany"].get();
+      const res =
+        await ApiFetch.api.role[
+          "findMany"
+        ].get();
      if (res.status === 200) {
        roleState.findMany.data = res.data?.data ?? [];
      }
@@ -183,7 +291,9 @@ const roleState = proxy({
    loading: false,
    async load(id: string) {
      try {
-        const res = await fetch(`/api/role/${id}`);
+        const res = await fetch(
+          `/api/role/${id}`
+        );
        if (res.ok) {
          const data = await res.json();
          roleState.findUnique.data = data.data ?? null;
@@ -205,17 +315,22 @@ const roleState = proxy({
      try {
        roleState.delete.loading = true;

-        const response = await fetch(`/api/role/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        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");
+          toast.success(
+            result.message || "Data role berhasil dihapus"
+          );
          await roleState.findMany.load(); // refresh list
        } else {
          toast.error(result?.message || "Gagal menghapus Data role");
@@ -239,12 +354,15 @@ const roleState = proxy({
      }

      try {
-        const response = await fetch(`/api/role/${id}`, {
-          method: "GET",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        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}`);
        }
@@ -256,7 +374,6 @@ const roleState = proxy({
          this.id = data.id;
          this.form = {
            name: data.name,
-            permissions: data.permissions,
          };
          return data; // Return the loaded data
        } else {
@@ -283,16 +400,18 @@ const roleState = proxy({
      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,
-            permissions: this.form.permissions,
-          }),
-        });
+        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(() => ({}));
@@ -332,6 +451,6 @@ const roleState = proxy({
 const user = proxy({
  userState,
  roleState,
-});
+})

-export default user;
+export default user
--- a/src/app/admin/(dashboard)/auth/login-admin/page.tsx
+++ b/src/app/admin/(dashboard)/auth/login-admin/page.tsx
@@ -1,111 +0,0 @@
-'use client'
-import { apiFetchLogin } from '@/app/admin/auth/_lib/api_fetch_auth';
-import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Image, Paper, Stack, Text, Title } from '@mantine/core';
-import Link from 'next/link';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { PhoneInput } from "react-international-phone";
-import "react-international-phone/style.css";
-import { toast } from 'react-toastify';
-
-
-
-function Login() {
-  const router = useRouter()
-  const [phone, setPhone] = useState("")
-  const [isError, setError] = useState(false)
-  const [loading, setLoading] = useState(false)
-
-  async function onLogin() {
-    const nomor = phone.substring(1);
-    if (nomor.length <= 4) return setError(true)
-
-
-    try {
-      setLoading(true);
-      const response = await apiFetchLogin({ nomor: nomor })
-      if (response && response.success) {
-        localStorage.setItem("hipmi_auth_code_id", response.kodeId);
-        toast.success(response.message);
-        router.push("/validasi", { scroll: false });
-      } else {
-        setLoading(false);
-        toast.error(response?.message);
-      }
-    } catch (error) {
-      setLoading(false)
-      console.log("Error Login", error)
-      toast.error("Terjadi kesalahan saat login")
-    }
-  }
-
-  return (
-    <Stack pos={"relative"} bg={colors.Bg}>
-      <Box px={{ base: 'md', md: 100 }} pb={50}>
-        <Stack align='center' justify='center' h={"100vh"}>
-          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-            <Stack align='center' gap={"lg"}>
-              <Box>
-                <Title ta={"center"} order={2} fw={'bold'} c={colors['blue-button']}>
-                  Login
-                </Title>
-                <Center>
-                  <Image src={"/darmasaba-icon.png"} alt="" w={80} />
-                </Center>
-              </Box>
-              <Box>
-              {/* <Box mb={10}>
-                <Text c={colors['blue-button']} ta={"center"} fz={"sm"} fw={'bold'}>Masuk Untuk Akses Admin</Text>
-                <TextInput
-                  label='Username'
-                  placeholder='Username'
-                  value={username}
-                  onChange={(e) => setUsername(e.target.value)}
-                  required
-                />
-              </Box> */}
-                <PhoneInput
-                  countrySelectorStyleProps={{
-                    buttonStyle: {
-                      backgroundColor: colors['blue-button'],
-                    },
-                  }}
-                  inputStyle={{ width: "100%"}}
-                  defaultCountry="id"
-                  onChange={(val) => {
-                    setPhone(val);
-                  }}
-                />
-
-                {isError ? (
-                  toast.error("Masukan nomor telepon anda")
-                ) : (
-                  ""
-                )}
-                <Box py={20} >
-                  <Button
-                    fullWidth
-                    bg={colors['blue-button']}
-                    radius={'xl'}
-                    onClick={onLogin}
-                    loading={loading ? true : false}
-                  >Masuk
-                  </Button>
-                </Box>
-                <Flex justify={'center'} align={'center'}>
-                  <Text>Belum punya akun? </Text>
-                  <Button variant='transparent' component={Link} href={'/registrasi'}>
-                    <Text c={colors['blue-button']} fw={'bold'}>Registrasi</Text>
-                  </Button>
-                </Flex>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Login;
--- a/src/app/admin/(dashboard)/auth/registrasi-admin/page.tsx
+++ b/src/app/admin/(dashboard)/auth/registrasi-admin/page.tsx
@@ -1,121 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-expressions */
-'use client'
-import { apiFetchRegister } from '@/app/admin/auth/_lib/api_fetch_auth';
-import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
-import colors from '@/con/colors';
-import { Box, Button, Center, Checkbox, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
-import { PhoneInput } from "react-international-phone";
-import "react-international-phone/style.css";
-import { toast } from 'react-toastify';
-
-function Registrasi() {
-  const [phone, setPhone] = useState("")
-  const router = useRouter()
-  const [value, setValue] = useState("")
-  const [isValue, setIsValue] = useState(false);
-  const [loading, setLoading] = useState(false);
-
-  async function onRegistarsi() {
-    if (value.length < 5) {
-      toast.error("Username minimal 5 karakter!");
-      return;
-    }
-  
-    if (value.includes(" ")) {
-      toast.error("Username tidak boleh ada spasi!");
-      return;
-    }
-  
-    if (!phone) {
-      toast.error("Nomor telepon wajib diisi!");
-      return;
-    }
-    
-    try {
-      setLoading(true);
-      const respone = await apiFetchRegister({ nomor: phone, username: value });
-
-      if (respone.success) {
-        router.push("/login", { scroll: false });
-        toast.success(respone.message);
-
-      } else {
-        setLoading(false);
-        toast.error(respone.message);
-      }
-    } catch (error) {
-      setLoading(false);
-      console.log("Error Registrasi", error);
-    }
-  }
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} gap={"22"} py={"xl"} h={"100vh"}>
-      <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
-      </Box>
-      <Box px={{ base: 'md', md: 100 }}>
-        <Stack justify='center' align='center' h={"80vh"}>
-          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-            <Stack align='center'>
-              <Title order={2} fw={'bold'} c={colors['blue-button']}>
-                Registrasi
-              </Title>
-              <Center>
-                <Image src={"/darmasaba-icon.png"} alt="" w={80} />
-              </Center>
-              <Box>
-                <TextInput placeholder='Username'
-                  label='Username'
-                  maxLength={50}
-
-                  error={
-                    value.length > 0 && value.length < 5
-                      ? "Minimal 5 karakter !"
-                      : value.includes(" ")
-                      ? "Tidak boleh ada spasi"
-                      : isValue
-                      ? "Masukan username anda"
-                      : ""
-                  }
-                  onChange={(val) => {
-                    val.currentTarget.value.length > 0 ? setIsValue(false) : "";
-                    setValue(val.currentTarget.value);
-                  }}
-                  required
-
-                />
-                <Box py={10}>
-                  <Text fz={"sm"} >Nomor Telepon</Text>
-                  <PhoneInput
-                    countrySelectorStyleProps={{
-                      buttonStyle: {
-                        backgroundColor: colors['blue-button'],
-                      },
-                    }}
-                    inputStyle={{ width: "100%" }}
-                    defaultCountry="id"
-                    onChange={(val) => {
-                      setPhone(val);
-                    }}
-                  />
-                </Box>
-                <Box pb={10}>
-                  <Checkbox
-                    label="Saya menyetujui syarat dan ketentuan yang berlaku"
-                  />
-                </Box>
-                <Box pb={20} >
-                  <Button fullWidth bg={colors['blue-button']} radius={'xl'} onClick={onRegistarsi} loading={loading ? true : false}>Daftar</Button>
-                </Box>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Registrasi;
--- a/src/app/admin/(dashboard)/auth/validasi-admin/page.tsx
+++ b/src/app/admin/(dashboard)/auth/validasi-admin/page.tsx
@@ -1,38 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, PinInput, Stack, Text, Title } from '@mantine/core';
-import { useRouter } from 'next/navigation';
-
-function Validasi() {
-  const router = useRouter()
-  return (
-    <Stack pos={"relative"} bg={colors.Bg}>
-      <Box px={{ base: 'md', md: 100 }} pb={50}>
-        <Stack align='center' justify='center' h={"100vh"}>
-          <Paper p={'xl'} radius={'md'} bg={colors['white-trans-1']}>
-            <Stack align='center' gap={"lg"}>
-              <Box>
-                <Title ta={"center"} order={2} fw={'bold'} c={colors['blue-button']}>
-                  Kode Verifikasi
-                </Title>
-              </Box>
-              <Box>
-                <Box mb={10}>
-                  <Text c={colors['blue-button']} ta={"center"} fz={"sm"} fw={'bold'}>Masukkan Kode Verifikasi</Text>
-                  <PinInput type={/^[0-9]*$/} inputType="tel" inputMode="numeric" />
-                </Box>
-                <Box py={20} >
-                  <Button onClick={() => router.push("/admin/landing-page/profile/program-inovasi")}>
-                    Page
-                  </Button>
-                </Box>
-              </Box>
-            </Stack>
-          </Paper>
-        </Stack>
-      </Box>
-    </Stack>
-  );
-}
-
-export default Validasi;
--- a/src/app/admin/(dashboard)/desa/_com/layoutTabLayanan.tsx
+++ b/src/app/admin/(dashboard)/desa/_com/layoutTabLayanan.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconFileText, IconBuildingStore, IconSparkles, IconUsers } from '@tabler/icons-react';

 function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
    const router = useRouter()
@@ -13,35 +12,26 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
        {
            label: "Pelayanan Surat Keterangan",
            value: "pelayanansuratketerangan",
-            href: "/admin/desa/layanan/pelayanan_surat_keterangan",
-            icon: <IconFileText size={18} stroke={1.8} />,
-            tooltip: "Layanan terkait surat keterangan resmi desa"
+            href: "/admin/desa/layanan/pelayanan_surat_keterangan"
        },
        {
            label: "Pelayanan Perizinan Berusaha",
            value: "pelayananperizinanusaha",
-            href: "/admin/desa/layanan/pelayanan_perizinan_berusaha",
-            icon: <IconBuildingStore size={18} stroke={1.8} />,
-            tooltip: "Layanan untuk izin usaha masyarakat"
+            href: "/admin/desa/layanan/pelayanan_perizinan_berusaha"
        },
        {
            label: "Pelayanan Telunjuk Sakti Desa",
            value: "pelayanantelunjuksaktidesa",
-            href: "/admin/desa/layanan/pelayanan_telunjuk_sakti_desa",
-            icon: <IconSparkles size={18} stroke={1.8} />,
-            tooltip: "Layanan inovasi khusus desa"
+            href: "/admin/desa/layanan/pelayanan_telunjuk_sakti_desa"
        },
        {
            label: "Pelayanan Penduduk Non-Permanent",
-            value: "pelayanannonpermanent",
-            href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent",
-            icon: <IconUsers size={18} stroke={1.8} />,
-            tooltip: "Pendataan penduduk non-permanent"
+            value: "pelayanantelunjuknonpermanent",
+            href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent"
        }
    ];
-
-    const currentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+    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)
@@ -59,65 +49,24 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
    }, [pathname])

    return (
-        <Stack gap="lg">
-            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Layanan</Title>
-            <Tabs
-                color={colors['blue-button']}
-                variant='pills'
-                value={activeTab}
-                onChange={handleTabChange}
-                radius="lg"
-                keepMounted={false}
-            >
-                <TabsList
-                    p="sm"
-                    style={{
-                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                        borderRadius: "1rem",
-                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip 
-                            key={i} 
-                            label={tab.tooltip} 
-                            position="bottom" 
-                            withArrow 
-                            transitionProps={{ transition: 'pop', duration: 200 }}
-                        >
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
+        <Stack>
+            <Title order={3}>Layanan</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
                    ))}
                </TabsList>
-
-                {tabs.map((tab, i) => (
-                    <TabsPanel
-                        key={i}
-                        value={tab.value}
-                        style={{
-                            padding: "1.5rem",
-                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
-                            borderRadius: "1rem",
-                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
-                        }}
-                    >
-                        {/* Konten dummy, bisa diganti sesuai routing */}
-                        <>{children}</>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
+            {children}
        </Stack>
    );
 }

-export default LayoutTabsLayanan;
+export default LayoutTabsLayanan;
--- a/src/app/admin/(dashboard)/desa/berita/_com/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/_com/layoutTabs.tsx
@@ -1,110 +1,63 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconNews, IconCategory } from '@tabler/icons-react';

 function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
-    const router = useRouter();
-    const pathname = usePathname();
-
+    const router = useRouter()
+    const pathname = usePathname()
    const tabs = [
        {
            label: "List Berita",
            value: "list_berita",
-            href: "/admin/desa/berita/list-berita",
-            icon: <IconNews size={18} stroke={1.8} />,
-            tooltip: "Lihat dan kelola semua berita desa"
+            href: "/admin/desa/berita/list-berita"
        },
        {
            label: "Kategori Berita",
            value: "kategori_berita",
-            href: "/admin/desa/berita/kategori-berita",
-            icon: <IconCategory size={18} stroke={1.8} />,
-            tooltip: "Kelola kategori berita desa"
+            href: "/admin/desa/berita/kategori-berita"
        },
+        
    ];
-
-    const currentTab = tabs.find(tab => tab.href === pathname);
-    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+    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);
+        const tab = tabs.find(t => t.value === value)
        if (tab) {
-            router.push(tab.href);
+            router.push(tab.href)
        }
-        setActiveTab(value);
-    };
+        setActiveTab(value)
+    }

    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname);
+        const match = tabs.find(tab => tab.href === pathname)
        if (match) {
-            setActiveTab(match.value);
+            setActiveTab(match.value)
        }
-    }, [pathname]);
+    }, [pathname])

    return (
-        <Stack gap="lg">
-            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Berita Desa</Title>
-            <Tabs
-                color={colors['blue-button']}
-                variant="pills"
-                value={activeTab}
-                onChange={handleTabChange}
-                radius="lg"
-                keepMounted={false}
-            >
-                <TabsList
-                    p="sm"
-                    style={{
-                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                        borderRadius: "1rem",
-                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip
-                            key={i}
-                            label={tab.tooltip}
-                            position="bottom"
-                            withArrow
-                            transitionProps={{ transition: 'pop', duration: 200 }}
-                        >
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
+        <Stack>
+            <Title order={3}>Gallery</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
                    ))}
                </TabsList>
-
-                {tabs.map((tab, i) => (
-                    <TabsPanel
-                        key={i}
-                        value={tab.value}
-                        style={{
-                            padding: "1.5rem",
-                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
-                            borderRadius: "1rem",
-                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
-                        }}
-                    >
-                        {/* Konten dummy, bisa diganti sesuai routing */}
-                        <>{children}</>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
+            {children}
        </Stack>
    );
 }

-export default LayoutTabsBerita;
+export default LayoutTabsBerita;
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx
@@ -2,16 +2,7 @@
 'use client'
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  TextInput,
-  Title,
-  Tooltip
-} from '@mantine/core';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -19,102 +10,67 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditKategoriBerita() {
-  const editState = useProxy(stateDashboardBerita.kategoriBerita);
+  const editState = useProxy(stateDashboardBerita.kategoriBerita)
  const router = useRouter();
  const params = useParams();
-
  const [formData, setFormData] = useState({
-    name: editState.update.form.name || '',
-  });
+      name: editState.update.form.name || '',
+    });

  useEffect(() => {
-    const loadKategori = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.update.load(id);
-        if (data) {
-          setFormData({
-            name: data.name || '',
-          });
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              name: data.name || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori Berita:", error);
+          toast.error("Gagal memuat data kategori Berita");
        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          name: formData.name,
+        };
+        await editState.update.update();
+        toast.success('Kategori Berita berhasil diperbarui!');
+        router.push('/admin/desa/berita/kategori-berita');
      } catch (error) {
-        console.error('Error loading kategori Berita:', error);
-        toast.error('Gagal memuat data kategori Berita');
+        console.error('Error updating kategori Berita:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
      }
    };

-    loadKategori();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-    try {
-      editState.update.form = {
-        ...editState.update.form,
-        name: formData.name,
-      };
-
-      await editState.update.update();
-      toast.success('Kategori Berita berhasil diperbarui!');
-      router.push('/admin/desa/berita/kategori-berita');
-    } catch (error) {
-      console.error('Error updating kategori Berita:', error);
-      toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
-    }
-  };
-
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Back Button + Title */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Kategori Berita
-        </Title>
-      </Group>
-
-      {/* Form Wrapper */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Kategori Berita</Title>
          <TextInput
-            label="Nama Kategori Berita"
-            placeholder="Masukkan nama kategori berita"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Berita</Text>}
+            placeholder="masukkan nama kategori Berita"
          />

-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/kategori-berita/create/page.tsx
@@ -1,87 +1,50 @@
-'use client';
+'use client'
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';

+
+
 function CreateKategoriBerita() {
-  const createState = useProxy(stateDashboardBerita.kategoriBerita);
+  const createState = useProxy(stateDashboardBerita.kategoriBerita)
  const router = useRouter();

  const resetForm = () => {
    createState.create.form = {
-      name: '',
+      name: "",
    };
  };

  const handleSubmit = async () => {
    await createState.create.create();
    resetForm();
-    router.push('/admin/desa/berita/kategori-berita');
+    router.push("/admin/desa/berita/kategori-berita")
  };

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan back button */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Kategori Berita
-        </Title>
-      </Group>
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>

-      {/* Form utama */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Berita</Title>
          <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Berita</Text>}
-            placeholder="Masukkan nama kategori berita"
-            value={createState.create.form.name || ''}
-            onChange={(e) => (createState.create.form.name = e.target.value)}
-            required
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Berita</Text>}
+            placeholder='Masukkan nama kategori Berita'
+            value={createState.create.form.name}
+            onChange={(val) => {
+              createState.create.form.name = val.target.value;
+            }}
          />
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/kategori-berita/page.tsx
@@ -1,40 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip
-} from '@mantine/core';
-import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateDashboardBerita from '../../../_state/desa/berita';

+
+
 function KategoriBerita() {
  const [search, setSearch] = useState('');
  return (
    <Box>
      <HeaderSearch
-        title="Kategori Berita"
-        placeholder="Cari nama kategori berita..."
+        title='Kategori Berita'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -45,155 +30,99 @@ function KategoriBerita() {
 }

 function ListKategoriBerita({ search }: { search: string }) {
-  const listDataState = useProxy(stateDashboardBerita.kategoriBerita);
+  const listDataState = useProxy(stateDashboardBerita.kategoriBerita)
  const router = useRouter();
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-
-  const {
-    data,
-    loading,
-    load,
-    page,
-    totalPages,
-  } = listDataState.findMany;
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)

  useEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    listDataState.findMany.load()
+  }, [])

  const handleDelete = () => {
    if (selectedId) {
-      listDataState.delete.delete(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      load(page, 10, search);
+      listDataState.delete.delete(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+
+      listDataState.findMany.load()
    }
-  };
-
-  const filteredData = data || [];
-
-  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
-      </Stack>
-    );
  }

+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (!listDataState.findMany.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Kategori Berita</Title>
-          <Tooltip label="Tambah Kategori Berita" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() =>
-                router.push('/admin/desa/berita/kategori-berita/create')
-              }
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '10%' }}>No</TableTh>
-                <TableTh style={{ width: '50%' }}>Nama</TableTh>
-                <TableTh style={{ width: '20%' }}>Edit</TableTh>
-                <TableTh style={{ width: '20%' }}>Hapus</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item, index) => (
+      <Paper bg={colors['white-1']} p="md">
+        <Stack>
+        <JudulList
+          title='List Kategori Berita'
+          href='/admin/desa/berita/kategori-berita/create'
+        />
+          <Box style={{ overflowX: 'auto' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item, index) => (
                  <TableTr key={item.id}>
                    <TableTd>
-                      <Text fz="sm">{index + 1}</Text>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-Berita/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
                    </TableTd>
                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Tooltip label="Edit Kategori Berita" withArrow>
-                        <Button
-                          variant="light"
-                          color="green"
-                          onClick={() =>
-                            router.push(
-                              `/admin/desa/berita/kategori-berita/${item.id}`
-                            )
-                          }
-                        >
-                          <IconEdit size={18} />
-                        </Button>
-                      </Tooltip>
-                    </TableTd>
-                    <TableTd>
-                      <Tooltip label="Hapus Kategori Berita" withArrow>
-                        <Button
-                          variant="light"
-                          color="red"
-                          disabled={listDataState.delete.loading}
-                          onClick={() => {
-                            setSelectedId(item.id);
-                            setModalHapus(true);
-                          }}
-                        >
-                          <IconTrash size={18} />
-                        </Button>
-                      </Tooltip>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
                    </TableTd>
                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">
-                        Tidak ada data kategori berita yang cocok
-                      </Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
      </Paper>

-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-          color="blue"
-          radius="md"
-        />
-      </Center>
-
      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleDelete}
-        text="Apakah anda yakin ingin menghapus kategori berita ini?"
+        text='Apakah anda yakin ingin menghapus kategori Berita ini?'
      />
    </Box>
-  );
+  )
 }

 export default KategoriBerita;
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/edit/page.tsx
@@ -15,8 +15,7 @@ import {
  Stack,
  Text,
  TextInput,
-  Title,
-  Tooltip,
+  Title
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
@@ -25,6 +24,7 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";

+
 function EditBerita() {
  const beritaState = useProxy(stateDashboardBerita);
  const router = useRouter();
@@ -33,29 +33,29 @@ function EditBerita() {
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [formData, setFormData] = useState({
-    judul: beritaState.berita.edit.form.judul || "",
-    deskripsi: beritaState.berita.edit.form.deskripsi || "",
-    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || "",
-    content: beritaState.berita.edit.form.content || "",
-    imageId: beritaState.berita.edit.form.imageId || "",
+    judul: beritaState.berita.edit.form.judul || '',
+    deskripsi: beritaState.berita.edit.form.deskripsi || '',
+    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || '',
+    content: beritaState.berita.edit.form.content || '',
+    imageId: beritaState.berita.edit.form.imageId || ''
  });

  // Load berita by id saat pertama kali
  useEffect(() => {
-    beritaState.kategoriBerita.findMany.load();
+    beritaState.kategoriBerita.findMany.load()
    const loadBerita = async () => {
      const id = params?.id as string;
      if (!id) return;

      try {
-        const data = await stateDashboardBerita.berita.edit.load(id);
+        const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
        if (data) {
          setFormData({
-            judul: data.judul || "",
-            deskripsi: data.deskripsi || "",
-            kategoriBeritaId: data.kategoriBeritaId || "",
-            content: data.content || "",
-            imageId: data.imageId || "",
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            kategoriBeritaId: data.kategoriBeritaId || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
          });

          if (data?.image?.link) {
@@ -69,26 +69,31 @@ function EditBerita() {
    };

    loadBerita();
-  }, [params?.id]);
+  }, [params?.id]); // ✅ hapus beritaState dari dependency

  const handleSubmit = async () => {
+
    try {
+      // Update global state with form data
      beritaState.berita.edit.form = {
        ...beritaState.berita.edit.form,
-        ...formData,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        kategoriBeritaId: formData.kategoriBeritaId || '',
+        imageId: formData.imageId // 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 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
        beritaState.berita.edit.form.imageId = uploaded.id;
      }

@@ -102,111 +107,87 @@ function EditBerita() {
  };

  return (
-    <Box px={{ base: "sm", md: "lg" }} py="md">
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors["blue-button"]} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Berita
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: "100%", md: "50%" }}
-        bg={colors["white-1"]}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: "1px solid #e0e0e0" }}
-      >
-        <Stack gap="md">
+    <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 Berita</Title>
          <TextInput
-            label="Judul"
-            placeholder="Masukkan judul"
            value={formData.judul}
-            onChange={(e) =>
-              setFormData({ ...formData, judul: e.target.value })
-            }
-            required
+            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
          />

          <TextInput
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi"
            value={formData.deskripsi}
-            onChange={(e) =>
-              setFormData({ ...formData, deskripsi: e.target.value })
-            }
-            required
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
          />

          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
-              maxSize={5 * 1024 ** 2}
-              accept={{ "image/*": [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: "contain",
-                    border: `1px solid ${colors["blue-button"]}`,
-                  }}
-                />
-              </Box>
-            )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
          </Box>
-
          <Box>
-            <Text fz="sm" fw="bold">
-              Konten
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
            <EditEditor
              value={formData.content}
              onChange={(htmlContent) => {
@@ -218,15 +199,13 @@ function EditBerita() {

          <Select
            value={formData.kategoriBeritaId}
-            onChange={(val) =>
-              setFormData({ ...formData, kategoriBeritaId: val || "" })
-            }
-            label="Kategori"
-            placeholder="Pilih kategori"
+            onChange={(val) => setFormData({ ...formData, kategoriBeritaId: val || "" })}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
            data={
              beritaState.kategoriBerita.findMany.data?.map((v) => ({
                value: v.id,
-                label: v.name,
+                label: v.name
              })) || []
            }
            clearable
@@ -235,20 +214,7 @@ function EditBerita() {
            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
          />

-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
-                color: "#fff",
-                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button onClick={handleSubmit}>Edit Berita</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
@@ -1,8 +1,9 @@
 'use client'
 import { useProxy } from 'valtio/utils';
-import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';

@@ -11,146 +12,107 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';

 function DetailBerita() {
-  const beritaState = useProxy(stateDashboardBerita);
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const params = useParams();
-  const router = useRouter();
+  const beritaState = useProxy(stateDashboardBerita)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()

  useShallowEffect(() => {
-    beritaState.berita.findUnique.load(params?.id as string);
-  }, []);
+    beritaState.berita.findUnique.load(params?.id as string)
+  }, [])
+

  const handleHapus = () => {
    if (selectedId) {
-      beritaState.berita.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push("/admin/desa/berita/list-berita");
+      beritaState.berita.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/berita/list-berita")
    }
-  };
+  }

  if (!beritaState.berita.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton h={40} />
      </Stack>
-    );
+    )
  }

-  const data = beritaState.berita.findUnique.data;
-
  return (
-    <Box py={10}>
-      {/* Tombol Back */}
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      {/* Detail Berita */}
-      <Paper
-        withBorder
-        w={{ base: "100%", md: "70%" }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Berita
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">Kategori</Text>
-                <Text fz="md" c="dimmed">{data.kategoriBerita?.name || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Judul</Text>
-                <Text fz="md" c="dimmed">{data.judul || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed">{data.deskripsi || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Gambar</Text>
-                {data.image?.link ? (
-                  <Image
-                    src={data.image.link}
-                    alt={data.judul || 'Gambar Berita'}
-                    w={200}
-                    h={200}
-                    radius="md"
-                    fit="cover"
-                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
-                )}
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Konten</Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
-                />
-              </Box>
-
-              {/* Action Button */}
-              <Group gap="sm">
-                <Tooltip label="Hapus Berita" withArrow position="top">
+    <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 Berita</Text>
+          {beritaState.berita.findUnique.data ? (
+            <Paper key={beritaState.berita.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.kategoriBerita?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} >{beritaState.berita.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={beritaState.berita.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: beritaState.berita.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
                  <Button
-                    color="red"
                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
+                      if (beritaState.berita.findUnique.data) {
+                        setSelectedId(beritaState.berita.findUnique.data.id);
+                        setModalHapus(true);
+                      }
                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    disabled={beritaState.berita.delete.loading || !beritaState.berita.findUnique.data}
+                    color={"red"}
                  >
-                    <IconTrash size={20} />
+                    <IconX size={20} />
                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Berita" withArrow position="top">
                  <Button
-                    color="green"
-                    onClick={() => router.push(`/admin/desa/berita/list-berita/${data.id}/edit`)}
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    onClick={() => {
+                      if (beritaState.berita.findUnique.data) {
+                        router.push(`/admin/desa/berita/list-berita/${beritaState.berita.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!beritaState.berita.findUnique.data}
+                    color={"green"}
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

-      {/* Modal Hapus */}
+      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus berita ini?"
+        text='Apakah anda yakin ingin menghapus berita ini?'
      />
    </Box>
  );
 }

-export default DetailBerita;
+export default DetailBerita;
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
@@ -3,19 +3,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -24,33 +12,38 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

+
 export default function CreateBerita() {
  const beritaState = useProxy(stateDashboardBerita);
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
-  const router = useRouter();
+  const router = useRouter()

  useShallowEffect(() => {
-    beritaState.kategoriBerita.findMany.load();
+    beritaState.kategoriBerita.findMany.load()
  }, []);

  const resetForm = () => {
+    // Reset state di valtio
    beritaState.berita.create.form = {
-      judul: '',
-      deskripsi: '',
-      kategoriBeritaId: '',
-      imageId: '',
-      content: '',
+      judul: "",
+      deskripsi: "",
+      kategoriBeritaId: "",
+      imageId: "",
+      content: "",
    };
+
+    // Reset state lokal
    setPreviewImage(null);
    setFile(null);
  };

  const handleSubmit = async () => {
    if (!file) {
-      return toast.warn('Silakan pilih file gambar terlebih dahulu');
+      return toast.warn("Pilih file gambar terlebih dahulu");
    }

+    // Upload gambar dulu
    const res = await ApiFetch.api.fileStorage.create.post({
      file,
      name: file.name,
@@ -58,55 +51,40 @@ export default function CreateBerita() {

    const uploaded = res.data?.data;
    if (!uploaded?.id) {
-      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
+      return toast.error("Gagal upload gambar");
    }

+    // Simpan ID gambar ke form
    beritaState.berita.create.form.imageId = uploaded.id;

+    // Submit data berita
    await beritaState.berita.create.create();

+    // Reset form setelah submit
    resetForm();
-    router.push('/admin/desa/berita/list-berita');
+    router.push("/admin/desa/berita/list-berita")
  };

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan tombol kembali */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Berita
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Berita</Title>
          <TextInput
-            label="Judul"
-            placeholder="Masukkan judul berita"
            value={beritaState.berita.create.form.judul}
-            onChange={(e) => (beritaState.berita.create.form.judul = e.target.value)}
-            required
+            onChange={(val) => {
+              beritaState.berita.create.form.judul = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
          />
-
          <Select
-            label="Kategori"
+            label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
            placeholder="Pilih kategori"
            data={beritaState.kategoriBerita.findMany.data.map((item) => ({
              label: item.name,
@@ -115,83 +93,85 @@ export default function CreateBerita() {
            value={beritaState.berita.create.form.kategoriBeritaId || null}
            onChange={(val: string | null) => {
              if (val) {
-                const selected = beritaState.kategoriBerita.findMany.data?.find(
-                  (item) => item.id === val
-                );
+                const selected = beritaState.kategoriBerita.findMany.data?.find((item) => item.id === val);
                if (selected) {
                  beritaState.berita.create.form.kategoriBeritaId = selected.id;
                }
              } else {
-                beritaState.berita.create.form.kategoriBeritaId = '';
+                beritaState.berita.create.form.kategoriBeritaId = "";
              }
            }}
            searchable
            clearable
            nothingFoundMessage="Tidak ditemukan"
-            required
          />
-
          <TextInput
-            label="Deskripsi Singkat"
-            placeholder="Masukkan deskripsi berita"
            value={beritaState.berita.create.form.deskripsi}
-            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
+            onChange={(val) => {
+              beritaState.berita.create.form.deskripsi = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
          />

          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Berita
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                </Dropzone.Idle>
-              </Group>
-              <Text ta="center" mt="sm" size="sm" color="dimmed">
-                Seret gambar atau klik untuk memilih file (maks 5MB)
-              </Text>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{
-                    maxHeight: 200,
-                    objectFit: 'contain',
-                    border: '1px solid #ddd',
-                  }}
-                />
-              </Box>
-            )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
          </Box>
-
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
            <CreateEditor
              value={beritaState.berita.create.form.content}
              onChange={(htmlContent) => {
@@ -199,21 +179,7 @@ export default function CreateBerita() {
              }}
            />
          </Box>
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/page.tsx
@@ -1,25 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Image,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -28,13 +9,15 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import stateDashboardBerita from '../../../_state/desa/berita';

+
+
 function Berita() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title="Berita"
-        placeholder="Cari judul atau kategori berita..."
+        title='Berita'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -45,125 +28,103 @@ function Berita() {
 }

 function ListBerita({ search }: { search: string }) {
-  const beritaState = useProxy(stateDashboardBerita);
-  const router = useRouter();
+  const beritaState = useProxy(stateDashboardBerita)
+  const router = useRouter()
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = beritaState.berita.findMany;

-  const { data, page, totalPages, loading, load } = beritaState.berita.findMany;

+  // Fetch data when page or search changes
  useShallowEffect(() => {
    load(page, 10, search);
  }, [page, search]);

  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
-      </Stack>
-    );
+    return <Skeleton h={500} />;
  }

  const filteredData = data || [];

  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Berita</Title>
-          <Tooltip label="Tambah Berita" withArrow>
-            <Button
-              leftSection={<IconCircleDashedPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/desa/berita/list-berita/create')}
+      <Paper bg={colors["white-1"]} p={"md"}>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>
+                List Berita
+              </Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button
+                onClick={() => router.push("/admin/desa/berita/list-berita/create")}
+                bg={colors["blue-button"]}
+              >
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table
+              striped
+              withRowBorders
+              withTableBorder
+              style={{ minWidth: "700px" }}
            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '30%' }}>Judul</TableTh>
-                <TableTh style={{ width: '20%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '25%' }}>Gambar</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
+              <TableThead>
+                <TableTr>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={250}>Image</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
                  <TableTr key={item.id}>
-                    <TableTd style={{ width: '30%' }}>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.judul}
-                      </Text>
-                    </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                      <Text fz="sm" c="dimmed">
-                        {item.kategoriBerita?.name || '-'}
-                      </Text>
-                    </TableTd>
-                    <TableTd style={{ width: '25%' }}>
-                      <Box
-                        w={80}
-                        h={80}
-                        style={{ borderRadius: 8, overflow: 'hidden' }}
-                      >
-                        {item.image?.link ? (
-                          <Image src={item.image.link} alt="gambar" fit="cover" />
-                        ) : (
-                          <Box bg={colors['blue-button']} w="100%" h="100%" />
-                        )}
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>
+                          {item.judul}
+                        </Text>
                      </Box>
                    </TableTd>
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd>{item.kategoriBerita?.name}</TableTd>
+                    <TableTd>
+                      <Image w={100} src={item.image?.link} alt="gambar" />
+                    </TableTd>
+                    <TableTd>
                      <Button
-                        variant="light"
-                        color="blue"
+                        bg={"green"}
                        onClick={() =>
                          router.push(`/admin/desa/berita/list-berita/${item.id}`)
                        }
                      >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                        <IconDeviceImacCog size={25} />
                      </Button>
                    </TableTd>
                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">
-                        Tidak ada data berita yang cocok
-                      </Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
      </Paper>
-
      <Center>
        <Pagination
          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
+          onChange={(newPage) => load(newPage)} // ini penting!
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
  );
 }
-
 export default Berita;
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx
@@ -1,6 +1,7 @@
 'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
-import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
@@ -13,14 +14,15 @@ import { useProxy } from 'valtio/utils';


 function EditFoto() {
-  const state = useProxy(mitraKolaborasi)
+  const fotoState = useProxy(stateGallery.foto)
  const router = useRouter();
  const params = useParams();
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [formData, setFormData] = useState({
-    name: state.update.form.name || '',
-    imageId: state.update.form.imageId || ''
+    name: fotoState.update.form.name || '',
+    deskripsi: fotoState.update.form.deskripsi || '',
+    imagesId: fotoState.update.form.imagesId || ''
  });

  useEffect(() => {
@@ -28,14 +30,15 @@ function EditFoto() {
      const id = params?.id as string;
      if (!id) return;
      try {
-        const data = await state.update.load(id);
+        const data = await fotoState.update.load(id);
        if (data) {
          setFormData({
            name: data.name || '',
-            imageId: data.imageId || ''
+            deskripsi: data.deskripsi || '',
+            imagesId: data.imageGalleryFoto?.id || ''
          });
-          if (data?.image?.link) {
-            setPreviewImage(data.image.link);
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
          }
        }
      } catch (error) {
@@ -48,10 +51,11 @@ function EditFoto() {

  const handleSubmit = async () => {
    try {
-      state.update.form = {
-        ...state.update.form,
+      fotoState.update.form = {
+        ...fotoState.update.form,
        name: formData.name,
-        imageId: formData.imageId
+        deskripsi: formData.deskripsi,
+        imagesId: formData.imagesId
      };
      if (file) {
        const res = await ApiFetch.api.fileStorage.create.post({
@@ -62,14 +66,14 @@ function EditFoto() {
        if (!uploaded?.id) {
          return toast.error("Gagal upload gambar");
        }
-        state.update.form.imageId = uploaded.id;
+        fotoState.update.form.imagesId = uploaded.id;
      }
-      await state.update.update();
-      toast.success('Mitra berhasil diperbarui!');
-      router.push('/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi');
+      await fotoState.update.update();
+      toast.success('Foto berhasil diperbarui!');
+      router.push('/admin/desa/gallery/foto');
    } catch (error) {
-      console.error('Error updating mitra:', error);
-      toast.error('Terjadi kesalahan saat memperbarui mitra');
+      console.error('Error updating foto:', error);
+      toast.error('Terjadi kesalahan saat memperbarui foto');
    }
  };

@@ -83,10 +87,10 @@ function EditFoto() {

      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
        <Stack gap={"xs"}>
-          <Title order={4}>Edit Mitra</Title>
+          <Title order={4}>Edit Foto</Title>
          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Mitra</Text>}
-            placeholder='Masukkan nama mitra'
+            label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+            placeholder='Masukkan judul foto'
            value={formData.name}
            onChange={(e) =>
              (formData.name = e.target.value)
@@ -136,6 +140,15 @@ function EditFoto() {
              </Center>
            )}
          </Box>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <EditEditor
+              value={fotoState.update.form.deskripsi}
+              onChange={(val) => {
+                fotoState.update.form.deskripsi = val;
+              }}
+            />
+          </Box>
          <Group>
            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
--- a/src/app/admin/(dashboard)/desa/gallery/foto/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/foto/[id]/page.tsx
@@ -0,0 +1,112 @@
+'use client'
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useShallowEffect } from '@mantine/hooks';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import colors from '@/con/colors';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+
+function DetailFoto() {
+  const fotoState = useProxy(stateGallery.foto)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    fotoState.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      fotoState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/gallery/foto")
+    }
+  }
+
+  if (!fotoState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Foto</Text>
+          {fotoState.findUnique.data ? (
+            <Paper key={fotoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{fotoState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal Foto</Text>
+                  <Text fz={"lg"}>{new Date(fotoState.findUnique.data?.createdAt).toDateString()}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: fotoState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 300, md: 350}} src={fotoState.findUnique.data?.imageGalleryFoto?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (fotoState.findUnique.data) {
+                        setSelectedId(fotoState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={fotoState.delete.loading || !fotoState.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (fotoState.findUnique.data) {
+                        router.push(`/admin/desa/gallery/foto/${fotoState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!fotoState.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus berita ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailFoto;
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx
@@ -1,5 +1,6 @@
 'use client'
-import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
 import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
@@ -13,15 +14,16 @@ import { useProxy } from 'valtio/utils';


 function CreateFoto() {
-  const state = useProxy(mitraKolaborasi)
+  const fotoState = useProxy(stateGallery.foto)
  const router = useRouter();
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);

  const resetForm = () => {
-    state.create.form = {
+    fotoState.create.form = {
      name: "",
-      imageId: "",
+      deskripsi: "",
+      imagesId: "",
    };

    setPreviewImage(null)
@@ -43,10 +45,10 @@ function CreateFoto() {
      return toast.error("Gagal upload gambar");
    }

-    state.create.form.imageId = uploaded.id;
-    await state.create.create();
+    fotoState.create.form.imagesId = uploaded.id;
+    await fotoState.create.create();
    resetForm();
-    router.push("/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi")
+    router.push("/admin/desa/gallery/foto")
  };

  return (
@@ -59,13 +61,13 @@ function CreateFoto() {

      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
        <Stack gap={"xs"}>
-          <Title order={4}>Create Mitra</Title>
+          <Title order={4}>Create Foto</Title>
          <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Mitra</Text>}
-            placeholder='Masukkan nama mitra'
-            value={state.create.form.name}
+            label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
+            placeholder='Masukkan judul foto'
+            value={fotoState.create.form.name}
            onChange={(val) => {
-              state.create.form.name = val.target.value;
+              fotoState.create.form.name = val.target.value;
            }}
          />
          <Box>
@@ -124,6 +126,15 @@ function CreateFoto() {

            </Box>
          </Box>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
+            <CreateEditor
+              value={fotoState.create.form.deskripsi}
+              onChange={(val) => {
+                fotoState.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
          <Group>
            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
--- a/src/app/admin/(dashboard)/desa/gallery/foto/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/foto/page.tsx
@@ -1,9 +1,9 @@
 "use client";
+import colors from "@/con/colors";
 import stateFileStorage from "@/state/state-list-image";
 import {
  ActionIcon,
  Box,
-  Card,
  Flex,
  Group,
  Image,
@@ -13,8 +13,7 @@ import {
  Stack,
  Text,
  TextInput,
-  Title,
-  Tooltip,
+  Title
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconSearch, IconTrash, IconX } from "@tabler/icons-react";
@@ -30,128 +29,95 @@ export default function ListImage() {
  }, []);

  let timeOut: NodeJS.Timer;
-
  return (
-    <Stack p="lg" gap="lg">
-      <Flex justify="space-between" align="center" wrap="wrap" gap="md">
-        <Title order={2} fw={700}>
-          Galeri Foto
-        </Title>
+    <Stack p={"lg"}>
+      <Flex justify="space-between">
+        <Title order={3}>List Foto</Title>
        <TextInput
-          radius="xl"
-          size="md"
-          placeholder="Cari foto berdasarkan nama..."
-          leftSection={<IconSearch size={18} />}
+          radius={"lg"}
+          leftSection={<IconSearch />}
          rightSection={
            <ActionIcon
-              variant="light"
-              color="gray"
-              radius="xl"
-              onClick={() => stateFileStorage.load()}
+              variant="transparent"
+              onClick={() => {
+                stateFileStorage.load();
+              }}
            >
-              <IconX size={18} />
+              <IconX />
            </ActionIcon>
          }
+          placeholder="Pencarian"
          onChange={(e) => {
            if (timeOut) clearTimeout(timeOut);
            timeOut = setTimeout(() => {
              stateFileStorage.load({ search: e.target.value });
-            }, 300);
+            }, 200);
          }}
        />
      </Flex>
-
-      <Paper withBorder radius="lg" p="md" shadow="sm">
-        {list && list.length > 0 ? (
-          <SimpleGrid
-            cols={{ base: 2, sm: 3, md: 5, lg: 8 }}
-            spacing="md"
-            verticalSpacing="md"
-          >
-            {list.map((v, k) => (
-              <Card
-                key={k}
-                withBorder
-                radius="md"
-                shadow="sm"
-                className="hover:shadow-md transition-all duration-200"
-              >
-                <Stack gap="xs">
-                  <motion.div
-                    onClick={() => {
-                      navigator.clipboard.writeText(v.url);
-                      toast("Tautan foto berhasil disalin");
-                    }}
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    style={{ cursor: "pointer" }}
-                  >
-                    <Image
-                      src={`${v.url}?size=200`}
-                      alt={v.name}
-                      radius="md"
-                      h={120}
-                      fit="cover"
-                      loading="lazy"
-                    />
-                  </motion.div>
-
-                  <Box>
-                    <Text size="sm" fw={500} lineClamp={2}>
-                      {v.name}
-                    </Text>
-                  </Box>
-
-                  <Group justify="space-between" align="center" pt="xs">
-                    <Tooltip label="Hapus foto" withArrow>
-                      <ActionIcon
-                        variant="subtle"
-                        color="red"
-                        radius="md"
-                        onClick={() => {
-                          stateFileStorage
-                            .del({ name: v.name })
-                            .finally(() => toast("Foto berhasil dihapus"));
+      <Paper bg={colors['white-1']} p={'md'}>
+        <SimpleGrid
+          cols={{
+            base: 3,
+            md: 5,
+            lg: 10,
+          }}
+        >
+          {list &&
+            list.map((v, k) => {
+              return (
+                <Paper key={k} shadow="sm">
+                  <Stack pos={"relative"} gap={0} justify="space-between">
+                    <motion.div
+                      onClick={() => {
+                        // copy to clipboard
+                        navigator.clipboard.writeText(v.url);
+                        toast("Berhasil disalin");
+                      }}
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.8 }}
+                    >
+                      <Image
+                        h={100}
+                        src={v.url + "?size=100"}
+                        alt={v.name}
+                        fit="cover"
+                        loading="lazy"
+                        style={{
+                          objectFit: "cover",
+                          objectPosition: "center",
                        }}
-                      >
-                        <IconTrash size={18} />
-                      </ActionIcon>
-                    </Tooltip>
-                  </Group>
-                </Stack>
-              </Card>
-            ))}
-          </SimpleGrid>
-        ) : (
-          <Stack align="center" justify="center" py="xl" gap="sm">
-            <Image
-              src="https://cdn-icons-png.flaticon.com/512/4076/4076549.png"
-              alt="Kosong"
-              w={120}
-              h={120}
-              fit="contain"
-              opacity={0.7}
-            />
-            <Text c="dimmed" ta="center">
-              Belum ada foto yang tersedia
-            </Text>
-          </Stack>
-        )}
+                      />
+                    </motion.div>
+                    <Box p={"md"} h={54}>
+                      <Text lineClamp={2} fz={"xs"}>
+                        {v.name}
+                      </Text>
+                    </Box>
+                    <Group justify="end">
+                        <IconTrash
+                        color="red"
+                          onClick={() => {
+                            stateFileStorage.del({ name: v.name }).finally(() => {
+                              toast("Berhasil dihapus");
+                            });
+                          }}
+                        />
+                    </Group>
+                  </Stack>
+                </Paper>
+              );
+            })}
+        </SimpleGrid>
      </Paper>
-
-      {total && total > 1 && (
-        <Flex justify="center">
-          <Pagination
-            total={total}
-            size="md"
-            radius="md"
-            withEdges
-            onChange={(page) => {
-              stateFileStorage.page = page;
-              stateFileStorage.load();
-            }}
-          />
-        </Flex>
+      {total && (
+        <Pagination
+          total={total}
+          onChange={(e) => {
+            stateFileStorage.page = e;
+            stateFileStorage.load();
+          }}
+        />
      )}
    </Stack>
  );
--- a/src/app/admin/(dashboard)/desa/gallery/lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/lib/layoutTabs.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconPhoto, IconVideo } from '@tabler/icons-react';

 function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
    const router = useRouter()
@@ -13,21 +12,16 @@ function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
        {
            label: "Foto",
            value: "foto",
-            href: "/admin/desa/gallery/foto",
-            icon: <IconPhoto size={18} stroke={1.8} />,
-            tooltip: "Kelola foto-foto galeri desa"
+            href: "/admin/desa/gallery/foto"
        },
        {
            label: "Video",
            value: "video",
-            href: "/admin/desa/gallery/video",
-            icon: <IconVideo size={18} stroke={1.8} />,
-            tooltip: "Kelola video galeri desa"
+            href: "/admin/desa/gallery/video"
        },
    ];
-
-    const currentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+    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)
@@ -45,64 +39,24 @@ function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
    }, [pathname])

    return (
-        <Stack gap="lg">
-            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Gallery</Title>
-            <Tabs
-                color={colors['blue-button']}
-                variant='pills'
-                value={activeTab}
-                onChange={handleTabChange}
-                radius="lg"
-                keepMounted={false}
-            >
-                <TabsList
-                    p="sm"
-                    style={{
-                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                        borderRadius: "1rem",
-                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip
-                            key={i}
-                            label={tab.tooltip}
-                            position="bottom"
-                            withArrow
-                            transitionProps={{ transition: 'pop', duration: 200 }}
-                        >
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
+        <Stack>
+            <Title order={3}>Gallery</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
                    ))}
                </TabsList>
-
-                {tabs.map((tab, i) => (
-                    <TabsPanel
-                        key={i}
-                        value={tab.value}
-                        style={{
-                            padding: "1.5rem",
-                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
-                            borderRadius: "1rem",
-                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
-                        }}
-                    >
-                        <>{children}</>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
+            {children}
        </Stack>
    );
 }

-export default LayoutTabsGallery;
+export default LayoutTabsGallery;
--- a/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
@@ -3,16 +3,7 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  TextInput,
-  Title,
-  Tooltip
-} from '@mantine/core';
+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';
@@ -21,9 +12,9 @@ import { useProxy } from 'valtio/utils';
 import { convertYoutubeUrlToEmbed } from '../../../lib/youtube-utils';

 function EditVideo() {
-  const router = useRouter();
-  const videoState = useProxy(stateGallery.video);
-  const params = useParams();
+  const router = useRouter(); 
+  const videoState = useProxy(stateGallery.video)
+  const params = useParams()

  const [formData, setFormData] = useState({
    name: '',
@@ -39,7 +30,7 @@ function EditVideo() {
        const data = await videoState.update.load(id);
        if (data) {
          setFormData({
-            name: data.name || '',
+            name: data.name || '',    
            deskripsi: data.deskripsi || '',
            linkVideo: data.linkVideo || '',
          });
@@ -75,36 +66,27 @@ function EditVideo() {
      console.error('Error updating video:', error);
      toast.error('Terjadi kesalahan saat memperbarui video');
    }
-  };
+  }

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Video
-        </Title>
-      </Group>
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Video</Title>

-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
          <TextInput
-            label="Judul Video"
-            placeholder="Masukkan judul video"
+            label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+            placeholder='Masukkan judul video'
            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
+            onChange={(val) => {
+              setFormData({ ...formData, name: val.target.value });
+            }}
          />

          <Box>
@@ -112,46 +94,36 @@ function EditVideo() {
              label="Link Video YouTube"
              placeholder="https://www.youtube.com/watch?v=abc123"
              value={formData.linkVideo}
-              onChange={(e) => setFormData({ ...formData, linkVideo: e.currentTarget.value })}
+              onChange={(e) => {
+                setFormData({ ...formData, linkVideo: e.currentTarget.value });
+              }}
              required
            />
+
            {embedLink && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
-                <iframe
-                  className="rounded"
-                  width="100%"
-                  height="220"
-                  src={embedLink}
-                  title="Preview Video"
-                  allowFullScreen
-                ></iframe>
-              </Box>
+              <iframe
+                className="rounded"
+                width="100%"
+                height="200"
+                src={embedLink}
+                title="Preview Video"
+                allowFullScreen
+              ></iframe>
            )}
          </Box>

          <Box>
-            <Title order={6} fw="bold" fz="sm" mb={6}>
-              Deskripsi Video
-            </Title>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              onChange={(val) => {
+                setFormData({ ...formData, deskripsi: val });
+              }}
            />
          </Box>

-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/gallery/video/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/[id]/page.tsx
@@ -2,145 +2,107 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';

+
 function DetailVideo() {
-  const videoState = useProxy(stateGallery.video);
+  const videoState = useProxy(stateGallery.video)
  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const params = useParams();
-  const router = useRouter();
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()

  useShallowEffect(() => {
-    videoState.findUnique.load(params?.id as string);
-  }, []);
+    videoState.findUnique.load(params?.id as string)
+  }, [])

  const handleHapus = () => {
    if (selectedId) {
-      videoState.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push("/admin/desa/gallery/video");
+      videoState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/gallery/video")
    }
-  };
+  }

  if (!videoState.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton h={500} />
      </Stack>
-    );
+    )
  }

-  const data = videoState.findUnique.data;
-
  return (
-    <Box py={10}>
-      {/* Tombol Kembali */}
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      {/* Detail Video */}
-      <Paper
-        withBorder
-        w={{ base: "100%", md: "50%" }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Video
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">Judul</Text>
-                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Video</Text>
-                {data?.linkVideo ? (
-                  <Box
-                    component="iframe"
-                    src={convertToEmbedUrl(data.linkVideo)}
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Video</Text>
+          {videoState.findUnique.data ? (
+            <Paper key={videoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{videoState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Video</Text>
+                  <Box component="iframe"
+                    src={convertToEmbedUrl(videoState.findUnique.data?.linkVideo)}
                    width="100%"
                    height={300}
                    allowFullScreen
                    style={{ borderRadius: 8 }}
                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">Tidak ada video</Text>
-                )}
-              </Box>

-              <Box>
-                <Text fz="lg" fw="bold">Tanggal Video</Text>
-                <Text fz="md" c="dimmed">
-                  {data?.createdAt ? new Date(data.createdAt).toDateString() : '-'}
-                </Text>
-              </Box>
+                </Box>

-              <Box>
-                <Text fz="lg" fw="bold">Deskripsi</Text>
-                {data?.deskripsi ? (
-                  <Text
-                    fz="md"
-                    c="dimmed"
-                    dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">Tidak ada deskripsi</Text>
-                )}
-              </Box>
-
-              {/* Tombol Aksi */}
-              <Group gap="sm">
-                <Tooltip label="Hapus Video" withArrow position="top">
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Tanggal Video</Text>
+                  <Text fz={"lg"}>{new Date(videoState.findUnique.data?.createdAt).toDateString()}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: videoState.findUnique.data?.deskripsi }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
                  <Button
-                    color="red"
                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
+                      if (videoState.findUnique.data) {
+                        setSelectedId(videoState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    disabled={videoState.delete.loading || !videoState.findUnique.data}
+                    color={"red"}
                  >
-                    <IconTrash size={20} />
+                    <IconX size={20} />
                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Video" withArrow position="top">
                  <Button
-                    color="green"
-                    onClick={() =>
-                      router.push(`/admin/desa/gallery/video/${data.id}/edit`)
-                    }
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    onClick={() => {
+                      if (videoState.findUnique.data) {
+                        router.push(`/admin/desa/gallery/video/${videoState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!videoState.findUnique.data}
+                    color={"green"}
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

@@ -149,16 +111,17 @@ function DetailVideo() {
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus video ini?"
+        text='Apakah anda yakin ingin menghapus berita ini?'
      />
    </Box>
-  );

+  );
  function convertToEmbedUrl(youtubeUrl: string): string {
    try {
      const url = new URL(youtubeUrl);
      const videoId = url.searchParams.get("v");
      if (!videoId) return youtubeUrl;
+
      return `https://www.youtube.com/embed/${videoId}`;
    } catch (err) {
      console.error("Error converting YouTube URL to embed:", err);
--- a/src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/create/page.tsx
@@ -1,18 +1,8 @@
-'use client';
+'use client'
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -20,104 +10,77 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import { convertYoutubeUrlToEmbed } from '../../lib/youtube-utils';

+
+
 function CreateVideo() {
-  const videoState = useProxy(stateGallery.video);
+  const videoState = useProxy(stateGallery.video)
  const router = useRouter();
-  const [link, setLink] = useState('');
+  const [link, setLink] = useState("");
  const embedLink = convertYoutubeUrlToEmbed(link);

  const resetForm = () => {
    videoState.create.form = {
-      name: '',
-      deskripsi: '',
-      linkVideo: '',
+      name: "",
+      deskripsi: "",
+      linkVideo: "",
    };
-    setLink('');
  };
-
  const handleSubmit = async () => {
    if (!embedLink) {
-      toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
+      toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
      return;
    }
-
-    videoState.create.form.linkVideo = embedLink;
+  
+    videoState.create.form.linkVideo = embedLink; // pastikan diset di sini juga (jaga-jaga)
    await videoState.create.create();
    resetForm();
-    router.push('/admin/desa/gallery/video');
+    router.push("/admin/desa/gallery/video");
  };
+  

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header Back Button + Title */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Video
-        </Title>
-      </Group>
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>

-      {/* Card Form */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Judul */}
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Video</Title>
          <TextInput
-            label="Judul Video"
-            placeholder="Masukkan judul video"
+            label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
+            placeholder='Masukkan judul video'
            value={videoState.create.form.name}
-            onChange={(e) => {
-              videoState.create.form.name = e.currentTarget.value;
+            onChange={(val) => {
+              videoState.create.form.name = val.target.value;
            }}
-            required
          />
-
-          {/* Link YouTube */}
-          <TextInput
-            label="Link Video YouTube"
-            placeholder="https://www.youtube.com/watch?v=abc123"
-            value={link}
-            onChange={(e) => setLink(e.currentTarget.value)}
-            required
-          />
-
-          {/* Preview Video */}
-          {embedLink && (
-            <Box mt="sm">
-              <iframe
-                style={{
-                  borderRadius: 10,
-                  width: '100%',
-                  height: 400,
-                  border: '1px solid #ddd',
-                }}
-                src={embedLink}
-                title="Preview Video"
-                allowFullScreen
-              ></iframe>
-            </Box>
-          )}
-
-          {/* Deskripsi */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Deskripsi Video
-            </Text>
+            <Stack gap={"xs"}>
+              <TextInput
+                label="Link Video YouTube"
+                placeholder="https://www.youtube.com/watch?v=abc123"
+                value={link}
+                onChange={(e) => {
+                  setLink(e.currentTarget.value);
+                }}
+                required
+              />
+
+              {embedLink && (
+                <iframe
+                  style={{ borderRadius: 10, width: "100%", height: 400 }}
+                  src={embedLink}
+                  title="Preview Video"
+                  allowFullScreen
+                ></iframe>
+              )}
+            </Stack>
+          </Box>
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
            <CreateEditor
              value={videoState.create.form.deskripsi}
              onChange={(val) => {
@@ -125,21 +88,8 @@ function CreateVideo() {
              }}
            />
          </Box>
-
-          {/* Button Submit */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/gallery/video/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/page.tsx
@@ -1,30 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip
-} from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import stateGallery from '../../../_state/desa/gallery';

 function Video() {
@@ -32,8 +15,8 @@ function Video() {
  return (
    <Box>
      <HeaderSearch
-        title='Video'
-        placeholder='Cari judul atau deskripsi video...'
+        title='Posisi Organisasi'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -46,7 +29,6 @@ function Video() {
 function ListVideo({ search }: { search: string }) {
  const videoState = useProxy(stateGallery.video)
  const router = useRouter();
-
  const {
    data,
    page,
@@ -59,104 +41,72 @@ function ListVideo({ search }: { search: string }) {
    load(page, 10, search)
  }, [page, search])

-  const filteredData = data || []
+  const filteredData = (data || [])

  if (loading || !data) {
    return (
-      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
-      </Stack>
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
    )
  }

  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Video</Title>
-          <Tooltip label="Tambah Video Baru" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/desa/gallery/video/create')}
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '25%' }}>Judul Video</TableTh>
-                <TableTh style={{ width: '20%' }}>Tanggal</TableTh>
-                <TableTh style={{ width: '30%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Video'
+          href='/admin/desa/gallery/video/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Judul Video</TableTh>
+              <TableTh>Tanggal Video</TableTh>
+              <TableTh>Deskripsi Video</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>
+                  <Box w={200}>
+                    <Text lineClamp={1}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                
+                <TableTd>
+                  <Box w={200}>
+                  {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                  })}
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={200}>
+                    <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
-                      <Box w={200}> 
-                        <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd style={{ width: '20%' }}>
-                     <Box w={200}>
-                     <Text fz="sm" c="dimmed">
-                        {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                          day: 'numeric',
-                          month: 'long',
-                          year: 'numeric',
-                        })}
-                      </Text>
-                     </Box>
-                    </TableTd>
-                    <TableTd style={{ width: '30%' }}>
-                     <Box w={200}>
-                      <Text fz="sm" truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                     </Box>
-                    </TableTd>
-                    <TableTd style={{ width: '15%' }}>
-                      <Button
-                        variant="light"
-                        color="blue"
-                        onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}
-                      >
-                        <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text c="dimmed">Tidak ada video yang cocok</Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+            ))}
+          </TableTbody>
+        </Table>
      </Paper>
      <Center>
        <Pagination
          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10)
-            window.scrollTo({ top: 0, behavior: 'smooth' })
-          }}
+          onChange={(newPage) => load(newPage)} // ini penting!
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/edit/page.tsx
@@ -3,7 +3,7 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+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';
@@ -49,74 +49,52 @@ function EditPelayananPendudukNonPermanent() {
  }
  return (
    <Box>
-      <Stack gap="xs">
-        <Group mb="md">
-          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-              <IconArrowBack color={colors['blue-button']} size={24} />
-            </Button>
-          </Tooltip>
-          <Title order={4} ml="sm" c="dark">
-            Edit Pelayanan Penduduk Non Permanent
-          </Title>
-        </Group>
-
-        <Paper
-          w={{ base: "100%", md: "50%" }}
-          bg={colors['white-1']}
-          p="md"
-          radius="md"
-          shadow="sm"
-          style={{ border: '1px solid #e0e0e0' }}
-        >
-          <Stack gap="xs">
-            <Title order={3}>Edit Pelayanan Penduduk Non Permanent</Title>
-
-            {/* Nama Field */}
-            <TextInput
-              label="Judul"
-              placeholder="Masukkan judul"
-              value={formData.name}
-              onChange={(e) =>
-                setFormData({ ...formData, name: e.target.value })
-              }
-              required
-            />
-
-            {/* Posisi Field */}
-            <Box>
-              <Text fz="sm" fw="bold">
-                Deskripsi
-              </Text>
-              <EditEditor
-                value={formData.deskripsi}
-                onChange={(htmlContent) => {
-                  setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Pelayanan Penduduk Non Permanent</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <TextInput
+                value={formData.name}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    name: val.target.value,
+                  })
                }}
              />
-            </Box>
-
-            {/* Submit Button */}
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-                loading={statePendudukNonPermanent.update.loading}
-                disabled={!formData.name}
-              >
-                {statePendudukNonPermanent.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
-              </Button>
-
-              <Button
-                variant="outline"
-                onClick={() => router.back()}
-                disabled={statePendudukNonPermanent.update.loading}
-              >
-                Batal
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
+              <Text fw={"bold"}>Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    deskripsi: val,
+                  })
+                }}
+              />
+              
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  loading={statePendudukNonPermanent.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
      </Stack>
    </Box>
  );
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/page.tsx
@@ -1,103 +1,51 @@
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Divider,
-  Grid,
-  GridCol,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateLayananDesa from '../../../_state/desa/layananDesa';

-function PelayananPendudukNonPermanent() {
-  const router = useRouter();
-  const pelayananPendudukNonPermanen = useProxy(
-    stateLayananDesa.pelayananPendudukNonPermanen
-  );
+function SuratKeterangan() {
+  const router = useRouter()
+  const pelayananPendudukNonPermanen = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)

  useShallowEffect(() => {
-    pelayananPendudukNonPermanen.findById.load('1');
-  }, []);
+    pelayananPendudukNonPermanen.findById.load('1')
+  }, [])

  if (!pelayananPendudukNonPermanen.findById.data) {
    return (
-      <Stack align="center" justify="center" py="xl">
-        <Skeleton radius="md" height={800} />
+      <Stack>
+        <Skeleton radius={10} h={800} />
      </Stack>
-    );
+    )
  }
-
-  const data = pelayananPendudukNonPermanen.findById.data;
-
  return (
-    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
-      <Stack gap="md">
-        {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Preview Pelayanan Penduduk Non Permanen
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Tooltip label="Edit Data Pelayanan" withArrow>
-              <Button
-                c="green"
-                variant="light"
-                leftSection={<IconEdit size={18} stroke={2} />}
-                radius="md"
-                onClick={() =>
-                  router.push(
-                    '/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit'
-                  )
-                }
-              >
-                Edit
-              </Button>
-            </Tooltip>
-          </GridCol>
-        </Grid>
-
-        {/* Content */}
-        <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
-          <Box px={{ base: 0, md: 50 }} pb="xl">
-            <Center>
-              <Text
-                ta="center"
-                fz={{ base: '1.2rem', md: '1.8rem' }}
-                fw="bold"
-                c={colors['blue-button']}
-              >
-                {data.name}
-              </Text>
-            </Center>
-
-            <Divider my="md" color={colors['blue-button']} />
-
-            <Box mt="lg">
-              <Text
-                py={10}
-                ta="justify"
-                fz={{ base: '1rem', md: '1.2rem' }}
-                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-              />
-            </Box>
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Paper bg={colors['BG-trans']} p={'md'}>
+          <Box py={15}>
+            <Stack gap={"xs"}>
+              <Grid>
+                <GridCol span={{ base: 12, md: 11 }}>
+                  <Text fz={"h4"} fw={"bold"}>Preview Pelayanan Perizinan Berusaha</Text>
+                </GridCol>
+                <GridCol span={{ base: 12, md: 1 }}>
+                  <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit')}>
+                    <IconEdit size={16} />
+                  </Button>
+                </GridCol>
+              </Grid>
+            </Stack>
          </Box>
+          <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>{pelayananPendudukNonPermanen.findById.data.name}</Text>
+          <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }} dangerouslySetInnerHTML={{ __html: pelayananPendudukNonPermanen.findById.data.deskripsi }} />
        </Paper>
-      </Stack>
-    </Paper>
+      </Paper>
+    </Box>
  );
 }

-export default PelayananPendudukNonPermanent;
+export default SuratKeterangan;
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/edit/page.tsx
@@ -3,7 +3,7 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
+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';
@@ -14,7 +14,6 @@ function EditPelayananPerizinanBerusaha() {
  const router = useRouter();
  const params = useParams()
  const statePerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
-
  const [formData, setFormData] = useState({
    name: statePerizinanBerusaha.findById.data?.name || '',
    deskripsi: statePerizinanBerusaha.findById.data?.deskripsi || '',
@@ -51,81 +50,64 @@ function EditPelayananPerizinanBerusaha() {
    }
    router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha')
  }
-
  return (
    <Box>
-      <Stack gap="xs">
-        {/* Header Section */}
-        <Group mb="md">
-          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-              <IconArrowBack color={colors['blue-button']} size={24} />
-            </Button>
-          </Tooltip>
-          <Title order={4} ml="sm" c="dark">
-            Edit Pelayanan Perizinan Berusaha
-          </Title>
-        </Group>
-
-        {/* Form Section */}
-        <Paper
-          w={{ base: "100%", md: "50%" }}
-          bg={colors['white-1']}
-          p="md"
-          radius="md"
-          shadow="sm"
-          style={{ border: '1px solid #e0e0e0' }}
-        >
-          <Stack gap="xs">
-            <Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
-
-            {/* Nama Field */}
-            <TextInput
-              label="Judul"
-              placeholder="Masukkan judul"
-              value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-              required
-            />
-
-            {/* Link Field */}
-            <TextInput
-              label="Link"
-              placeholder="Masukkan link terkait"
-              value={formData.link}
-              onChange={(e) => setFormData({ ...formData, link: e.target.value })}
-            />
-
-            {/* Deskripsi Field */}
-            <Box>
-              <Title order={6}>Deskripsi</Title>
+      <Stack gap={'xs'}>
+        <Box>
+          <Button
+            variant={'subtle'}
+            onClick={() => router.back()}
+          >
+            <IconArrowBack color={colors['blue-button']} size={20} />
+          </Button>
+        </Box>
+        <Box>
+          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
+            <Stack gap={'xs'}>
+              <Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
+              <Text fw={"bold"}>Judul</Text>
+              <TextInput
+                value={formData.name}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    name: val.target.value,
+                  })
+                }}
+              />
+              <Text fw={"bold"}>Link</Text>
+              <TextInput
+                value={formData.link}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    link: val.target.value,
+                  })
+                }}
+              />
+              <Text fw={"bold"}>Deskripsi</Text>
              <EditEditor
                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+                onChange={(val) => {
+                  setFormData({
+                    ...formData,
+                    deskripsi: val,
+                  })
+                }}
              />
-            </Box>
-
-            {/* Action Buttons */}
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-                loading={statePerizinanBerusaha.update.loading}
-                disabled={!formData.name}
-              >
-                {statePerizinanBerusaha.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
-              </Button>
-
-              <Button
-                variant="outline"
-                onClick={() => router.back()}
-                disabled={statePerizinanBerusaha.update.loading}
-              >
-                Batal
-              </Button>
-            </Group>
-          </Stack>
-        </Paper>
+              
+              <Group>
+                <Button
+                  bg={colors['blue-button']}
+                  onClick={handleSubmit}
+                  loading={statePerizinanBerusaha.update.loading}
+                >
+                  Submit
+                </Button>
+              </Group>
+            </Stack>
+          </Paper>
+        </Box>
      </Stack>
    </Box>
  );
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/page.tsx
@@ -1,23 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Divider,
-  Grid,
-  GridCol,
-  Group,
-  Paper,
-  Skeleton,
-  Stack,
-  Stepper,
-  StepperCompleted,
-  StepperStep,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Grid, GridCol, Group, Paper, Skeleton, Stack, Stepper, StepperCompleted, StepperStep, Text } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -26,158 +9,88 @@ import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';

 function PerizinanBerusaha() {
-  const router = useRouter();
-  const pelayananPerizinanBerusaha = useProxy(
-    stateLayananDesa.pelayananPerizinanBerusaha
-  );
+  const router = useRouter()
+  const pelayananPerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
  const [active, setActive] = useState(1);
-  const nextStep = () =>
-    setActive((current) => (current < 6 ? current + 1 : current));
-  const prevStep = () =>
-    setActive((current) => (current > 0 ? current - 1 : current));
-
+  const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
+  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
  useShallowEffect(() => {
-    pelayananPerizinanBerusaha.findById.load('1');
-  }, []);
+    pelayananPerizinanBerusaha.findById.load('1')
+  }, [])

-  if (!pelayananPerizinanBerusaha.findById.data) {
+  if(!pelayananPerizinanBerusaha.findById.data) {
    return (
-      <Stack align="center" justify="center" py="xl">
-        <Skeleton radius="md" height={800} />
+      <Stack>
+        <Skeleton radius={10} h={800} />
      </Stack>
-    );
+    )
  }
-
-  const data = pelayananPerizinanBerusaha.findById.data;
-
  return (
-    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
-      <Stack gap="md">
-        {/* Header */}
-        <Grid align="center">
-          <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3} c={colors['blue-button']}>
-              Preview Pelayanan Perizinan Berusaha
-            </Title>
-          </GridCol>
-          <GridCol span={{ base: 12, md: 1 }}>
-            <Tooltip label="Edit Data Perizinan" withArrow>
-              <Button
-                c="green"
-                variant="light"
-                leftSection={<IconEdit size={18} stroke={2} />}
-                radius="md"
-                onClick={() =>
-                  router.push(
-                    '/admin/desa/layanan/pelayanan_perizinan_berusaha/edit'
-                  )
-                }
-              >
-                Edit
-              </Button>
-            </Tooltip>
-          </GridCol>
-        </Grid>
-
-        {/* Content */}
-        <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
-          <Box px={{ base: 0, md: 50 }} pb="xl">
-            <Center>
-              <Text
-                ta="center"
-                fz={{ base: '1.2rem', md: '1.8rem' }}
-                fw="bold"
-                c={colors['blue-button']}
-              >
-                {data.name}
-              </Text>
-            </Center>
-
-            <Divider my="md" color={colors['blue-button']} />
-
-            <Box mt="lg">
-              <Text
-                py={10}
-                ta="justify"
-                fz={{ base: '1rem', md: '1.2rem' }}
-                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-              />
-
-              <Text
-                py={10}
-                fz={{ base: '1rem', md: '1.2rem' }}
-                fw="bold"
-                c={colors['blue-button']}
-              >
-                Proses pendaftaran NIB melalui OSS mencakup beberapa langkah
-                umum:
-              </Text>
-
-              <Box p="xl" w="100%">
-                <Stepper
-                  active={active}
-                  onStepClick={setActive}
-                  orientation="vertical"
-                  styles={{
-                    separator: { marginLeft: 25 },
-                    step: { padding: '12px 0' },
-                  }}
-                >
-                  <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
-                    Pendaftaran akun pada portal OSS
-                  </StepperStep>
-                  <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
-                    Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
-                  </StepperStep>
-                  <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI">
-                    Memilih KBLI dengan jenis usaha yang akan didaftarkan
-                  </StepperStep>
-                  <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
-                    Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
-                  </StepperStep>
-                  <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
-                    Proses verifikasi dan persetujuan oleh instansi terkait
-                  </StepperStep>
-                  <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
-                    Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
-                  </StepperStep>
-                  <StepperCompleted>
-                    Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
-                  </StepperCompleted>
-                </Stepper>
-
-                <Group justify="center" mt="xl">
-                  <Button variant="default" onClick={prevStep}>
-                    Back
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Paper bg={colors['BG-trans']} p={'md'}>
+          <Box py={15}>
+            <Stack gap={"xs"}>
+              <Grid>
+                <GridCol span={{ base: 12, md: 11 }}>
+                  <Text fz={"h4"} fw={"bold"}>Preview Pelayanan Perizinan Berusaha</Text>
+                </GridCol>
+                <GridCol span={{ base: 12, md: 1 }}>
+                  <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha/edit')}>
+                    <IconEdit size={16} />
                  </Button>
-                  <Button onClick={nextStep}>Next step</Button>
-                </Group>
-              </Box>
+                </GridCol>
+              </Grid>
+            </Stack>
+          </Box>
+            <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>{pelayananPerizinanBerusaha.findById.data.name}</Text>
+          <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }} dangerouslySetInnerHTML={{__html: pelayananPerizinanBerusaha.findById.data.deskripsi}} />
+          <Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
+          <Box p={"xl"} w={{ base: "100%", md: "100%" }} >
+            <Stepper active={active} onStepClick={setActive} orientation="vertical"
+              styles={{
+                separator: {
+                  marginLeft: 25
+                },

-              <Text
-                py={35}
-                ta="justify"
-                fz={{ base: '1rem', md: '1.2rem' }}
-              >
-                Penting untuk diingat bahwa prosedur dan persyaratan dapat
-                berubah seiring waktu. Untuk informasi yang lebih akurat dan
-                terkini, silakan kunjungi situs resmi OSS{' '}
-                <a
-                  href={data.link}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  style={{ color: colors['blue-button'] }}
-                >
-                  {data.link}
-                </a>{' '}
-                atau hubungi instansi terkait di pemerintah Indonesia yang
-                bertanggung jawab atas urusan perizinan usaha.
-              </Text>
-            </Box>
+                step: {
+                  padding: '12px 0'
+                }
+              }}>
+              <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
+                Pendaftaran akun pada portal OSS
+              </StepperStep>
+              <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
+                Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
+              </StepperStep>
+              <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
+                Memilih KBLI dengan jenis usaha yang akan didaftarkan
+              </StepperStep>
+              <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
+                Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
+              </StepperStep>
+              <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
+                Proses verifikasi dan persetujuan oleh instansi terkait
+              </StepperStep>
+              <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
+                Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
+              </StepperStep>
+              <StepperCompleted >
+                Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
+              </StepperCompleted>
+            </Stepper>
+
+            <Group justify="center" mt="xl">
+              <Button variant="default" onClick={prevStep}>Back</Button>
+              <Button onClick={nextStep}>Next step</Button>
+            </Group>
+            <Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
+              seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
+              resmi OSS <a href={pelayananPerizinanBerusaha.findById.data.link}>{pelayananPerizinanBerusaha.findById.data.link}</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
          </Box>
        </Paper>
-      </Stack>
-    </Paper>
+      </Paper>
+    </Box>
  );
 }

--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/edit/page.tsx
@@ -4,18 +4,7 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -24,10 +13,9 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditSuratKeterangan() {
-  const router = useRouter();
-  const params = useParams();
-  const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
-
+  const router = useRouter()
+  const params = useParams()
+  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [previewImage2, setPreviewImage2] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
@@ -37,32 +25,39 @@ function EditSuratKeterangan() {
    deskripsi: stateSurat.edit.form.deskripsi,
    imageId: stateSurat.edit.form.imageId,
    image2Id: stateSurat.edit.form.image2Id,
-  });
+  })

  useEffect(() => {
    const loadSurat = async () => {
      const id = params?.id as string;
      if (!id) return;
-
      try {
        const data = await stateSurat.edit.load(id);
        if (data) {
          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
-            image2Id: data.image2Id || '',
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            imageId: data.imageId || "",
+            image2Id: data.image2Id || "",
          });

-          setPreviewImage(data.image?.link || null);
-          setPreviewImage2(data.image2?.link || null);
+          if (data.image?.link) {
+            setPreviewImage(data.image.link);
+          } else {
+            setPreviewImage(null);
+          }
+
+          if (data.image2?.link) {
+            setPreviewImage2(data.image2.link);
+          } else {
+            setPreviewImage2(null);
+          }
        }
      } catch (error) {
-        console.error('Error loading surat:', error);
-        toast.error('Gagal memuat data surat');
+        console.error("Error loading surat:", error);
+        toast.error("Gagal memuat data surat");
      }
    };
-
    loadSurat();
  }, [params?.id]);

@@ -70,199 +65,171 @@ function EditSuratKeterangan() {
    try {
      stateSurat.edit.form = {
        ...stateSurat.edit.form,
-        ...formData,
-      };
-
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imageId: formData.imageId,
+        image2Id: formData.image2Id,
+      }
      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');
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
        stateSurat.edit.form.imageId = uploaded.id;
      }

      if (file2) {
        const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
        const uploaded = res.data?.data;
-        if (!uploaded?.id) return toast.error('Gagal upload gambar');
+
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+
        stateSurat.edit.form.image2Id = uploaded.id;
      }

-      await stateSurat.edit.update();
-      toast.success('Surat berhasil diperbarui!');
-      router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
+      await stateSurat.edit.update()
+      toast.success("Surat berhasil diperbarui!")
+      router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
    } catch (error) {
-      console.error('Error updating surat:', error);
-      toast.error('Terjadi kesalahan saat memperbarui surat');
+      console.error("Error updating surat:", error);
+      toast.error("Terjadi kesalahan saat memperbarui surat");
    }
-  };
+  }
+

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Back Button */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Surat Keterangan
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Surat Keterangan</Title>
          <TextInput
-            label="Nama Surat Keterangan"
-            placeholder="Masukkan nama surat keterangan"
            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
+            onChange={(val) => {
+              setFormData({ ...formData, name: val.target.value });
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
+            placeholder="masukkan nama surat keterangan"
          />
-
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
+              onChange={(htmlContent) => {
+                setFormData({ ...formData, deskripsi: htmlContent });
+              }}
            />
          </Box>
-
-          {/* Upload Gambar 1 */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar 1
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box >
+              <Dropzone
+                onDrop={(files) => {
+                  const file = files[0]; // Hanya ambil file pertama
+                  if (file) {
+                    setFile(file);
+                    setPreviewImage(URL.createObjectURL(file)); // Buat preview
+                  }
+                }}
+                maxSize={5 * 1024 ** 2} // 5MB
+                accept={{
+                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                  <div>
+                    <Text size="xl" inline>
+                      Drag images here or click to select files
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Attach as many files as you like, each file should not exceed 5mb
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              {previewImage && (
                <Image
                  src={previewImage}
-                  alt="Preview Gambar 1"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: 'contain',
-                    border: `1px solid ${colors['blue-button']}`,
-                  }}
+                  alt="Preview"
+                  width={280}
+                  height={180}
+                  fit="cover"
+                  radius="sm"
+                  mt="md"
                />
-              </Box>
-            )}
+              )}
+            </Box>
          </Box>
-
-          {/* Upload Gambar 2 */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar 2
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile2(selectedFile);
-                  setPreviewImage2(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box >
+              <Dropzone
+                onDrop={(files) => {
+                  const file = files[0]; // Hanya ambil file pertama
+                  if (file) {
+                    setFile2(file);
+                    setPreviewImage2(URL.createObjectURL(file)); // Buat preview
+                  }
+                }}
+                maxSize={5 * 1024 ** 2} // 5MB
+                accept={{
+                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+                }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage2 && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                  <div>
+                    <Text size="xl" inline>
+                      Drag images here or click to select files
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Attach as many files as you like, each file should not exceed 5mb
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+              {previewImage2 && (
                <Image
                  src={previewImage2}
-                  alt="Preview Gambar 2"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: 'contain',
-                    border: `1px solid ${colors['blue-button']}`,
-                  }}
+                  alt="Preview"
+                  width={280}
+                  height={180}
+                  fit="cover"
+                  radius="sm"
+                  mt="md"
                />
-              </Box>
-            )}
+              )}
+            </Box>
          </Box>
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/[id]/page.tsx
@@ -2,177 +2,102 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';

 function DetailSuratKeterangan() {
-  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan);
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const params = useParams();
-  const router = useRouter();
+  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()

  useShallowEffect(() => {
-    suratKeteranganState.findUnique.load(params?.id as string);
-  }, []);
+    suratKeteranganState.findUnique.load(params?.id as string)
+  }, [])
+
+  console.log("Ini datanya",suratKeteranganState.findUnique.data)

  const handleHapus = () => {
    if (selectedId) {
-      suratKeteranganState.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
+      suratKeteranganState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
    }
-  };
+  }

  if (!suratKeteranganState.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
      </Stack>
-    );
+    )
  }

-  const data = suratKeteranganState.findUnique.data;
-
  return (
-    <Box py={10}>
-      {/* Tombol Kembali */}
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '60%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Surat Keterangan
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Nama
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data?.name || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Deskripsi
-                </Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{
-                    __html: data?.deskripsi || '-',
-                  }}
-                />
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Gambar
-                </Text>
-                {data?.image?.link ? (
-                  <Image
-                    src={data.image.link}
-                    alt="gambar"
-                    w={200}
-                    h={200}
-                    radius="md"
-                    fit="cover"
-                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">
-                    Tidak ada gambar
-                  </Text>
-                )}
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Gambar 2
-                </Text>
-                {data?.image2?.link ? (
-                  <Image
-                    src={data.image2.link}
-                    alt="gambar"
-                    w={200}
-                    h={200}
-                    radius="md"
-                    fit="cover"
-                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">
-                    Tidak ada gambar
-                  </Text>
-                )}
-              </Box>
-
-              <Group gap="sm">
-                <Tooltip label="Hapus Surat" withArrow position="top">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Surat Keterangan</Text>
+          {suratKeteranganState.findUnique.data ? (
+            <Paper key={suratKeteranganState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{suratKeteranganState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}dangerouslySetInnerHTML={{ __html: suratKeteranganState.findUnique.data?.deskripsi }}></Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image2?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
                  <Button
-                    color="red"
                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
+                      if (suratKeteranganState.findUnique.data) {
+                        setSelectedId(suratKeteranganState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
-                    disabled={suratKeteranganState.delete.loading}
+                    disabled={suratKeteranganState.delete.loading || !suratKeteranganState.findUnique.data}
+                    color={"red"}
                  >
-                    <IconTrash size={20} />
+                    <IconX size={20} />
                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Surat" withArrow position="top">
                  <Button
-                    color="green"
-                    onClick={() =>
-                      router.push(
-                        `/admin/desa/layanan/pelayanan_surat_keterangan/${data.id}/edit`
-                      )
-                    }
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    onClick={() => {
+                      if (suratKeteranganState.findUnique.data) {
+                        router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${suratKeteranganState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!suratKeteranganState.findUnique.data}
+                    color={"green"}
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

@@ -181,7 +106,7 @@ function DetailSuratKeterangan() {
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus surat keterangan ini?"
+        text='Apakah anda yakin ingin menghapus berita ini?'
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/create/page.tsx
@@ -1,21 +1,9 @@
-'use client';
-
+'use client'
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -24,25 +12,25 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function CreateSuratKeterangan() {
-  const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
+  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
  const [previewImage2, setPreviewImage2] = useState<{ preview: string; file: File } | null>(null);
  const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
-  const router = useRouter();
+  const router = useRouter()

  const resetForm = () => {
    stateSurat.create.form = {
-      name: '',
-      deskripsi: '',
-      imageId: '',
-      image2Id: '',
-    };
-    setPreviewImage(null);
-    setPreviewImage2(null);
-  };
+      name: "",
+      deskripsi: "",
+      imageId: "",
+      image2Id: ""
+    }
+    setPreviewImage(null)
+    setPreviewImage2(null)
+  }

  const handleSubmit = async () => {
    if (!previewImage) {
-      return toast.warn('Pilih file gambar utama terlebih dahulu');
+      return toast.warn("Pilih file gambar utama terlebih dahulu");
    }

    try {
@@ -54,10 +42,11 @@ function CreateSuratKeterangan() {

      const uploadedImage1 = res1.data?.data;
      if (!uploadedImage1?.id) {
-        return toast.error('Gagal upload gambar utama');
+        return toast.error("Gagal upload gambar utama");
      }

      let uploadedImage2 = null;
+      // Upload gambar kedua jika ada
      if (previewImage2) {
        const res2 = await ApiFetch.api.fileStorage.create.post({
          file: previewImage2.file,
@@ -66,58 +55,44 @@ function CreateSuratKeterangan() {
        uploadedImage2 = res2.data?.data;
      }

+      // Set form data
      stateSurat.create.form.imageId = uploadedImage1.id;
      if (uploadedImage2?.id) {
        stateSurat.create.form.image2Id = uploadedImage2.id;
      }

+      // Create the record
      await stateSurat.create.create();
+      
+      // If we get here without errors, the create was successful
      resetForm();
-      toast.success('Data surat keterangan berhasil ditambahkan');
-      router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
+      toast.success("Data surat keterangan berhasil ditambahkan");
+      router.push("/admin/desa/layanan/pelayanan_surat_keterangan");
    } catch (error) {
-      console.error('Error creating surat keterangan:', error);
-      toast.error('Terjadi kesalahan saat menambahkan surat keterangan');
+      console.error("Error creating surat keterangan:", error);
+      toast.error("Terjadi kesalahan saat menambahkan surat keterangan");
    }
  };
-
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Surat Keterangan
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Nama Surat */}
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Surat Keterangan</Title>
          <TextInput
            value={stateSurat.create.form.name}
-            onChange={(val) => (stateSurat.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Nama Surat Keterangan</Text>}
-            placeholder="Masukkan nama surat keterangan"
-            required
+            onChange={(val) => {
+              stateSurat.create.form.name = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
+            placeholder="masukkan nama surat keterangan"
          />
-
-          {/* Konten */}
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
            <CreateEditor
              value={stateSurat.create.form.deskripsi}
              onChange={(htmlContent) => {
@@ -125,124 +100,106 @@ function CreateSuratKeterangan() {
              }}
            />
          </Box>
-
-          {/* Gambar Utama */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Utama
-            </Text>
+            <Text fz={"md"} fw={"bold"} mb="sm">Gambar Utama</Text>
            <Dropzone
              onDrop={(files) => {
                const file = files[0];
                if (file) {
                  setPreviewImage({
                    file,
-                    preview: URL.createObjectURL(file),
+                    preview: URL.createObjectURL(file)
                  });
                }
              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
+              accept={{
+                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+              }}
            >
-              <Group justify="center" gap="xl" mih={180}>
+              <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
                <Dropzone.Accept>
-                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  <IconUpload size={32} color="var(--mantine-color-blue-6)" stroke={1.5} />
                </Dropzone.Accept>
                <Dropzone.Reject>
-                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  <IconX size={32} color="var(--mantine-color-red-6)" stroke={1.5} />
                </Dropzone.Reject>
                <Dropzone.Idle>
-                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  <IconPhoto size={32} color="var(--mantine-color-dimmed)" stroke={1.5} />
                </Dropzone.Idle>
+                <div>
+                  <Text size="md" inline>Seret gambar ke sini atau klik untuk memilih</Text>
+                  <Text size="sm" c="dimmed" inline mt={7} display="block">
+                    Ukuran maksimal 5MB (JPEG, JPG, PNG, WebP)
+                  </Text>
+                </div>
              </Group>
-              <Text ta="center" mt="sm" size="sm" color="dimmed">
-                Seret gambar atau klik untuk memilih file (maks 5MB)
-              </Text>
            </Dropzone>
-
            {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
-                <Image
-                  src={previewImage.preview}
-                  alt="Preview Gambar Utama"
-                  radius="md"
-                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
-                />
-              </Box>
+              <Image
+                src={previewImage.preview}
+                alt="Preview Gambar Utama"
+                width={280}
+                height={180}
+                fit="cover"
+                radius="sm"
+                mt="md"
+              />
            )}
          </Box>

-          {/* Gambar Tambahan */}
-          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Tambahan (Opsional)
-            </Text>
+          <Box mt="lg">
+            <Text fz={"md"} fw={"bold"} mb="sm">Gambar Tambahan (Opsional)</Text>
            <Dropzone
              onDrop={(files) => {
                const file = files[0];
                if (file) {
                  setPreviewImage2({
                    file,
-                    preview: URL.createObjectURL(file),
+                    preview: URL.createObjectURL(file)
                  });
                }
              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
+              accept={{
+                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+              }}
            >
-              <Group justify="center" gap="xl" mih={180}>
+              <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
                <Dropzone.Accept>
-                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  <IconUpload size={32} color="var(--mantine-color-blue-6)" stroke={1.5} />
                </Dropzone.Accept>
                <Dropzone.Reject>
-                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  <IconX size={32} color="var(--mantine-color-red-6)" stroke={1.5} />
                </Dropzone.Reject>
                <Dropzone.Idle>
-                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  <IconPhoto size={32} color="var(--mantine-color-dimmed)" stroke={1.5} />
                </Dropzone.Idle>
+                <div>
+                  <Text size="md" inline>Seret gambar ke sini atau klik untuk memilih</Text>
+                  <Text size="sm" c="dimmed" inline mt={7} display="block">
+                    Ukuran maksimal 5MB (JPEG, JPG, PNG, WebP)
+                  </Text>
+                </div>
              </Group>
-              <Text ta="center" mt="sm" size="sm" color="dimmed">
-                Seret gambar atau klik untuk memilih file (maks 5MB)
-              </Text>
            </Dropzone>
-
            {previewImage2 ? (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
-                <Image
-                  src={previewImage2.preview}
-                  alt="Preview Gambar Tambahan"
-                  radius="md"
-                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
-                />
-              </Box>
+              <Image
+                src={previewImage2.preview}
+                alt="Preview Gambar Tambahan"
+                width={280}
+                height={180}
+                fit="cover"
+                radius="sm"
+                mt="md"
+              />
            ) : (
-              <Text size="sm" c="dimmed" mt="sm" ta="center">
+              <Text size="sm" c="dimmed" mt="sm">
                Kosongkan jika tidak ada gambar tambahan
              </Text>
            )}
          </Box>
-
-          {/* Tombol Simpan */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_surat_keterangan/page.tsx
@@ -1,30 +1,13 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip
-} from '@mantine/core';
-import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, 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 stateLayananDesa from '../../../_state/desa/layananDesa';

 function SuratKeterangan() {
@@ -33,7 +16,7 @@ function SuratKeterangan() {
    <Box>
      <HeaderSearch
        title='Pelayanan Surat Keterangan'
-        placeholder='Cari nama atau deskripsi...'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -44,8 +27,8 @@ function SuratKeterangan() {
 }

 function ListSuratKeterangan({ search }: { search: string }) {
-  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan);
-  const router = useRouter();
+  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
+  const router = useRouter()

  const {
    data,
@@ -56,111 +39,102 @@ function ListSuratKeterangan({ search }: { search: string }) {
  } = suratKeteranganState.findMany;

  useEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
-
-  const filteredData = useMemo(() => {
-    if (!data) return [];
-    const keyword = search.toLowerCase();
-    return data.filter(item =>
-      item.name?.toLowerCase().includes(keyword) ||
-      item.deskripsi?.toLowerCase().includes(keyword)
-    );
-  }, [data, search]);
-
-  // Loading state
-  if (loading || !data) {
-    return (
-      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
-      </Stack>
-    );
-  }
+    load(page, 10)
+  }, [])

+   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)
+        );
+      })
+    }, [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 Surat Keterangan'
+            href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+          </Box>
+        </Paper>
+        </Box>
+      );
+    }
  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>List Surat Keterangan</Title>
-          <Tooltip label="Tambah Surat Keterangan" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() =>
-                router.push('/admin/desa/layanan/pelayanan_surat_keterangan/create')
-              }
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '30%' }}>Nama</TableTh>
-                <TableTh style={{ width: '45%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd style={{ width: '30%' }}>
-                      <Box w={200}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.name}
-                        </Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd style={{ width: '45%' }}>
-                      <Box w={200}>
-                        <Text truncate="end" lineClamp={1} fz="sm" c="dimmed"
-                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                        />
-                      </Box>
-                    </TableTd>
-                    <TableTd style={{ width: '15%' }}>
-                      <Button
-                        variant="light"
-                        color="blue"
-                        onClick={() =>
-                          router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)
-                        }
-                      >
-                        <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data surat keterangan yang cocok</Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Surat Keterangan'
+          href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>
+                  <Box w={200}>
+                  <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                  </Box>
+                </TableTd>  
+                <TableTd>
+                  <Box w={300}>
+                  <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Text>
+                    <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </Text>
+              </TableTd>
+            </TableTr>
+          ))}
+          </TableTbody>
+        </Table>
      </Paper>
-      <Center>
+      <Center> 
        <Pagination
          value={page}
          onChange={(newPage) => {
-            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+            load(newPage, 10);
+            window.scrollTo(0, 0); 
          }}
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/edit/page.tsx
@@ -2,34 +2,22 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';

 function EditPelayananTelunjukSakti() {
-  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
-  const router = useRouter();
-  const params = useParams();
-
+  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const router = useRouter()
+  const params = useParams()
  const [formData, setFormData] = useState({
    name: stateTelunjukDesa.edit.form.name,
    deskripsi: stateTelunjukDesa.edit.form.deskripsi,
    link: stateTelunjukDesa.edit.form.link,
-  });
+  })

  useEffect(() => {
    const loadPelayananTelunjukSakti = async () => {
@@ -39,14 +27,14 @@ function EditPelayananTelunjukSakti() {
        const data = await stateTelunjukDesa.edit.load(id);
        if (data) {
          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            link: data.link || '',
+            name: data.name,
+            deskripsi: data.deskripsi,
+            link: data.link,
          });
        }
      } catch (error) {
-        console.error('Error loading pelayanan telunjuk sakti:', error);
-        toast.error('Gagal memuat data pelayanan telunjuk sakti');
+        console.error("Error loading pelayanan telunjuk sakti:", error);
+        toast.error("Gagal memuat data pelayanan telunjuk sakti");
      }
    };
    loadPelayananTelunjukSakti();
@@ -56,86 +44,57 @@ function EditPelayananTelunjukSakti() {
    try {
      stateTelunjukDesa.edit.form = {
        ...stateTelunjukDesa.edit.form,
-        ...formData,
-      };
-      await stateTelunjukDesa.edit.update();
-      toast.success('Pelayanan telunjuk sakti berhasil diperbarui!');
-      router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa');
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        link: formData.link,
+      }
+      await stateTelunjukDesa.edit.update()
+      toast.success("Pelayanan telunjuk sakti berhasil diperbarui!")
+      router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
    } catch (error) {
-      console.error('Error updating pelayanan telunjuk sakti:', error);
-      toast.error('Terjadi kesalahan saat memperbarui pelayanan telunjuk sakti');
+      console.error("Error updating pelayanan telunjuk sakti:", error);
+      toast.error("Terjadi kesalahan saat memperbarui pelayanan telunjuk sakti");
    }
-  };
+  }

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Back Button + Title */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Pelayanan Telunjuk Sakti Desa
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Nama */}
-          <TextInput
-            label="Nama Pelayanan"
-            placeholder="Masukkan nama pelayanan"
-            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
-          />
-
-          {/* Deskripsi pakai editor */}
-          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Deskripsi
-            </Text>
-            <EditEditor
-              value={formData.deskripsi}
-              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
-            />
-          </Box>
-
-          {/* Link */}
-          <TextInput
-            label="Link"
-            placeholder="Masukkan link terkait"
-            value={formData.link}
-            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
-          />
-
-          {/* Tombol Simpan */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
+    <Box>
+          <Box mb={10}>
+            <Button variant="subtle" onClick={() => router.back()}>
+              <IconArrowBack color={colors['blue-button']} size={25} />
            </Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
+          </Box>
+          <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+            <Stack gap={"xs"}>
+              <Title order={3}>Edit Surat Keterangan</Title>
+              <TextInput
+                value={formData.name}
+                onChange={(val) => {
+                  setFormData({ ...formData, name: val.target.value });
+                }}
+                label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
+                placeholder="masukkan nama surat keterangan"
+              />
+                <TextInput
+                   value={formData.deskripsi}
+                   onChange={(val) => {
+                     setFormData({ ...formData, deskripsi: val.target.value });
+                   }}
+                   label={<Text fz={"sm"} fw={"bold"}>Tautan Link</Text>}
+                   placeholder="masukkan tautan link"
+                 />
+              <TextInput
+                value={formData.link}
+                onChange={(val) => {
+                  setFormData({ ...formData, link: val.target.value });
+                }}
+                label={<Text fz={"sm"} fw={"bold"}>Link</Text>}
+                placeholder="masukkan link"
+              />
+              <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+            </Stack>
+          </Paper>
+        </Box>
  );
 }

--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/[id]/page.tsx
@@ -2,166 +2,109 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';

 function DetailPelayananTelunjukSakti() {
-  const telunjukSaktiState = useProxy(
-    stateLayananDesa.pelayananTelunjukSaktiDesa
-  );
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const params = useParams();
-  const router = useRouter();
+  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()

  useShallowEffect(() => {
-    telunjukSaktiState.findUnique.load(params?.id as string);
-  }, []);
+    telunjukSaktiState.findUnique.load(params?.id as string)
+  }, [])

  const handleHapus = () => {
    if (selectedId) {
-      telunjukSaktiState.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa');
+      telunjukSaktiState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
    }
-  };
+  }

  if (!telunjukSaktiState.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
      </Stack>
-    );
+    )
  }

-  const data = telunjukSaktiState.findUnique.data;
-
  return (
-    <Box py={10}>
-      {/* Tombol Kembali */}
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '60%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Pelayanan Telunjuk Sakti Desa
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Nama
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data?.name || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Link
-                </Text>
-                {data?.link ? (
+    <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 Pelayanan Telunjuk Sakti Desa</Text>
+          {telunjukSaktiState.findUnique.data ? (
+            <Paper key={telunjukSaktiState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
+                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Link</Text>
                  <Text
-                    fz="md"
                    component="a"
-                    href={data.link}
+                    href={telunjukSaktiState.findUnique.data?.link}
                    target="_blank"
                    rel="noopener noreferrer"
-                    c="blue"
                    style={{
                      display: 'block',
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
+                      whiteSpace: 'nowrap'
                    }}
                  >
-                    {data.link}
+                    {telunjukSaktiState.findUnique.data?.link}
                  </Text>
-                ) : (
-                  <Text fz="sm" c="dimmed">
-                    Tidak ada link
-                  </Text>
-                )}
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Deskripsi
-                </Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{
-                    __html: data?.deskripsi || '-',
-                  }}
-                />
-              </Box>
-
-              <Group gap="sm">
-                <Tooltip label="Hapus Layanan" withArrow position="top">
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Flex gap={"xs"} mt={10}>
                  <Button
-                    color="red"
                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
+                      if (telunjukSaktiState.findUnique.data) {
+                        setSelectedId(telunjukSaktiState.findUnique.data.id);
+                        setModalHapus(true);
+                      }
                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
-                    disabled={telunjukSaktiState.delete.loading}
+                    disabled={telunjukSaktiState.delete.loading || !telunjukSaktiState.findUnique.data}
+                    color={"red"}
                  >
-                    <IconTrash size={20} />
+                    <IconX size={20} />
                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Layanan" withArrow position="top">
                  <Button
-                    color="green"
-                    onClick={() =>
-                      router.push(
-                        `/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${data.id}/edit`
-                      )
-                    }
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    onClick={() => {
+                      if (telunjukSaktiState.findUnique.data) {
+                        router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${telunjukSaktiState.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!telunjukSaktiState.findUnique.data}
+                    color={"green"}
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

@@ -170,7 +113,7 @@ function DetailPelayananTelunjukSakti() {
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus layanan ini?"
+        text='Apakah anda yakin ingin menghapus berita ini?'
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/create/page.tsx
@@ -1,117 +1,64 @@
-'use client';
-
+'use client'
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
-import { toast } from 'react-toastify';

 function CreatePelayananTelunjukDesa() {
-  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
-  const router = useRouter();
+  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const router = useRouter()

  const resetForm = () => {
    stateTelunjukDesa.create.form = {
-      name: '',
-      deskripsi: '',
-      link: '',
-    };
-  };
+      name: "",
+      deskripsi: "",
+      link: "",
+    }
+  }

  const handleSubmit = async () => {
-    try {
-      await stateTelunjukDesa.create.create();
-      resetForm();
-      toast.success('Data pelayanan telunjuk sakti berhasil ditambahkan');
-      router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa');
-    } catch (error) {
-      console.error('Error create pelayanan telunjuk sakti:', error);
-      toast.error('Terjadi kesalahan saat menambahkan data');
-    }
-  };
+    await stateTelunjukDesa.create.create()
+    resetForm()
+    router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")

+  }
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Pelayanan Telunjuk Sakti Desa
-        </Title>
-      </Group>
-
-      {/* Form */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Nama */}
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Pelayanan Telunjuk Sakti Desa</Title>
          <TextInput
            value={stateTelunjukDesa.create.form.name}
            onChange={(val) => {
              stateTelunjukDesa.create.form.name = val.target.value;
            }}
-            label={<Text fz="sm" fw="bold">Nama Pelayanan</Text>}
-            placeholder="Masukkan nama pelayanan telunjuk sakti desa"
-            required
+            label={<Text fz={"sm"} fw={"bold"}>Nama Pelayanan Telunjuk Sakti Desa</Text>}
+            placeholder="masukkan nama pelayanan telunjuk sakti desa"
          />
-
-          {/* Deskripsi */}
          <TextInput
            value={stateTelunjukDesa.create.form.deskripsi}
            onChange={(val) => {
              stateTelunjukDesa.create.form.deskripsi = val.target.value;
            }}
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="Masukkan deskripsi pelayanan"
+            label={<Text fz={"sm"} fw={"bold"}>Tautan Link</Text>}
+            placeholder="masukkan tautan link"
          />
-
-          {/* Link */}
          <TextInput
            value={stateTelunjukDesa.create.form.link}
            onChange={(val) => {
              stateTelunjukDesa.create.form.link = val.target.value;
            }}
-            label={<Text fz="sm" fw="bold">Link</Text>}
-            placeholder="Masukkan link pelayanan"
+            label={<Text fz={"sm"} fw={"bold"}>Link</Text>}
+            placeholder="masukkan link"
          />
-
-          {/* Tombol Simpan */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_telunjuk_sakti_desa/page.tsx
@@ -1,187 +1,13 @@
-// /* 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 { IconDeviceImac, 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 stateLayananDesa from '../../../_state/desa/layananDesa';
-
-// function PelayananTelunjukSakti() {
-//   const [search, setSearch] = useState("");
-//   return (
-//     <Box>
-//       <HeaderSearch
-//         title='Posisi Organisasi'
-//         placeholder='pencarian'
-//         searchIcon={<IconSearch size={20} />}
-//         value={search}
-//         onChange={(e) => setSearch(e.currentTarget.value)}
-//       />
-//       <ListPelayananTelunjukSakti search={search} />
-//     </Box>
-//   );
-// }
-
-// function ListPelayananTelunjukSakti({ search }: { search: string }) {
-//   const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
-//   const router = useRouter()
-
-//   const {
-//     data,
-//     page,
-//     totalPages,
-//     loading,
-//     load,
-//   } = telunjukSaktiState.findMany;
-
-//   useEffect(() => {
-//     load(page, 10)
-//   }, [])
-
-//   const filteredData = useMemo(() => {
-//     if (!data) return [];
-//     return data.filter(item => {
-//       const keyword = search.toLowerCase();
-//       return (
-//         item.name?.toLowerCase().includes(keyword) ||
-//         item.link?.toLowerCase().includes(keyword) ||
-//         item.deskripsi?.toLowerCase().includes(keyword)
-//       );
-//     })
-//       .sort((a, b) => a.posisi?.hierarki - b.posisi?.hierarki);
-//   }, [data, search]);
-
-//   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 Pelayanan Telunjuk Sakti Desa'
-//             href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
-//           />
-//           <Table striped withTableBorder withRowBorders>
-//             <TableThead>
-//               <TableTr>
-//                 <TableTh>Nama</TableTh>
-//                 <TableTh>Link</TableTh>
-//                 <TableTh>Detail</TableTh>
-//               </TableTr>
-//             </TableThead>
-//             <TableTbody>
-//               <TableTr>
-//                 <TableTd colSpan={3}>
-//                   <Text fz={"sm"} color="gray.5">
-//                     Tidak ada data
-//                   </Text>
-//                 </TableTd>
-//               </TableTr>
-//             </TableTbody>
-//           </Table>
-//         </Paper>
-//       </Box>
-//     );
-//   }
-
-//   return (
-//     <Box py={10}>
-//       <Paper bg={colors['white-1']} p={'md'}>
-//         <JudulList
-//           title='List Pelayanan Telunjuk Sakti Desa'
-//           href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
-//         />
-//         <Table striped withTableBorder withRowBorders>
-//           <TableThead>
-//             <TableTr>
-//               <TableTh>Nama</TableTh>
-//               <TableTh>Link</TableTh>
-//               <TableTh>Detail</TableTh>
-//             </TableTr>
-//           </TableThead>
-//           <TableTbody>
-//             {filteredData.map((item) => (
-//               <TableTr key={item.id}>
-//                 <TableTd>
-//                   <Box w={100}>
-//                     <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.name }} />
-//                   </Box>
-//                 </TableTd>
-//                 <TableTd>
-//                   <Box w={100}>
-//                     <a href={item.link} target="_blank" rel="noopener noreferrer">
-//                       <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
-//                     </a>
-//                   </Box>
-//                 </TableTd>
-//                 <TableTd>
-//                   <Text>
-//                     <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`)}>
-//                       <IconDeviceImac size={20} />
-//                     </Button>
-//                   </Text>
-//                 </TableTd>
-//               </TableTr>
-//             ))}
-//           </TableTbody>
-//         </Table>
-//       </Paper>
-//       <Center>
-//         <Pagination
-//           value={page}
-//           onChange={(newPage) => {
-//             load(newPage, 10);
-//             window.scrollTo(0, 0);
-//           }}
-//           total={totalPages}
-//           mt="md"
-//           mb="md"
-//         />
-//       </Center>
-//     </Box>
-//   );
-// }
-
-// export default PelayananTelunjukSakti;
-
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
-import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import stateLayananDesa from '../../../_state/desa/layananDesa';

 function PelayananTelunjukSakti() {
@@ -189,8 +15,8 @@ function PelayananTelunjukSakti() {
  return (
    <Box>
      <HeaderSearch
-        title="Pelayanan Telunjuk Sakti"
-        placeholder="Cari layanan..."
+        title='Posisi Organisasi'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -201,113 +27,125 @@ function PelayananTelunjukSakti() {
 }

 function ListPelayananTelunjukSakti({ search }: { search: string }) {
-  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
-  const router = useRouter();
+  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+  const router = useRouter()

-  const { data, page, totalPages, loading, load } = telunjukSaktiState.findMany;
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = telunjukSaktiState.findMany;

  useEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10)
+  }, [])

-  const filteredData = data || [];
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    return data.filter(item => {
+      const keyword = search.toLowerCase();
+      return (
+        item.name?.toLowerCase().includes(keyword) ||
+        item.link?.toLowerCase().includes(keyword) ||
+        item.deskripsi?.toLowerCase().includes(keyword)
+      );
+    })
+      .sort((a, b) => a.posisi?.hierarki - b.posisi?.hierarki);
+  }, [data, search]);

  if (loading || !data) {
    return (
      <Stack py={10}>
-        <Skeleton height={400} radius="md" />
+        <Skeleton height={300} />
      </Stack>
    );
  }

+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Pelayanan Telunjuk Sakti Desa'
+            href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama</TableTh>
+                <TableTh>Link</TableTh>
+                <TableTh>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              <TableTr>
+                <TableTd colSpan={3}>
+                  <Text fz={"sm"} color="gray.5">
+                    Tidak ada data
+                  </Text>
+                </TableTd>
+              </TableTr>
+            </TableTbody>
+          </Table>
+        </Paper>
+      </Box>
+    );
+  }
+
  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pelayanan Telunjuk Sakti</Title>
-          <Tooltip label="Tambah Layanan" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() =>
-                router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create')
-              }
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '30%' }}>Nama</TableTh>
-                <TableTh style={{ width: '40%' }}>Link</TableTh>
-                <TableTh style={{ width: '30%' }}>Detail</TableTh>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Pelayanan Telunjuk Sakti Desa'
+          href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Link</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>
+                  <Box w={100}>
+                    <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.name }} />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={100}>
+                    <a href={item.link} target="_blank" rel="noopener noreferrer">
+                      <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
+                    </a>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Text>
+                    <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`)}>
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </Text>
+                </TableTd>
              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={200}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.name}
-                        </Text></Box>
-
-                    </TableTd>
-                    <TableTd>
-                      <Box w={200}>
-                        <a href={item.link} target="_blank" rel="noopener noreferrer">
-                          <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
-                        </a>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Button
-                        variant="light"
-                        color="blue"
-                        onClick={() =>
-                          router.push(
-                            `/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`
-                          )
-                        }
-                      >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">
-                        Tidak ada data layanan yang cocok
-                      </Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+            ))}
+          </TableTbody>
+        </Table>
      </Paper>
      <Center>
        <Pagination
          value={page}
          onChange={(newPage) => {
-            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+            load(newPage, 10);
+            window.scrollTo(0, 0);
          }}
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
@@ -315,4 +153,3 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
 }

 export default PelayananTelunjukSakti;
-
--- a/src/app/admin/(dashboard)/desa/penghargaan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/penghargaan/[id]/edit/page.tsx
@@ -4,18 +4,7 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -95,104 +84,87 @@ function EditPenghargaan() {
  }

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Tombol Back + Title */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Penghargaan
-        </Title>
-      </Group>
-
-      {/* Card Form */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Input Judul */}
+    <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 Penghargaan</Title>
          <TextInput
-            label="Judul"
-            placeholder="Masukkan judul penghargaan"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
          />

-          {/* Input Juara */}
          <TextInput
-            label="Juara"
-            placeholder="Masukkan juara"
            value={formData.juara}
            onChange={(e) => setFormData({ ...formData, juara: e.target.value })}
-            required
+            label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
+            placeholder="masukkan juara"
          />
-
-          {/* Upload Gambar */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Penghargaan
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
-                />
-              </Box>
-            )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
          </Box>

-          {/* Deskripsi */}
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Deskripsi
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
            <EditEditor
              value={formData.deskripsi}
              onChange={(htmlContent) => {
@@ -202,21 +174,7 @@ function EditPenghargaan() {
            />
          </Box>

-          {/* Tombol Simpan */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button onClick={handleSubmit}>Edit Penghargaan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/penghargaan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/penghargaan/[id]/page.tsx
@@ -4,166 +4,105 @@ import penghargaanState from '../../../_state/desa/penghargaan';
 import { useProxy } from 'valtio/utils';
 import { useParams, useRouter } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import colors from '@/con/colors';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';

 function DetailPenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState);
+  const statePenghargaan = useProxy(penghargaanState)
  const [modalHapus, setModalHapus] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter();
-  const params = useParams();
+  const router = useRouter()
+  const params = useParams()

  useShallowEffect(() => {
-    statePenghargaan.findUnique.load(params?.id as string);
-  }, []);
+    statePenghargaan.findUnique.load(params?.id as string)
+  }, [])

  const handleHapus = () => {
    if (selectedId) {
-      statePenghargaan.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push('/admin/desa/penghargaan');
+      statePenghargaan.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/penghargaan")
    }
-  };
+  }

  if (!statePenghargaan.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton h={500} />
      </Stack>
-    );
+    )
  }

-  const data = statePenghargaan.findUnique.data;
-
  return (
-    <Box py={10}>
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '60%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Penghargaan
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Gambar
-                </Text>
-                {data.image?.link ? (
-                  <Image
-                    src={data.image.link}
-                    alt={data.name || 'Gambar Penghargaan'}
-                    w={200}
-                    h={200}
-                    radius="md"
-                    fit="cover"
-                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">
-                    Tidak ada gambar
-                  </Text>
-                )}
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Judul
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data.name || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Juara
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data.juara || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Deskripsi
-                </Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
-                />
-              </Box>
-
-              <Group gap="sm" mt={10}>
-                <Tooltip label="Hapus Penghargaan" withArrow position="top">
+    <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 Penghargaan</Text>
+          {statePenghargaan.findUnique.data ? (
+            <Paper key={statePenghargaan.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 400, md: 400, lg: 400 }} src={statePenghargaan.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{statePenghargaan.findUnique.data?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Juara</Text>
+                  <Text fz={"lg"}>{statePenghargaan.findUnique.data?.juara}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePenghargaan.findUnique.data?.deskripsi }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
                  <Button
-                    color="red"
                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
+                      if (statePenghargaan.findUnique.data) {
+                        setSelectedId(statePenghargaan.findUnique.data.id);
+                        setModalHapus(true);
+                      }
                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    disabled={statePenghargaan.delete.loading || !statePenghargaan.findUnique.data}
+                    color={"red"}
                  >
-                    <IconTrash size={20} />
+                    <IconX size={20} />
                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Penghargaan" withArrow position="top">
                  <Button
-                    color="green"
-                    onClick={() =>
-                      router.push(`/admin/desa/penghargaan/${data.id}/edit`)
-                    }
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    onClick={() => {
+                      if (statePenghargaan.findUnique.data) {
+                        router.push(`/admin/desa/penghargaan/${statePenghargaan.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!statePenghargaan.findUnique.data}
+                    color={"green"}
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

+      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus penghargaan ini?"
+        text='Apakah anda yakin ingin menghapus penghargaan ini?'
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/penghargaan/create/page.tsx
@@ -1,18 +1,7 @@
-'use client';
+'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -22,88 +11,74 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import penghargaanState from '../../../_state/desa/penghargaan';

+
 function CreatePenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState);
+  const statePenghargaan = useProxy(penghargaanState)
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
-  const router = useRouter();
+  const router = useRouter()

  const resetForm = () => {
    statePenghargaan.create.form = {
-      name: '',
-      juara: '',
-      deskripsi: '',
-      imageId: '',
-    };
-    setPreviewImage(null);
-    setFile(null);
-  };
+      name: "",
+      juara: "",
+      deskripsi: "",
+      imageId: "",
+    }
+    setPreviewImage(null)
+    setFile(null)
+  }

  const handleSubmit = async () => {
    if (!file) {
-      return toast.warn('Silakan pilih file gambar terlebih dahulu');
+      return toast.error("Silahkan pilih file gambar terlebih dahulu")
    }

    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    });
-
-    const uploaded = res.data?.data;
+      file: file,
+      name: file.name
+    })

+    const uploaded = res.data?.data
    if (!uploaded?.id) {
-      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
+      return toast.error("Gagal upload gambar")
    }

-    statePenghargaan.create.form.imageId = uploaded.id;
+    statePenghargaan.create.form.imageId = uploaded.id

-    await statePenghargaan.create.create();
-    resetForm();
-    router.push('/admin/desa/penghargaan');
-  };
+    await statePenghargaan.create.create()
+    resetForm()
+    router.push("/admin/desa/penghargaan")

+  }
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Penghargaan
-        </Title>
-      </Group>
-
-      {/* Form */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Penghargaan</Title>
          <TextInput
            value={statePenghargaan.create.form.name}
-            onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Nama Penghargaan</Text>}
-            placeholder="Masukkan nama penghargaan"
-            required
+            onChange={(val) => {
+              statePenghargaan.create.form.name = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Penghargaan</Text>}
+            placeholder="masukkan nama penghargaan"
          />
-
          <TextInput
            value={statePenghargaan.create.form.juara}
-            onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
-            label={<Text fz="sm" fw="bold">Juara</Text>}
-            placeholder="Masukkan juara"
-            required
+            onChange={(val) => {
+              statePenghargaan.create.form.juara = val.target.value;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
+            placeholder="masukkan juara"
          />
-
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>Deskripsi</Text>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
            <CreateEditor
              value={statePenghargaan.create.form.deskripsi}
              onChange={(htmlContent) => {
@@ -111,67 +86,63 @@ function CreatePenghargaan() {
              }}
            />
          </Box>
-
-          {/* Dropzone Upload */}
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>Gambar</Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                </Dropzone.Idle>
-              </Group>
-              <Text ta="center" mt="sm" size="sm" color="dimmed">
-                Seret gambar atau klik untuk memilih file (maks 5MB)
-              </Text>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
-                />
-              </Box>
-            )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
          </Box>
-
-          {/* Button Submit */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/penghargaan/page.tsx
+++ b/src/app/admin/(dashboard)/desa/penghargaan/page.tsx
@@ -2,38 +2,21 @@
 'use client'
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip
-} from '@mantine/core';
-import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';

 function Penghargaan() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title="Penghargaan"
-        placeholder="Cari nama atau deskripsi..."
+        title='Penghargaan'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -44,114 +27,125 @@ function Penghargaan() {
 }

 function ListPenghargaan({ search }: { search: string }) {
-  const state = useProxy(penghargaanState);
-  const router = useRouter();
+  const state = useProxy(penghargaanState)
+  const router = useRouter()

-  const { data, page, totalPages, loading, load } = state.findMany;
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;

  useEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10)
+  }, [])

-  const filteredData = data || []
+  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)
+      );
+    })
+  }, [data, search]);

-  // Loading state
+  // Handle loading state
  if (loading || !data) {
    return (
      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
+        <Skeleton height={300} />
      </Stack>
    );
  }

-  return (
-    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>List Penghargaan</Title>
-          <Tooltip label="Tambah Penghargaan" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/desa/penghargaan/create')}
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover>
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Penghargaan'
+            href='/admin/desa/penghargaan/create'
+          />
+          <Table striped withTableBorder withRowBorders>
            <TableThead>
              <TableTr>
-                <TableTh style={{ width: '35%' }}>Nama</TableTh>
-                <TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '30%' }}>Aksi</TableTh>
+                <TableTh>Nama</TableTh>
+                <TableTh>Deskripsi</TableTh>
+                <TableTh>Image</TableTh>
+                <TableTh>Detail</TableTh>
              </TableTr>
            </TableThead>
            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={200}>
-                        <Text fw={500} truncate="end" lineClamp={1}>
-                          {item.name}
-                        </Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Box w={200}>
-                        <Text
-                          truncate="end"
-                          lineClamp={1}
-                          fz="sm"
-                          c="dimmed"
-                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                        />
-                      </Box>
-                    </TableTd>
-                    <TableTd>
-                      <Button
-                        variant="light"
-                        color="blue"
-                        onClick={() =>
-                          router.push(`/admin/desa/penghargaan/${item.id}`)
-                        }
-                      >
-                        <IconDeviceImac size={20} />
-                        <Text ml={5}>Detail</Text>
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">
-                        Tidak ada data penghargaan yang cocok
-                      </Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
+              <TableTr>
+                <TableTd colSpan={4}>
+                  <Text ta="center">Tidak ada data</Text>
+                </TableTd>
+              </TableTr>
            </TableTbody>
          </Table>
-        </Box>
+        </Paper>
+      </Box>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Penghargaan'
+          href='/admin/desa/penghargaan/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama</TableTh>
+              <TableTh>Deskripsi</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>
+                  <Box w={100}>
+                    <Text lineClamp={1} truncate="end" fz={"sm"}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={100}>
+                    <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Image w={100} src={item.image?.link} alt="gambar" />
+                </TableTd>
+                <TableTd>
+                  <Text>
+                    <Button onClick={() => router.push(`/admin/desa/penghargaan/${item.id}`)}>
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </Text>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
      </Paper>
      <Center>
        <Pagination
          value={page}
          onChange={(newPage) => {
-            load(newPage, 10, search);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+            load(newPage, 10);
+            window.scrollTo(0, 0);
          }}
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
--- a/src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconListDetails, IconCategory } from '@tabler/icons-react';

 function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
    const router = useRouter()
@@ -13,21 +12,16 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
        {
            label: "List Pengumuman",
            value: "listpengumuman",
-            href: "/admin/desa/pengumuman/list-pengumuman",
-            icon: <IconListDetails size={18} stroke={1.8} />,
-            tooltip: "Lihat semua daftar pengumuman"
+            href: "/admin/desa/pengumuman/list-pengumuman"
        },
        {
            label: "Kategori Pengumuman",
            value: "kategoripengumuman",
-            href: "/admin/desa/pengumuman/kategori-pengumuman",
-            icon: <IconCategory size={18} stroke={1.8} />,
-            tooltip: "Kelola kategori pengumuman"
+            href: "/admin/desa/pengumuman/kategori-pengumuman"
        },
    ];
-
-    const currentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+    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)
@@ -45,59 +39,24 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
    }, [pathname])

    return (
-        <Stack gap="lg">
-            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Pengumuman</Title>
-            <Tabs
-                color={colors['blue-button']}
-                variant='pills'
-                value={activeTab}
-                onChange={handleTabChange}
-                radius="lg"
-                keepMounted={false}
-            >
-                <TabsList
-                    p="sm"
-                    style={{
-                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                        borderRadius: "1rem",
-                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
+        <Stack>
+            <Title order={3}>Pengumuman</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
                    ))}
                </TabsList>
-
-                {tabs.map((tab, i) => (
-                    <TabsPanel
-                        key={i}
-                        value={tab.value}
-                        style={{
-                            padding: "1.5rem",
-                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
-                            borderRadius: "1rem",
-                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
-                        }}
-                    >
-                        {/* Konten dummy, bisa diganti sesuai routing */}
-                        <>{children}</>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
+            {children}
        </Stack>
    );
 }

-export default LayoutTabsLayanan;
+export default LayoutTabsLayanan;
--- a/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/[id]/page.tsx
@@ -1,18 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client';
+'use client'
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  TextInput,
-  Title,
-  Tooltip,
-  Text,
-} from '@mantine/core';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -20,108 +10,67 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditKategoriPengumuman() {
-  const editState = useProxy(stateDesaPengumuman.category);
+  const editState = useProxy(stateDesaPengumuman.category)
  const router = useRouter();
  const params = useParams();
-
  const [formData, setFormData] = useState({
-    name: editState.update.form.name || '',
-  });
+      name: editState.update.form.name || '',
+    });

  useEffect(() => {
-    const loadKategori = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.update.load(id);
-        if (data) {
-          setFormData({
-            name: data.name || '',
-          });
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              name: data.name || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori Pengumuman:", error);
+          toast.error("Gagal memuat data kategori Pengumuman");
        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          name: formData.name,
+        };
+        await editState.update.update();
+        toast.success('Kategori Pengumuman berhasil diperbarui!');
+        router.push('/admin/desa/pengumuman/kategori-pengumuman');
      } catch (error) {
-        console.error('Error loading kategori Pengumuman:', error);
-        toast.error('Gagal memuat data kategori Pengumuman');
+        console.error('Error updating kategori Pengumuman:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
      }
    };

-    loadKategori();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-    try {
-      editState.update.form = {
-        ...editState.update.form,
-        name: formData.name,
-      };
-
-      await editState.update.update();
-      toast.success('Kategori Pengumuman berhasil diperbarui!');
-      router.push('/admin/desa/pengumuman/kategori-pengumuman');
-    } catch (error) {
-      console.error('Error updating kategori Pengumuman:', error);
-      toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
-    }
-  };
-
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Kategori Pengumuman
-        </Title>
-      </Group>
-
-      {/* Form */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Kategori Pengumuman</Title>
          <TextInput
-            label={
-              <Text fz="sm" fw="bold">
-                Nama Kategori Pengumuman
-              </Text>
-            }
-            placeholder="Masukkan nama kategori Pengumuman"
            value={formData.name}
-            onChange={(e) =>
-              setFormData({ ...formData, name: e.target.value })
-            }
-            required
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Pengumuman</Text>}
+            placeholder="masukkan nama kategori Pengumuman"
          />

-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/create/page.tsx
@@ -1,87 +1,50 @@
 'use client'
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';

+
+
 function CreateKategoriPengumuman() {
-  const createState = useProxy(stateDesaPengumuman.category);
+  const createState = useProxy(stateDesaPengumuman.category)
  const router = useRouter();

  const resetForm = () => {
    createState.create.form = {
-      name: '',
+      name: "",
    };
  };

  const handleSubmit = async () => {
    await createState.create.create();
    resetForm();
-    router.push('/admin/desa/pengumuman/kategori-pengumuman');
+    router.push("/admin/desa/pengumuman/kategori-pengumuman")
  };

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan back button */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Kategori Pengumuman
-        </Title>
-      </Group>
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>

-      {/* Form utama */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Pengumuman</Title>
          <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Pengumuman</Text>}
-            placeholder="Masukkan nama kategori pengumuman"
-            value={createState.create.form.name || ''}
-            onChange={(e) => (createState.create.form.name = e.target.value)}
-            required
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Pengumuman</Text>}
+            placeholder='Masukkan nama kategori Pengumuman'
+            value={createState.create.form.name}
+            onChange={(val) => {
+              createState.create.form.name = val.target.value;
+            }}
          />
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/page.tsx
@@ -1,26 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import {
-  Box, Button, Center, Paper, Skeleton, Stack,
-  Table, TableTbody, TableTd, TableTh, TableThead, TableTr,
-  Text, Title, Tooltip, Pagination
-} from '@mantine/core';
-import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateDesaPengumuman from '../../../_state/desa/pengumuman';

+
+
 function KategoriPengumuman() {
  const [search, setSearch] = useState('');
  return (
    <Box>
      <HeaderSearch
        title='Kategori Pengumuman'
-        placeholder='Cari nama kategori...'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -35,121 +34,87 @@ function ListKategoriPengumuman({ search }: { search: string }) {
  const router = useRouter();
  const [modalHapus, setModalHapus] = useState(false)
  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const { data, page, totalPages, loading, load } = listDataState.findMany;

  useEffect(() => {
-    load(1, 10, search)
-  }, [search])
+    listDataState.findMany.load()
+  }, [])

  const handleDelete = () => {
    if (selectedId) {
      listDataState.delete.delete(selectedId)
      setModalHapus(false)
      setSelectedId(null)
-      load(page, 10, search)
+
+      listDataState.findMany.load()
    }
  }

-  const filteredData = data || []
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });

-  if (loading || !data) {
+  if (!listDataState.findMany.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton h={500} />
      </Stack>
    )
  }
-
  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper bg={colors['white-1']} p="md">
        <Stack>
-          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
-            <Title order={4}>List Kategori Pengumuman</Title>
-            <Tooltip label="Tambah Kategori Pengumuman" withArrow>
-              <Button
-                leftSection={<IconPlus size={18} />}
-                color="blue"
-                variant="light"
-                onClick={() => router.push('/admin/desa/pengumuman/kategori-pengumuman/create')}
-              >
-                Tambah Baru
-              </Button>
-            </Tooltip>
-          </Box>
-
+        <JudulList
+          title='List Kategori Pengumuman'
+          href='/admin/desa/pengumuman/kategori-pengumuman/create'
+        />
          <Box style={{ overflowX: 'auto' }}>
-            <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
              <TableThead>
                <TableTr>
-                  <TableTh style={{ width: '10%' }}>No</TableTh>
-                  <TableTh style={{ width: '60%' }}>Nama</TableTh>
-                  <TableTh style={{ width: '15%' }}>Edit</TableTh>
-                  <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
                </TableTr>
              </TableThead>
              <TableTbody>
-                {filteredData.length > 0 ? (
-                  filteredData.map((item, index) => (
-                    <TableTr key={item.id}>
-                      <TableTd>
-                        <Text fz="sm">{(page - 1) * 10 + index + 1}</Text>
-                      </TableTd>
-                      <TableTd>
-                        <Text truncate lineClamp={1}>{item.name}</Text>
-                      </TableTd>
-                      <TableTd>
-                        <Tooltip label="Edit Kategori Pengumuman" withArrow>
-                          <Button
-                            variant='light'
-                            color='green'
-                            onClick={() => router.push(`/admin/desa/pengumuman/kategori-pengumuman/${item.id}`)}
-                          >
-                            <IconEdit size={20} />
-                          </Button>
-                        </Tooltip>
-                      </TableTd>
-                      <TableTd>
-                        <Tooltip label="Hapus Kategori Pengumuman" withArrow>
-                          <Button
-                            variant='light'
-                            color='red'
-                            disabled={listDataState.delete.loading}
-                            onClick={() => {
-                              setSelectedId(item.id)
-                              setModalHapus(true)
-                            }}>
-                            <IconTrash size={20} />
-                          </Button>
-                        </Tooltip>
-                      </TableTd>
-                    </TableTr>
-                  ))
-                ) : (
-                  <TableTr>
-                    <TableTd colSpan={4}>
-                      <Center py={20}>
-                        <Text c="dimmed">Tidak ada data kategori pengumuman yang cocok</Text>
-                      </Center>
+                {filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/desa/pengumuman/kategori-pengumuman/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
                    </TableTd>
                  </TableTr>
-                )}
+                ))}
              </TableTbody>
            </Table>
          </Box>
        </Stack>
      </Paper>

-      <Center mt="md">
-        <Pagination
-          value={page}
-          onChange={(newPage) => load(newPage, 10, search)}
-          total={totalPages}
-          color="blue"
-          radius="md"
-        />
-      </Center>
-
+      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/edit/page.tsx
@@ -7,14 +7,12 @@ import colors from "@/con/colors";
 import {
  Box,
  Button,
-  Group,
  Paper,
  Select,
  Stack,
  Text,
  TextInput,
-  Title,
-  Tooltip,
+  Title
 } from "@mantine/core";
 import { IconArrowBack } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
@@ -22,34 +20,34 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";

+
 function EditPengumuman() {
  const editState = useProxy(stateDesaPengumuman);
  const router = useRouter();
  const params = useParams();

  const [formData, setFormData] = useState({
-    judul: editState.pengumuman.edit.form.judul || "",
-    deskripsi: editState.pengumuman.edit.form.deskripsi || "",
-    categoryPengumumanId:
-      editState.pengumuman.edit.form.categoryPengumumanId || "",
-    content: editState.pengumuman.edit.form.content || "",
+    judul: editState.pengumuman.edit.form.judul || '',
+    deskripsi: editState.pengumuman.edit.form.deskripsi || '',
+    categoryPengumumanId: editState.pengumuman.edit.form.categoryPengumumanId || '',
+    content: editState.pengumuman.edit.form.content || ''
  });

  // Load pengumuman by id saat pertama kali
  useEffect(() => {
-    editState.category.findMany.load();
+    editState.category.findMany.load()
    const loadpengumuman = async () => {
      const id = params?.id as string;
      if (!id) return;

      try {
-        const data = await stateDesaPengumuman.pengumuman.edit.load(id);
+        const data = await stateDesaPengumuman.pengumuman.edit.load(id); // akses langsung, bukan dari proxy
        if (data) {
          setFormData({
-            judul: data.judul || "",
-            deskripsi: data.deskripsi || "",
-            categoryPengumumanId: data.categoryPengumumanId || "",
-            content: data.content || "",
+            judul: data.judul || '',
+            deskripsi: data.deskripsi || '',
+            categoryPengumumanId: data.categoryPengumumanId || '',
+            content: data.content || '',
          });
        }
      } catch (error) {
@@ -59,18 +57,21 @@ function EditPengumuman() {
    };

    loadpengumuman();
-  }, [params?.id]);
+  }, [params?.id]); // ✅ hapus editState dari dependency

  const handleSubmit = async () => {
+
    try {
-      // update global state
+      // edit global state with form data
      editState.pengumuman.edit.form = {
        ...editState.pengumuman.edit.form,
-        ...formData,
+        judul: formData.judul,
+        deskripsi: formData.deskripsi,
+        content: formData.content,
+        categoryPengumumanId: formData.categoryPengumumanId || ''
      };
-
      await editState.pengumuman.edit.update();
-      toast.success("Pengumuman berhasil diperbarui!");
+      toast.success("pengumuman berhasil diperbarui!");
      router.push("/admin/desa/pengumuman/list-pengumuman");
    } catch (error) {
      console.error("Error updating pengumuman:", error);
@@ -79,97 +80,57 @@ function EditPengumuman() {
  };

  return (
-    <Box px={{ base: "sm", md: "lg" }} py="md">
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors["blue-button"]} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Pengumuman
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: "100%", md: "50%" }}
-        bg={colors["white-1"]}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: "1px solid #e0e0e0" }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit pengumuman</Title>
          <TextInput
-            label="Judul Pengumuman"
-            placeholder="Masukkan judul"
            value={formData.judul}
            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
-            required
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
          />

          <TextInput
-            label="Deskripsi Singkat"
-            placeholder="Masukkan deskripsi"
            value={formData.deskripsi}
-            onChange={(e) =>
-              setFormData({ ...formData, deskripsi: e.target.value })
-            }
-            required
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
          />
+          <Box>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <EditEditor
+              value={formData.content}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                editState.pengumuman.edit.form.content = htmlContent;
+              }}
+            />
+          </Box>

          <Select
            value={formData.categoryPengumumanId}
-            onChange={(val) =>
-              setFormData({ ...formData, categoryPengumumanId: val || "" })
-            }
-            label="Kategori"
-            placeholder="Pilih kategori"
+            onChange={(val) => setFormData({ ...formData, categoryPengumumanId: val || "" })}
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
            data={
              editState.category.findMany.data?.map((v) => ({
                value: v.id,
-                label: v.name,
+                label: v.name
              })) || []
            }
            clearable
            searchable
            required
-            error={
-              !formData.categoryPengumumanId ? "Pilih kategori" : undefined
-            }
+            error={!formData.categoryPengumumanId ? "Pilih kategori" : undefined}
          />

-          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten Lengkap
-            </Text>
-            <EditEditor
-              value={formData.content}
-              onChange={(htmlContent) =>
-                setFormData({ ...formData, content: htmlContent })
-              }
-            />
-          </Box>
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
-                color: "#fff",
-                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button onClick={handleSubmit}>Edit pengumuman</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx
@@ -1,163 +1,116 @@
 'use client'

-import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Skeleton,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
-import { useRouter, useParams } from 'next/navigation';
-import { useState } from 'react';
-import { useProxy } from 'valtio/utils';
-import { useShallowEffect } from '@mantine/hooks';
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';

-export default function DetailPengumuman() {
-  const pengumumanState = useProxy(stateDesaPengumuman);
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const params = useParams();
-  const router = useRouter();
+import colors from '@/con/colors';
+import { useProxy } from 'valtio/utils';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import { useState } from 'react';
+import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+
+
+function DetailPengumuman() {
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()

  useShallowEffect(() => {
-    pengumumanState.pengumuman.findUnique.load(params?.id as string);
-  }, []);
+    pengumumanState.pengumuman.findUnique.load(params?.id as string)
+  }, [])
+

  const handleHapus = () => {
    if (selectedId) {
-      pengumumanState.pengumuman.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push('/admin/desa/pengumuman/list-pengumuman');
+      pengumumanState.pengumuman.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/pengumuman/list-pengumuman")
    }
-  };
+  }

  if (!pengumumanState.pengumuman.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton h={400} />
      </Stack>
-    );
+    )
  }

-  const data = pengumumanState.pengumuman.findUnique.data;
-
  return (
-    <Box py={10}>
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      <Paper
-        withBorder
-        w={{ base: '100%', md: '60%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Pengumuman
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Kategori
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data?.CategoryPengumuman?.name || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Judul
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data?.judul || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Deskripsi
-                </Text>
-                <Text fz="md" c="dimmed">
-                  {data?.deskripsi || '-'}
-                </Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">
-                  Konten
-                </Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{
-                    __html: data?.content || '-',
-                  }}
-                />
-              </Box>
-
-              <Group gap="sm">
-                <Tooltip label="Hapus Pengumuman" withArrow position="top">
+    <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 Pengumuman</Text>
+          {pengumumanState.pengumuman.findUnique.data ? (
+            <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
                  <Button
-                    color="red"
                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        setSelectedId(pengumumanState.pengumuman.findUnique.data.id);
+                        setModalHapus(true);
+                      }
                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    disabled={pengumumanState.pengumuman.delete.loading || !pengumumanState.pengumuman.findUnique.data}
+                    color={"red"}
                  >
-                    <IconTrash size={20} />
+                    <IconX size={20} />
                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Pengumuman" withArrow position="top">
                  <Button
-                    color="green"
-                    onClick={() =>
-                      router.push(
-                        `/admin/desa/pengumuman/list-pengumuman/${data.id}/edit`
-                      )
-                    }
-                    variant="light"
-                    radius="md"
-                    size="md"
+                    onClick={() => {
+                      if (pengumumanState.pengumuman.findUnique.data) {
+                        router.push(`/admin/desa/pengumuman/list-pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!pengumumanState.pengumuman.findUnique.data}
+                    color={"green"}
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

+      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus pengumuman ini?"
+        text='Apakah anda yakin ingin menghapus pengumuman ini?'
      />
    </Box>
  );
 }
+
+export default DetailPengumuman;
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx
@@ -1,110 +1,79 @@
-'use client';
-
+'use client'
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';

+
 function CreatePengumuman() {
-  const pengumumanState = useProxy(stateDesaPengumuman);
+  const pengumumanState = useProxy(stateDesaPengumuman)
  const router = useRouter();

  useShallowEffect(() => {
-    pengumumanState.category.findMany.load();
-  }, []);
+    pengumumanState.category.findMany.load()
+  }, [])

  const handleSubmit = async () => {
-    await pengumumanState.pengumuman.create.create();
-    resetForm();
-    router.push('/admin/desa/pengumuman/list-pengumuman');
-  };
+    await pengumumanState.pengumuman.create.create()
+    resetForm()
+    router.push("/admin/desa/pengumuman/list-pengumuman")
+  }

  const resetForm = () => {
    pengumumanState.pengumuman.create.form = {
-      judul: '',
-      deskripsi: '',
-      content: '',
-      categoryPengumumanId: '',
+      judul: "",
+      deskripsi: "",
+      content: "",
+      categoryPengumumanId: "",
    };
  };
-
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Pengumuman
-        </Title>
-      </Group>
+    <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="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Judul */}
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Pengumuman</Title>
          <TextInput
-            value={pengumumanState.pengumuman.create.form.judul}
-            onChange={(val) => (pengumumanState.pengumuman.create.form.judul = val.target.value)}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="Masukkan judul pengumuman"
-            required
-          />
-
-          {/* Kategori */}
-          <Select
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="Pilih kategori"
-            value={pengumumanState.pengumuman.create.form.categoryPengumumanId || ""}
+            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
+            placeholder='Masukkan judul'
            onChange={(val) => {
-              pengumumanState.pengumuman.create.form.categoryPengumumanId = val ?? "";
+              pengumumanState.pengumuman.create.form.judul = val.target.value
            }}
+          />
+          <Select
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
            data={pengumumanState.category.findMany.data?.map((item) => ({
              label: item.name,
              value: item.id,
            }))}
+            onChange={(val) => {
+              const selected = pengumumanState.category.findMany.data?.find((item) => item.id === val);
+              if (selected) {
+                pengumumanState.pengumuman.create.form.categoryPengumumanId = selected.id;
+              }
+            }}
            searchable
            nothingFoundMessage="Tidak ditemukan"
          />
-
-          {/* Deskripsi Singkat */}
          <TextInput
-            value={pengumumanState.pengumuman.create.form.deskripsi}
-            onChange={(val) => (pengumumanState.pengumuman.create.form.deskripsi = val.target.value)}
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
-            placeholder="Masukkan deskripsi singkat"
-            required
+            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
+            placeholder='Masukkan deskripsi singkat'
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
+            }}
          />
-
-          {/* Konten Editor */}
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten Lengkap
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
            <CreateEditor
              value={pengumumanState.pengumuman.create.form.content}
              onChange={(htmlContent) => {
@@ -113,20 +82,8 @@ function CreatePengumuman() {
            />
          </Box>

-          {/* Tombol Submit */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx
+++ b/src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx
@@ -1,25 +1,6 @@
 'use client'
-
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip
-} from '@mantine/core';
+import { Box, Button, Center, Grid, GridCol, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -28,13 +9,14 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import stateDesaPengumuman from '../../../_state/desa/pengumuman';

+
 function Pengumuman() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title="Pengumuman Desa"
-        placeholder="Cari judul atau kategori..."
+        title='List Pengumuman'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -45,107 +27,86 @@ function Pengumuman() {
 }

 function ListPengumuman({ search }: { search: string }) {
-  const pengumumanState = useProxy(stateDesaPengumuman);
-  const router = useRouter();
-
-  const { data, page, totalPages, loading, load } = pengumumanState.pengumuman.findMany;
+  const pengumumanState = useProxy(stateDesaPengumuman)
+  const router = useRouter()
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = pengumumanState.pengumuman.findMany;

  useShallowEffect(() => {
-    load(page, 10, search);
-  }, [page, search]);
+    load(page, 10, search)
+  }, [page, search])

-  const filteredData = data || [];
+  const filteredData = (data || [])

  if (loading || !data) {
    return (
      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
+        <Skeleton h={500} />
      </Stack>
-    );
+    )
  }

  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Pengumuman</Title>
-          <Tooltip label="Tambah Pengumuman" withArrow>
-            <Button
-              leftSection={<IconCircleDashedPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/desa/pengumuman/list-pengumuman/create')}
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-        <Box style={{ overflowX: 'auto' }}>
-          <Table highlightOnHover style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '40%' }}>Judul</TableTh>
-                <TableTh style={{ width: '30%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '20%' }}>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.judul}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text fz="sm" c="dimmed">
-                        {item.CategoryPengumuman?.name || '-'}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Button
-                        variant="light"
-                        color="blue"
-                        onClick={() =>
-                          router.push(`/admin/desa/pengumuman/list-pengumuman/${item.id}`)
-                        }
-                      >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
-                      </Button>
-                    </TableTd>
-                  </TableTr>
-                ))
-              ) : (
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Grid>
+            <GridCol span={{ base: 12, md: 11 }}>
+              <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 1 }}>
+              <Button onClick={() => router.push("/admin/desa/pengumuman/list-pengumuman/create")} bg={colors['blue-button']}>
+                <IconCircleDashedPlus size={25} />
+              </Button>
+            </GridCol>
+          </Grid>
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
                <TableTr>
-                  <TableTd colSpan={3}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada pengumuman yang cocok</Text>
-                    </Center>
+                  <TableTh w={250}>Judul</TableTh>
+                  <TableTh w={250}>Kategori</TableTh>
+                  <TableTh w={200}>Detail</TableTh>
+
+                </TableTr>
+              </TableThead>
+              <TableTbody >
+                {filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                  <TableTd >
+                    <Box w={100}>
+                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
+                    </Box>  
+                  </TableTd>
+                  <TableTd >{item.CategoryPengumuman?.name}</TableTd>
+                  <TableTd>
+                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/list-pengumuman/${item.id}`)}>
+                      <IconDeviceImacCog size={25} />
+                    </Button>
                  </TableTd>
                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
      </Paper>
      <Center>
        <Pagination
          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
-          }}
+          onChange={(newPage) => load(newPage)}
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
-  );
+  )
 }

 export default Pengumuman;
--- a/src/app/admin/(dashboard)/desa/potensi/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/_lib/layoutTabs.tsx
@@ -1,8 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
-import { IconCategory, IconListCheck } from '@tabler/icons-react';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';

@@ -13,21 +12,17 @@ function LayoutTabsPotensi({ children }: { children: React.ReactNode }) {
        {
            label: "List Potensi",
            value: "list_potensi",
-            href: "/admin/desa/potensi/list-potensi",
-            icon: <IconListCheck size={18} stroke={1.8} />,
-            tooltip: "Lihat semua potensi desa"
+            href: "/admin/desa/potensi/list-potensi"
        },
        {
            label: "Kategori Potensi",
            value: "kategori_potensi",
-            href: "/admin/desa/potensi/kategori-potensi",
-            icon: <IconCategory size={18} stroke={1.8} />,
-            tooltip: "Kelola kategori potensi"
+            href: "/admin/desa/potensi/kategori-potensi"
        },
+        
    ];
-
-    const currentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+    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)
@@ -45,59 +40,24 @@ function LayoutTabsPotensi({ children }: { children: React.ReactNode }) {
    }, [pathname])

    return (
-        <Stack gap="lg">
-            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Potensi</Title>
-            <Tabs
-                color={colors['blue-button']}
-                variant='pills'
-                value={activeTab}
-                onChange={handleTabChange}
-                radius="lg"
-                keepMounted={false}
-            >
-                <TabsList
-                    p="sm"
-                    style={{
-                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                        borderRadius: "1rem",
-                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
+        <Stack>
+            <Title order={3}>Potensi</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((tab, i) => (
-                    <TabsPanel
-                        key={i}
-                        value={tab.value}
-                        style={{
-                            padding: "1.5rem",
-                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
-                            borderRadius: "1rem",
-                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
-                        }}
-                    >
-                        {/* Konten dummy, bisa diganti sesuai routing */}
-                        <>{children}</>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
+            {children}
        </Stack>
    );
 }

-export default LayoutTabsPotensi;
+export default LayoutTabsPotensi;
--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/[id]/page.tsx
@@ -1,17 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client';
+'use client'
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  TextInput,
-  Title,
-  Tooltip
-} from '@mantine/core';
+import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -19,95 +10,67 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditKategoriPotensi() {
-  const editState = useProxy(potensiDesaState.kategoriPotensi);
+  const editState = useProxy(potensiDesaState.kategoriPotensi)
  const router = useRouter();
  const params = useParams();
-
  const [formData, setFormData] = useState({
-    nama: editState.update.form.nama || '',
-  });
+      nama: editState.update.form.nama || '',
+    });

  useEffect(() => {
-    const loadKategori = async () => {
-      const id = params?.id as string;
-      if (!id) return;
-
-      try {
-        const data = await editState.update.load(id);
-        if (data) {
-          setFormData({
-            nama: data.nama || '',
-          });
+      const loadKategori = async () => {
+        const id = params?.id as string;
+        if (!id) return;
+  
+        try {
+          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
+          if (data) {
+            setFormData({
+              nama: data.nama || '',
+            });
+          }
+        } catch (error) {
+          console.error("Error loading kategori potensi:", error);
+          toast.error("Gagal memuat data kategori potensi");
        }
+      };
+  
+      loadKategori();
+    }, [params?.id]);
+
+    const handleSubmit = async () => {
+      try {
+        editState.update.form = {
+          ...editState.update.form,
+          nama: formData.nama,
+        };
+        await editState.update.update();
+        toast.success('Kategori Potensi berhasil diperbarui!');
+        router.push('/admin/desa/potensi/kategori-potensi');
      } catch (error) {
-        console.error('Error loading kategori potensi:', error);
-        toast.error('Gagal memuat data kategori potensi');
+        console.error('Error updating kategori potensi:', error);
+        toast.error('Terjadi kesalahan saat memperbarui kategori potensi');
      }
    };

-    loadKategori();
-  }, [params?.id]);
-
-  const handleSubmit = async () => {
-    try {
-      editState.update.form = {
-        ...editState.update.form,
-        nama: formData.nama,
-      };
-
-      await editState.update.update();
-      toast.success('Kategori Potensi berhasil diperbarui!');
-      router.push('/admin/desa/potensi/kategori-potensi');
-    } catch (error) {
-      console.error('Error updating kategori potensi:', error);
-      toast.error('Terjadi kesalahan saat memperbarui kategori potensi');
-    }
-  };
-
  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Kategori Potensi
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors["blue-button"]} size={30} />
+        </Button>
+      </Box>
+      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Kategori Potensi</Title>
          <TextInput
-            label="Nama Kategori Potensi"
-            placeholder="Masukkan nama kategori potensi"
            value={formData.nama}
            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            required
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Potensi</Text>}
+            placeholder="masukkan nama kategori potensi"
          />

-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button onClick={handleSubmit}>Simpan</Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/create/page.tsx
@@ -1,87 +1,50 @@
-'use client';
+'use client'
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';

+
+
 function CreateKategoriPotensi() {
-  const createState = useProxy(potensiDesaState.kategoriPotensi);
+  const createState = useProxy(potensiDesaState.kategoriPotensi)
  const router = useRouter();

  const resetForm = () => {
    createState.create.form = {
-      nama: '',
+      nama: "",
    };
  };

  const handleSubmit = async () => {
    await createState.create.create();
    resetForm();
-    router.push('/admin/desa/potensi/kategori-potensi');
+    router.push("/admin/desa/potensi/kategori-potensi")
  };

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan back button */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Kategori Potensi
-        </Title>
-      </Group>
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>

-      {/* Form utama */}
-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Kategori Potensi</Title>
          <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Potensi</Text>}
-            placeholder="Masukkan nama kategori potensi"
-            value={createState.create.form.nama || ''}
-            onChange={(e) => (createState.create.form.nama = e.target.value)}
-            required
+            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Potensi</Text>}
+            placeholder='Masukkan nama kategori Potensi'
+            value={createState.create.form.nama}
+            onChange={(val) => {
+              createState.create.form.nama = val.target.value;
+            }}
          />
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan
-            </Button>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
          </Group>
        </Stack>
      </Paper>
--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/page.tsx
@@ -1,14 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
-import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
+import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import potensiDesaState from '../../../_state/desa/potensi';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+import potensiDesaState from '../../../_state/desa/potensi';
+
+

 function KategoriPotensi() {
  const [search, setSearch] = useState('');
@@ -16,7 +19,7 @@ function KategoriPotensi() {
    <Box>
      <HeaderSearch
        title='Kategori Potensi'
-        placeholder='Cari nama kategori...'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -31,113 +34,87 @@ function ListKategoriPotensi({ search }: { search: string }) {
  const router = useRouter();
  const [modalHapus, setModalHapus] = useState(false)
  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const { data, page, totalPages, loading, load } = listDataState.findMany;

  useEffect(() => {
-    load(1, 10, search)
-  }, [search])
+    listDataState.findMany.load()
+  }, [])

  const handleDelete = () => {
    if (selectedId) {
      listDataState.delete.delete(selectedId)
      setModalHapus(false)
      setSelectedId(null)
-      load(page, 10, search)
+
+      listDataState.findMany.load()
    }
  }

-  const filteredData = data || []
+  const filteredData = (listDataState.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.nama.toLowerCase().includes(keyword)
+    );
+  });

-  if (loading || !data) {
+  if (!listDataState.findMany.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton h={500} />
      </Stack>
    )
  }
-
  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+      <Paper bg={colors['white-1']} p="md">
        <Stack>
-          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
-            <Title order={4}>List Kategori Potensi</Title>
-            <Tooltip label="Tambah Kategori Potensi" withArrow>
-              <Button
-                leftSection={<IconPlus size={18} />}
-                color="blue"
-                variant="light"
-                onClick={() => router.push('/admin/desa/potensi/kategori-potensi/create')}
-              >
-                Tambah Baru
-              </Button>
-            </Tooltip>
-          </Box>
-
+        <JudulList
+          title='List Kategori Potensi'
+          href='/admin/desa/potensi/kategori-potensi/create'
+        />
          <Box style={{ overflowX: 'auto' }}>
-            <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
              <TableThead>
                <TableTr>
-                  <TableTh style={{ width: '10%' }}>No</TableTh>
-                  <TableTh style={{ width: '60%' }}>Nama</TableTh>
-                  <TableTh style={{ width: '15%' }}>Edit</TableTh>
-                  <TableTh style={{ width: '15%' }}>Hapus</TableTh>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Edit</TableTh>
+                  <TableTh>Hapus</TableTh>
                </TableTr>
              </TableThead>
              <TableTbody>
-                {filteredData.length > 0 ? (
-                  filteredData.map((item, index) => (
-                    <TableTr key={item.id}>
-                      <TableTd>
-                        <Text fz="sm">{(page - 1) * 10 + index + 1}</Text>
-                      </TableTd>
-                      <TableTd>
-                        <Text truncate lineClamp={1}>{item.nama}</Text>
-                      </TableTd>
-                      <TableTd>
-                        <Button variant='light' color='green' onClick={() => router.push(`/admin/desa/potensi/kategori-potensi/${item.id}`)}>
-                          <IconEdit size={20} />
-                        </Button>
-                      </TableTd>
-                      <TableTd>
-                        <Button
-                          variant='light'
-                          color='red'
-                          disabled={listDataState.delete.loading}
-                          onClick={() => {
-                            setSelectedId(item.id)
-                            setModalHapus(true)
-                          }}>
-                          <IconTrash size={20} />
-                        </Button>
-                      </TableTd>
-                    </TableTr>
-                  ))
-                ) : (
-                  <TableTr>
-                    <TableTd colSpan={4}>
-                      <Center py={20}>
-                        <Text color="dimmed">Tidak ada data kategori potensi yang cocok</Text>
-                      </Center>
+                {filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>{item.nama}</TableTd>
+                    <TableTd>
+                      <Button color='green' onClick={() => router.push(`/admin/desa/potensi/kategori-potensi/${item.id}`)}>
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        color='red'
+                        disabled={listDataState.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id)
+                          setModalHapus(true)
+                        }}>
+                        <IconTrash size={20} />
+                      </Button>
                    </TableTd>
                  </TableTr>
-                )}
+                ))}
              </TableTbody>
            </Table>
          </Box>
        </Stack>
      </Paper>

-      <Center mt="md">
-        <Pagination
-          value={page}
-          onChange={(newPage) => load(newPage, 10, search)}
-          total={totalPages}
-          color="blue"
-          radius="md"
-        />
-      </Center>
-
+      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/edit/page.tsx
@@ -5,19 +5,7 @@ import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import potensiDesaState from "@/app/admin/(dashboard)/_state/desa/potensi";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from "@mantine/core";
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
@@ -25,36 +13,38 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";

+
+
 function EditPotensi() {
-  const potensiState = useProxy(potensiDesaState.potensiDesa);
-  const router = useRouter();
-  const params = useParams();
+  const potensiState = useProxy(potensiDesaState.potensiDesa)
+  const router = useRouter()
+  const params = useParams()

  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [formData, setFormData] = useState({
-    name: "",
-    deskripsi: "",
-    kategoriId: "",
-    content: "",
-    imageId: "",
+    name: '',
+    deskripsi: '',
+    kategoriId: '',
+    content: '',
+    imageId: ''
  });

  useEffect(() => {
-    potensiDesaState.kategoriPotensi.findMany.load();
+    potensiDesaState.kategoriPotensi.findMany.load()
    const loadPotensi = async () => {
      const id = params?.id as string;
      if (!id) return;

      try {
-        const data = await potensiState.edit.load(id);
+        const data = await potensiState.edit.load(id); // ambil data dari API
        if (data) {
          setFormData({
-            name: data.name || "",
-            deskripsi: data.deskripsi || "",
-            kategoriId: data.kategoriId || "",
-            content: data.content || "",
-            imageId: data.imageId || "",
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            kategoriId: data.kategoriId || '',
+            content: data.content || '',
+            imageId: data.imageId || '',
          });

          if (data?.image?.link) {
@@ -72,9 +62,13 @@ function EditPotensi() {

  const handleSubmit = async () => {
    try {
+      // Sinkronkan semua data dari formData ke state global
      potensiState.edit.form = {
        ...potensiState.edit.form,
-        ...formData,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        kategoriId: formData.kategoriId,
+        content: formData.content,
      };

      if (file) {
@@ -98,52 +92,44 @@ function EditPotensi() {
  };

  return (
-    <Box px={{ base: "sm", md: "lg" }} py="md">
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors["blue-button"]} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Edit Potensi Desa
-        </Title>
-      </Group>
-
-      <Paper
-        w={{ base: "100%", md: "50%" }}
-        bg={colors["white-1"]}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: "1px solid #e0e0e0" }}
-      >
-        <Stack gap="md">
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Edit Potensi</Title>
          <TextInput
-            label="Judul Potensi"
-            placeholder="Masukkan judul"
            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            required
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, name: val }));
+              potensiState.edit.form.name = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
+            placeholder="masukkan judul"
          />
-
          <TextInput
-            label="Deskripsi Singkat"
-            placeholder="Masukkan deskripsi"
            value={formData.deskripsi}
-            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
-            required
+            onChange={(e) => {
+              const val = e.target.value;
+              setFormData((prev) => ({ ...prev, deskripsi: val }));
+              potensiState.edit.form.deskripsi = val;
+            }}
+            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
+            placeholder="masukkan deskripsi"
          />
-
          <Select
            value={formData.kategoriId}
            onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
-            label="Kategori"
-            placeholder="Pilih kategori"
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
            data={
              potensiDesaState.kategoriPotensi.findMany.data?.map((v) => ({
                value: v.id,
-                label: v.nama,
+                label: v.nama
              })) || []
            }
            clearable
@@ -151,90 +137,77 @@ function EditPotensi() {
            required
            error={!formData.kategoriId ? "Pilih kategori" : undefined}
          />
-
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Potensi
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
-              maxSize={5 * 1024 ** 2}
-              accept={{ "image/*": [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="red" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
-                </Dropzone.Idle>
-                <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>
-                    Seret gambar atau klik untuk memilih file
-                  </Text>
-                  <Text size="sm" c="dimmed">
-                    Maksimal 5MB, format gambar wajib
-                  </Text>
-                </Stack>
-              </Group>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{
-                    maxHeight: 220,
-                    objectFit: "contain",
-                    border: `1px solid ${colors["blue-button"]}`,
-                  }}
-                />
-              </Box>
-            )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
          </Box>
-
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten Lengkap
-            </Text>
+            <Text fz={"sm"} fw={"bold"}>Konten</Text>
            <EditEditor
              value={formData.content}
-              onChange={(htmlContent) => setFormData({ ...formData, content: htmlContent })}
+              onChange={(htmlContent) => {
+                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                potensiState.edit.form.content = htmlContent;
+              }}
            />
          </Box>
-
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
-                color: "#fff",
-                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
-              }}
-            >
-              Simpan
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Potensi</Button>
        </Stack>
      </Paper>
    </Box>
  );
 }

-export default EditPotensi;
+export default EditPotensi;
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
@@ -1,151 +1,122 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
-import { useRouter, useParams } from 'next/navigation';
-import { useState } from 'react';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import React from 'react';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
+import { useParams } from 'next/navigation';
+import { useState } from 'react';
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';

+
 export default function DetailPotensi() {
-  const router = useRouter();
-  const params = useParams();
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const potensiState = useProxy(potensiDesaState.potensiDesa);
+  const router = useRouter()
+  const params = useParams()
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const potensiState = useProxy(potensiDesaState.potensiDesa)

  useShallowEffect(() => {
-    potensiState.findUnique.load(params?.id as string);
-  }, []);
+    potensiState.findUnique.load(params?.id as string)
+  }, [])

  const handleHapus = () => {
    if (selectedId) {
-      potensiState.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      router.push("/admin/desa/potensi");
+      potensiState.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/potensi")
    }
-  };
+  }

  if (!potensiState.findUnique.data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        {Array.from({ length: 10 }).map((_, k) => (
+          <Skeleton key={k} h={40} />
+        ))}
      </Stack>
-    );
+    )
  }

-  const data = potensiState.findUnique.data;
-
  return (
-    <Box py={10}>
-      <Button
-        variant="subtle"
-        onClick={() => router.back()}
-        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
-        mb={15}
-      >
-        Kembali
-      </Button>
-
-      <Paper
-        withBorder
-        w={{ base: "100%", md: "60%" }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-      >
-        <Stack gap="md">
-          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
-            Detail Potensi
-          </Text>
-
-          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
-            <Stack gap="sm">
-              <Box>
-                <Text fz="lg" fw="bold">Judul</Text>
-                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Kategori</Text>
-                <Text fz="md" c="dimmed">{data.kategori?.nama || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed">{data.deskripsi || '-'}</Text>
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Gambar</Text>
-                {data.image?.link ? (
-                  <Image
-                    src={data.image.link}
-                    alt={data.name || 'Gambar Potensi'}
-                    w={200}
-                    h={200}
-                    radius="md"
-                    fit="cover"
-                  />
-                ) : (
-                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
-                )}
-              </Box>
-
-              <Box>
-                <Text fz="lg" fw="bold">Konten</Text>
-                <Text
-                  fz="md"
-                  c="dimmed"
-                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
-                />
-              </Box>
-
-              <Group gap="sm">
-                <Tooltip label="Hapus Potensi" withArrow position="top">
-                  <Button
-                    color="red"
-                    onClick={() => {
-                      setSelectedId(data.id);
-                      setModalHapus(true);
-                    }}
-                    variant="light"
-                    radius="md"
-                    size="md"
-                  >
-                    <IconTrash size={20} />
-                  </Button>
-                </Tooltip>
-
-                <Tooltip label="Edit Potensi" withArrow position="top">
-                  <Button
-                    color="green"
-                    onClick={() =>
-                      router.push(`/admin/desa/potensi/list-potensi/${data.id}/edit`)
-                    }
-                    variant="light"
-                    radius="md"
-                    size="md"
-                  >
-                    <IconEdit size={20} />
-                  </Button>
-                </Tooltip>
-              </Group>
-            </Stack>
-          </Paper>
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Potensi</Text>
+          {potensiState.findUnique.data ? (
+            <Paper key={potensiState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
+                  <Text fz={"lg"}>{potensiState.findUnique.data.name}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Kategori</Text>
+                  <Text fz={"lg"}>{potensiState.findUnique.data.kategori?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
+                  <Text fz={"lg"}>{potensiState.findUnique.data.deskripsi}</Text>
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
+                  <Image src={potensiState.findUnique.data.image?.link} alt="gambar" />
+                </Box>
+                <Box>
+                  <Text fz={"lg"} fw={"bold"}>Konten</Text>
+                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: potensiState.findUnique.data.content }} />
+                </Box>
+                <Box>
+                  <Flex gap={"xs"}>
+                    <Button
+                      onClick={() => {
+                        if (potensiState.findUnique.data) {
+                          setSelectedId(potensiState.findUnique.data.id)
+                          setModalHapus(true)
+                        }
+                      }}
+                      disabled={potensiState.delete.loading || !potensiState.findUnique.data}
+                      color="red"
+                    >
+                      <IconX size={20} />
+                    </Button>
+                    <Button
+                      onClick={() => {
+                        if (potensiState.findUnique.data) {
+                          router.push(`/admin/desa/potensi/list-potensi/${potensiState.findUnique.data.id}/edit`)
+                        }
+                      }}
+                      disabled={!potensiState.findUnique.data}
+                      color="green"
+                    >
+                      <IconEdit size={20} />
+                    </Button>
+                  </Flex>
+                </Box>
+              </Stack>
+            </Paper>
+          ) : null}
        </Stack>
      </Paper>

+      {/* Modal Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah Anda yakin ingin menghapus potensi ini?"
+        text="Apakah anda yakin ingin menghapus potensi ini?"
      />
    </Box>
  );
 }
+
+
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx
@@ -4,19 +4,7 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import {
-  Box,
-  Button,
-  Group,
-  Image,
-  Paper,
-  Select,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -24,6 +12,8 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

+
+
 function CreatePotensi() {
  const potensiState = useProxy(potensiDesaState.potensiDesa);
  const [previewImage, setPreviewImage] = useState<string | null>(null);
@@ -31,8 +21,8 @@ function CreatePotensi() {
  const router = useRouter();

  useEffect(() => {
-    potensiDesaState.kategoriPotensi.findMany.load();
-  }, []);
+    potensiDesaState.kategoriPotensi.findMany.load()
+  }, [])

  const handleSubmit = async () => {
    if (!file) return toast.warn('Pilih file gambar terlebih dahulu');
@@ -69,50 +59,34 @@ function CreatePotensi() {
  };

  return (
-    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
-        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            <IconArrowBack color={colors['blue-button']} size={24} />
-          </Button>
-        </Tooltip>
-        <Title order={4} ml="sm" c="dark">
-          Tambah Potensi Desa
-        </Title>
-      </Group>
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
+        <Stack gap="xs">
+          <Title order={3}>Create Potensi</Title>

-      <Paper
-        w={{ base: '100%', md: '50%' }}
-        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
-      >
-        <Stack gap="md">
-          {/* Judul */}
          <TextInput
            value={potensiState.create.form.name}
            onChange={(val) => (potensiState.create.form.name = val.target.value)}
            label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="Masukkan judul potensi"
-            required
+            placeholder="masukkan judul"
          />

-          {/* Deskripsi */}
          <TextInput
            value={potensiState.create.form.deskripsi}
            onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="Masukkan deskripsi singkat"
-            required
+            placeholder="masukkan deskripsi"
          />

-          {/* Kategori */}
          <Select
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
-            placeholder="Pilih kategori"
+            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            placeholder='Pilih kategori'
            value={potensiState.create.form.kategoriId || ""}
            onChange={(val) => {
              potensiState.create.form.kategoriId = val ?? "";
@@ -123,58 +97,65 @@ function CreatePotensi() {
            }))}
          />

-          {/* Upload Gambar */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar Potensi
-            </Text>
-            <Dropzone
-              onDrop={(files) => {
-                const selectedFile = files[0];
-                if (selectedFile) {
-                  setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
-                }
-              }}
-              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-              maxSize={5 * 1024 ** 2}
-              accept={{ 'image/*': [] }}
-              radius="md"
-              p="xl"
-            >
-              <Group justify="center" gap="xl" mih={180}>
-                <Dropzone.Accept>
-                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                </Dropzone.Accept>
-                <Dropzone.Reject>
-                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
-                </Dropzone.Reject>
-                <Dropzone.Idle>
-                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                </Dropzone.Idle>
-              </Group>
-              <Text ta="center" mt="sm" size="sm" color="dimmed">
-                Seret gambar atau klik untuk memilih file (maks 5MB)
-              </Text>
-            </Dropzone>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>

-            {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
-                <Image
-                  src={previewImage}
-                  alt="Preview Gambar"
-                  radius="md"
-                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
-                />
-              </Box>
-            )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
          </Box>

-          {/* Konten Editor */}
          <Box>
-            <Text fz="sm" fw="bold" mb={6}>
-              Konten Lengkap
-            </Text>
+            <Text fz="sm" fw="bold">Konten</Text>
            <CreateEditor
              value={potensiState.create.form.content}
              onChange={(htmlContent) => {
@@ -183,21 +164,9 @@ function CreatePotensi() {
            />
          </Box>

-          {/* Tombol Simpan */}
-          <Group justify="right">
-            <Button
-              onClick={handleSubmit}
-              radius="md"
-              size="md"
-              style={{
-                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                color: '#fff',
-                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-              }}
-            >
-              Simpan Potensi
-            </Button>
-          </Group>
+          <Button bg={colors['blue-button']} onClick={handleSubmit}>
+            Simpan Potensi
+          </Button>
        </Stack>
      </Paper>
    </Box>
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
@@ -1,40 +1,25 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'

+'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Pagination,
-  Paper,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip
-} from '@mantine/core';
-import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
+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, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import potensiDesaState from '../../../_state/desa/potensi';

+
+
 function Potensi() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title='Potensi Desa'
-        placeholder='Cari potensi atau kategori...'
+        title='Posisi Organisasi'
+        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -45,8 +30,8 @@ function Potensi() {
 }

 function ListPotensi({ search }: { search: string }) {
-  const potensiState = useProxy(potensiDesaState);
-  const router = useRouter();
+  const potensiState = useProxy(potensiDesaState)
+  const router = useRouter()

  const {
    data,
@@ -57,108 +42,117 @@ function ListPotensi({ search }: { search: string }) {
  } = potensiState.potensiDesa.findMany;

  useEffect(() => {
-    potensiState.kategoriPotensi.findMany.load();
-    load(page, 10, search);
-  }, [page, search]);
+    potensiState.kategoriPotensi.findMany.load()
+    load(page, 10)
+  }, [])

-  const filteredData = data || []
+  const filteredData = (potensiState.potensiDesa.findMany.data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword) ||
+      item.kategori?.nama.toLowerCase().includes(keyword) ||
+      item.deskripsi.toLowerCase().includes(keyword)
+    );
+  });

+  // Handle loading state
  if (loading || !data) {
    return (
      <Stack py={10}>
-        <Skeleton height={600} radius="md" />
+        <Skeleton height={300} />
      </Stack>
    );
  }

+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <Stack>
+            <JudulList
+              title='List Potensi'
+              href='/admin/desa/potensi/list-potensi/create'
+            />
+            <Box style={{ overflowX: "auto" }}>
+              <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+                <TableThead>
+                  <TableTr>
+                    <TableTh>Judul</TableTh>
+                    <TableTh>Kategori</TableTh>
+                    <TableTh>Deskripsi</TableTh>
+                    <TableTh>Detail</TableTh>
+                  </TableTr>
+                </TableThead>
+                <TableTbody>
+                  <TableTr>
+                    <TableTd colSpan={4}>Tidak Ada Data</TableTd>
+                  </TableTr>
+                </TableTbody>
+              </Table>
+            </Box>
+          </Stack>
+        </Paper>
+      </Box>
+    )
+  }
+
  return (
    <Box py={10}>
-      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Potensi Desa</Title>
-          <Tooltip label="Tambah Potensi" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/desa/potensi/list-potensi/create')}
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-        <Box style={{ overflowX: "auto" }}>
-          <Table highlightOnHover style={{ minWidth: '700px' }}>
-            <TableThead>
-              <TableTr>
-                <TableTh style={{ width: '20%' }}>Judul</TableTh>
-                <TableTh style={{ width: '20%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '15%' }}>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              {filteredData.length > 0 ? (
-                filteredData.map((item) => (
+      <Paper bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <JudulList
+            title='List Potensi'
+            href='/admin/desa/potensi/list-potensi/create'
+          />
+          <Box style={{ overflowX: "auto" }}>
+            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+              <TableThead>
+                <TableTr>
+                  <TableTh>Judul</TableTh>
+                  <TableTh>Kategori</TableTh>
+                  <TableTh>Deskripsi</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+              <TableTbody>
+                {filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
-                    </TableTd>
-                    <TableTd>
-                      <Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
-                    </TableTd>
+                      <Box w={100}>
+                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
+                      </Box></TableTd>
+                    <TableTd>{item.kategori?.nama}</TableTd>
                    <TableTd>
                      <Box w={300}>
-                        <Text
-                          truncate
-                          fz="sm"
-                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                        />
+                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                      </Box>
                    </TableTd>
                    <TableTd>
-                      <Button
-                        variant="light"
-                        color="blue"
-                        onClick={() => router.push(`/admin/desa/potensi/list-potensi/${item.id}`)}
-                      >
-                        <IconDeviceImacCog size={20} />
-                        <Text ml={5}>Detail</Text>
+                      <Button onClick={() => router.push(`/admin/desa/potensi/list-potensi/${item.id}`)}>
+                        <IconDeviceImacCog size={25} />
                      </Button>
                    </TableTd>
                  </TableTr>
-                ))
-              ) : (
-                <TableTr>
-                  <TableTd colSpan={4}>
-                    <Center py={20}>
-                      <Text color="dimmed">Tidak ada data potensi yang cocok</Text>
-                    </Center>
-                  </TableTd>
-                </TableTr>
-              )}
-            </TableTbody>
-          </Table>
-        </Box>
+                ))}
+              </TableTbody>
+            </Table>
+          </Box>
+        </Stack>
      </Paper>
      <Center>
        <Pagination
          value={page}
          onChange={(newPage) => {
            load(newPage, 10);
-            window.scrollTo({ top: 0, behavior: 'smooth' });
+            window.scrollTo(0, 0);
          }}
          total={totalPages}
          mt="md"
          mb="md"
-          color="blue"
-          radius="md"
        />
      </Center>
    </Box>
-  );
+  )
 }

 export default Potensi;
--- a/src/app/admin/(dashboard)/desa/profile/_lib/layoutTabsDetail.tsx
+++ b/src/app/admin/(dashboard)/desa/profile/_lib/layoutTabsDetail.tsx
@@ -1,10 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconUser, IconUsers, IconCalendar } from '@tabler/icons-react';

 function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
    const router = useRouter()
@@ -13,28 +12,21 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
        {
            label: "Profile Desa",
            value: "profiledesa",
-            href: "/admin/desa/profile/profile-desa",
-            icon: <IconUser size={18} stroke={1.8} />,
-            tooltip: "Lihat dan kelola profil desa"
+            href: "/admin/desa/profile/profile-desa"
        },
        {
            label: "Profile Perbekel",
            value: "profileperbekel",
-            href: "/admin/desa/profile/profile-perbekel",
-            icon: <IconUsers size={18} stroke={1.8} />,
-            tooltip: "Kelola data Perbekel"
+            href: "/admin/desa/profile/profile-perbekel"
        },
        {
            label: "Profile Perbekel Dari Masa Ke Masa",
            value: "profile-perbekel-dari-masa-ke-masa",
-            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa",
-            icon: <IconCalendar size={18} stroke={1.8} />,
-            tooltip: "Riwayat Perbekel dari masa ke masa"
+            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa"
        }
    ];
-
-    const currentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
+    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)
@@ -52,59 +44,24 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
    }, [pathname])

    return (
-        <Stack gap="lg">
-            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Profile Desa</Title>
-            <Tabs
-                color={colors['blue-button']}
-                variant='pills'
-                value={activeTab}
-                onChange={handleTabChange}
-                radius="lg"
-                keepMounted={false}
-            >
-                <TabsList
-                    p="sm"
-                    style={{
-                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                        borderRadius: "1rem",
-                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    }}
-                >
-                    {tabs.map((tab, i) => (
-                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
-                            <TabsTab
-                                value={tab.value}
-                                leftSection={tab.icon}
-                                style={{
-                                    fontWeight: 600,
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
-                            >
-                                {tab.label}
-                            </TabsTab>
-                        </Tooltip>
+        <Stack>
+            <Title order={3}>Profile Desa</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
                    ))}
                </TabsList>
-
-                {tabs.map((tab, i) => (
-                    <TabsPanel
-                        key={i}
-                        value={tab.value}
-                        style={{
-                            padding: "1.5rem",
-                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
-                            borderRadius: "1rem",
-                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
-                        }}
-                    >
-                        {/* Konten dummy, bisa diganti sesuai routing */}
-                        <>{children}</>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
                    </TabsPanel>
                ))}
            </Tabs>
+            {children}
        </Stack>
    );
 }

-export default LayoutTabsDetail;
+export default LayoutTabsDetail;
--- a/src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/lambang_desa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/lambang_desa/page.tsx
@@ -3,8 +3,8 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Alert, Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Center, 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';
@@ -15,7 +15,7 @@ function Page() {
    const router = useRouter()
    const params = useParams()
    const [isSubmitting, setIsSubmitting] = useState(false);
-    // Load data
+
    useEffect(() => {
        const loadData = async () => {
            const id = params?.id as string;
@@ -25,12 +25,9 @@ function Page() {
                return;
            }

-            try {
-                const data = await lambangState.findUnique.load(id);
+            const data = await lambangState.findUnique.load(id);
+            if (data) {
                lambangState.update.initialize(data);
-            } catch (error) {
-                console.error("Error loading lambang:", error);
-                toast.error("Gagal memuat data lambang desa");
            }
        };

@@ -38,21 +35,19 @@ function Page() {

        return () => {
            lambangState.update.reset();
-            lambangState.findUnique.reset();
+            lambangState.findUnique.reset(); // opsional: reset juga data lama
        };
    }, [params?.id, router]);

+
    const handleSubmit = async () => {
        if (isSubmitting || !lambangState.update.form.judul.trim()) {
            toast.error("Judul wajib diisi");
            return;
        }
-
-        setIsSubmitting(true);
-
+        setIsSubmitting(true)
        try {
-            const success = await lambangState.update.submit();
-
+            const success = await lambangState.update.submit()
            if (success) {
                toast.success("Data berhasil disimpan");
                router.push("/admin/desa/profile/profile-desa");
@@ -63,12 +58,17 @@ function Page() {
        } finally {
            setIsSubmitting(false);
        }
-    };
+    }

-    const handleBack = () => router.back();
+    const handleBack = () => {
+        router.back()
+    }

-    // Loading state
-    if (lambangState.findUnique.loading || lambangState.update.loading) {
+    if (
+        lambangState.findUnique.loading ||
+        !lambangState.findUnique.data ||
+        lambangState.update.loading
+    ) {
        return (
            <Box>
                <Center h={400}>
@@ -77,73 +77,45 @@ function Page() {
            </Box>
        );
    }
-
-    // Error state
-    if (lambangState.findUnique.error) {
-        return (
-            <Box>
-                <Stack gap="md">
+    return (
+        <Box>
+            <Stack gap={'xs'}>
+                <Group>
                    <Button variant="subtle" onClick={handleBack}>
                        <IconArrowBack color={colors['blue-button']} size={20} />
                    </Button>
-                    <Alert icon={<IconAlertCircle size={16} />} color="red">
-                        <Text fw="bold">Error</Text>
-                        <Text>{lambangState.findUnique.error}</Text>
-                    </Alert>
-                </Stack>
-            </Box>
-        );
-    }
-
-    return (
-        <Box>
-            <Stack gap="xs">
-                <Group mb="md">
-                    <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-                        <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-                            <IconArrowBack color={colors['blue-button']} size={24} />
-                        </Button>
-                    </Tooltip>
-                    <Title order={4} ml="sm" c="dark">Edit Lambang Desa</Title>
                </Group>
-
-                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
-                    <Stack gap="xs">
-                        <Title order={3}>Edit Lambang Desa</Title>
-
-                        {/* Judul */}
-                        <TextInput
-                            label={<Text fw="bold">Judul</Text>}
-                            placeholder="Judul lambang"
-                            value={lambangState.update.form.judul}
-                            onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
-                            error={!lambangState.update.form.judul && "Judul wajib diisi"}
-                        />
-
-                        {/* Deskripsi */}
+                <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '50%' }}>
+                    <Stack gap={'xs'}>
                        <Box>
-                            <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
-                            <EditEditor
-                                value={lambangState.update.form.deskripsi}
-                                onChange={(val) => lambangState.update.form.deskripsi = val}
-                            />
+                            <Box>
+                                <Stack>
+                                    <Title order={3}>Edit Lambang Desa</Title>
+                                    <TextInput
+                                        label={<Text fz={"md"} fw={"bold"}>Judul</Text>}
+                                        placeholder="Judul"
+                                        value={lambangState.update.form.judul}
+                                        onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
+                                        error={!lambangState.update.form.judul && "Judul wajib diisi"}
+                                    />
+                                    <Box>
+                                        <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+                                        <EditEditor
+                                            value={lambangState.update.form.deskripsi}
+                                            onChange={(val) => lambangState.update.form.deskripsi = val}
+                                        />
+                                    </Box>
+                                    <Group>
+                                        <Button
+                                            onClick={handleSubmit}
+                                            bg={colors['blue-button']}
+                                        >
+                                            Submit
+                                        </Button>
+                                    </Group>
+                                </Stack>
+                            </Box>
                        </Box>
-
-                        {/* Buttons */}
-                        <Group>
-                            <Button
-                                bg={colors['blue-button']}
-                                onClick={handleSubmit}
-                                loading={isSubmitting || lambangState.update.loading}
-                                disabled={!lambangState.update.form.judul}
-                            >
-                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
-                            </Button>
-
-                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || lambangState.update.loading}>
-                                Batal
-                            </Button>
-                        </Group>
                    </Stack>
                </Paper>
            </Stack>
--- 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
@@ -5,40 +5,38 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, Tooltip, Center, Alert } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconPhoto, IconUpload, IconX, IconAlertCircle } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, 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 Page() {
-  const maskotState = useProxy(stateProfileDesa.maskotDesa);
-  const router = useRouter();
-  const params = useParams();
+  const maskotState = useProxy(stateProfileDesa.maskotDesa)
+  const router = useRouter()
+  const params = useParams()
+
+  const [images, setImages] = useState<
+    Array<{ file: File; preview: string; label: string }>
+  >([]);

-  const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
  const [formData, setFormData] = useState({
-    judul: '',
-    deskripsi: '',
-    images: [] as Array<{ label: string; imageId: string }>,
-  });
-  const [isSubmitting, setIsSubmitting] = useState(false);
+    judul: maskotState.update.form.judul || '',
+    deskripsi: maskotState.update.form.deskripsi || '',
+    images: [] as Array<{ label: string; imageId: string }>
+  })

-  // Load data
  useEffect(() => {
    const loadData = async () => {
      const id = params?.id as string;
-      if (!id) {
-        toast.error("ID tidak valid");
-        router.push("/admin/desa/profile/profile-desa");
-        return;
-      }
+      if (!id) return;

      try {
        const data = await maskotState.findUnique.load(id);
        if (data) {
+          // 🔥 INI YANG KURANG!
          maskotState.update.initialize(data);

          setFormData({
@@ -59,39 +57,28 @@ function Page() {
          }
        }
      } catch (error) {
-        console.error("Error loading maskot:", error);
-        toast.error("Gagal memuat data maskot");
+        console.error("Error loading berita:", error);
+        toast.error("Gagal memuat data berita");
      }
    };

    loadData();
+  }, [params?.id]);

-    return () => {
-      maskotState.update.reset();
-      maskotState.findUnique.reset();
-    };
-  }, [params?.id, router]);

-  const handleBack = () => router.back();
+  const handleBack = () => {
+    router.back()
+  }

  const handleSubmit = async () => {
-    if (isSubmitting || !formData.judul.trim()) {
-      toast.error("Judul wajib diisi");
-      return;
-    }
-
-    setIsSubmitting(true);
-
    try {
      const uploadedImages = [];

      // Upload semua gambar baru
      for (const img of images) {
-        if (!img.file) {
-          // Kalau gambar lama, skip upload
-          if (!img.preview) continue;
-          uploadedImages.push({ imageId: '', label: img.label });
-          continue;
+        if (!img.file || !(img.file instanceof File)) {
+          toast.error("File tidak valid untuk di-upload");
+          continue; // atau return kalau kamu mau hentikan semua
        }

        const res = await ApiFetch.api.fileStorage.create.post({
@@ -105,7 +92,10 @@ function Page() {
          return;
        }

-        uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
+        uploadedImages.push({
+          imageId: uploaded.id,
+          label: img.label || 'main',
+        });
      }

      // Update ke global state
@@ -119,159 +109,130 @@ function Page() {
        toast.success("Maskot berhasil diperbarui!");
        router.push("/admin/desa/profile/profile-desa");
      }
+
    } catch (error) {
      console.error("Error update maskot:", error);
      toast.error("Gagal update maskot");
-    } finally {
-      setIsSubmitting(false);
    }
  };

-  // Loading state
-  if (maskotState.findUnique.loading || maskotState.update.loading) {
-    return (
-      <Box>
-        <Center h={400}>
-          <Text>Memuat data...</Text>
-        </Center>
-      </Box>
-    );
-  }
-
-  // Error state
-  if (maskotState.findUnique.error) {
-    return (
-      <Box>
-        <Stack gap="md">
+  return (
+    <Box>
+      <Stack gap={'xs'}>
+        <Group>
          <Button variant="subtle" onClick={handleBack}>
            <IconArrowBack color={colors['blue-button']} size={20} />
          </Button>
-          <Alert icon={<IconAlertCircle size={16} />} color="red">
-            <Text fw="bold">Error</Text>
-            <Text>{maskotState.findUnique.error}</Text>
-          </Alert>
-        </Stack>
-      </Box>
-    );
-  }
-
-  return (
-    <Box>
-      <Stack gap="xs">
-        <Group mb="md">
-          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-              <IconArrowBack color={colors['blue-button']} size={24} />
-            </Button>
-          </Tooltip>
-          <Title order={4} ml="sm" c="dark">Edit Maskot Desa</Title>
        </Group>
-
-        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
-          <Stack gap="xs">
-            <Title order={3}>Edit Maskot Desa</Title>
-
-            {/* Judul */}
-            <TextInput
-              label={<Text fw="bold">Judul</Text>}
-              placeholder="Masukkan judul maskot"
-              value={formData.judul}
-              onChange={(e) => setFormData({ ...formData, judul: e.currentTarget.value })}
-              error={!formData.judul && "Judul wajib diisi"}
-            />
-
-            {/* Deskripsi */}
+        <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '100%' }}>
+          <Stack gap={'xs'}>
            <Box>
-              <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
-              <EditEditor
-                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
-              />
-            </Box>
-
-            {/* Upload Gambar */}
-            <Box>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Dropzone
-                onDrop={(files) => {
-                  const newImages = files.map((file) => ({
-                    file,
-                    preview: URL.createObjectURL(file),
-                    label: '',
-                  }));
-                  setImages((prev) => [...prev, ...newImages]);
-                }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept><IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} /></Dropzone.Accept>
-                  <Dropzone.Reject><IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} /></Dropzone.Reject>
-                  <Dropzone.Idle><IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} /></Dropzone.Idle>
-                  <div>
-                    <Text size="xl" inline>Drag images here or click to select files</Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>Attach as many files as you like, each file max 5mb</Text>
-                  </div>
-                </Group>
-              </Dropzone>
-            </Box>
-
-            {/* Preview Gambar */}
-            <SimpleGrid cols={{ base: 2, md: 4 }}>
-              {images.map((img, index) => (
-                <Box key={index} mb="md">
-                  <Paper p="sm" radius="md" withBorder style={{ position: 'relative', maxWidth: 300 }}>
-                    <Stack gap="xs">
-                      <Group justify="space-between">
-                        <Button
-                          size="xs"
-                          color="red"
-                          variant="light"
-                          onClick={() => {
-                            const updated = [...images];
-                            updated.splice(index, 1);
-                            setImages(updated);
-                          }}
-                        >
-                          Hapus
-                        </Button>
-                      </Group>
-                      <Image
-                        src={img.preview}
-                        alt={`Preview ${index}`}
-                        width={280}
-                        height={180}
-                        fit="cover"
-                        radius="sm"
-                      />
-                      <TextInput
-                        label={`Label Gambar ${index + 1}`}
-                        placeholder="Contoh: Logo, Maskot, Dll"
-                        value={img.label}
-                        onChange={(e) => {
-                          const updated = [...images];
-                          updated[index].label = e.currentTarget.value;
-                          setImages(updated);
+              <Box>
+                <Stack>
+                  <Title order={3}>Edit Maskot Desa</Title>
+                  <TextInput
+                    w={{ base: '100%', md: '50%' }}
+                    label={<Text fz={"md"} fw={"bold"}>Judul</Text>}
+                    placeholder="Masukkan judul"
+                    value={formData.judul}
+                    onChange={(val) => setFormData({ ...formData, judul: val.currentTarget.value })}
+                  />
+                  <Box w={{ base: '100%', md: '50%' }}>
+                    <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+                    <EditEditor
+                      value={formData.deskripsi}
+                      onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+                    />
+                  </Box>
+                  <Box>
+                    <Text fz={"md"} fw={"bold"}>Gambar</Text>
+                    <Box w={{ base: '100%', md: '50%' }}>
+                      <Dropzone
+                        onDrop={(files) => {
+                          const newImages = files.map((file) => ({
+                            file,
+                            preview: URL.createObjectURL(file),
+                            label: '',
+                          }));
+                          setImages((prev) => [...prev, ...newImages]);
                        }}
-                      />
-                    </Stack>
-                  </Paper>
-                </Box>
-              ))}
-            </SimpleGrid>
+                      >
+                        <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                          <Dropzone.Accept>
+                            <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                          </Dropzone.Accept>
+                          <Dropzone.Reject>
+                            <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                          </Dropzone.Reject>
+                          <Dropzone.Idle>
+                            <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                          </Dropzone.Idle>

-            {/* Buttons */}
-            <Group>
-              <Button
-                bg={colors['blue-button']}
-                onClick={handleSubmit}
-                loading={isSubmitting || maskotState.update.loading}
-                disabled={!formData.judul}
-              >
-                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
-              </Button>
-              <Button variant="outline" onClick={handleBack} disabled={isSubmitting || maskotState.update.loading}>
-                Batal
-              </Button>
-            </Group>
+                          <div>
+                            <Text size="xl" inline>
+                              Drag images here or click to select files
+                            </Text>
+                            <Text size="sm" c="dimmed" inline mt={7}>
+                              Attach as many files as you like, each file should not exceed 5mb
+                            </Text>
+                          </div>
+                        </Group>
+                      </Dropzone>
+                    </Box>
+                  </Box>
+                  <SimpleGrid cols={{ base: 2, md: 4 }} >
+                    {images.map((img, index) => (
+                      <Box key={index} mb="md">
+                        <Paper p="sm" radius="md" withBorder style={{ position: 'relative', maxWidth: 300 }}>
+                          <Stack gap={'xs'}>
+                            <Group>
+                              <Button
+                                size="xs"
+                                color="red"
+                                variant="light"
+                                onClick={() => {
+                                  const updated = [...images];
+                                  updated.splice(index, 1);
+                                  setImages(updated);
+                                }}
+                              >
+                                Hapus
+                              </Button>
+                            </Group>
+                            <Image
+                              src={img.preview}
+                              alt={`Preview ${index}`}
+                              width={280}
+                              height={180}
+                              fit="cover"
+                              radius="sm"
+                            />
+                            <TextInput
+                              label={`Label Gambar ${index + 1}`}
+                              placeholder="Contoh: Logo, Maskot, Dll"
+                              value={img.label}
+                              onChange={(e) => {
+                                const updated = [...images];
+                                updated[index].label = e.currentTarget.value;
+                                setImages(updated);
+                              }}
+                            />
+                          </Stack>
+                        </Paper>
+                      </Box>
+                    ))}
+                  </SimpleGrid>
+                  <Group>
+                    <Button
+                      onClick={handleSubmit}
+                      bg={colors['blue-button']}
+                    >
+                      Submit
+                    </Button>
+                  </Group>
+                </Stack>
+              </Box>
+            </Box>
          </Stack>
        </Paper>
      </Stack>
--- a/Show More
+++ b/Show More