Fix QC Kak Inno 24 Okt 25

Fix QC Kak Ayu 24 Okt 25 Fix QC Keano 24 Okt 25 Fix Detail Lowongan Kerja
27 Oct
2025-10-27 22:15:55 +08:00 · 2025-10-27 10:54:50 +08:00 · 2025-10-27 10:54:01 +08:00 · 2025-10-23 17:45:45 +08:00 · 2025-10-22 17:00:12 +08:00 · 2025-10-22 09:58:16 +08:00
397 changed files with 18262 additions and 9598 deletions
--- a/bun.lockb
+++ b/bun.lockb
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
  "version": "0.1.5",
  "private": true,
  "scripts": {
-    "dev": "bun --bun next dev --hostname 0.0.0.0",
+    "dev": "bun --bun next dev",
    "build": "bun --bun next build",
    "start": "bun --bun next start"
  },
@@ -43,6 +43,7 @@
    "@types/bun": "^1.2.2",
    "@types/leaflet": "^1.9.20",
    "@types/lodash": "^4.17.16",
+    "@types/nodemailer": "^7.0.2",
    "add": "^2.0.6",
    "adm-zip": "^0.5.16",
    "animate.css": "^4.1.1",
@@ -52,6 +53,7 @@
    "classnames": "^2.5.1",
    "colors": "^1.4.0",
    "dayjs": "^1.11.13",
+    "dotenv": "^17.2.3",
    "elysia": "^1.3.5",
    "embla-carousel-autoplay": "^8.5.2",
    "embla-carousel-react": "^7.1.0",
@@ -71,6 +73,7 @@
    "next": "^15.5.2",
    "next-view-transitions": "^0.3.4",
    "node-fetch": "^3.3.2",
+    "nodemailer": "^7.0.10",
    "p-limit": "^6.2.0",
    "primeicons": "^7.0.0",
    "primereact": "^10.9.6",
@@ -82,6 +85,7 @@
    "react-simple-toasts": "^6.1.0",
    "react-toastify": "^11.0.5",
    "react-transition-group": "^4.4.5",
+    "react-zoom-pan-pinch": "^3.7.0",
    "readdirp": "^4.1.1",
    "recharts": "^2.15.3",
    "sharp": "^0.34.3",
--- a/prisma/data/desa/berita/kategori-berita.json
+++ b/prisma/data/desa/berita/kategori-berita.json
@@ -1,5 +1,4 @@
 [
-  { "name": "Semua" },
  { "name": "Pemerintahan" },
  { "name": "Pembangunan" },
  { "name": "Ekonomi" },
--- a/prisma/data/desa/layanan/pelayanaPendudukNonPermanen.json
+++ b/prisma/data/desa/layanan/pelayanaPendudukNonPermanen.json
@@ -1,6 +1,6 @@
 [
    {
-      "id": "1",
+      "id": "edit",
      "name": "Pelayanan Penduduk Non-Permanent",
      "deskripsi": "<p>Surat Keterangan Penduduk Non-Permanent adalah dokumen yang dikeluarkan oleh pihak berwenang untuk memberikan keterangan bahwa seseorang atau kelompok orang memiliki status penduduk non-permanent di suatu wilayah. Dokumen ini biasanya digunakan untuk keperluan administratif atau legal, seperti mendapatkan akses ke layanan kesehatan, pendidikan, atau pelayanan publik lainnya.</p>"
    }
--- a/prisma/data/desa/layanan/pelayananPerizinanBerusaha.json
+++ b/prisma/data/desa/layanan/pelayananPerizinanBerusaha.json
@@ -1,6 +1,6 @@
 [
    {
-      "id": "1",
+      "id": "edit",
      "name": "Pelayanan Perizinan Berusaha Berbasis Risiko Melalui Sistem ONLINE SINGLE SUBMISSION (OSS)",
      "deskripsi": "<p>Penyelenggaraan Perizinan Berusaha Berbasis Risiko melalui Sistem Online Single Submission (OSS) merupakan pelaksanaan Undang-Undang Nomor 11 Tahun 2020 Tentang Cipta Kerja. OSS Berbasis Risiko wajib digunakan oleh Pelaku Usaha, Kementerian/Lembaga, Pemerintah Daerah, Administrator Kawasan Ekonomi Khusus (KEK), dan Badan Pengusahaan Kawasan Perdagangan Bebas Pelabuhan Bebas (KPBPB).Berdasarkan Peraturan Pemerintah Nomor 5 Tahun 2021 terdapat 1.702 kegiatan usaha yang terdiri atas 1.349 Klasifikasi Baku Lapangan Usaha Indonesia (KBLI) yang sudah diimplementasikan dalam Sistem OSS Berbasis Risiko.</p>",
      "link" : "https://oss.go.id/"
--- a/prisma/data/ekonomi/struktur-organisasi/hubungan-organisasi.json
+++ b/prisma/data/ekonomi/struktur-organisasi/hubungan-organisasi.json
@@ -1,8 +0,0 @@
-[
-  {
-    "id": "650e8400-e29b-41d4-a716-446655440001",
-    "atasanId": "550e8400-e29b-41d4-a716-446655440001", 
-    "bawahanId": "550e8400-e29b-41d4-a716-446655440002",
-    "tipe": "Langsung Melapor"
-  }
-]
--- a/prisma/data/ekonomi/struktur-organisasi/pegawai-bumdes.json
+++ b/prisma/data/ekonomi/struktur-organisasi/pegawai-bumdes.json
@@ -0,0 +1,91 @@
+[
+  {
+    "id": "cmgewz4gt000704ib91i3f169",
+    "namaLengkap": "Ida Bagus Surya Prabhawa Manuaba, S.H.,M.H., NL.P.",
+    "gelarAkademik": "S.H.,M.H.,NL.P.",
+    "tanggalMasuk": "2020-01-01T00:00:00.000Z",
+    "email": "bagus@desa.id",
+    "telepon": "081234567891",
+    "alamat": "Jl. Raya Desa No. 1",
+    "posisiId": "kepala_desa",
+    "isActive": true
+  },
+  {
+    "id": "cmgewxfvw000004ibee5013f4",
+    "namaLengkap": "I Ketut Suwanta",
+    "gelarAkademik": "S.Pt",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "suwanta@desa.id",
+    "telepon": "081234567892",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "sekretaris_desa",
+    "isActive": true
+  },
+  {
+    "id": "cmgewxvqw000104ibgm5l8fzs",
+    "namaLengkap": "Ni Wayan Supardiati",
+    "gelarAkademik": "S.Pd",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "supardiati@desa.id",
+    "telepon": "081234567892",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "kaur_keuangan",
+    "isActive": true
+  },
+  {
+    "id": "cmgewy1g9000204ib2n7hbx0i",
+    "namaLengkap": "I Wayan Agus Juni Artha Saputra",
+    "gelarAkademik": "S.T.",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "agus@desa.id",
+    "telepon": "081234567892",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "kadus_banjar_dinas_menesa",
+    "isActive": true
+  },
+  {
+    "id": "cmgewybah000304ibgqhn1gm2",
+    "namaLengkap": "I Wayan Sueca",
+    "gelarAkademik": "S.H.",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "sueca@desa.id",
+    "telepon": "081234567893",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "kadus_banjar_dinas_darmasaba",
+    "isActive": true
+  },
+  {
+    "id": "cmgewygqz000404ib20sv8nvg",
+    "namaLengkap": "Si Gede Ketut Astawa",
+    "gelarAkademik": "S.T.",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "astawa@desa.id",
+    "telepon": "081234567893",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "kadus_banjar_dinas_bucu",
+    "isActive": true
+  },
+  {
+    "id": "cmgewyos1000504ibcu8o2gyk",
+    "namaLengkap": "I Kadek Arya Minarta",
+    "gelarAkademik": "S.T.",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "minarta@desa.id",
+    "telepon": "081234567893",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "kadus_banjar_dinas_gulingan",
+    "isActive": true
+  },
+  {
+    "id": "cmgewyxk7000604ib8djs3i6c",
+    "namaLengkap": "I Gede Andika Pradnya Diputra",
+    "gelarAkademik": "S.E.",
+    "tanggalMasuk": "2020-02-01T00:00:00.000Z",
+    "email": "diputra@desa.id",
+    "telepon": "081234567893",
+    "alamat": "Jl. Raya Desa No. 2",
+    "posisiId": "kadus_banjar_dinas_taman",
+    "isActive": true
+  }
+
+]
--- a/prisma/data/ekonomi/struktur-organisasi/pegawai.json
+++ b/prisma/data/ekonomi/struktur-organisasi/pegawai.json
@@ -1,24 +0,0 @@
-[
-    {
-      "id": "550e8400-e29b-41d4-a716-446655440001",
-      "namaLengkap": "Budi Santoso",
-      "gelarAkademik": "S.IP",
-      "tanggalMasuk": "2020-01-01T00:00:00.000Z",
-      "email": "budi@desa.id",
-      "telepon": "081234567891",
-      "alamat": "Jl. Raya Desa No. 1",
-      "posisiId": "kepala_desa",
-      "isActive": true
-    },
-    {
-      "id": "550e8400-e29b-41d4-a716-446655440002",
-      "namaLengkap": "Ani Lestari",
-      "gelarAkademik": "S.Pd",
-      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
-      "email": "ani@desa.id",
-      "telepon": "081234567892",
-      "alamat": "Jl. Raya Desa No. 2",
-      "posisiId": "sekretaris_desa",
-      "isActive": true
-    }
-  ]
--- a/prisma/data/ekonomi/struktur-organisasi/posisi-organisasi-bumdes.json
+++ b/prisma/data/ekonomi/struktur-organisasi/posisi-organisasi-bumdes.json
@@ -0,0 +1,159 @@
+[
+    [
+      {
+        "id": "kepala_desa",
+        "nama": "Kepala Desa",
+        "deskripsi": "Pemimpin desa Darmasaba",
+        "hierarki": 1,
+        "parentId": null
+      },
+      {
+        "id": "kepala_urusan",
+        "nama": "Kepala Urusan",
+        "deskripsi": "Pemimpin urusan desa Darmasaba",
+        "hierarki": 2,
+        "parentId": "kepala_desa"
+      },
+      {
+        "id": "sekretaris_desa",
+        "nama": "Sekretaris Desa",
+        "deskripsi": "Pengelola administrasi desa",
+        "hierarki": 2,
+        "parentId": "kepala_desa"
+      },
+      {
+        "id": "kaur_keuangan",
+        "nama": "Kaur Keuangan",
+        "deskripsi": "Pengelola keuangan desa",
+        "hierarki": 3,
+        "parentId": "kaur_umum"
+      },
+      {
+        "id": "kaur_perencanaan",
+        "nama": "Kaur Perencanaan",
+        "deskripsi": "Penyusun program kerja desa",
+        "hierarki": 3,
+        "parentId": "kaur_umum"
+      },
+      {
+        "id": "kaur_umum",
+        "nama": "Kaur Umum & TU",
+        "deskripsi": "Pelayanan umum dan administrasi",
+        "hierarki": 2,
+        "parentId": "kepala_desa"
+      },
+      {
+        "id": "kasi_pemerintahan",
+        "nama": "Kasi Pemerintahan",
+        "deskripsi": "Urusan pemerintahan dan keamanan",
+        "hierarki": 2,
+        "parentId": "kepala_desa"
+      },
+      {
+        "id": "kasi_pelayanan",
+        "nama": "Kasi Pelayanan",
+        "deskripsi": "Urusan pelayanan masyarakat",
+        "hierarki": 2,
+        "parentId": "kepala_desa"
+      },
+      {
+        "id": "kasi_kesejahteraan",
+        "nama": "Kasi Kesejahteraan",
+        "deskripsi": "Urusan sosial dan kesejahteraan",
+        "hierarki": 2,
+        "parentId": "kepala_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_cabe",
+        "nama": "Kepala Dusun Banjar Dinas Cabe",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Cabe",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_menesa",
+        "nama": "Kepala Dusun Banjar Dinas Menesa",
+        "deskripsi": "Pimpinan wilayah Banjar Menesa",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_penenjoan",
+        "nama": "Kepala Dusun Banjar Dinas Penenjoan",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Penenjoan",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_telanga",
+        "nama": "Kepala Dusun Banjar Dinas Telanga",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Telanga",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_tengah",
+        "nama": "Kepala Dusun Banjar Dinas Tengah",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Tengah",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_baler_pasar",
+        "nama": "Kepala Dusun Banjar Dinas Baler Pasar",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Baler Pasar",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_bucu",
+        "nama": "Kepala Dusun Banjar Dinas Bucu",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Bucu",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_gulingan",
+        "nama": "Kepala Dusun Banjar Dinas Gulingan",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Gulingan",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_bersih",
+        "nama": "Kepala Dusun Banjar Dinas Bersih",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Bersih",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_umahanyar",
+        "nama": "Kepala Dusun Banjar Dinas Umahanyar",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Umahanyar",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_taman",
+        "nama": "Kepala Dusun Banjar Dinas Taman",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Taman",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "kadus_banjar_dinas_darmasaba",
+        "nama": "Kepala Dusun Banjar Dinas Darmasaba",
+        "deskripsi": "Pimpinan wilayah Banjar Dinas Darmasaba",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      },
+      {
+        "id": "staf_desa",
+        "nama": "Staf Desa",
+        "deskripsi": "Staf Desa",
+        "hierarki": 3,
+        "parentId": "sekretaris_desa"
+      }
+    ]
+  ]
+  
--- a/prisma/data/ekonomi/struktur-organisasi/posisi-organisasi.json
+++ b/prisma/data/ekonomi/struktur-organisasi/posisi-organisasi.json
@@ -1,27 +0,0 @@
-[
-    {
-        "id": "kepala_desa",
-        "nama": "Kepala Desa",
-        "deskripsi": "Kepala Desa",
-        "hierarki": 1
-    },
-    {
-        "id": "sekretaris_desa",
-        "nama": "Sekretaris Desa",
-        "deskripsi": "Sekretaris Desa",
-        "hierarki": 2
-    },
-    {
-        "id": "bendahara_desa",
-        "nama": "Bendahara Desa",
-        "deskripsi": "Bendahara Desa",
-        "hierarki": 3
-    },
-    {
-        "id": "staff_umum",
-        "nama": "Staff Umum",
-        "deskripsi": "Staff Umum",
-        "hierarki": 4
-    }
- ]
- 
--- a/prisma/data/landing-page/profile/mediaSosial.json
+++ b/prisma/data/landing-page/profile/mediaSosial.json
@@ -1,16 +1,4 @@
 [
-  {
-    "id": "cmds8w2q60002vnbe6i8qhkuo",
-    "name": "Telephone Desa Darmasaba",
-    "iconUrl": "081239580000",
-    "imageId": "cmff3nv180003vn6h5jvedidq"
-  },
-  {
-    "id": "cmds8z7u20005vnbegyyvnbk0",
-    "name": "Email Desa Darmasaba",
-    "iconUrl": "desadarmasaba@badungkab.go.id",
-    "imageId": "cmff3ll130001vn6hkhls3f5y"
-  },
  {
    "id": "cmds9023u0008vnbe3oxmhwyf",
    "name": "Desa Darmasaba",
--- a/prisma/data/lingkungan/gotong-royong/kategori-gotong-royong.json
+++ b/prisma/data/lingkungan/gotong-royong/kategori-gotong-royong.json
@@ -0,0 +1,6 @@
+[
+    { "nama": "Kebersihan" },
+    { "nama": "Infrastruktur" },
+    { "nama": "Sosial" },
+    { "nama": "Lingkungan" }
+  ]
--- a/prisma/data/pendidikan/info-sekolah/jenjang-pendidikan.json
+++ b/prisma/data/pendidikan/info-sekolah/jenjang-pendidikan.json
@@ -0,0 +1,9 @@
+[
+    { "id": "cmghqwjs4000404l8c5uvc300", "nama": "PAUD" },
+    { "id": "cmghqwjs4000404l8c5uvc301", "nama": "TK" },
+    { "id": "cmghqwjs4000404l8c5uvc302", "nama": "SD" },
+    { "id": "cmghqwjs4000404l8c5uvc303", "nama": "SMP" },
+    { "id": "cmghqwjs4000404l8c5uvc304", "nama": "SMA" },
+    { "id": "cmghqwjs4000404l8c5uvc305", "nama": "SMK" }
+  ]
+  
--- a/prisma/data/ppid/struktur-ppid/pegawai-PPID.json
+++ b/prisma/data/ppid/struktur-ppid/pegawai-PPID.json
@@ -1,6 +1,6 @@
 [
    {
-      "id": "550e8400-e29b-41d4-a716-446655440001",
+      "id": "cmgewz4gt000704ib91i3f169",
      "namaLengkap": "Ida Bagus Surya Prabhawa Manuaba, S.H.,M.H., NL.P.",
      "gelarAkademik": "S.H.,M.H.,NL.P.",
      "tanggalMasuk": "2020-01-01T00:00:00.000Z",
@@ -11,7 +11,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440002",
+      "id": "cmgewxfvw000004ibee5013f4",
      "namaLengkap": "I Ketut Suwanta",
      "gelarAkademik": "S.Pt",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
@@ -22,7 +22,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440006",
+      "id": "cmgewxvqw000104ibgm5l8fzs",
      "namaLengkap": "Ni Wayan Supardiati",
      "gelarAkademik": "S.Pd",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
@@ -33,7 +33,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440011",
+      "id": "cmgewy1g9000204ib2n7hbx0i",
      "namaLengkap": "I Wayan Agus Juni Artha Saputra",
      "gelarAkademik": "S.T.",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
@@ -44,7 +44,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440012",
+      "id": "cmgewybah000304ibgqhn1gm2",
      "namaLengkap": "I Wayan Sueca",
      "gelarAkademik": "S.H.",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
@@ -55,7 +55,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440017",
+      "id": "cmgewygqz000404ib20sv8nvg",
      "namaLengkap": "Si Gede Ketut Astawa",
      "gelarAkademik": "S.T.",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
@@ -66,7 +66,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440018",
+      "id": "cmgewyos1000504ibcu8o2gyk",
      "namaLengkap": "I Kadek Arya Minarta",
      "gelarAkademik": "S.T.",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
@@ -77,7 +77,7 @@
      "isActive": true
    },
    {
-      "id": "550e8400-e29b-41d4-a716-446655440021",
+      "id": "cmgewyxk7000604ib8djs3i6c",
      "namaLengkap": "I Gede Andika Pradnya Diputra",
      "gelarAkademik": "S.E.",
      "tanggalMasuk": "2020-02-01T00:00:00.000Z",
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -81,7 +81,7 @@ model FileStorage {
  PelayananSuratKeteranganImage  PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage")
  PelayananSuratKeteranganImage2 PelayananSuratKeterangan[] @relation("PelayananSuratKeteranganImage2")
  PasarDesa                      PasarDesa[]
-  Pegawai                        Pegawai[]
+  PegawaiBumDes                  PegawaiBumDes[]
  DesaDigital                    DesaDigital[]
  InfoTekno                      InfoTekno[]
  PengaduanMasyarakat            PengaduanMasyarakat[]
@@ -101,6 +101,7 @@ model FileStorage {
  MitraKolaborasi MitraKolaborasi[]

  ArtikelKesehatan ArtikelKesehatan[]
+  StrukturBumDes   StrukturBumDes[]
 }

 //========================================= MENU LANDING PAGE ========================================= //
@@ -142,7 +143,7 @@ model MediaSosial {
  isActive  Boolean      @default(true)
 }

-//========================================= PROFILE ========================================= //
+//========================================= DESA ANTI KORUPSI ========================================= //
 model DesaAntiKorupsi {
  id         String                  @id @default(cuid())
  name       String                  @unique
@@ -286,49 +287,51 @@ model StrukturPPID {
 }

 model PosisiOrganisasiPPID {
-  id                 String                 @id @default(cuid())
-  nama               String                 @db.VarChar(100)
-  deskripsi          String?                @db.Text
-  hierarki           Int
-  pegawai            PegawaiPPID[]
-  strukturOrganisasi StrukturPPID[] // Relasi balik
-  parentId           String?
-  isActive           Boolean                @default(true)
-  createdAt          DateTime               @default(now())
-  updatedAt          DateTime               @updatedAt
-  parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
-  children           PosisiOrganisasiPPID[] @relation("Parent")
+  id                     String                   @id @default(cuid())
+  nama                   String                   @db.VarChar(100)
+  deskripsi              String?                  @db.Text
+  hierarki               Int
+  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")
+  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
 }

 model PegawaiPPID {
-  id                 String               @id @default(cuid())
-  namaLengkap        String               @db.VarChar(255)
-  gelarAkademik      String?              @db.VarChar(100)
-  image              FileStorage?         @relation(fields: [imageId], references: [id])
-  imageId            String?
-  tanggalMasuk       DateTime?            @db.Date
-  email              String?              @unique @db.VarChar(255)
-  telepon            String?              @db.VarChar(20)
-  alamat             String?              @db.Text
-  posisiId           String               @db.VarChar(50)
-  isActive           Boolean              @default(true)
-  createdAt          DateTime             @default(now())
-  updatedAt          DateTime             @updatedAt
-  posisi             PosisiOrganisasiPPID @relation(fields: [posisiId], references: [id])
-  strukturOrganisasi StrukturPPID[] // Relasi balik
+  id                     String                   @id @default(cuid())
+  namaLengkap            String                   @db.VarChar(255)
+  gelarAkademik          String?                  @db.VarChar(100)
+  image                  FileStorage?             @relation(fields: [imageId], references: [id])
+  imageId                String?
+  tanggalMasuk           DateTime?                @db.Date
+  email                  String?                  @unique @db.VarChar(255)
+  telepon                String?                  @db.VarChar(20)
+  alamat                 String?                  @db.Text
+  posisiId               String                   @db.VarChar(50)
+  isActive               Boolean                  @default(true)
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  posisi                 PosisiOrganisasiPPID     @relation(fields: [posisiId], references: [id])
+  strukturOrganisasi     StrukturPPID[] // Relasi balik
+  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
 }

 model StrukturOrganisasiPPID {
-  id                   String           @id @default(uuid())
-  posisiOrganisasiId   String           @db.VarChar(50)
-  pegawaiId            String           @db.Uuid
-  hubunganOrganisasiId String           @db.Uuid
-  posisiOrganisasi     PosisiOrganisasi @relation(fields: [posisiOrganisasiId], references: [id])
-  pegawai              Pegawai          @relation(fields: [pegawaiId], references: [id])
-  createdAt            DateTime         @default(now())
-  updatedAt            DateTime         @updatedAt
+  id                   String               @id @default(uuid())
+  posisiOrganisasiId   String               @db.VarChar(50)
+  pegawaiId            String
+  hubunganOrganisasiId String
+  posisiOrganisasi     PosisiOrganisasiPPID @relation(fields: [posisiOrganisasiId], references: [id])
+  pegawai              PegawaiPPID          @relation(fields: [pegawaiId], references: [id])
+  createdAt            DateTime             @default(now())
+  updatedAt            DateTime             @updatedAt
  deletedAt            DateTime?
-  isActive             Boolean          @default(true)
+  isActive             Boolean              @default(true)
 }

 // ========================================= VISI MISI PPID ========================================= //
@@ -850,7 +853,7 @@ model JadwalKegiatan {
  syaratKetentuanJadwalKegiatanId String
  dokumenjadwalkegiatan           DokumenJadwalKegiatan         @relation(fields: [dokumenJadwalKegiatanId], references: [id])
  dokumenJadwalKegiatanId         String
-  pendaftaranjadwalkegiatan       PendaftaranJadwalKegiatan?     @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
+  pendaftaranjadwalkegiatan       PendaftaranJadwalKegiatan?    @relation(fields: [pendaftaranJadwalKegiatanId], references: [id])
  pendaftaranJadwalKegiatanId     String?
  createdAt                       DateTime                      @default(now())
  updatedAt                       DateTime                      @updatedAt
@@ -1167,6 +1170,7 @@ model KontakDarurat {
  deskripsi String
  image     FileStorage @relation(fields: [imageId], references: [id])
  imageId   String
+  whatsapp  String
  createdAt DateTime    @default(now())
  updatedAt DateTime    @updatedAt
  deletedAt DateTime    @default(now())
@@ -1340,6 +1344,7 @@ model PasarDesa {
  harga            Int
  rating           Float
  alamatUsaha      String
+  kontak           String
  createdAt        DateTime          @default(now())
  updatedAt        DateTime          @updatedAt
  deletedAt        DateTime          @default(now())
@@ -1382,6 +1387,7 @@ model LowonganPekerjaan {
  gaji           String
  deskripsi      String
  kualifikasi    String
+  notelp         String
  tanggalPosting DateTime @default(now())
  isActive       Boolean  @default(true)
  createdAt      DateTime @default(now())
@@ -1391,79 +1397,67 @@ model LowonganPekerjaan {

 // ========================================= STRUKTUR ORGANISASI ========================================= //

-model PosisiOrganisasi {
-  id        String  @id @default(uuid()) @db.VarChar(50)
-  nama      String  @db.VarChar(100)
-  deskripsi String? @db.Text
-  hierarki  Int
-
-  pegawai                Pegawai[]
-  strukturOrganisasi     StrukturOrganisasi[] // Relasi balik
-  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
-  isActive               Boolean                  @default(true)
-  createdAt              DateTime                 @default(now())
-  updatedAt              DateTime                 @updatedAt
-
-  @@map("posisi_organisasi")
+model StrukturBumDes {
+  id                       String                  @id @default(cuid())
+  name                     String                  @db.Text
+  image                    FileStorage?            @relation(fields: [imageId], references: [id])
+  imageId                  String?
+  createdAt                DateTime                @default(now())
+  updatedAt                DateTime                @updatedAt
+  deletedAt                DateTime                @default(now())
+  isActive                 Boolean                 @default(true)
+  PosisiOrganisasiBumDes   PosisiOrganisasiBumDes? @relation(fields: [posisiOrganisasiBumDesId], references: [id])
+  posisiOrganisasiBumDesId String?
+  PegawaiBumDes            PegawaiBumDes?          @relation(fields: [pegawaiBumDesId], references: [id])
+  pegawaiBumDesId          String?
 }

-model Pegawai {
-  id            String       @id @default(uuid()) @db.Uuid
-  namaLengkap   String       @db.VarChar(255)
-  gelarAkademik String?      @db.VarChar(100)
-  image         FileStorage? @relation(fields: [imageId], references: [id])
-  imageId       String?
-  tanggalMasuk  DateTime?    @db.Date
-  email         String?      @unique @db.VarChar(255)
-  telepon       String?      @db.VarChar(20)
-  alamat        String?      @db.Text
-  posisiId      String       @db.VarChar(50)
-  isActive      Boolean      @default(true)
-  createdAt     DateTime     @default(now())
-  updatedAt     DateTime     @updatedAt
-
-  posisi PosisiOrganisasi @relation(fields: [posisiId], references: [id])
-
-  sebagaiAtasan  HubunganOrganisasi[] @relation("AtasanToBawahan")
-  sebagaiBawahan HubunganOrganisasi[] @relation("BawahanToAtasan")
-
-  strukturOrganisasi     StrukturOrganisasi[] // Relasi balik
-  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
-
-  @@map("pegawai")
+model PosisiOrganisasiBumDes {
+  id                       String                     @id @default(cuid())
+  nama                     String                     @db.VarChar(100)
+  deskripsi                String?                    @db.Text
+  hierarki                 Int
+  pegawai                  PegawaiBumDes[]
+  strukturOrganisasi       StrukturBumDes[] // Relasi balik
+  parentId                 String?
+  isActive                 Boolean                    @default(true)
+  createdAt                DateTime                   @default(now())
+  updatedAt                DateTime                   @updatedAt
+  parent                   PosisiOrganisasiBumDes?    @relation("Parent", fields: [parentId], references: [id])
+  children                 PosisiOrganisasiBumDes[]   @relation("Parent")
+  StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
 }

-model HubunganOrganisasi {
-  id        String  @id @default(uuid()) @db.Uuid
-  atasanId  String  @db.Uuid
-  bawahanId String  @db.Uuid
-  tipe      String? @db.VarChar(50)
-
-  atasan  Pegawai @relation("AtasanToBawahan", fields: [atasanId], references: [id])
-  bawahan Pegawai @relation("BawahanToAtasan", fields: [bawahanId], references: [id])
-
-  strukturOrganisasi StrukturOrganisasi[] // Relasi balik
-
-  @@unique([atasanId, bawahanId])
-  @@map("hubungan_organisasi")
+model PegawaiBumDes {
+  id                       String                     @id @default(cuid())
+  namaLengkap              String                     @db.VarChar(255)
+  gelarAkademik            String?                    @db.VarChar(100)
+  image                    FileStorage?               @relation(fields: [imageId], references: [id])
+  imageId                  String?
+  tanggalMasuk             DateTime?                  @db.Date
+  email                    String?                    @unique @db.VarChar(255)
+  telepon                  String?                    @db.VarChar(20)
+  alamat                   String?                    @db.Text
+  posisiId                 String                     @db.VarChar(50)
+  isActive                 Boolean                    @default(true)
+  createdAt                DateTime                   @default(now())
+  updatedAt                DateTime                   @updatedAt
+  posisi                   PosisiOrganisasiBumDes     @relation(fields: [posisiId], references: [id])
+  strukturOrganisasi       StrukturBumDes[] // Relasi balik
+  StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
 }

-model StrukturOrganisasi {
-  id                   String @id @default(uuid())
-  posisiOrganisasiId   String @db.VarChar(50)
-  pegawaiId            String @db.Uuid
-  hubunganOrganisasiId String @db.Uuid
-
-  posisiOrganisasi   PosisiOrganisasi   @relation(fields: [posisiOrganisasiId], references: [id])
-  pegawai            Pegawai            @relation(fields: [pegawaiId], references: [id])
-  hubunganOrganisasi HubunganOrganisasi @relation(fields: [hubunganOrganisasiId], references: [id])
-
-  createdAt DateTime  @default(now())
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime?
-  isActive  Boolean   @default(true)
-
-  @@map("struktur_organisasi")
+model StrukturOrganisasiBumDes {
+  id                   String                 @id @default(uuid())
+  posisiOrganisasiId   String                 @db.VarChar(50)
+  pegawaiId            String
+  hubunganOrganisasiId String
+  posisiOrganisasi     PosisiOrganisasiBumDes @relation(fields: [posisiOrganisasiId], references: [id])
+  pegawai              PegawaiBumDes          @relation(fields: [pegawaiId], references: [id])
+  createdAt            DateTime               @default(now())
+  updatedAt            DateTime               @updatedAt
+  deletedAt            DateTime?
+  isActive             Boolean                @default(true)
 }

 // ========================================= PROGRAM KEMISKINAN ========================================= //
@@ -1612,7 +1606,7 @@ model Pembiayaan {
  ApbDesa   ApbDesa[] @relation("ApbDesaPembiayaan")
 }

-// ========================================= INOVASI ========================================= //
+// ========================================= MENU INOVASI ========================================= //
 // ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
 model DesaDigital {
  id        String      @id @default(cuid())
@@ -2093,6 +2087,9 @@ model DataPerpustakaan {
  updatedAt  DateTime     @updatedAt
  deletedAt  DateTime     @default(now())
  isActive   Boolean      @default(true)
+
+  // relasi baru ke peminjaman
+  peminjamanBuku PeminjamanBuku[]
 }

 model KategoriBuku {
@@ -2105,6 +2102,31 @@ model KategoriBuku {
  DataPerpustakaan DataPerpustakaan[]
 }

+model PeminjamanBuku {
+  id             String           @id @default(cuid())
+  nama           String
+  noTelp         String
+  alamat         String
+  bukuId         String
+  tanggalPinjam  DateTime         @default(now())
+  batasKembali   DateTime // tenggat waktu pengembalian
+  tanggalKembali DateTime? // diisi saat dikembalikan
+  status         StatusPeminjaman @default(Dipinjam)
+  catatan        String? // opsional, misal: kondisi buku
+  buku           DataPerpustakaan @relation(fields: [bukuId], references: [id])
+  createdAt      DateTime         @default(now())
+  updatedAt      DateTime         @updatedAt
+  deletedAt      DateTime         @default(now())
+  isActive       Boolean          @default(true)
+}
+
+enum StatusPeminjaman {
+  Dipinjam
+  Dikembalikan
+  Terlambat
+  Dibatalkan
+}
+
 // ========================================= USER ========================================= //

 model User {
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -31,14 +31,14 @@ 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 kategoriBerita from "./data/kategori-berita.json";
+import pegawai from "./data/ekonomi/struktur-organisasi/pegawai-bumdes.json";
+import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi-bumdes.json";
+import kategoriBerita from "./data/desa/berita/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 kategoriKegiatanData from "./data/lingkungan/gotong-royong/kategori-gotong-royong.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";
@@ -56,6 +56,7 @@ import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-prog
 import roles from "./data/user/roles.json";
 import users from "./data/user/users.json";
 import fileStorage from "./data/file-storage.json";
+import jenjangPendidikan from "./data/pendidikan/info-sekolah/jenjang-pendidikan.json";
 import seedAssets from "./seed_assets";
 import { safeSeedUnique } from "./safeseedUnique";

@@ -807,28 +808,34 @@ import { safeSeedUnique } from "./safeseedUnique";
  }
  console.log("kategori produk success ...");

-  for (const p of posisiOrganisasi) {
-    await prisma.posisiOrganisasi.upsert({
-      where: {
-        id: p.id,
-      },
-      update: {
-        nama: p.nama,
-        deskripsi: p.deskripsi,
-        hierarki: p.hierarki,
-      },
-      create: {
-        id: p.id,
-        nama: p.nama,
-        deskripsi: p.deskripsi,
-        hierarki: p.hierarki,
-      },
+  const flattenedPosisiBumdes = posisiOrganisasi.flat();
+
+  // ✅ Urutkan berdasarkan hierarki
+  const sortedPosisiBumdes = flattenedPosisiBumdes.sort((a, b) => a.hierarki - b.hierarki);
+
+  for (const p of sortedPosisiBumdes) {
+    console.log(`Seeding: ${p.nama} (id: ${p.id}, parent: ${p.parentId})`);
+
+    if (p.parentId) {
+      const parentExists = flattenedPosisi.some((pos) => pos.id === p.parentId);
+      if (!parentExists) {
+        console.warn(
+          `⚠️ Parent tidak ditemukan: ${p.parentId} untuk ${p.nama}`
+        );
+        continue;
+      }
+    }
+
+    await prisma.posisiOrganisasiBumDes.upsert({
+      where: { id: p.id },
+      update: p,
+      create: p,
    });
  }
-  console.log("posisi organisasi success ...");
+  console.log("posisi organisasi berhasil");

  for (const p of pegawai) {
-    await prisma.pegawai.upsert({
+    await prisma.pegawaiBumDes.upsert({
      where: {
        id: p.id,
      },
@@ -857,26 +864,6 @@ import { safeSeedUnique } from "./safeseedUnique";
  }
  console.log("pegawai success ...");

-  for (const p of hubunganOrganisasi) {
-    await prisma.hubunganOrganisasi.upsert({
-      where: {
-        atasanId_bawahanId: {
-          atasanId: p.atasanId,
-          bawahanId: p.bawahanId,
-        },
-      },
-      update: {
-        tipe: p.tipe,
-      },
-      create: {
-        atasanId: p.atasanId,
-        bawahanId: p.bawahanId,
-        tipe: p.tipe,
-      },
-    });
-  }
-  console.log("hubungan organisasi success ...");
-
  for (const d of detailDataPengangguran) {
    await prisma.detailDataPengangguran.upsert({
      where: {
@@ -900,6 +887,30 @@ import { safeSeedUnique } from "./safeseedUnique";
  }
  console.log("📊 detailDataPengangguran success ...");

+  // =========== KATEGORI GOTONG ROYONG ===========
+  // Add IDs to the kategoriKegiatan data
+  const kategoriKegiatan = kategoriKegiatanData.map((k, index) => ({
+    ...k,
+    id: `kategori-${index + 1}`
+  }));
+
+  for (const k of kategoriKegiatan) {
+    await prisma.kategoriKegiatan.upsert({
+      where: {
+        id: k.id,
+      },
+      update: {
+        nama: k.nama,
+      },
+      create: {
+        id: k.id,
+        nama: k.nama,
+      },
+    });
+  }
+
+  console.log("kategori kegiatan success ...");
+
  for (const e of tujuanEdukasiLingkungan) {
    await prisma.tujuanEdukasiLingkungan.upsert({
      where: {
@@ -1154,6 +1165,22 @@ import { safeSeedUnique } from "./safeseedUnique";
    "✅ fasilitas bimbingan belajar desa seeded (editable later via UI)"
  );

+  for (const j of jenjangPendidikan) {
+    await prisma.jenjangPendidikan.upsert({
+      where: {
+        id: j.id || undefined,
+      },
+      update: {
+        nama: j.nama,
+      },
+      create: {
+        nama: j.nama,
+      },
+    });
+  }
+
+  console.log("✅ Jenjang Pendidikan seeded successfully");
+
  // seed assets
  await seedAssets();

--- a/public/beasiswa-siswa.png
+++ b/public/beasiswa-siswa.png
--- a/public/perbekel.png
+++ b/public/perbekel.png
--- a/src/app/admin/(dashboard)/_state/desa/berita.ts
+++ b/src/app/admin/(dashboard)/_state/desa/berita.ts
@@ -75,17 +75,18 @@ const berita = proxy({
    loading: false,
    search: "",
    load: async (page = 1, limit = 10, search = "", kategori = "") => {
-      berita.findMany.loading = true; // ✅ Akses langsung via nama path
+      const startTime = Date.now();
+      berita.findMany.loading = true;
      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;
@@ -98,9 +99,16 @@ const berita = proxy({
        berita.findMany.data = [];
        berita.findMany.totalPages = 1;
      } finally {
-        berita.findMany.loading = false;
+        // pastikan minimal 300ms sebelum loading = false (biar UX smooth)
+        const elapsed = Date.now() - startTime;
+        const minDelay = 300;
+        const delay = elapsed < minDelay ? minDelay - elapsed : 0;
+    
+        setTimeout(() => {
+          berita.findMany.loading = false;
+        }, delay);
      }
-    },
+    },    
  },

  findUnique: {
--- a/src/app/admin/(dashboard)/_state/desa/layananDesa.ts
+++ b/src/app/admin/(dashboard)/_state/desa/layananDesa.ts
@@ -581,33 +581,24 @@ const pelayananPerizinanBerusaha = proxy({
  findById: {
    data: null as pelayananPerizinanBerusahaForm | null,
    loading: false,
-    initialize() {
-      pelayananPerizinanBerusaha.findById.data = {
-        id: "",
-        name: "",
-        deskripsi: "",
-        link: "",
-      } as pelayananPerizinanBerusahaForm;
-    },
    async load(id: string) {
      try {
-        pelayananPerizinanBerusaha.findById.loading = true;
-        const res = await fetch(
-          `/api/desa/layanan/pelayananperizinanberusaha/${id}`
-        );
-        if (res.ok) {
-          const data = await res.json();
-          pelayananPerizinanBerusaha.findById.data = data.data ?? null;
-        } else {
-          console.error(
-            "Failed to fetch pelayanan perizinan berusaha:",
-            res.statusText
-          );
-          pelayananPerizinanBerusaha.findById.data = null;
+        this.loading = true;
+        const response = await fetch(`/api/desa/layanan/pelayananperizinanberusaha/${id}`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
        }
+        const result = await response.json();
+        if (result?.success) {
+          this.data = result.data;  // Make sure this matches your API response structure
+        }
+        return result?.data || null;
      } catch (error) {
-        console.error("Error fetching pelayanan perizinan berusaha:", error);
-        pelayananPerizinanBerusaha.findById.data = null;
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data');
+        return null;
+      } finally {
+        this.loading = false;
      }
    },
  },
--- a/src/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja.ts
@@ -13,6 +13,7 @@ const templateForm = z.object({
  gaji: z.string(),
  deskripsi: z.string(),
  kualifikasi: z.string(),
+  notelp: z.string(),
 });

 const defaultForm = {
@@ -23,6 +24,7 @@ const defaultForm = {
  gaji: "",
  deskripsi: "",
  kualifikasi: "",
+  notelp: "",
 };

 const lowonganKerjaState = proxy({
@@ -179,6 +181,7 @@ const lowonganKerjaState = proxy({
            gaji: data.gaji,
            deskripsi: data.deskripsi,
            kualifikasi: data.kualifikasi,
+            notelp: data.notelp,
          };
          return data;
        } else {
@@ -218,6 +221,7 @@ const lowonganKerjaState = proxy({
            gaji: this.form.gaji,
            deskripsi: this.form.deskripsi,
            kualifikasi: this.form.kualifikasi,
+            notelp: this.form.notelp,
          }),
        });
        if (!response.ok) {
--- a/src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts
@@ -12,6 +12,7 @@ const templatePasarDesaForm = z.object({
  imageId: z.string().min(1, "Gambar wajib dipilih"),
  rating: z.number().min(1, "Rating minimal 1"),
  kategoriId: z.array(z.string()).min(1, "Minimal pilih satu kategori"),
+  kontak: z.string().min(1, "Kontak wajib diisi"),
 });

 const defaultPasarDesaForm = {
@@ -21,6 +22,7 @@ const defaultPasarDesaForm = {
  imageId: "",
  rating: 0,
  kategoriId: [] as string[],
+  kontak: "",
 };

 const pasarDesa = proxy({
@@ -188,6 +190,7 @@ const pasarDesa = proxy({
            imageId: data.imageId,
            rating: data.rating,
            kategoriId: data.kategoriId,
+            kontak: data.kontak,
          };
          return data;
        } else {
@@ -225,6 +228,7 @@ const pasarDesa = proxy({
            imageId: this.form.imageId,
            rating: this.form.rating,
            kategoriId: this.form.kategoriId,
+            kontak: this.form.kontak,
          }),
        });
        if (!response.ok) {
@@ -336,6 +340,40 @@ const kategoriProduk = proxy({
      }
    },
  },
+  // ✅ Versi findManyAll (ambil semua tanpa pagination)
+  findManyAll: {
+    data: null as
+      | Prisma.KategoriProdukGetPayload<{
+          omit: { isActive: true };
+        }>[]
+      | null,
+    loading: false,
+    search: "",
+    load: async (search = "") => {
+      kategoriProduk.findManyAll.loading = true;
+      kategoriProduk.findManyAll.search = search;
+
+      try {
+        const query: any = {};
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many-all"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kategoriProduk.findManyAll.data = res.data.data ?? [];
+        } else {
+          kategoriProduk.findManyAll.data = [];
+        }
+      } catch (err) {
+        console.error("Gagal fetch kategori produk (all):", err);
+        kategoriProduk.findManyAll.data = [];
+      } finally {
+        kategoriProduk.findManyAll.loading = false;
+      }
+    },
+  },
  findUnique: {
    data: null as Prisma.KategoriProdukGetPayload<{
      omit: { isActive: true };
--- a/src/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi.ts
+++ b/src/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi.ts
@@ -1,9 +1,173 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { proxy } from "valtio";
-import { z } from "zod";
-import { toast } from "react-toastify";
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const templateForm = z.object({
+  name: z.string().min(3, "Nama minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});
+
+const defaultForm = {
+  name: "",
+  imageId: "",
+};
+
+type StrukturBumDesForm = Prisma.StrukturBumDesGetPayload<{
+  select: {
+    id: true;
+    name: true;
+    imageId: true;
+    image?: {
+      select: {
+        link: true;
+      };
+    };
+  };
+}>;
+
+const stateStruktur = proxy({
+  struktur: {
+    data: null as StrukturBumDesForm | null,
+    loading: false,
+    error: null as string | null,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/ekonomi/struktur-organisasi/${id}`);
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          this.data = result.data;
+          return result.data;
+        } else {
+          throw new Error(result.message || "Gagal mengambil data struktur");
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Load struktur error:", errorMessage);
+        toast.error("Terjadi kesalahan saat mengambil data struktur");
+        return null;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.data = null;
+      this.error = null;
+      this.loading = false;
+    },
+  },
+
+  editStruktur: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    error: null as string | null,
+    isReadOnly: false,
+
+    initialize(strukturData: StrukturBumDesForm) {
+      this.id = strukturData.id;
+      this.isReadOnly = false;
+      this.form = {
+        name: strukturData.name || "",
+        imageId: strukturData.imageId || "",
+      };
+    },
+
+    updateField(field: keyof typeof defaultForm, value: string) {
+      this.form[field] = value;
+    },
+
+    async submit() {
+      const validation = templateForm.safeParse(this.form);
+
+      if (!validation.success) {
+        const errors = validation.error.issues
+          .map((issue) => `${issue.path.join(".")}: ${issue.message}`)
+          .join(", ");
+        toast.error(`Form tidak valid: ${errors}`);
+        return false;
+      }
+
+      this.loading = true;
+      this.error = null;
+
+      try {
+        const response = await fetch(`/api/ekonomi/struktur-organisasi/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update struktur");
+          await stateStruktur.struktur.load(this.id);
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update struktur");
+        }
+      } catch (error) {
+        const errorMessage = (error as Error).message;
+        this.error = errorMessage;
+        console.error("Update struktur error:", errorMessage);
+        toast.error("Terjadi kesalahan saat update struktur");
+        return false;
+      } finally {
+        this.loading = false;
+      }
+    },
+
+    reset() {
+      this.id = "";
+      this.form = { ...defaultForm };
+      this.error = null;
+      this.loading = false;
+      this.isReadOnly = false;
+    },
+  },
+
+  async loadForEdit(id: string) {
+    const strukturData = await this.struktur.load(id);
+    if (strukturData) {
+      this.editStruktur.initialize(strukturData);
+    }
+    return strukturData;
+  },
+
+  reset() {
+    this.struktur.reset();
+    this.editStruktur.reset();
+  },
+});

 const templatePosisiOrganisasi = z.object({
  nama: z.string().min(1, "Nama harus diisi"),
@@ -30,9 +194,7 @@ const posisiOrganisasi = proxy({

      try {
        this.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
-          "posisi-organisasi"
-        ]["create"].post(this.form);
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['create'].post(this.form);
        if (res.status === 200) {
          toast.success("Berhasil menambahkan posisi organisasi");
          posisiOrganisasi.findMany.load();
@@ -52,6 +214,29 @@ const posisiOrganisasi = proxy({
    },
  },

+  findUnique: {
+    data: null as Prisma.StrukturOrganisasiBumDesGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/ekonomi/struktur-organisasi/posisi-organisasi/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          posisiOrganisasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch posisiOrganisasi:", res.statusText);
+          posisiOrganisasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching posisiOrganisasi:", error);
+        posisiOrganisasi.findUnique.data = null;
+      }
+    },
+  },
+
  edit: {
    id: "",
    form: { ...posisiOrganisasiDefaultForm },
@@ -165,17 +350,17 @@ const posisiOrganisasi = proxy({
    totalPages: 1,
    loading: false,
    search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
+    load: async (page = 1, limit?: number, search = "") => {
+      const appliedLimit = limit ?? 10;
      posisiOrganisasi.findMany.page = page;
      posisiOrganisasi.findMany.search = search;
-  
+
      try {
-        const query: any = { page, limit };
+        const query: any = { page, limit: appliedLimit };
        if (search) query.search = search;
-    
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"]["posisi-organisasi"]["find-many"].get({ query });
-    
+
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['find-many'].get({ query });
+
        if (res.status === 200 && res.data?.success) {
          posisiOrganisasi.findMany.data = res.data.data ?? [];
          posisiOrganisasi.findMany.totalPages = res.data.totalPages ?? 1;
@@ -192,7 +377,42 @@ const posisiOrganisasi = proxy({
      }
    },
  },
+  findManyAll: {
+    data: [] as Array<{
+      id: string;
+      nama: string;
+      deskripsi: string | null;
+      hierarki: number;
+    }>,
+    loading: false,
+    search: "",
+    load: async (search = "") => {
+      // Change to arrow function
+      posisiOrganisasi.findManyAll.loading = true; // Use the full path to access the property
+      posisiOrganisasi.findManyAll.search = search;
+      try {
+        const query: any = { search };
+        if (search) query.search = search;

+        const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['find-many-all'].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          posisiOrganisasi.findManyAll.data = res.data.data || [];
+
+        } else {
+          console.error("Failed to load posisiOrganisasi:", res.data?.message);
+          posisiOrganisasi.findManyAll.data = [];
+        }
+      } catch (error) {
+        console.error("Error loading posisiOrganisasi:", error);
+        posisiOrganisasi.findManyAll.data = [];
+      } finally {
+        posisiOrganisasi.findManyAll.loading = false;
+      }
+    },
+  },
  delete: {
    loading: false,
    async byId(id: string) {
@@ -231,12 +451,12 @@ const posisiOrganisasi = proxy({

 const templatePegawai = z.object({
  namaLengkap: z.string().min(1, "Nama wajib diisi"),
-  gelarAkademik: z.string().optional(),
-  imageId: z.string().nullable().optional(),
-  tanggalMasuk: z.string().optional(), // ISO format
+  gelarAkademik: z.string().min(1, "Gelar Akademik wajib diisi"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+  tanggalMasuk: z.string().min(1, "Tanggal masuk wajib diisi"), // ISO format
  email: z.string().email("Email tidak valid").optional(),
-  telepon: z.string().optional(),
-  alamat: z.string().optional(),
+  telepon: z.string().min(1, "Telepom wajib diisi"),
+  alamat: z.string().min(1, "Alamat wajib diisi"),
  posisiId: z.string().min(1, "Posisi wajib diisi"),
  isActive: z.boolean().default(true),
 });
@@ -267,9 +487,9 @@ const pegawai = proxy({

      try {
        pegawai.create.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
-          "pegawai"
-        ]["create"].post(pegawai.create.form);
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi'].pegawai['create'].post(
+          pegawai.create.form
+        );
        if (res.status === 200) {
          toast.success("Pegawai berhasil ditambahkan");
          await pegawai.findMany.load();
@@ -286,45 +506,56 @@ const pegawai = proxy({
  },

  // In struktur-organisasi.ts
-findMany: {
-  data: null as any[] | null,
-  page: 1,
-  totalPages: 1,
-  total: 0,
-  loading: false,
-  load: async (page = 1, limit = 10) => {  // Change to arrow function
-    pegawai.findMany.loading = true;  // Use the full path to access the property
-    pegawai.findMany.page = page;
-    try {
-      const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
-        "pegawai"
-      ]["find-many"].get({
-        query: { page, limit },
-      });
+  findMany: {
+    data: null as
+      | Prisma.PegawaiBumDesGetPayload<{
+          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;

-      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);
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi'].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);
        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<{
+      | (Prisma.PegawaiBumDesGetPayload<{
          include: { posisi: true; image: true };
        }> & { isActive: boolean })
      | null,
@@ -350,12 +581,9 @@ findMany: {
      if (!id) return toast.warn("ID tidak valid");
      try {
        pegawai.delete.loading = true;
-        const res = await fetch(
-          `/api/ekonomi/struktur-organisasi/pegawai/del/${id}`,
-          {
-            method: "DELETE",
-          }
-        );
+        const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/del/${id}`, {
+          method: "DELETE",
+        });
        const json = await res.json();
        if (res.ok) {
          toast.success(json.message ?? "Berhasil hapus pegawai");
@@ -372,6 +600,31 @@ findMany: {
    },
  },

+  nonActive: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pegawai.nonActive.loading = true;
+        const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/non-active/${id}`, {
+          method: "DELETE", // biasanya nonActive pakai PATCH
+        });
+        const json = await res.json();
+        if (res.ok) {
+          toast.success(json.message ?? "Pegawai berhasil dinonaktifkan");
+          await pegawai.findMany.load(); // refresh data
+        } else {
+          toast.error(json.message ?? "Gagal menonaktifkan pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal nonActive:", error);
+        toast.error("Terjadi kesalahan saat menonaktifkan pegawai");
+      } finally {
+        pegawai.nonActive.loading = false;
+      }
+    },
+  },
+
  edit: {
    id: "",
    form: { ...pegawaiDefaultForm },
@@ -384,15 +637,12 @@ findMany: {
      }

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

        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
@@ -503,299 +753,10 @@ findMany: {
  },
 });

-// Schema Zod untuk form validasi
-const templateHubunganOrganisasiForm = z.object({
-  atasanId: z.string().min(1, "Atasan wajib dipilih"),
-  bawahanId: z.string().min(1, "Bawahan wajib dipilih"),
-  tipe: z.string().optional(),
-});
-
-// Default form state
-const defaultHubunganOrganisasiForm = {
-  atasanId: "",
-  bawahanId: "",
-  tipe: "",
-};
-
-// ====================== STATE ===========================
-const hubunganOrganisasi = proxy({
-  create: {
-    form: { ...defaultHubunganOrganisasiForm },
-    loading: false,
-    async create() {
-      const cek = templateHubunganOrganisasiForm.safeParse(
-        hubunganOrganisasi.create.form
-      );
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}: ${v.message}`)
-          .join("\n")}]`;
-        return toast.error(err);
-      }
-
-      try {
-        hubunganOrganisasi.create.loading = true;
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
-          "hubungan-organisasi"
-        ]["create"].post(hubunganOrganisasi.create.form);
-
-        if (res.status === 200 && res.data?.success) {
-          hubunganOrganisasi.findMany.load();
-          return toast.success("Berhasil menambahkan hubungan organisasi");
-        } else {
-          return toast.error(res.data?.message || "Gagal menambahkan data");
-        }
-      } catch (error) {
-        console.error("Gagal create:", error);
-        toast.error("Terjadi kesalahan saat menambahkan");
-      } finally {
-        hubunganOrganisasi.create.loading = false;
-      }
-    },
-  },
-  findMany: {
-    data: null as Array<{
-      id: string;
-      atasanId: string;
-      bawahanId: string;
-      tipe?: string | null;
-      atasan: {
-        id: string;
-        namaLengkap: string;
-        gelarAkademik: string | null;
-        imageId: string | null;
-        tanggalMasuk: Date | null;
-        email: string | null;
-        telepon: string | null;
-        alamat: string | null;
-        posisiId: string;
-        isActive: boolean;
-        createdAt: Date;
-        updatedAt: Date;
-      };
-      bawahan: {
-        id: string;
-        namaLengkap: string;
-        gelarAkademik: string | null;
-        imageId: string | null;
-        tanggalMasuk: Date | null;
-        email: string | null;
-        telepon: string | null;
-        alamat: string | null;
-        posisiId: string;
-        isActive: boolean;
-        createdAt: Date;
-        updatedAt: Date;
-      };
-    }> | null,
-
-    async load() {
-      try {
-        const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
-          "hubungan-organisasi"
-        ]["find-many"].get();
-
-        if (res.status === 200) {
-          hubunganOrganisasi.findMany.data = (res.data?.data ?? []).map(
-            (item: any) => ({
-              ...item,
-              atasan: item.atasan
-                ? {
-                    ...item.atasan,
-                    isActive: item.atasan.isActive ?? item.atasan.aktif ?? true,
-                  }
-                : null,
-              bawahan: item.bawahan
-                ? {
-                    ...item.bawahan,
-                    isActive:
-                      item.bawahan.isActive ?? item.bawahan.aktif ?? true,
-                  }
-                : null,
-            })
-          );
-        } else {
-          hubunganOrganisasi.findMany.data = [];
-        }
-      } catch (error) {
-        console.error("Fetch list error:", error);
-        toast.error("Gagal memuat data hubungan organisasi");
-        hubunganOrganisasi.findMany.data = [];
-      }
-    },
-  },
-
-  findUnique: {
-    data: null as {
-      id: string;
-      atasanId: string;
-      bawahanId: string;
-      tipe?: string | null;
-      atasan?: {
-        id: string;
-        namaLengkap: string;
-        gelarAkademik: string | null;
-        imageId: string;
-        tanggalMasuk: Date | null;
-        email: string | null;
-        telepon: string | null;
-        alamat: string | null;
-        posisiId: string;
-        aktif: boolean;
-        createdAt: Date;
-        updatedAt: Date;
-      };
-      bawahan?: {
-        id: string;
-        namaLengkap: string;
-        gelarAkademik: string | null;
-        imageId: string;
-        tanggalMasuk: Date | null;
-        email: string | null;
-        telepon: string | null;
-        alamat: string | null;
-        posisiId: string;
-        aktif: boolean;
-        createdAt: Date;
-        updatedAt: Date;
-      };
-    } | null,
-
-    async load(id: string) {
-      try {
-        const res = await fetch(
-          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
-        );
-        const result = await res.json();
-
-        if (res.ok && result?.success) {
-          hubunganOrganisasi.findUnique.data = result.data;
-        } else {
-          hubunganOrganisasi.findUnique.data = null;
-          toast.error(result?.message || "Gagal mengambil data");
-        }
-      } catch (error) {
-        console.error("Find unique error:", error);
-        hubunganOrganisasi.findUnique.data = null;
-      }
-    },
-  },
-
-  edit: {
-    id: "",
-    form: { ...defaultHubunganOrganisasiForm },
-    loading: false,
-
-    async load(id: string) {
-      if (!id) return toast.warn("ID tidak valid");
-
-      try {
-        const res = await fetch(
-          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${id}`
-        );
-        const result = await res.json();
-
-        if (res.ok && result?.success) {
-          const data = result.data;
-          this.id = data.id;
-          this.form = {
-            atasanId: data.atasanId,
-            bawahanId: data.bawahanId,
-            tipe: data.tipe || "",
-          };
-          return data;
-        } else {
-          throw new Error(result?.message || "Gagal memuat data");
-        }
-      } catch (error) {
-        console.error("Error loading:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal memuat data"
-        );
-        return null;
-      }
-    },
-
-    async update() {
-      const cek = templateHubunganOrganisasiForm.safeParse(this.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}: ${v.message}`)
-          .join("\n")}]`;
-        return toast.error(err);
-      }
-
-      try {
-        this.loading = true;
-        const res = await fetch(
-          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(this.form),
-          }
-        );
-
-        const result = await res.json();
-        if (res.ok && result.success) {
-          await hubunganOrganisasi.findMany.load();
-          toast.success("Berhasil mengupdate hubungan organisasi");
-          return true;
-        } else {
-          throw new Error(result?.message || "Gagal mengupdate");
-        }
-      } catch (error) {
-        console.error("Update error:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal update");
-        return false;
-      } finally {
-        this.loading = false;
-      }
-    },
-
-    reset() {
-      hubunganOrganisasi.edit.id = "";
-      hubunganOrganisasi.edit.form = { ...defaultHubunganOrganisasiForm };
-    },
-  },
-
-  delete: {
-    loading: false,
-    async byId(id: string) {
-      if (!id) return toast.warn("ID tidak valid");
-
-      try {
-        hubunganOrganisasi.delete.loading = true;
-        const res = await fetch(
-          `/api/ekonomi/struktur-organisasi/hubungan-organisasi/del/${id}`,
-          {
-            method: "DELETE",
-          }
-        );
-
-        const result = await res.json();
-        if (res.ok && result?.success) {
-          toast.success("Hubungan organisasi berhasil dihapus");
-          hubunganOrganisasi.findMany.load();
-        } else {
-          toast.error(result?.message || "Gagal menghapus hubungan organisasi");
-        }
-      } catch (error) {
-        console.error("Delete error:", error);
-        toast.error("Terjadi kesalahan saat menghapus");
-      } finally {
-        hubunganOrganisasi.delete.loading = false;
-      }
-    },
-  },
-});
-
-const strukturorganisasiState = proxy({
+const stateStrukturBumDes = proxy({
+  stateStruktur,
  posisiOrganisasi,
  pegawai,
-  hubunganOrganisasi,
 });

-export default strukturorganisasiState;
+export default stateStrukturBumDes;
--- a/src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.ts
+++ b/src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.ts
@@ -9,12 +9,14 @@ const templateForm = z.object({
  name: z.string().min(3, "Judul minimal 3 karakter"),
  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
  imageId: z.string().nonempty(),
+  whatsapp: z.string().min(10, "Whatsapp minimal 10 karakter"),
 });

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

 const kontakDarurat = proxy({
@@ -171,6 +173,7 @@ const kontakDarurat = proxy({
            name: data.name,
            deskripsi: data.deskripsi,
            imageId: data.imageId,
+            whatsapp: data.whatsapp,
          };
          return data; // Return the loaded data
        } else {
@@ -207,6 +210,7 @@ const kontakDarurat = proxy({
              name: this.form.name,
              deskripsi: this.form.deskripsi,
              imageId: this.form.imageId,
+              whatsapp: this.form.whatsapp,
            }),
          }
        );
--- a/src/app/admin/(dashboard)/_state/landing-page/profile.ts
+++ b/src/app/admin/(dashboard)/_state/landing-page/profile.ts
@@ -388,16 +388,15 @@ const pejabatDesa = proxy({
      this.error = null;

      try {
-        const response = await fetch(
-          `/api/landingpage/pejabatdesa/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(this.form),
-          }
-        );
+        // Ensure ID is properly encoded in the URL
+        const url = new URL(`/api/landingpage/pejabatdesa/${encodeURIComponent(this.id)}`, window.location.origin);
+        const response = await fetch(url.toString(), {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });

        if (!response.ok) {
          const errorData = await response.json().catch(() => ({}));
--- a/src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts
@@ -332,7 +332,7 @@ const keunggulanProgram = proxy({
        ].post(keunggulanProgram.create.form);
        if (res.status === 200) {
          keunggulanProgram.findMany.load();
-          return toast.success("Data Berhasil Dibuat, Silahkan Menunggu Konfirmasi dari Admin di WhatsApp");
+          return toast.success("Data Berhasil Dibuat");
        }
        console.log(res);
        return toast.error("failed create");
--- a/src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts
+++ b/src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts
@@ -55,46 +55,95 @@ 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);
+    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 = "") => {
+      const startTime = Date.now();
+      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;
-        } finally {
-          dataPerpustakaan.findMany.loading = false;
        }
-      },
+      } catch (err) {
+        console.error("Gagal fetch data perpustakaan paginated:", err);
+        dataPerpustakaan.findMany.data = [];
+        dataPerpustakaan.findMany.totalPages = 1;
+      } finally {
+        // pastikan minimal 300ms sebelum loading = false (biar UX smooth)
+        const elapsed = Date.now() - startTime;
+        const minDelay = 300;
+        const delay = elapsed < minDelay ? minDelay - elapsed : 0;
+
+        setTimeout(() => {
+          dataPerpustakaan.findMany.loading = false;
+        }, delay);
+      }
    },
+  },
+  findManyAll: {
+    data: null as
+      | Prisma.DataPerpustakaanGetPayload<{
+          include: {
+            image: true;
+            kategori: true;
+          };
+        }>[]
+      | null,
+    loading: false,
+    search: "",
+    load: async (search = "", kategori = "") => {
+      dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
+      dataPerpustakaan.findMany.search = search;
+
+      try {
+        const query: any = {};
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
+            "findManyAll"
+          ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          dataPerpustakaan.findManyAll.data = res.data.data ?? [];
+        } else {
+          dataPerpustakaan.findManyAll.data = [];
+        }
+      } catch (err) {
+        console.error("Gagal fetch data perpustakaan paginated:", err);
+        dataPerpustakaan.findManyAll.data = [];
+      } finally {
+        dataPerpustakaan.findManyAll.loading = false;
+      }
+    },
+  },
  findUnique: {
    data: null as Prisma.DataPerpustakaanGetPayload<{
      include: {
@@ -321,17 +370,20 @@ const kategoriBuku = proxy({
    totalPages: 1,
    loading: false,
    search: "",
-   load: async (page = 1, limit = 10, 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 });
-    
+
+        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;
@@ -514,9 +566,319 @@ const kategoriBuku = proxy({
  },
 });

+const templatePeminjamanBuku = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  noTelp: z.string().min(1, "No Telp harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+  bukuId: z.string().min(1, "Buku ID harus diisi"),
+  tanggalPinjam: z.string().min(1, "Tanggal Pinjam harus diisi"),
+  batasKembali: z.string().min(1, "Batas Kembali harus diisi"),
+  tanggalKembali: z.string().min(1, "Tanggal Kembali harus diisi"),
+  catatan: z.string().min(1, "Catatan harus diisi"),
+});
+
+const defaultPeminjamanBuku = {
+  nama: "",
+  noTelp: "",
+  alamat: "",
+  bukuId: "",
+  tanggalPinjam: "",
+  batasKembali: "",
+  tanggalKembali: "",
+  catatan: "",
+};
+
+interface FormEditData {
+  nama: string;
+  noTelp: string;
+  alamat: string;
+  bukuId: string;
+  buku?: {
+    id: string;
+    judul: string;
+  };
+  tanggalPinjam: string;
+  batasKembali: string;
+  tanggalKembali: string;
+  catatan: string;
+  status: "Dipinjam" | "Dikembalikan" | "Terlambat" | "Dibatalkan";
+}
+
+const editForm: FormEditData = {
+  nama: "",
+  noTelp: "",
+  alamat: "",
+  bukuId: "",
+  tanggalPinjam: "",
+  batasKembali: "",
+  tanggalKembali: "",
+  catatan: "",
+  status: "Dipinjam",
+};
+
+const peminjamanBuku = proxy({
+  create: {
+    form: { ...defaultPeminjamanBuku },
+    loading: false,
+    async create() {
+      const cek = templatePeminjamanBuku.safeParse(peminjamanBuku.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        peminjamanBuku.create.loading = true;
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku[
+            "create"
+          ].post(peminjamanBuku.create.form);
+        if (res.status === 200) {
+          peminjamanBuku.findMany.load();
+          return toast.success("Data Peminjaman Buku Berhasil Dibuat");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        peminjamanBuku.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.PeminjamanBukuGetPayload<{
+      include: {
+        buku: true;
+      };
+    }>[],
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      peminjamanBuku.findMany.loading = true; // ✅ Akses langsung via nama path
+      peminjamanBuku.findMany.page = page;
+      peminjamanBuku.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res =
+          await ApiFetch.api.pendidikan.perpustakaandigital.peminjamanbuku[
+            "findMany"
+          ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          peminjamanBuku.findMany.data = res.data.data ?? [];
+          peminjamanBuku.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          peminjamanBuku.findMany.data = [];
+          peminjamanBuku.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch data peminjaman buku paginated:", err);
+        peminjamanBuku.findMany.data = [];
+        peminjamanBuku.findMany.totalPages = 1;
+      } finally {
+        peminjamanBuku.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PeminjamanBukuGetPayload<{
+      include: {
+        buku: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          peminjamanBuku.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          peminjamanBuku.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        peminjamanBuku.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        peminjamanBuku.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Data Peminjaman Buku berhasil dihapus"
+          );
+          await peminjamanBuku.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus Data Peminjaman Buku"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus Data Peminjaman Buku");
+      } finally {
+        peminjamanBuku.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...editForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/${id}`,
+          {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            noTelp: data.noTelp,
+            alamat: data.alamat,
+            bukuId: data.bukuId,
+            tanggalPinjam: data.tanggalPinjam,
+            batasKembali: data.batasKembali,
+            tanggalKembali: data.tanggalKembali,
+            catatan: data.catatan,
+            status: data.status,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading peminjaman buku:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templatePeminjamanBuku.safeParse(peminjamanBuku.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        peminjamanBuku.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/perpustakaandigital/peminjamanbuku/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              noTelp: this.form.noTelp,
+              alamat: this.form.alamat,
+              bukuId: this.form.bukuId,
+              tanggalPinjam: this.form.tanggalPinjam,
+              batasKembali: this.form.batasKembali,
+              tanggalKembali: this.form.tanggalKembali,
+              catatan: this.form.catatan,
+              status: this.form.status,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data peminjaman buku");
+          await peminjamanBuku.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal update data peminjaman buku"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating data peminjaman buku:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data peminjaman buku"
+        );
+        return false;
+      } finally {
+        peminjamanBuku.update.loading = false;
+      }
+    },
+    reset() {
+      peminjamanBuku.update.id = "";
+      peminjamanBuku.update.form = { ...editForm };
+    },
+  },
+});
+
 const perpustakaanDigitalState = proxy({
  dataPerpustakaan,
  kategoriBuku,
+  peminjamanBuku,
 });

 export default perpustakaanDigitalState;
--- a/src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts
+++ b/src/app/admin/(dashboard)/_state/ppid/permohonan_informasi_publik/permohonanInformasiPublik.ts
@@ -112,7 +112,32 @@ const statepermohonanInformasiPublik = proxy({
                statepermohonanInformasiPublik.findMany.data = res.data?.data ?? [];
            }
        }
-    }
+    },
+    findUnique: {
+        data: null as Prisma.PermohonanInformasiPublikGetPayload<{
+          include: {
+            jenisInformasiDiminta: true,
+            caraMemperolehInformasi: true,
+            caraMemperolehSalinanInformasi: true,
+          };
+        }> | null,
+        async load(id: string) {
+          try {
+            const res = await fetch(`/api/ppid/permohonaninformasipublik/${id}`);
+            if (res.ok) {
+              const data = await res.json();
+              statepermohonanInformasiPublik.findUnique.data = data.data ?? null;
+            } else {
+              console.error("Failed to fetch program inovasi:", res.statusText);
+              statepermohonanInformasiPublik.findUnique.data = null;
+            }
+          } catch (error) {
+            console.error("Error fetching program inovasi:", error);
+            statepermohonanInformasiPublik.findUnique.data = null;
+          }
+        },
+      },
+    
 })

 const statepermohonanInformasiPublikForm = proxy({
--- a/src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts
+++ b/src/app/admin/(dashboard)/_state/ppid/permohonan_keberatan_informasi_publik/permohonanKeberatanInformasi.ts
@@ -57,7 +57,29 @@ const permohonanKeberatanInformasi = proxy({
                permohonanKeberatanInformasi.findMany.data = res.data?.data ?? [];
            }
        }
-    }
+    },
+    findUnique: {
+        data: null as Prisma.FormulirPermohonanKeberatanGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }> | null,
+        async load(id: string) {
+          try {
+            const res = await fetch(`/api/ppid/permohonankeberataninformasipublik/${id}`);
+            if (res.ok) {
+              const data = await res.json();
+              permohonanKeberatanInformasi.findUnique.data = data.data ?? null;
+            } else {
+              console.error("Failed to fetch permohonan keberatan informasi:", res.statusText);
+              permohonanKeberatanInformasi.findUnique.data = null;
+            }
+          } catch (error) {
+            console.error("Error fetching permohonan keberatan informasi:", error);
+            permohonanKeberatanInformasi.findUnique.data = null;
+          }
+        },
+      }
 });

 export default permohonanKeberatanInformasi;
--- a/src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
+++ b/src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts
@@ -381,7 +381,44 @@ const posisiOrganisasi = proxy({
      }
    },
  },
+  findManyAll: {
+    data: [] as Array<{
+      id: string;
+      nama: string;
+      deskripsi: string | null;
+      hierarki: number;
+    }>,
+    loading: false,
+    search: "",
+    load: async (search = "") => {
+      // Change to arrow function
+      posisiOrganisasi.findManyAll.loading = true; // Use the full path to access the property
+      posisiOrganisasi.findManyAll.search = search;
+      try {
+        const query: any = { search };
+        if (search) query.search = search;

+        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
+          "find-many-all"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          posisiOrganisasi.findManyAll.data = res.data.data || [];
+
+        } else {
+          console.error("Failed to load posisiOrganisasi:", res.data?.message);
+          posisiOrganisasi.findManyAll.data = [];
+        }
+      } catch (error) {
+        console.error("Error loading posisiOrganisasi:", error);
+        posisiOrganisasi.findManyAll.data = [];
+      } finally {
+        posisiOrganisasi.findManyAll.loading = false;
+      }
+    },
+  },
  delete: {
    loading: false,
    async byId(id: string) {
@@ -524,9 +561,48 @@ const pegawai = proxy({
      }
    },
  },
+  findManyAll: {
+    data: null as
+      | Prisma.PegawaiPPIDGetPayload<{
+          include: {
+            image: true;
+            posisi: true;
+          };
+        }>[]
+      | null,
+    loading: false,
+    search: "",
+    load: async (search = "") => {
+      // Change to arrow function
+      pegawai.findManyAll.loading = true; // Use the full path to access the property
+      pegawai.findManyAll.search = search;
+      try {
+        const query: any = { search };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.ppid.strukturppid.pegawai[
+          "find-many-all"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pegawai.findManyAll.data = res.data.data || [];
+        } else {
+          console.error("Failed to load pegawai:", res.data?.message);
+          pegawai.findManyAll.data = [];
+        }
+      } catch (error) {
+        console.error("Error loading pegawai:", error);
+        pegawai.findManyAll.data = [];
+      } finally {
+        pegawai.findManyAll.loading = false;
+      }
+    },
+  }, 
  findUnique: {
    data: null as
-      | (Prisma.PegawaiGetPayload<{
+      | (Prisma.PegawaiPPIDGetPayload<{
          include: { posisi: true; image: true };
        }> & { isActive: boolean })
      | null,
@@ -571,6 +647,31 @@ const pegawai = proxy({
    },
  },

+  nonActive: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        pegawai.nonActive.loading = true;
+        const res = await fetch(`/api/ppid/strukturppid/pegawai/non-active/${id}`, {
+          method: "DELETE", // biasanya nonActive pakai PATCH
+        });
+        const json = await res.json();
+        if (res.ok) {
+          toast.success(json.message ?? "Pegawai berhasil dinonaktifkan");
+          await pegawai.findMany.load(); // refresh data
+        } else {
+          toast.error(json.message ?? "Gagal menonaktifkan pegawai");
+        }
+      } catch (error) {
+        console.error("Gagal nonActive:", error);
+        toast.error("Terjadi kesalahan saat menonaktifkan pegawai");
+      } finally {
+        pegawai.nonActive.loading = false;
+      }
+    },
+  },
+
  edit: {
    id: "",
    form: { ...pegawaiDefaultForm },
--- a/src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/kategori-berita/[id]/page.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import {
@@ -10,7 +11,7 @@ import {
  Stack,
  TextInput,
  Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -24,7 +25,7 @@ function EditKategoriBerita() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    name: editState.update.form.name || '',
+    name: '',
  });

  useEffect(() => {
@@ -48,8 +49,16 @@ function EditKategoriBerita() {
    loadKategori();
  }, [params?.id]);

+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // update global state hanya saat submit
      editState.update.form = {
        ...editState.update.form,
        name: formData.name,
@@ -94,10 +103,11 @@ function EditKategoriBerita() {
      >
        <Stack gap="md">
          <TextInput
+            name="name"
            label="Nama Kategori Berita"
            placeholder="Masukkan nama kategori berita"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={handleChange}
            required
          />

--- 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
@@ -19,7 +19,12 @@ import {
  Tooltip,
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
-import { IconArrowBack, IconPhoto, IconUpload, IconX } 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";
@@ -33,16 +38,17 @@ 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: "",
+    deskripsi: "",
+    kategoriBeritaId: "",
+    content: "",
+    imageId: "",
  });

-  // Load berita by id saat pertama kali
+  // Load kategori + berita
  useEffect(() => {
    beritaState.kategoriBerita.findMany.load();
+
    const loadBerita = async () => {
      const id = params?.id as string;
      if (!id) return;
@@ -71,8 +77,13 @@ function EditBerita() {
    loadBerita();
  }, [params?.id]);

+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // Update global state hanya sekali di sini
      beritaState.berita.edit.form = {
        ...beritaState.berita.edit.form,
        ...formData,
@@ -103,6 +114,7 @@ function EditBerita() {

  return (
    <Box px={{ base: "sm", md: "lg" }} py="md">
+      {/* Header */}
      <Group mb="md">
        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
          <Button
@@ -119,6 +131,7 @@ function EditBerita() {
        </Title>
      </Group>

+      {/* Form */}
      <Paper
        w={{ base: "100%", md: "50%" }}
        bg={colors["white-1"]}
@@ -131,18 +144,14 @@ function EditBerita() {
          <TextInput
            label="Judul"
            placeholder="Masukkan judul"
-            defaultValue={formData.judul}
-            onChange={(e) =>
-              setFormData({ ...formData, judul: e.target.value })
-            }
+            value={formData.judul}
+            onChange={(e) => handleChange("judul", e.target.value)}
            required
          />

          <Select
            value={formData.kategoriBeritaId}
-            onChange={(val) =>
-              setFormData({ ...formData, kategoriBeritaId: val || "" })
-            }
+            onChange={(val) => handleChange("kategoriBeritaId", val || "")}
            label="Kategori"
            placeholder="Pilih kategori"
            data={
@@ -157,16 +166,20 @@ function EditBerita() {
            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
          />

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

+
+          {/* Upload Gambar */}
          <Box>
            <Text fw="bold" fz="sm" mb={6}>
              Gambar Berita
@@ -179,7 +192,9 @@ function EditBerita() {
                  setPreviewImage(URL.createObjectURL(selectedFile));
                }
              }}
-              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              onReject={() =>
+                toast.error("File tidak valid, gunakan format gambar")
+              }
              maxSize={5 * 1024 ** 2}
              accept={{ "image/*": [] }}
              radius="md"
@@ -187,7 +202,11 @@ function EditBerita() {
            >
              <Group justify="center" gap="xl" mih={180}>
                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                  <IconUpload
+                    size={48}
+                    color={colors["blue-button"]}
+                    stroke={1.5}
+                  />
                </Dropzone.Accept>
                <Dropzone.Reject>
                  <IconX size={48} color="red" stroke={1.5} />
@@ -223,18 +242,20 @@ function EditBerita() {
            )}
          </Box>

+          {/* Konten */}
          <Box>
            <Text fz="sm" fw="bold">
              Konten
            </Text>
            <EditEditor
              value={formData.content}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, content: htmlContent }));
-                beritaState.berita.edit.form.content = htmlContent;
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, content: htmlContent }))
+              }
            />
          </Box>
+
+          {/* Action */}
          <Group justify="right">
            <Button
              onClick={handleSubmit}
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/[id]/page.tsx
@@ -80,7 +80,7 @@ function DetailBerita() {

              <Box>
                <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
              </Box>

              <Box>
--- a/src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
+++ b/src/app/admin/(dashboard)/desa/berita/list-berita/create/page.tsx
@@ -131,13 +131,17 @@ export default function CreateBerita() {
            required
          />

-          <TextInput
-            label="Deskripsi Singkat"
-            required
-            placeholder="Masukkan deskripsi berita"
-            defaultValue={beritaState.berita.create.form.deskripsi}
-            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
-          />
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <CreateEditor
+              value={beritaState.berita.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                beritaState.berita.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>

          <Box>
            <Text fw="bold" fz="sm" mb={6}>
--- a/src/app/admin/(dashboard)/desa/gallery/lib/youtube-utils.ts
+++ b/src/app/admin/(dashboard)/desa/gallery/lib/youtube-utils.ts
@@ -1,31 +1,11 @@
+// export function convertYoutubeUrlToEmbed(url: string) {
+//   const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+//   return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
+// }
+
 export function convertYoutubeUrlToEmbed(url: string) {
-  const videoIdMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/);
+  const videoIdMatch = url.match(
+    /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
+  );
  return videoIdMatch ? `https://www.youtube.com/embed/${videoIdMatch[1]}` : null;
-}
-
-
-
-
-
-
-
-
-
-// (url: string): string | null {
-//     const watchRegex = /(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?v=([^&]+)/;
-//     const shortRegex = /(?:https?:\/\/)?youtu\.be\/([^?]+)/;
-  
-//     const matchWatch = url.match(watchRegex);
-//     const matchShort = url.match(shortRegex);
-  
-//     if (matchWatch) {
-//       return `https://www.youtube.com/embed/${matchWatch[1]}`;
-//     }
-  
-//     if (matchShort) {
-//       return `https://www.youtube.com/embed/${matchShort[1]}`;
-//     }
-  
-//     return null;
-//   }
-  
+}
--- a/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/gallery/video/[id]/edit/page.tsx
@@ -15,7 +15,7 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import { convertYoutubeUrlToEmbed } from '../../../lib/youtube-utils';
@@ -31,17 +31,19 @@ function EditVideo() {
    linkVideo: '',
  });

+  // load data video sekali saat id ada
  useEffect(() => {
    const loadVideo = async () => {
      const id = params?.id as string;
      if (!id) return;
+
      try {
        const data = await videoState.update.load(id);
        if (data) {
          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            linkVideo: data.linkVideo || '',
+            name: data.name ?? '',
+            deskripsi: data.deskripsi ?? '',
+            linkVideo: data.linkVideo ?? '',
          });
        }
      } catch (error) {
@@ -49,10 +51,16 @@ function EditVideo() {
        toast.error('Gagal memuat data video');
      }
    };
+
    loadVideo();
  }, [params?.id]);

-  const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
+  const handleChange = useCallback(
+    (field: keyof typeof formData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );

  const handleSubmit = async () => {
    const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
@@ -63,7 +71,6 @@ function EditVideo() {

    try {
      videoState.update.form = {
-        ...videoState.update.form,
        name: formData.name,
        deskripsi: formData.deskripsi,
        linkVideo: formData.linkVideo,
@@ -77,11 +84,18 @@ function EditVideo() {
    }
  };

+  const embedLink = convertYoutubeUrlToEmbed(formData.linkVideo);
+
  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">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -102,8 +116,8 @@ function EditVideo() {
          <TextInput
            label="Judul Video"
            placeholder="Masukkan judul video"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.currentTarget.value)}
            required
          />

@@ -111,8 +125,8 @@ function EditVideo() {
            <TextInput
              label="Link Video YouTube"
              placeholder="https://www.youtube.com/watch?v=abc123"
-              defaultValue={formData.linkVideo}
-              onChange={(e) => setFormData({ ...formData, linkVideo: e.currentTarget.value })}
+              value={formData.linkVideo}
+              onChange={(e) => handleChange('linkVideo', e.currentTarget.value)}
              required
            />
            {embedLink && (
@@ -135,7 +149,7 @@ function EditVideo() {
            </Title>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              onChange={(val) => handleChange('deskripsi', val)}
            />
          </Box>

--- a/src/app/admin/(dashboard)/desa/layanan/ajukan_permohonan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/ajukan_permohonan/[id]/edit/page.tsx
@@ -1,17 +1,17 @@
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import {
-    Box,
-    Button,
-    Group,
-    Paper,
-    Select,
-    Stack,
-    TextInput,
-    Title,
-    Tooltip
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -20,159 +20,159 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditAjukanPermohonan() {
-    const router = useRouter();
-    const params = useParams();
-    const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
+  const router = useRouter();
+  const params = useParams();
+  const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);

-    const [formData, setFormData] = useState({
-        nama: stateAjukan.edit.form.nama,
-        nik: stateAjukan.edit.form.nik,
-        alamat: stateAjukan.edit.form.alamat,
-        nomorKk: stateAjukan.edit.form.nomorKk,
-        kategoriId: stateAjukan.edit.form.kategoriId,
-    });
+  // State lokal form
+  const [formData, setFormData] = useState({
+    nama: '',
+    nik: '',
+    alamat: '',
+    nomorKk: '',
+    kategoriId: '',
+  });

-    useEffect(() => {
-        stateLayananDesa.suratKeterangan.findManyAll.load();
-        const loadAjukan = async () => {
-            const id = params?.id as string;
-            if (!id) return;
+  // Load data awal
+  useEffect(() => {
+    stateLayananDesa.suratKeterangan.findManyAll.load();

-            try {
-                const data = await stateAjukan.edit.load(id);
-                if (data) {
-                    setFormData({
-                        nama: data.nama || '',
-                        nik: data.nik || '',
-                        alamat: data.alamat || '',
-                        nomorKk: data.nomorKk || '',
-                        kategoriId: data.kategoriId || '',
-                    });
-                }
-            } catch (error) {
-                console.error('Error loading ajukan:', error);
-                toast.error('Gagal memuat data ajukan');
-            }
-        };
+    const loadAjukan = async () => {
+      const id = params?.id as string;
+      if (!id) return;

-        loadAjukan();
-    }, [params?.id]);
-
-    const handleSubmit = async () => {
-        try {
-            stateAjukan.edit.form = {
-                ...stateAjukan.edit.form,
-                ...formData,
-            };
-            toast.success('Ajukan berhasil diperbarui!');
-            router.push('/admin/desa/layanan/ajukan_permohonan');
-        } catch (error) {
-            console.error('Error updating ajukan:', error);
-            toast.error('Terjadi kesalahan saat memperbarui ajukan');
+      try {
+        const data = await stateAjukan.edit.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            nik: data.nik || '',
+            alamat: data.alamat || '',
+            nomorKk: data.nomorKk || '',
+            kategoriId: data.kategoriId || '',
+          });
        }
+      } catch (error) {
+        console.error('Error loading ajukan:', error);
+        toast.error('Gagal memuat data ajukan');
+      }
    };

-    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 Ajukan Permohonan
-                </Title>
-            </Group>
+    loadAjukan();
+  }, [params?.id]);

-            <Paper
-                w={{ base: '100%', md: '50%' }}
-                bg={colors['white-1']}
-                p="lg"
-                radius="md"
-                shadow="sm"
-                style={{ border: '1px solid #e0e0e0' }}
+  // Handler untuk input controlled
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      stateAjukan.edit.form = {
+        ...stateAjukan.edit.form,
+        ...formData,
+      };
+      toast.success('Ajukan berhasil diperbarui!');
+      router.push('/admin/desa/layanan/ajukan_permohonan');
+    } catch (error) {
+      console.error('Error updating ajukan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui ajukan');
+    }
+  };
+
+  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 Ajukan Permohonan
+        </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">
+          <TextInput
+            label="Nama"
+            placeholder="Masukkan nama"
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
+            required
+          />
+
+          <TextInput
+            type="number"
+            label="NIK"
+            placeholder="Masukkan NIK"
+            value={formData.nik}
+            onChange={(e) => handleChange('nik', e.target.value)}
+            required
+          />
+
+          <TextInput
+            label="Alamat"
+            placeholder="Masukkan alamat"
+            value={formData.alamat}
+            onChange={(e) => handleChange('alamat', e.target.value)}
+            required
+          />
+
+          <TextInput
+            type="number"
+            label="Nomor KK"
+            placeholder="Masukkan nomor KK"
+            value={formData.nomorKk}
+            onChange={(e) => handleChange('nomorKk', e.target.value)}
+            required
+          />
+
+          <Select
+            label="Kategori"
+            placeholder="Pilih kategori"
+            data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
+              label: item.name,
+              value: item.id,
+            }))}
+            value={formData.kategoriId || null}
+            onChange={(val) => handleChange('kategoriId', val || '')}
+            searchable
+            clearable
+            nothingFoundMessage="Tidak ditemukan"
+            required
+          />
+
+          <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)',
+              }}
            >
-                <Stack gap="md">
-                    <TextInput
-                        label="Nama"
-                        placeholder="Masukkan nama"
-                        defaultValue={formData.nama}
-                        onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-                        required
-                    />
-
-                    <TextInput
-                        type="number"
-                        label="NIK"
-                        placeholder="Masukkan NIK"
-                        defaultValue={formData.nik}
-                        onChange={(e) => setFormData({ ...formData, nik: e.target.value })}
-                        required
-                    />
-
-                    <TextInput
-                        label="Alamat"
-                        placeholder="Masukkan alamat"
-                        defaultValue={formData.alamat}
-                        onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
-                        required
-                    />
-
-                    <TextInput
-                        type="number"
-                        label="Nomor KK"
-                        placeholder="Masukkan nomor KK"
-                        defaultValue={formData.nomorKk}
-                        onChange={(e) => setFormData({ ...formData, nomorKk: e.target.value })}
-                        required
-                    />
-
-                    <Select
-                        label="Kategori"
-                        placeholder="Pilih kategori"
-                        data={stateLayananDesa.suratKeterangan.findManyAll.data?.map((item) => ({
-                            label: item.name,
-                            value: item.id,
-                        }))}
-                        value={formData.kategoriId || null}
-                        onChange={(val: string | null) => {
-                            if (val) {
-                                const selected = stateLayananDesa.suratKeterangan.findMany.data?.find(
-                                    (item) => item.id === val
-                                );
-                                if (selected) {
-                                    stateAjukan.edit.form.kategoriId = selected.id;
-                                }
-                            } else {
-                                stateAjukan.edit.form.kategoriId = '';
-                            }
-                        }}
-                        searchable
-                        clearable
-                        nothingFoundMessage="Tidak ditemukan"
-                        required
-                    />
-
-                    <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>
-                </Stack>
-            </Paper>
-        </Box>
-    );
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }

 export default EditAjukanPermohonan;
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_penduduk_non_permanent/[id]/page.tsx
@@ -1,9 +1,20 @@
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
 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,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -12,17 +23,22 @@ import { useProxy } from 'valtio/utils';

 function EditPelayananPendudukNonPermanent() {
  const router = useRouter();
-  const params = useParams()
-  const statePendudukNonPermanent = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
-  const [formData, setFormData] = useState({
-    name: statePendudukNonPermanent.findById.data?.name || '',
-    deskripsi: statePendudukNonPermanent.findById.data?.deskripsi || '',
-  })
+  const params = useParams();
+  const statePendudukNonPermanent = useProxy(
+    stateLayananDesa.pelayananPendudukNonPermanen
+  );

+  const [formData, setFormData] = useState({
+    name: '',
+    deskripsi: '',
+  });
+
+  // Load data sekali dari backend
  useEffect(() => {
-    const loadPelayananPerizinan = async () => {
+    const loadData = async () => {
      const id = params?.id as string;
      if (!id) return;
+
      try {
        const data = await statePendudukNonPermanent.update.load(id);
        if (data) {
@@ -32,27 +48,48 @@ function EditPelayananPendudukNonPermanent() {
          });
        }
      } catch (error) {
-        console.error("Error loading pelayanan perizinan berusaha:", error);
-        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data pelayanan penduduk non permanent');
      }
    };
-    loadPelayananPerizinan();
+
+    loadData();
  }, [params?.id]);

+  const handleChange =
+    (field: keyof typeof formData) =>
+    (value: string) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+    };
+
  const handleSubmit = async () => {
-    if (statePendudukNonPermanent.findById.data) {
-      statePendudukNonPermanent.findById.data.name = formData.name;
-      statePendudukNonPermanent.findById.data.deskripsi = formData.deskripsi;
-      statePendudukNonPermanent.update.update(statePendudukNonPermanent.findById.data)
-    }
-    router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent')
-  }
+    if (!statePendudukNonPermanent.findById.data) return;
+
+    // Update global state hanya di submit
+    const updated = {
+      ...statePendudukNonPermanent.findById.data,
+      name: formData.name,
+      deskripsi: formData.deskripsi,
+    };
+
+    await statePendudukNonPermanent.update.update(updated);
+    router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent');
+  };
+
  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">
+            <Button
+              variant="subtle"
+              onClick={() => router.back()}
+              p="xs"
+              radius="md"
+            >
              <IconArrowBack color={colors['blue-button']} size={24} />
            </Button>
          </Tooltip>
@@ -62,7 +99,7 @@ function EditPelayananPendudukNonPermanent() {
        </Group>

        <Paper
-          w={{ base: "100%", md: "50%" }}
+          w={{ base: '100%', md: '50%' }}
          bg={colors['white-1']}
          p="md"
          radius="md"
@@ -76,23 +113,19 @@ function EditPelayananPendudukNonPermanent() {
            <TextInput
              label="Judul"
              placeholder="Masukkan judul"
-              defaultValue={formData.name}
-              onChange={(e) =>
-                setFormData({ ...formData, name: e.target.value })
-              }
+              value={formData.name}
+              onChange={(e) => handleChange('name')(e.target.value)}
              required
            />

-            {/* Posisi Field */}
+            {/* Deskripsi Field */}
            <Box>
              <Text fz="sm" fw="bold">
                Deskripsi
              </Text>
              <EditEditor
                value={formData.deskripsi}
-                onChange={(htmlContent) => {
-                  setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                }}
+                onChange={handleChange('deskripsi')}
              />
            </Box>

@@ -104,7 +137,9 @@ function EditPelayananPendudukNonPermanent() {
                loading={statePendudukNonPermanent.update.loading}
                disabled={!formData.name}
              >
-                {statePendudukNonPermanent.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
+                {statePendudukNonPermanent.update.loading
+                  ? 'Menyimpan...'
+                  : 'Simpan Perubahan'}
              </Button>

              <Button
--- 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
@@ -27,7 +27,7 @@ function PelayananPendudukNonPermanent() {
  );

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

  if (!pelayananPendudukNonPermanen.findById.data) {
@@ -59,7 +59,7 @@ function PelayananPendudukNonPermanent() {
                radius="md"
                onClick={() =>
                  router.push(
-                    '/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit'
+                    `/admin/desa/layanan/pelayanan_penduduk_non_permanent/${data.id}`
                  )
                }
              >
--- a/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/layanan/pelayanan_perizinan_berusaha/[id]/page.tsx
@@ -1,9 +1,20 @@
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+
 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,
+  Skeleton,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -12,53 +23,90 @@ import { useProxy } from 'valtio/utils';

 function EditPelayananPerizinanBerusaha() {
  const router = useRouter();
-  const params = useParams()
-  const statePerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
+  const params = useParams<{ id: string }>();
+  const id = params?.id; // ini langsung string
+  const state = useProxy(stateLayananDesa.pelayananPerizinanBerusaha);

+  const [loading, setLoading] = useState(true);
  const [formData, setFormData] = useState({
-    name: statePerizinanBerusaha.findById.data?.name || '',
-    deskripsi: statePerizinanBerusaha.findById.data?.deskripsi || '',
-    link: statePerizinanBerusaha.findById.data?.link || '',
-  })
+    id: '',
+    name: '',
+    deskripsi: '',
+    link: '',
+  });

+  // Load data detail
  useEffect(() => {
-    const loadPelayananPerizinan = async () => {
-      const id = params?.id as string;
-      if (!id) return;
+    if (!id) {
+      toast.error("ID tidak valid");
+      return;
+    }
+  
+    const loadData = async () => {
      try {
-        const data = await statePerizinanBerusaha.update.load(id);
+        setLoading(true);
+        const data = await state.findById.load(id);
        if (data) {
          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            link: data.link || '',
+            id: data.id,
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            link: data.link || "",
          });
+        } else {
+          toast.error("Data tidak ditemukan");
        }
      } catch (error) {
-        console.error("Error loading pelayanan perizinan berusaha:", error);
-        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+        console.error("Error loading data:", error);
+        toast.error("Gagal memuat data");
+      } finally {
+        setLoading(false);
      }
    };
-    loadPelayananPerizinan();
-  }, [params?.id]);
+  
+    loadData();
+  }, [id]);
+  
+
+  const handleChange =
+    (field: keyof typeof formData) =>
+      (value: string) => {
+        setFormData((prev) => ({
+          ...prev,
+          [field]: value,
+        }));
+      };

  const handleSubmit = async () => {
-    if (statePerizinanBerusaha.findById.data) {
-      statePerizinanBerusaha.findById.data.name = formData.name;
-      statePerizinanBerusaha.findById.data.deskripsi = formData.deskripsi;
-      statePerizinanBerusaha.findById.data.link = formData.link;
-      statePerizinanBerusaha.update.update(statePerizinanBerusaha.findById.data)
+    try {
+      await state.update.update(formData);
+      router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha');
+    } catch (error) {
+      console.error('Error updating pelayanan perizinan berusaha:', error);
+      toast.error('Terjadi kesalahan saat update data');
    }
-    router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha')
+  };
+
+  if (loading) {
+    return (
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton height={800} radius="md" />
+      </Stack>
+    );
  }

  return (
    <Box>
      <Stack gap="xs">
-        {/* Header Section */}
+        {/* Header */}
        <Group mb="md">
          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <Button
+              variant="subtle"
+              onClick={() => router.back()}
+              p="xs"
+              radius="md"
+            >
              <IconArrowBack color={colors['blue-button']} size={24} />
            </Button>
          </Tooltip>
@@ -67,9 +115,9 @@ function EditPelayananPerizinanBerusaha() {
          </Title>
        </Group>

-        {/* Form Section */}
+        {/* Form */}
        <Paper
-          w={{ base: "100%", md: "50%" }}
+          w={{ base: '100%', md: '50%' }}
          bg={colors['white-1']}
          p="md"
          radius="md"
@@ -79,47 +127,43 @@ function EditPelayananPerizinanBerusaha() {
          <Stack gap="xs">
            <Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>

-            {/* Nama Field */}
            <TextInput
              label="Judul"
              placeholder="Masukkan judul"
-              defaultValue={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              value={formData.name}
+              onChange={(e) => handleChange('name')(e.target.value)}
              required
            />

-            {/* Link Field */}
            <TextInput
              label="Link"
              placeholder="Masukkan link terkait"
-              defaultValue={formData.link}
-              onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+              value={formData.link}
+              onChange={(e) => handleChange('link')(e.target.value)}
            />

-            {/* Deskripsi Field */}
            <Box>
              <Title order={6}>Deskripsi</Title>
              <EditEditor
                value={formData.deskripsi}
-                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+                onChange={handleChange('deskripsi')}
              />
            </Box>

-            {/* Action Buttons */}
            <Group>
              <Button
                bg={colors['blue-button']}
                onClick={handleSubmit}
-                loading={statePerizinanBerusaha.update.loading}
+                loading={state.update.loading}
                disabled={!formData.name}
              >
-                {statePerizinanBerusaha.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
+                {state.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
              </Button>

              <Button
                variant="outline"
                onClick={() => router.back()}
-                disabled={statePerizinanBerusaha.update.loading}
+                disabled={state.update.loading}
              >
                Batal
              </Button>
--- 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,3 +1,4 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
 import {
@@ -19,35 +20,58 @@ import {
  Tooltip,
 } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import stateLayananDesa from '../../../_state/desa/layananDesa';
 import { useProxy } from 'valtio/utils';
-import { useShallowEffect } from '@mantine/hooks';
+import { useRouter } from 'next/navigation';

 function PerizinanBerusaha() {
  const router = useRouter();
  const pelayananPerizinanBerusaha = useProxy(
    stateLayananDesa.pelayananPerizinanBerusaha
  );
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
  const [active, setActive] = useState(1);
  const nextStep = () =>
    setActive((current) => (current < 6 ? current + 1 : current));
  const prevStep = () =>
    setActive((current) => (current > 0 ? current - 1 : current));

-  useShallowEffect(() => {
-    pelayananPerizinanBerusaha.findById.load('1');
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        // You should get the ID from your router query or params
+        const id = 'edit'; // Replace with actual ID or get from URL params
+        await pelayananPerizinanBerusaha.findById.load(id);
+      } catch (err) {
+        setError('Gagal memuat data');
+        console.error('Error:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
  }, []);

-  if (!pelayananPerizinanBerusaha.findById.data) {
+  if (loading) {
    return (
      <Stack align="center" justify="center" py="xl">
-        <Skeleton radius="md" height={800} />
+        <Skeleton height={800} radius="md" />
      </Stack>
    );
  }

+  if (error || !pelayananPerizinanBerusaha.findById.data) {
+    return (
+      <Center h={200}>
+        <Text>{error || 'Data tidak ditemukan'}</Text>
+      </Center>
+    );
+  }
+
  const data = pelayananPerizinanBerusaha.findById.data;

  return (
@@ -69,7 +93,7 @@ function PerizinanBerusaha() {
                radius="md"
                onClick={() =>
                  router.push(
-                    '/admin/desa/layanan/pelayanan_perizinan_berusaha/edit'
+                    `/admin/desa/layanan/pelayanan_perizinan_berusaha/${data.id}`
                  )
                }
              >
@@ -183,3 +207,4 @@ function PerizinanBerusaha() {
 }

 export default PerizinanBerusaha;
+
--- 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
@@ -1,5 +1,4 @@
 'use client'
-/* eslint-disable react-hooks/exhaustive-deps */
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
@@ -19,7 +18,7 @@ import {
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

@@ -28,17 +27,23 @@ function EditSuratKeterangan() {
  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);
-  const [file2, setFile2] = useState<File | null>(null);
+  // state lokal untuk form
  const [formData, setFormData] = useState({
-    name: stateSurat.edit.form.name,
-    deskripsi: stateSurat.edit.form.deskripsi,
-    imageId: stateSurat.edit.form.imageId,
-    image2Id: stateSurat.edit.form.image2Id,
+    name: '',
+    deskripsi: '',
+    imageId: '',
+    image2Id: '',
  });

+  // state file upload
+  const [file, setFile] = useState<File | null>(null);
+  const [file2, setFile2] = useState<File | null>(null);
+
+  // state preview gambar
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [previewImage2, setPreviewImage2] = useState<string | null>(null);
+
+  // load data awal
  useEffect(() => {
    const loadSurat = async () => {
      const id = params?.id as string;
@@ -46,33 +51,39 @@ function EditSuratKeterangan() {

      try {
        const data = await stateSurat.edit.load(id);
-        if (data) {
-          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
-            image2Id: data.image2Id || '',
-          });
+        if (!data) return;

-          setPreviewImage(data.image?.link || null);
-          setPreviewImage2(data.image2?.link || null);
-        }
+        setFormData((prev) => ({
+          ...prev,
+          ...{
+            name: prev.name || data.name || "",
+            deskripsi: prev.deskripsi || data.deskripsi || "",
+            imageId: prev.imageId || data.imageId || "",
+            image2Id: prev.image2Id || data.image2Id || "",
+          },
+        }));
+
+        if (data.image?.link && !previewImage) setPreviewImage(data.image.link);
+        if (data.image2?.link && !previewImage2) setPreviewImage2(data.image2.link);
      } 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();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [params?.id]);

-  const handleSubmit = async () => {
-    try {
-      stateSurat.edit.form = {
-        ...stateSurat.edit.form,
-        ...formData,
-      };

+
+  // handler untuk submit
+  const handleSubmit = useCallback(async () => {
+    try {
+      // update form global hanya saat submit
+      stateSurat.edit.form = { ...stateSurat.edit.form, ...formData };
+
+      // upload file 1
      if (file) {
        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
        const uploaded = res.data?.data;
@@ -80,6 +91,7 @@ function EditSuratKeterangan() {
        stateSurat.edit.form.imageId = uploaded.id;
      }

+      // upload file 2
      if (file2) {
        const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
        const uploaded = res.data?.data;
@@ -94,7 +106,7 @@ function EditSuratKeterangan() {
      console.error('Error updating surat:', error);
      toast.error('Terjadi kesalahan saat memperbarui surat');
    }
-  };
+  }, [formData, file, file2, router, stateSurat.edit]);

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -119,28 +131,32 @@ function EditSuratKeterangan() {
        style={{ border: '1px solid #e0e0e0' }}
      >
        <Stack gap="md">
+          {/* Input nama */}
          <TextInput
            label="Nama Surat Keterangan"
            placeholder="Masukkan nama surat keterangan"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
            required
          />

+          {/* Input deskripsi */}
          <Box>
            <Text fz="sm" fw="bold" mb={6}>
              Konten
            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
            />
          </Box>

          {/* Upload Gambar 1 */}
          <Box>
            <Text fw="bold" fz="sm" mb={6}>
-            Gambar Konten Pelayanan
+              Gambar Konten Pelayanan
            </Text>
            <Dropzone
              onDrop={(files) => {
--- 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
@@ -8,17 +8,15 @@ import {
  Group,
  Paper,
  Stack,
-  Text,
  TextInput,
  Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useCallback, 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);
@@ -26,22 +24,24 @@ function EditPelayananTelunjukSakti() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    name: stateTelunjukDesa.edit.form.name,
-    deskripsi: stateTelunjukDesa.edit.form.deskripsi,
-    link: stateTelunjukDesa.edit.form.link,
+    name: '',
+    deskripsi: '',
+    link: '',
  });

+  // Load data awal hanya sekali (pas ada id)
  useEffect(() => {
-    const loadPelayananTelunjukSakti = async () => {
+    const loadData = async () => {
      const id = params?.id as string;
      if (!id) return;
+
      try {
        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) {
@@ -49,9 +49,19 @@ function EditPelayananTelunjukSakti() {
        toast.error('Gagal memuat data pelayanan telunjuk sakti');
      }
    };
-    loadPelayananTelunjukSakti();
+
+    loadData();
  }, [params?.id]);

+  // Handler input controlled
+  const handleChange = useCallback(
+    (field: keyof typeof formData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
+  // Submit: update global state hanya saat simpan
  const handleSubmit = async () => {
    try {
      stateTelunjukDesa.edit.form = {
@@ -94,28 +104,26 @@ function EditPelayananTelunjukSakti() {
          <TextInput
            label="Nama Pelayanan"
            placeholder="Masukkan nama pelayanan"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => handleChange('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>
+          {/* Deskripsi */}
+          <TextInput
+            value={formData.deskripsi}
+            onChange={(e) => handleChange('deskripsi', e.target.value)}
+            label="Judul Link"
+            placeholder="Masukkan judul link"
+            required
+          />

          {/* Link */}
          <TextInput
            label="Link"
-            placeholder="Masukkan link terkait"
-            defaultValue={formData.link}
-            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+            placeholder="Masukkan alamat link"
+            value={formData.link}
+            onChange={(e) => handleChange('link', e.target.value)}
          />

          {/* Tombol Simpan */}
--- 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
@@ -82,8 +82,8 @@ function CreatePelayananTelunjukDesa() {
            onChange={(val) => {
              stateTelunjukDesa.create.form.deskripsi = val.target.value;
            }}
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi pelayanan"
+            label="Judul Link"
+            placeholder="Masukkan judul link"
            required
          />

--- a/src/app/admin/(dashboard)/desa/penghargaan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/penghargaan/[id]/edit/page.tsx
@@ -24,18 +24,22 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditPenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState)
-  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: statePenghargaan.findUnique.data?.name || '',
-    juara: statePenghargaan.findUnique.data?.juara || '',
-    deskripsi: statePenghargaan.findUnique.data?.deskripsi || '',
-    imageId: statePenghargaan.findUnique.data?.imageId || '',
-  })
+  const statePenghargaan = useProxy(penghargaanState);
+  const router = useRouter();
+  const params = useParams();

+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  // Lokal formData
+  const [formData, setFormData] = useState({
+    name: '',
+    juara: '',
+    deskripsi: '',
+    imageId: '',
+  });
+
+  // Load data pertama kali
  useEffect(() => {
    const loadPenghargaan = async () => {
      const id = params?.id as string;
@@ -56,43 +60,43 @@ function EditPenghargaan() {
          }
        }
      } catch (error) {
-        console.error("Error loading penghargaan:", error);
-        toast.error("Gagal memuat data penghargaan");
+        console.error('Error loading penghargaan:', error);
+        toast.error('Gagal memuat data penghargaan');
      }
    };

    loadPenghargaan();
  }, [params?.id]);

+  // Submit
  const handleSubmit = async () => {
    try {
+      // Sync ke global state saat submit
      statePenghargaan.edit.form = {
        ...statePenghargaan.edit.form,
-        name: formData.name,
-        juara: formData.juara,
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-      }
+        ...formData,
+      };

+      // Upload file baru (kalau ada)
      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");
+          return toast.error('Gagal upload gambar');
        }

        statePenghargaan.edit.form.imageId = uploaded.id;
      }

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

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -122,8 +126,8 @@ function EditPenghargaan() {
          <TextInput
            label="Judul"
            placeholder="Masukkan judul penghargaan"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
            required
          />

@@ -131,8 +135,8 @@ function EditPenghargaan() {
          <TextInput
            label="Juara"
            placeholder="Masukkan juara"
-            defaultValue={formData.juara}
-            onChange={(e) => setFormData({ ...formData, juara: e.target.value })}
+            value={formData.juara}
+            onChange={(e) => setFormData((prev) => ({ ...prev, juara: e.target.value }))}
            required
          />

@@ -182,7 +186,11 @@ function EditPenghargaan() {
                  src={previewImage}
                  alt="Preview Gambar"
                  radius="md"
-                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                  style={{
+                    maxHeight: 220,
+                    objectFit: 'contain',
+                    border: `1px solid ${colors['blue-button']}`,
+                  }}
                  loading="lazy"
                />
              </Box>
@@ -196,10 +204,9 @@ function EditPenghargaan() {
            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                statePenghargaan.edit.form.deskripsi = htmlContent;
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
            />
          </Box>

--- 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,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
 import {
@@ -10,7 +11,7 @@ import {
  Stack,
  TextInput,
  Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -23,10 +24,9 @@ function EditKategoriPengumuman() {
  const router = useRouter();
  const params = useParams();

-  const [formData, setFormData] = useState({
-    name: editState.update.form.name || '',
-  });
+  const [formData, setFormData] = useState({ name: '' });

+  // Load data awal sekali aja
  useEffect(() => {
    const loadKategori = async () => {
      const id = params?.id as string;
@@ -35,9 +35,7 @@ function EditKategoriPengumuman() {
      try {
        const data = await editState.update.load(id);
        if (data) {
-          setFormData({
-            name: data.name || '',
-          });
+          setFormData({ name: data.name || '' });
        }
      } catch (error) {
        console.error('Error loading kategori Pengumuman:', error);
@@ -48,8 +46,16 @@ function EditKategoriPengumuman() {
    loadKategori();
  }, [params?.id]);

+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // Update global state hanya di sini
      editState.update.form = {
        ...editState.update.form,
        name: formData.name,
@@ -97,9 +103,7 @@ function EditKategoriPengumuman() {
            label="Nama Kategori Pengumuman"
            placeholder="Masukkan nama kategori Pengumuman"
            value={formData.name}
-            onChange={(e) =>
-              setFormData({ ...formData, name: e.target.value })
-            }
+            onChange={(e) => handleChange('name', e.target.value)}
            required
          />

--- 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
@@ -28,16 +28,16 @@ function EditPengumuman() {
  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: "",
+    deskripsi: "",
+    categoryPengumumanId: "",
+    content: "",
  });

-  // Load pengumuman by id saat pertama kali
+  // Load kategori & pengumuman by id saat pertama kali
  useEffect(() => {
    editState.category.findMany.load();
+
    const loadpengumuman = async () => {
      const id = params?.id as string;
      if (!id) return;
@@ -61,9 +61,13 @@ function EditPengumuman() {
    loadpengumuman();
  }, [params?.id]);

+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
  const handleSubmit = async () => {
    try {
-      // update global state
+      // update global state hanya sekali pas submit
      editState.pengumuman.edit.form = {
        ...editState.pengumuman.edit.form,
        ...formData,
@@ -108,26 +112,22 @@ function EditPengumuman() {
          <TextInput
            label="Judul Pengumuman"
            placeholder="Masukkan judul"
-            defaultValue={formData.judul}
-            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            value={formData.judul}
+            onChange={(e) => handleChange("judul", e.target.value)}
            required
          />

          <TextInput
            label="Deskripsi Singkat"
            placeholder="Masukkan deskripsi"
-            defaultValue={formData.deskripsi}
-            onChange={(e) =>
-              setFormData({ ...formData, deskripsi: e.target.value })
-            }
+            value={formData.deskripsi}
+            onChange={(e) => handleChange("deskripsi", e.target.value)}
            required
          />

          <Select
            value={formData.categoryPengumumanId}
-            onChange={(val) =>
-              setFormData({ ...formData, categoryPengumumanId: val || "" })
-            }
+            onChange={(val) => handleChange("categoryPengumumanId", val || "")}
            label="Kategori"
            placeholder="Pilih kategori"
            data={
@@ -150,9 +150,7 @@ function EditPengumuman() {
            </Text>
            <EditEditor
              value={formData.content}
-              onChange={(htmlContent) =>
-                setFormData({ ...formData, content: htmlContent })
-              }
+              onChange={(htmlContent) => handleChange("content", htmlContent)}
            />
          </Box>

--- a/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/kategori-potensi/[id]/page.tsx
@@ -24,9 +24,10 @@ function EditKategoriPotensi() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    nama: editState.update.form.nama || '',
+    nama: '',
  });

+  // Load data dari backend -> isi ke formData lokal
  useEffect(() => {
    const loadKategori = async () => {
      const id = params?.id as string;
@@ -48,8 +49,16 @@ function EditKategoriPotensi() {
    loadKategori();
  }, [params?.id]);

+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // Update global state hanya pas submit
      editState.update.form = {
        ...editState.update.form,
        nama: formData.nama,
@@ -68,7 +77,12 @@ function EditKategoriPotensi() {
    <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">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -89,12 +103,12 @@ function EditKategoriPotensi() {
          <TextInput
            label="Nama Kategori Potensi"
            placeholder="Masukkan nama kategori potensi"
-            defaultValue={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.currentTarget.value)}
            required
          />

-          <Group justify="right">
+          <Group justify="flex-end">
            <Button
              onClick={handleSubmit}
              radius="md"
--- 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
@@ -40,12 +40,18 @@ function EditPotensi() {
    imageId: "",
  });

+  // handle input changes
+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
  useEffect(() => {
    potensiDesaState.kategoriPotensi.findMany.load();
+  
    const loadPotensi = async () => {
      const id = params?.id as string;
      if (!id) return;
-
+  
      try {
        const data = await potensiState.edit.load(id);
        if (data) {
@@ -56,7 +62,17 @@ function EditPotensi() {
            content: data.content || "",
            imageId: data.imageId || "",
          });
-
+          
+          // // merge, bukan replace
+          // setFormData((prev) => ({
+          //   ...prev,
+          //   name: data.name ?? prev.name,
+          //   deskripsi: data.deskripsi ?? prev.deskripsi,
+          //   kategoriId: data.kategoriId ?? prev.kategoriId,
+          //   content: data.content ?? prev.content,
+          //   imageId: data.imageId ?? prev.imageId,
+          // }));
+  
          if (data?.image?.link) {
            setPreviewImage(data.image.link);
          }
@@ -66,28 +82,34 @@ function EditPotensi() {
        toast.error("Gagal memuat data potensi");
      }
    };
-
+  
    loadPotensi();
  }, [params?.id]);
+  

  const handleSubmit = async () => {
    try {
-      potensiState.edit.form = {
-        ...potensiState.edit.form,
-        ...formData,
-      };
+      let imageId = formData.imageId;

      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");
        }

-        potensiState.edit.form.imageId = uploaded.id;
+        imageId = uploaded.id;
      }

+      potensiState.edit.form = {
+        ...formData,
+        imageId,
+      };
+
      await potensiState.edit.update();
      toast.success("Potensi berhasil diperbarui!");
      router.push("/admin/desa/potensi/list-potensi");
@@ -101,7 +123,12 @@ function EditPotensi() {
    <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">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors["blue-button"]} size={24} />
          </Button>
        </Tooltip>
@@ -122,22 +149,26 @@ function EditPotensi() {
          <TextInput
            label="Judul Potensi"
            placeholder="Masukkan judul"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => handleChange("name", e.target.value)}
            required
          />

-          <TextInput
-            label="Deskripsi Singkat"
-            placeholder="Masukkan deskripsi"
-            defaultValue={formData.deskripsi}
-            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
-            required
-          />
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) =>
+                handleChange("deskripsi", htmlContent)
+              }
+            />
+          </Box>

          <Select
            value={formData.kategoriId}
-            onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
+            onChange={(val) => handleChange("kategoriId", val || "")}
            label="Kategori"
            placeholder="Pilih kategori"
            data={
@@ -164,7 +195,9 @@ function EditPotensi() {
                  setPreviewImage(URL.createObjectURL(selectedFile));
                }
              }}
-              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              onReject={() =>
+                toast.error("File tidak valid, gunakan format gambar")
+              }
              maxSize={5 * 1024 ** 2}
              accept={{ "image/*": [] }}
              radius="md"
@@ -172,7 +205,11 @@ function EditPotensi() {
            >
              <Group justify="center" gap="xl" mih={180}>
                <Dropzone.Accept>
-                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                  <IconUpload
+                    size={48}
+                    color={colors["blue-button"]}
+                    stroke={1.5}
+                  />
                </Dropzone.Accept>
                <Dropzone.Reject>
                  <IconX size={48} color="red" stroke={1.5} />
@@ -214,7 +251,9 @@ function EditPotensi() {
            </Text>
            <EditEditor
              value={formData.content}
-              onChange={(htmlContent) => setFormData({ ...formData, content: htmlContent })}
+              onChange={(htmlContent) =>
+                handleChange("content", htmlContent)
+              }
            />
          </Box>

--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/[id]/page.tsx
@@ -25,7 +25,7 @@ export default function DetailPotensi() {
      potensiState.delete.byId(selectedId);
      setModalHapus(false);
      setSelectedId(null);
-      router.push("/admin/desa/potensi");
+      router.push("/admin/desa/potensi/list-potensi");
    }
  };

@@ -77,7 +77,7 @@ export default function DetailPotensi() {

              <Box>
                <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
              </Box>

              <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
@@ -101,13 +101,17 @@ function CreatePotensi() {
          />

          {/* Deskripsi */}
-          <TextInput
-            defaultValue={potensiState.create.form.deskripsi}
-            onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
-            label="Deskripsi"
-            placeholder="Masukkan deskripsi singkat"
-            required
-          />
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <CreateEditor
+              value={potensiState.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                potensiState.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>

          {/* Kategori */}
          <Select
--- a/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
+++ b/src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx
@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
                filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
                    </TableTd>
                    <TableTd>
-                      <Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
+                      <Box w={200}>
+                        <Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
+                      </Box>
                    </TableTd>
                    <TableTd>
                      <Box w={300}>
                        <Text
+                          lineClamp={1}
                          truncate
                          fz="sm"
                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                          style={{wordBreak: "break-word", whiteSpace: "normal"}}
+                          style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                        />
                      </Box>
                    </TableTd>
--- 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
@@ -18,7 +18,9 @@ function Page() {
  const router = useRouter();
  const params = useParams();

-  const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
+  const [images, setImages] = useState<
+  Array<{ file: File | null; preview: string; label: string; imageId?: string }>
+>([]);
  const [formData, setFormData] = useState({
    judul: '',
    deskripsi: '',
@@ -55,6 +57,7 @@ function Page() {
              file: null,
              preview: img.image.link,
              label: img.label,
+              imageId: img.image.id, // simpan id lama
            })));
          }
        }
@@ -88,25 +91,24 @@ function Page() {
      // 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 });
+          if (!img.imageId) continue; // kalau benar2 kosong, skip
+          uploadedImages.push({ imageId: img.imageId, label: img.label });
          continue;
        }
-
+      
+        // upload baru
        const res = await ApiFetch.api.fileStorage.create.post({
          file: img.file,
          name: img.file.name,
        });
-
        const uploaded = res.data?.data;
        if (!uploaded?.id) {
          toast.error("Gagal upload salah satu gambar");
          return;
        }
-
-        uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
+        uploadedImages.push({ imageId: uploaded.id, label: img.label || "main" });
      }
+      

      // Update ke global state
      maskotState.update.updateField("judul", formData.judul);
--- a/src/app/admin/(dashboard)/desa/profile/profile-desa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profile/profile-desa/page.tsx
@@ -162,7 +162,7 @@ function Page() {
                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
                  >
                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
-                      Lambang Desa
+                      {lambang.judul}
                    </Text>
                  </Paper>
                </Stack>
@@ -216,7 +216,7 @@ function Page() {
                <Divider my="md" color={colors['blue-button']} />
                <Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
                <Stack mt="md" gap="sm">
-                  <SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
+                  <SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
                    {maskot.images.map((img, idx) => (
                      <Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
                        <Center>
--- a/src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx
@@ -26,15 +26,17 @@ function EditPerbekelDariMasaKeMasa() {
  const state = useProxy(stateProfileDesa.mantanPerbekel);
  const router = useRouter();
  const params = useParams();
+
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
  const [formData, setFormData] = useState({
-    nama: state.update.form.nama || '',
-    daerah: state.update.form.daerah || '',
-    periode: state.update.form.periode || '',
-    imageId: state.update.form.imageId || ''
+    nama: '',
+    daerah: '',
+    periode: '',
+    imageId: ''
  });

+  // load data pertama kali
  useEffect(() => {
    const loadFoto = async () => {
      const id = params?.id as string;
@@ -48,7 +50,9 @@ function EditPerbekelDariMasaKeMasa() {
            periode: data.periode || '',
            imageId: data.imageId || ''
          });
-          if (data?.imageGalleryFoto?.link) setPreviewImage(data.imageGalleryFoto.link);
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
+          }
        }
      } catch (error) {
        console.error('Error loading foto:', error);
@@ -58,8 +62,17 @@ function EditPerbekelDariMasaKeMasa() {
    loadFoto();
  }, [params?.id]);

+  // helper ubah state formData
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // update global state hanya sekali pas submit
      state.update.form = { ...state.update.form, ...formData };

      if (file) {
@@ -106,8 +119,8 @@ function EditPerbekelDariMasaKeMasa() {
          <TextInput
            label="Nama"
            placeholder="Masukkan nama"
-            defaultValue={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
            required
          />

@@ -161,7 +174,7 @@ function EditPerbekelDariMasaKeMasa() {
                    objectFit: 'contain',
                    border: `1px solid ${colors['blue-button']}`,
                  }}
-                  loading='lazy'
+                  loading="lazy"
                />
              </Box>
            )}
@@ -170,16 +183,16 @@ function EditPerbekelDariMasaKeMasa() {
          <TextInput
            label="Daerah"
            placeholder="Masukkan daerah"
-            defaultValue={formData.daerah}
-            onChange={(e) => setFormData({ ...formData, daerah: e.target.value })}
+            value={formData.daerah}
+            onChange={(e) => handleChange('daerah', e.target.value)}
            required
          />

          <TextInput
            label="Periode"
            placeholder="Masukkan periode"
-            defaultValue={formData.periode}
-            onChange={(e) => setFormData({ ...formData, periode: e.target.value })}
+            value={formData.periode}
+            onChange={(e) => handleChange('periode', e.target.value)}
            required
          />

--- a/src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx
+++ b/src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/page.tsx
@@ -75,22 +75,28 @@ function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
                filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd>
-                      <Text fw={500} lineClamp={1}>{item.nama}</Text>
+                      <Box w={200}>
+                        <Text fw={500} lineClamp={1}>{item.nama}</Text>
+                      </Box>
                    </TableTd>
                    <TableTd>
-                      <Text lineClamp={1}>{item.periode}</Text>
+                      <Box w={200}>
+                        <Text lineClamp={1}>{item.periode}</Text>
+                      </Box>
                    </TableTd>
                    <TableTd>
-                      <Button
-                        size="xs"
-                        radius="md"
-                        variant="light"
-                        color="blue"
-                        leftSection={<IconDeviceImacCog size={16} />}
-                        onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
-                      >
-                        Detail
-                      </Button>
+                      <Box w={200}>
+                        <Button
+                          size="xs"
+                          radius="md"
+                          variant="light"
+                          color="blue"
+                          leftSection={<IconDeviceImacCog size={16} />}
+                          onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
+                        >
+                          Detail
+                        </Button>
+                      </Box>
                    </TableTd>
                  </TableTr>
                ))
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/[id]/edit/page.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client'
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
 import {
@@ -29,13 +29,13 @@ function EditAPBDesa() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    tahun: apbState.update.form.tahun || '',
-    pendapatanIds: apbState.update.form.pendapatanIds || [],
-    belanjaIds: apbState.update.form.belanjaIds || [],
-    pembiayaanIds: apbState.update.form.pembiayaanIds || [],
+    tahun: '',
+    pendapatanIds: [] as string[],
+    belanjaIds: [] as string[],
+    pembiayaanIds: [] as string[],
  });

-  // Load APB desa by id
+  // Load APB desa by id → hanya update formData, bukan global state
  useEffect(() => {
    const loadAPBdesa = async () => {
      const id = params?.id as string;
@@ -45,7 +45,7 @@ function EditAPBDesa() {
        const data = await apbState.update.load(id);
        if (data) {
          setFormData({
-            tahun: data.tahun || 0,
+            tahun: String(data.tahun || ''),
            pendapatanIds: data.pendapatan?.map((p: any) => p.id) || [],
            belanjaIds: data.belanja?.map((b: any) => b.id) || [],
            pembiayaanIds: data.pembiayaan?.map((p: any) => p.id) || [],
@@ -60,8 +60,13 @@ function EditAPBDesa() {
    loadAPBdesa();
  }, [params?.id]);

+  const handleChange = (field: keyof typeof formData, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // update global state cuma pas submit
      apbState.update.form = {
        ...apbState.update.form,
        tahun: Number(formData.tahun),
@@ -111,10 +116,8 @@ function EditAPBDesa() {
          {/* Tahun */}
          <TextInput
            type="number"
-            defaultValue={formData.tahun}
-            onChange={(e) =>
-              setFormData({ ...formData, tahun: e.target.value })
-            }
+            value={formData.tahun}
+            onChange={(e) => handleChange("tahun", e.target.value)}
            label={<Text fz="sm" fw="bold">Tahun</Text>}
            placeholder="Masukkan tahun anggaran"
            required
@@ -123,23 +126,17 @@ function EditAPBDesa() {
          {/* Selects */}
          <SelectPendapatan
            selectedIds={formData.pendapatanIds}
-            onSelectionChange={(ids) =>
-              setFormData({ ...formData, pendapatanIds: ids })
-            }
+            onSelectionChange={(ids) => handleChange("pendapatanIds", ids)}
          />

          <SelectBelanja
            selectedIds={formData.belanjaIds}
-            onSelectionChange={(ids) =>
-              setFormData({ ...formData, belanjaIds: ids })
-            }
+            onSelectionChange={(ids) => handleChange("belanjaIds", ids)}
          />

          <SelectPembiayaan
            selectedIds={formData.pembiayaanIds}
-            onSelectionChange={(ids) =>
-              setFormData({ ...formData, pembiayaanIds: ids })
-            }
+            onSelectionChange={(ids) => handleChange("pembiayaanIds", ids)}
          />

          {/* Save Button */}
@@ -164,7 +161,13 @@ function EditAPBDesa() {

  /* --- Sub Components --- */

-  function SelectPendapatan({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
+  function SelectPendapatan({
+    selectedIds,
+    onSelectionChange,
+  }: {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }) {
    const pendapatanState = useProxy(PendapatanAsliDesa.pendapatan);

    useShallowEffect(() => {
@@ -192,7 +195,13 @@ function EditAPBDesa() {
    );
  }

-  function SelectBelanja({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
+  function SelectBelanja({
+    selectedIds,
+    onSelectionChange,
+  }: {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }) {
    const belanjaState = useProxy(PendapatanAsliDesa.belanja);

    useShallowEffect(() => {
@@ -220,7 +229,13 @@ function EditAPBDesa() {
    );
  }

-  function SelectPembiayaan({ selectedIds, onSelectionChange }: { selectedIds: string[]; onSelectionChange: (ids: string[]) => void }) {
+  function SelectPembiayaan({
+    selectedIds,
+    onSelectionChange,
+  }: {
+    selectedIds: string[];
+    onSelectionChange: (ids: string[]) => void;
+  }) {
    const pembiayaanState = useProxy(PendapatanAsliDesa.pembiayaan);

    useShallowEffect(() => {
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/[id]/page.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import PendapatanAsliDesa from '@/app/admin/(dashboard)/_state/ekonomi/PADesa';
 import colors from '@/con/colors';
 import {
@@ -24,12 +25,16 @@ function EditBelanja() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    name: belanjaState.update.form.name || '',
-    value: belanjaState.update.form.value || '',
+    name: '',
+    value: '',
  });

+  // format angka ke rupiah
  const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.replace(/\D/g, ''));
+    const number =
+      typeof value === 'number'
+        ? value
+        : Number(value.replace(/\D/g, '')) || 0;
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
@@ -37,8 +42,9 @@ function EditBelanja() {
    }).format(number);
  };

+  // buang semua simbol jadi angka murni
  const unformatRupiah = (value: string) => {
-    return Number(value.replace(/\D/g, ''));
+    return Number(value.replace(/\D/g, '')) || 0;
  };

  useEffect(() => {
@@ -51,7 +57,7 @@ function EditBelanja() {
        if (data) {
          setFormData({
            name: data.name || '',
-            value: data.value || '',
+            value: String(data.value || ''),
          });
        }
      } catch (error) {
@@ -69,7 +75,7 @@ function EditBelanja() {
        ...belanjaState.update.form,
        name: formData.name,
        value: Number(formData.value),
-      }
+      };

      await belanjaState.update.update();
      toast.success("Jenis Belanja berhasil diperbarui!");
@@ -78,7 +84,7 @@ function EditBelanja() {
      console.error("Error updating jenis belanja:", error);
      toast.error("Terjadi kesalahan saat memperbarui jenis belanja");
    }
-  }
+  };

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -112,19 +118,21 @@ function EditBelanja() {
          <TextInput
            label="Nama Jenis Belanja"
            placeholder="Masukkan nama jenis belanja"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) =>
+              setFormData({ ...formData, name: e.target.value })
+            }
            required
          />

          <TextInput
            label="Nilai"
            placeholder="Masukkan nilai"
-            defaultValue={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
            onChange={(e) => {
              const raw = e.currentTarget.value;
              const cleanValue = unformatRupiah(raw);
-              setFormData({ ...formData, value: cleanValue });
+              setFormData({ ...formData, value: String(cleanValue) });
            }}
            required
          />
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/[id]/page.tsx
@@ -24,12 +24,15 @@ function EditPembiayaan() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    name: pembiayaanState.update.form.name || '',
-    value: pembiayaanState.update.form.value || '',
+    name: '',
+    value: '',
  });

  const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
+    const number =
+      typeof value === 'number'
+        ? value
+        : Number(value.toString().replace(/\D/g, '')) || 0;
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
@@ -38,7 +41,7 @@ function EditPembiayaan() {
  };

  const unformatRupiah = (value: string) => {
-    return Number(value.replace(/\D/g, ''));
+    return Number(value.replace(/\D/g, '')) || 0;
  };

  useEffect(() => {
@@ -51,7 +54,7 @@ function EditPembiayaan() {
        if (data) {
          setFormData({
            name: data.name || '',
-            value: data.value || '',
+            value: String(data.value || ''),
          });
        }
      } catch (error) {
@@ -68,7 +71,7 @@ function EditPembiayaan() {
      pembiayaanState.update.form = {
        ...pembiayaanState.update.form,
        name: formData.name,
-        value: Number(formData.value),
+        value: unformatRupiah(formData.value),
      };

      await pembiayaanState.update.update();
@@ -82,7 +85,7 @@ function EditPembiayaan() {

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan Back Button */}
+      {/* Header */}
      <Group mb="md">
        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
          <Button
@@ -112,19 +115,21 @@ function EditPembiayaan() {
          <TextInput
            label="Nama Jenis Pembiayaan"
            placeholder="Masukkan nama jenis pembiayaan"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
            required
          />

          <TextInput
            label="Nilai"
            placeholder="Masukkan nilai"
-            defaultValue={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
            onChange={(e) => {
              const raw = e.currentTarget.value;
              const cleanValue = unformatRupiah(raw);
-              setFormData({ ...formData, value: cleanValue });
+              setFormData((prev) => ({ ...prev, value: String(cleanValue) }));
            }}
            required
          />
--- a/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/[id]/page.tsx
@@ -24,12 +24,16 @@ function EditPendapatan() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    name: pendapatanState.update.form.name || '',
-    value: pendapatanState.update.form.value || '',
+    name: '',
+    value: '',
  });

+  // helper format
  const formatRupiah = (value: number | string) => {
-    const number = typeof value === 'number' ? value : Number(value.toString().replace(/\D/g, ''));
+    const number = typeof value === 'number'
+      ? value
+      : Number(value.toString().replace(/\D/g, ''));
+
    return new Intl.NumberFormat('id-ID', {
      style: 'currency',
      currency: 'IDR',
@@ -39,6 +43,7 @@ function EditPendapatan() {

  const unformatRupiah = (value: string) => Number(value.replace(/\D/g, ''));

+  // load data once
  useEffect(() => {
    const id = params?.id as string;
    if (!id) return;
@@ -48,8 +53,8 @@ function EditPendapatan() {
        const data = await pendapatanState.update.load(id);
        if (data) {
          setFormData({
-            name: data.name || '',
-            value: data.value || '',
+            name: data.name ?? '',
+            value: data.value?.toString() ?? '',
          });
        }
      } catch (error) {
@@ -61,6 +66,13 @@ function EditPendapatan() {
    loadPendapatan();
  }, [params?.id]);

+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
      pendapatanState.update.form = {
@@ -110,19 +122,19 @@ function EditPendapatan() {
          <TextInput
            label="Nama Jenis Pendapatan"
            placeholder="Masukkan nama jenis pendapatan"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.target.value)}
            required
          />

          <TextInput
            label="Nilai"
            placeholder="Masukkan nilai"
-            defaultValue={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
            onChange={(e) => {
              const raw = e.currentTarget.value;
-              const cleanValue = unformatRupiah(raw);
-              setFormData({ ...formData, value: cleanValue });
+              const cleanValue = unformatRupiah(raw).toString();
+              handleChange('value', cleanValue);
            }}
            required
          />
--- a/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/[id]/page.tsx
@@ -10,47 +10,80 @@ import {
  Stack,
  TextInput,
  Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';

-function EditDemografiPekerjaan() {
+interface FormData {
+  pekerjaan: string;
+  lakiLaki: number;
+  perempuan: number;
+}
+
+export default function EditDemografiPekerjaan() {
  const router = useRouter();
-  const params = useParams() as { id: string };
+  const { id } = useParams() as { id: string };
  const stateDemografi = useProxy(demografiPekerjaan);

-  const id = params.id;
+  const [formData, setFormData] = useState<FormData>({
+    pekerjaan: '',
+    lakiLaki: 0,
+    perempuan: 0,
+  });

+  // ✅ Load data hanya sekali di awal (tidak reset form)
  useEffect(() => {
    if (!id) return;
-    stateDemografi.update.id = id;
-    stateDemografi.findUnique
-      .load(id)
-      .then(() => {
+
+    const loadData = async () => {
+      try {
+        stateDemografi.update.id = id;
+        await stateDemografi.findUnique.load(id);
+
        const data = stateDemografi.findUnique.data;
        if (data) {
-          stateDemografi.update.form = {
-            pekerjaan: String(data.pekerjaan || ''),
-            lakiLaki: Number(data.lakiLaki || 0),
-            perempuan: Number(data.perempuan || 0),
-          };
+          setFormData({
+            pekerjaan: data.pekerjaan ?? '',
+            lakiLaki: Number(data.lakiLaki ?? 0),
+            perempuan: Number(data.perempuan ?? 0),
+          });
        }
-      })
-      .catch((error) => {
+      } catch (error) {
        console.error('Error loading data:', error);
        toast.error('Gagal memuat data');
-      });
+      }
+    };
+
+    loadData();
  }, [id]);

+  // ✅ Handler input terkontrol (tidak buat re-render berlebihan)
+  const handleChange = useCallback(
+    (field: keyof FormData) =>
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const value =
+          field === 'lakiLaki' || field === 'perempuan'
+            ? Number(e.currentTarget.value)
+            : e.currentTarget.value;
+
+        setFormData((prev) => ({ ...prev, [field]: value }));
+      },
+    []
+  );
+
+  // ✅ Submit hanya update global state sekali
  const handleSubmit = async () => {
    try {
      stateDemografi.update.id = id;
+      stateDemografi.update.form = { ...formData };
+
      await stateDemografi.update.submit();
+
      toast.success('Data berhasil diperbarui');
      router.push('/admin/ekonomi/demografi-pekerjaan');
    } catch (error) {
@@ -91,10 +124,8 @@ function EditDemografiPekerjaan() {
          <TextInput
            label="Pekerjaan"
            placeholder="Masukkan jenis pekerjaan"
-            defaultValue={stateDemografi.update.form.pekerjaan}
-            onChange={(e) =>
-              (stateDemografi.update.form.pekerjaan = e.currentTarget.value)
-            }
+            value={formData.pekerjaan}
+            onChange={handleChange('pekerjaan')}
            required
          />

@@ -102,12 +133,8 @@ function EditDemografiPekerjaan() {
            label="Jumlah Pekerja Laki-laki"
            type="number"
            placeholder="Masukkan jumlah pekerja laki-laki"
-            defaultValue={stateDemografi.update.form.lakiLaki}
-            onChange={(e) =>
-              (stateDemografi.update.form.lakiLaki = Number(
-                e.currentTarget.value
-              ))
-            }
+            value={formData.lakiLaki}
+            onChange={handleChange('lakiLaki')}
            required
          />

@@ -115,12 +142,8 @@ function EditDemografiPekerjaan() {
            label="Jumlah Pekerja Perempuan"
            type="number"
            placeholder="Masukkan jumlah pekerja perempuan"
-            defaultValue={stateDemografi.update.form.perempuan}
-            onChange={(e) =>
-              (stateDemografi.update.form.perempuan = Number(
-                e.currentTarget.value
-              ))
-            }
+            value={formData.perempuan}
+            onChange={handleChange('perempuan')}
            required
          />

@@ -143,5 +166,3 @@ function EditDemografiPekerjaan() {
    </Box>
  );
 }
-
-export default EditDemografiPekerjaan;
--- a/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/page.tsx
@@ -126,9 +126,9 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
          <Table highlightOnHover>
            <TableThead>
              <TableTr>
-                <TableTh>Pekerjaan</TableTh>
-                <TableTh>Laki - Laki</TableTh>
-                <TableTh>Perempuan</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Pekerjaan</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Laki - Laki</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Perempuan</TableTh>
                <TableTh>Edit</TableTh>
                <TableTh>Hapus</TableTh>
              </TableTr>
@@ -137,9 +137,9 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
              {filteredData.length > 0 ? (
                filteredData.map((item) => (
                  <TableTr key={item.id}>
-                    <TableTd>{item.pekerjaan}</TableTd>
-                    <TableTd>{item.lakiLaki}</TableTd>
-                    <TableTd>{item.perempuan}</TableTd>
+                    <TableTd style={{ minWidth: 200 }}>{item.pekerjaan}</TableTd>
+                    <TableTd style={{ minWidth: 200 }}>{item.lakiLaki}</TableTd>
+                    <TableTd style={{ minWidth: 200 }}>{item.perempuan}</TableTd>
                    <TableTd>
                      <Button
                        variant="light"
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/[id]/page.tsx
@@ -3,10 +3,19 @@

 import jumlahPendudukMiskin from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-penduduk-miskin';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Group,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';

@@ -17,6 +26,13 @@ function EditJumlahPendudukMiskin() {

  const id = params.id;

+  // 🔹 State lokal untuk form
+  const [formData, setFormData] = useState({
+    year: 0,
+    totalPoorPopulation: 0,
+  });
+
+  // 🔹 Load data awal dari backend
  useEffect(() => {
    if (!id) return;

@@ -25,10 +41,10 @@ function EditJumlahPendudukMiskin() {
        await stateJPM.findUnique.load(id);
        const data = stateJPM.findUnique.data;
        if (data) {
-          stateJPM.update.form = {
+          setFormData({
            year: data.year || 0,
            totalPoorPopulation: data.totalPoorPopulation || 0,
-          };
+          });
        }
      } catch (error) {
        console.error('Gagal memuat data:', error);
@@ -39,9 +55,21 @@ function EditJumlahPendudukMiskin() {
    loadData();
  }, [id]);

+  // 🔹 Handler input controlled
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: Number(value),
+    }));
+  };
+
+  // 🔹 Submit form
  const handleSubmit = async () => {
    try {
      stateJPM.update.id = id;
+      // update global state cuma saat submit
+      stateJPM.update.form = { ...formData };
+
      await stateJPM.update.submit();
      toast.success('Data jumlah penduduk miskin berhasil diperbarui!');
      router.push('/admin/ekonomi/jumlah-penduduk-miskin');
@@ -55,7 +83,12 @@ function EditJumlahPendudukMiskin() {
    <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">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -78,10 +111,8 @@ function EditJumlahPendudukMiskin() {
            placeholder="Masukkan tahun"
            type="number"
            required
-            defaultValue={stateJPM.update.form.year}
-            onChange={(val) => {
-              stateJPM.update.form.year = Number(val.currentTarget.value);
-            }}
+            value={formData.year}
+            onChange={(e) => handleChange('year', e.currentTarget.value)}
          />

          <TextInput
@@ -89,10 +120,10 @@ function EditJumlahPendudukMiskin() {
            placeholder="Masukkan jumlah penduduk miskin"
            type="number"
            required
-            defaultValue={stateJPM.update.form.totalPoorPopulation}
-            onChange={(val) => {
-              stateJPM.update.form.totalPoorPopulation = Number(val.currentTarget.value);
-            }}
+            value={formData.totalPoorPopulation}
+            onChange={(e) =>
+              handleChange('totalPoorPopulation', e.currentTarget.value)
+            }
          />

          <Group justify="right">
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx
@@ -1,23 +1,43 @@
 '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, IconSearch, IconTrash } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { useShallowEffect, useMediaQuery } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
-import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
-import { Bar, BarChart, Legend, XAxis, YAxis, Tooltip as RechartsTooltip } from 'recharts';
+import HeaderSearch from '../../_com/header';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
+
+// ✅ BarChart Mantine
+import { BarChart } from '@mantine/charts';

 function JumlahPendudukMiskin() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title='Jumlah Penduduk Miskin'
-        placeholder='Cari tahun atau jumlah penduduk miskin...'
+        title="Jumlah Penduduk Miskin"
+        placeholder="Cari tahun atau jumlah penduduk miskin..."
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,7 +48,7 @@ function JumlahPendudukMiskin() {
 }

 function ListJumlahPendudukMiskin({ search }: { search: string }) {
-  type JPMGrafik = { id: string; year: number; totalPoorPopulation: number }
+  type JPMGrafik = { year: number; totalPoorPopulation: number };
  const stateJPM = useProxy(jumlahPendudukMiskin);
  const [chartData, setChartData] = useState<JPMGrafik[]>([]);
  const [mounted, setMounted] = useState(false);
@@ -36,33 +56,27 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const router = useRouter();

-  const isTablet = useMediaQuery('(max-width:1024px)');
-  const isMobile = useMediaQuery('(max-width:768px)');
+  const { data, page, loading, load, totalPages } = stateJPM.findMany;

-  const {
-    data,
-    page,
-    loading,
-    load,
-    totalPages,
-  } = stateJPM.findMany;
-  // Load data
+  // Load data awal
  useShallowEffect(() => {
    setMounted(true);
    load(page, 10, search);
  }, [page, search]);

+  // Update chart data
  useEffect(() => {
    if (stateJPM.findMany.data) {
-      setChartData(stateJPM.findMany.data.map(item => ({
-        id: item.id,
-        year: Number(item.year),
-        totalPoorPopulation: Number(item.totalPoorPopulation)
-      })));
+      setChartData(
+        stateJPM.findMany.data.map((item) => ({
+          year: Number(item.year),
+          totalPoorPopulation: Number(item.totalPoorPopulation),
+        }))
+      );
    }
  }, [stateJPM.findMany.data]);

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

  const handleDelete = () => {
    if (selectedId) {
@@ -71,7 +85,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
      setSelectedId(null);
      stateJPM.findMany.load();
    }
-  }
+  };

  if (loading || !data) {
    return (
@@ -83,15 +97,18 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {

  return (
    <Box py={10}>
+      {/* Tabel */}
      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
        <Group justify="space-between" mb="md">
          <Title order={4}>Daftar Jumlah Penduduk Miskin</Title>
          <Tooltip label="Tambah Data" withArrow>
            <Button
-              leftSection={<IconEdit size={18} />}
+              leftSection={<IconPlus size={18} />}
              color="blue"
              variant="light"
-              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')}
+              onClick={() =>
+                router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')
+              }
            >
              Tambah Baru
            </Button>
@@ -109,22 +126,38 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
              </TableTr>
            </TableThead>
            <TableTbody>
-              {filteredData.length > 0 ? filteredData.map(item => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.year}</TableTd>
-                  <TableTd>{item.totalPoorPopulation}</TableTd>
-                  <TableTd>
-                    <Button variant='light' color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button variant='light' color="red" disabled={stateJPM.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true) }}>
-                      <IconTrash size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              )) : (
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.year}</TableTd>
+                    <TableTd>{item.totalPoorPopulation}</TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="green"
+                        onClick={() =>
+                          router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)
+                        }
+                      >
+                        <IconEdit size={20} />
+                      </Button>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="red"
+                        disabled={stateJPM.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
                <TableTr>
                  <TableTd colSpan={4}>
                    <Center py={20}>
@@ -138,6 +171,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
        </Box>
      </Paper>

+      {/* Pagination */}
      <Center>
        <Pagination
          value={page}
@@ -153,33 +187,38 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
        />
      </Center>

-      {/* Chart */}
+      {/* Bar Chart */}
      <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
        <Stack>
-          <Box mt="lg" style={{ width: '100%', minHeight: 350 }}>
-            <Title order={4} mb="sm">Grafik Jumlah Penduduk Miskin</Title>
-            {mounted && chartData.length > 0 ? (
-              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData}>
-                <XAxis dataKey="year" />
-                <YAxis />
-                <RechartsTooltip />
-                <Legend />
-                <Bar dataKey="totalPoorPopulation" fill={colors['blue-button']} name="Jumlah Penduduk Miskin" />
-              </BarChart>
-            ) : (
-              <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
-            )}
-          </Box>
+          <Title order={4} mb="sm">
+            Grafik Jumlah Penduduk Miskin
+          </Title>
+          {mounted && chartData.length > 0 ? (
+            <BarChart
+              h={300}
+              data={chartData.map((item) => ({
+                name: item.year.toString(),
+                value: item.totalPoorPopulation,
+              }))}
+              dataKey="name"
+              series={[
+                { name: 'value', color: colors['blue-button'] },
+              ]}
+              withTooltip
+              valueFormatter={(v) => `${v.toLocaleString()} jiwa`}
+            />
+          ) : (
+            <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+          )}
        </Stack>
      </Paper>

-
      {/* Modal Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus data ini?'
+        text="Apakah anda yakin ingin menghapus data ini?"
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/[id]/page.tsx
@@ -1,11 +1,11 @@
+/* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
-/* eslint-disable react-hooks/exhaustive-deps */
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';

 function EditGrafikBerdasarkanPendidikan() {
@@ -14,34 +14,59 @@ function EditGrafikBerdasarkanPendidikan() {
  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan);
  const id = params.id;

+  // state lokal untuk form
+  const [formData, setFormData] = useState({
+    SD: '',
+    SMP: '',
+    SMA: '',
+    D3: '',
+    S1: '',
+  });
+
  useEffect(() => {
    if (id) {
      stategrafik.findUnique.load(id).then(() => {
        const data = stategrafik.findUnique.data;
        if (data) {
-          stategrafik.update.form = {
+          setFormData({
            SD: data.SD || '',
            SMP: data.SMP || '',
            SMA: data.SMA || '',
            D3: data.D3 || '',
            S1: data.S1 || '',
-          };
+          });
        }
      });
    }
  }, [id]);

+  const handleChange = (field: keyof typeof formData) => 
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setFormData((prev) => ({
+        ...prev,
+        [field]: e.currentTarget.value,
+      }));
+    };
+
  const handleSubmit = async () => {
    stategrafik.update.id = id;
+    stategrafik.update.form = { ...formData }; // update global state pas submit aja
    await stategrafik.update.submit();
-    router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan');
+    router.push(
+      '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan'
+    );
  };

  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">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -63,36 +88,36 @@ function EditGrafikBerdasarkanPendidikan() {
            label="SD"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.SD}
-            onChange={(val) => (stategrafik.update.form.SD = val.currentTarget.value)}
+            value={formData.SD}
+            onChange={handleChange('SD')}
          />
          <TextInput
            label="SMP"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.SMP}
-            onChange={(val) => (stategrafik.update.form.SMP = val.currentTarget.value)}
+            value={formData.SMP}
+            onChange={handleChange('SMP')}
          />
          <TextInput
            label="SMA"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.SMA}
-            onChange={(val) => (stategrafik.update.form.SMA = val.currentTarget.value)}
+            value={formData.SMA}
+            onChange={handleChange('SMA')}
          />
          <TextInput
            label="D3"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.D3}
-            onChange={(val) => (stategrafik.update.form.D3 = val.currentTarget.value)}
+            value={formData.D3}
+            onChange={handleChange('D3')}
          />
          <TextInput
            label="S1"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.S1}
-            onChange={(val) => (stategrafik.update.form.S1 = val.currentTarget.value)}
+            value={formData.S1}
+            onChange={handleChange('S1')}
          />

          <Group justify="right">
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx
@@ -1,24 +1,42 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
+import { DonutChart } from '@mantine/charts';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';

 function GrafikBerdasarkanPendidikan() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
  return (
    <Box>
      <HeaderSearch
-        title='Detail Data Pengangguran Berdasarkan Pendidikan'
-        placeholder='Cari data pendidikan...'
+        title="Detail Data Pengangguran Berdasarkan Pendidikan"
+        placeholder="Cari data pendidikan..."
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -31,7 +49,6 @@ function GrafikBerdasarkanPendidikan() {
 function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan);
  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
  const [modalHapus, setModalHapus] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const router = useRouter();
@@ -45,37 +62,45 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
    }
  };

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

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

  useEffect(() => {
    if (stategrafik.findMany.data) {
-      const SD = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SD || 0), 0);
-      const SMP = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMP || 0), 0);
-      const SMA = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMA || 0), 0);
-      const D3 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.D3 || 0), 0);
-      const S1 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.S1 || 0), 0);
+      const SD = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.SD || 0),
+        0,
+      );
+      const SMP = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.SMP || 0),
+        0,
+      );
+      const SMA = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.SMA || 0),
+        0,
+      );
+      const D3 = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.D3 || 0),
+        0,
+      );
+      const S1 = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.S1 || 0),
+        0,
+      );
      setDonutData([
-        { name: 'SD', value: SD, color: '#4b6Ef5', key: 'SD' },
-        { name: 'SMP', value: SMP, color: '#14b885', key: 'SMP' },
-        { name: 'SMA', value: SMA, color: '#E6A03B', key: 'SMA' },
-        { name: 'D3', value: D3, color: '#DB524D', key: 'D3' },
-        { name: 'S1', value: S1, color: '#1018A8FF', key: 'S1' },
+        { name: 'SD', value: SD, color: '#4b6Ef5' },
+        { name: 'SMP', value: SMP, color: '#14b885' },
+        { name: 'SMA', value: SMA, color: '#E6A03B' },
+        { name: 'D3', value: D3, color: '#DB524D' },
+        { name: 'S1', value: S1, color: '#1018A8FF' },
      ]);
    }
  }, [stategrafik.findMany.data]);

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

  if (loading || !data) {
    return (
@@ -87,21 +112,26 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {

  return (
    <Box py={10}>
+      {/* Table Data */}
      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        {/* Header */}
        <Flex justify="space-between" align="center" mb="md">
-          <Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
+          <Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
          <Tooltip label="Tambah Data" withArrow>
            <Button
              leftSection={<IconPlus size={18} />}
              color="blue"
              variant="light"
-              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')}
+              onClick={() =>
+                router.push(
+                  '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create',
+                )
+              }
            >
              Tambah Baru
            </Button>
          </Tooltip>
        </Flex>
+
        <Box style={{ overflowX: 'auto' }}>
          <Table highlightOnHover>
            <TableThead>
@@ -120,7 +150,9 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                <TableTr>
                  <TableTd colSpan={7}>
                    <Center py={20}>
-                      <Text color="dimmed">Belum ada data grafik responden</Text>
+                      <Text color="dimmed">
+                        Belum ada data grafik responden
+                      </Text>
                    </Center>
                  </TableTd>
                </TableTr>
@@ -134,7 +166,15 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                    <TableTd>{item.S1}</TableTd>
                    <TableTd>
                      <Tooltip label="Edit Data" withArrow>
-                        <Button color="green" variant="light" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`)}>
+                        <Button
+                          color="green"
+                          variant="light"
+                          onClick={() =>
+                            router.push(
+                              `/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`,
+                            )
+                          }
+                        >
                          <IconEdit size={18} />
                        </Button>
                      </Tooltip>
@@ -148,7 +188,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                          onClick={() => {
                            setSelectedId(item.id);
                            setModalHapus(true);
-                          }}>
+                          }}
+                        >
                          <IconTrash size={18} />
                        </Button>
                      </Tooltip>
@@ -161,6 +202,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
        </Box>
      </Paper>

+      {/* Pagination */}
      <Center>
        <Pagination
          value={page}
@@ -176,51 +218,35 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
        />
      </Center>

-      {/* Chart */}
-      <Box mt="md">
-        <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-          <Stack>
-            <Title order={3} pb={10}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
-            {mounted && donutData.length > 0 ? (
-              <Box style={{ width: '100%', minHeight: 250 }}>
-                <PieChart width={800} height={300} data={donutData}>
-                  <Pie
-                    dataKey="value"
-                    nameKey="name"
-                    data={donutData}
-                    cx={400}
-                    cy={150}
-                    innerRadius={60}
-                    outerRadius={115}
-                    label
-                  >
-                    {donutData.map((entry, index) => (
-                      <Cell key={`cell-${index}`} fill={entry.color} />
-                    ))}
-                  </Pie>
-                </PieChart>
-                <Stack gap="xs" mt="sm">
-                  {donutData.map((entry) => (
-                    <Flex key={entry.key} gap="sm" align="center">
-                      <Box w={20} h={20} bg={entry.color} />
-                      <Text>{entry.name} : {entry.value}</Text>
-                    </Flex>
-                  ))}
-                </Stack>
-              </Box>
-            ) : (
-              <Text color="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
-            )}
-          </Stack>
-        </Paper>
-      </Box>
+      {/* Donut Chart */}
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mt="md">
+        <Stack>
+          <Title order={3} pb={10}>
+            Grafik Pengangguran Berdasarkan Pendidikan
+          </Title>
+          {donutData.length > 0 ? (
+            <DonutChart
+              data={donutData}
+              withLabels
+              withTooltip
+              tooltipDataSource="segment"
+              size={260}
+              thickness={40}
+            />
+          ) : (
+            <Text color="dimmed">
+              Belum ada data untuk ditampilkan dalam grafik
+            </Text>
+          )}
+        </Stack>
+      </Paper>

-      {/* Modal Konfirmasi Hapus */}
+      {/* Modal Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?'
+        text="Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?"
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/[id]/page.tsx
@@ -2,39 +2,70 @@
 'use client';
 import grafikNganggur from '@/app/admin/(dashboard)/_state/ekonomi/usia-kerja-nganggur';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, TextInput, Title, Group, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Group,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';

 function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
  const router = useRouter();
  const params = useParams() as { id: string };
-  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur);
+  const stategrafik = useProxy(
+    grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur
+  );
  const id = params.id;

+  // ✅ state lokal, controlled
+  const [formData, setFormData] = useState({
+    usia18_25: '',
+    usia26_35: '',
+    usia36_45: '',
+    usia46_keatas: '',
+  });
+
+  // load data dari global state -> masukin ke local state
  useEffect(() => {
    if (id) {
      stategrafik.findUnique.load(id).then(() => {
        const data = stategrafik.findUnique.data;
        if (data) {
-          stategrafik.update.form = {
+          setFormData({
            usia18_25: data.usia18_25 || '',
            usia26_35: data.usia26_35 || '',
            usia36_45: data.usia36_45 || '',
            usia46_keatas: data.usia46_keatas || '',
-          };
+          });
        }
      });
    }
  }, [id]);

+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
+      // ✅ baru update global state pas submit
      stategrafik.update.id = id;
+      stategrafik.update.form = { ...formData };
+
      await stategrafik.update.submit();
+
      toast.success('Data grafik berhasil diperbarui!');
      router.push(
        '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia'
@@ -49,7 +80,12 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
    <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">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -71,40 +107,32 @@ function EditGrafikBerdasarkanUsiaKerjaYangMenganggur() {
            label="Usia 18 - 25"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.usia18_25}
-            onChange={(val) => {
-              stategrafik.update.form.usia18_25 = val.currentTarget.value;
-            }}
+            value={formData.usia18_25}
+            onChange={(e) => handleChange('usia18_25', e.currentTarget.value)}
            required
          />
          <TextInput
            label="Usia 26 - 35"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.usia26_35}
-            onChange={(val) => {
-              stategrafik.update.form.usia26_35 = val.currentTarget.value;
-            }}
+            value={formData.usia26_35}
+            onChange={(e) => handleChange('usia26_35', e.currentTarget.value)}
            required
          />
          <TextInput
            label="Usia 36 - 45"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.usia36_45}
-            onChange={(val) => {
-              stategrafik.update.form.usia36_45 = val.currentTarget.value;
-            }}
+            value={formData.usia36_45}
+            onChange={(e) => handleChange('usia36_45', e.currentTarget.value)}
            required
          />
          <TextInput
            label="Usia 46 +"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stategrafik.update.form.usia46_keatas}
-            onChange={(val) => {
-              stategrafik.update.form.usia46_keatas = val.currentTarget.value;
-            }}
+            value={formData.usia46_keatas}
+            onChange={(e) => handleChange('usia46_keatas', e.currentTarget.value)}
            required
          />

--- a/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx
@@ -1,13 +1,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
+import { DonutChart } from '@mantine/charts';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
@@ -17,8 +34,8 @@ function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
  return (
    <Box>
      <HeaderSearch
-        title='Detail Data Pengangguran'
-        placeholder='Cari usia...'
+        title="Detail Data Pengangguran"
+        placeholder="Cari usia..."
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
@@ -31,7 +48,6 @@ function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
 function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: string }) {
  const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur);
  const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
  const [modalHapus, setModalHapus] = useState(false);
  const [selectedId, setSelectedId] = useState<string | null>(null);
  const router = useRouter();
@@ -45,17 +61,10 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
    }
  };

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

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

  useEffect(() => {
@@ -64,16 +73,17 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
      const totalUsia26_35 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia26_35 || 0), 0);
      const totalUsia36_45 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia36_45 || 0), 0);
      const totalUsia46_keatas = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia46_keatas || 0), 0);
+
      setDonutData([
-        { name: 'usia18_25', value: totalUsia18_25, color: colors['blue-button'], key: 'usia18_25' },
-        { name: 'usia26_35', value: totalUsia26_35, color: '#10A85AFF', key: 'usia26_35' },
-        { name: 'usia36_45', value: totalUsia36_45, color: '#C07B13FF', key: 'usia36_45' },
-        { name: 'usia46_keatas', value: totalUsia46_keatas, color: '#1094A8FF', key: 'usia46_keatas' },
+        { name: 'Usia 18-25', value: totalUsia18_25, color: colors['blue-button'] },
+        { name: 'Usia 26-35', value: totalUsia26_35, color: '#10A85AFF' },
+        { name: 'Usia 36-45', value: totalUsia36_45, color: '#C07B13FF' },
+        { name: 'Usia 46+', value: totalUsia46_keatas, color: '#1094A8FF' },
      ]);
    }
  }, [stategrafik.findMany.data]);

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

  if (loading || !data) {
    return (
@@ -85,24 +95,23 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri

  return (
    <Box py={10}>
+      {/* Table */}
      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
        <Stack>
-          {/* Header */}
          <Flex justify="space-between" align="center" mb="md">
            <Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
-            <Tooltip label="Tambah Data" withArrow>
-              <Button
-                leftSection={<IconPlus size={18} />}
-                color="blue"
-                variant="light"
-                onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')}
-              >
-                Tambah Baru
-              </Button>
-            </Tooltip>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')
+              }
+            >
+              Tambah Baru
+            </Button>
          </Flex>

-          {/* Table */}
          <Box style={{ overflowX: 'auto' }}>
            <Table highlightOnHover>
              <TableThead>
@@ -110,26 +119,38 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
                  <TableTh>Usia 18-25</TableTh>
                  <TableTh>Usia 26-35</TableTh>
                  <TableTh>Usia 36-45</TableTh>
-                  <TableTh>Usia 46 +</TableTh>
+                  <TableTh>Usia 46+</TableTh>
                  <TableTh>Edit</TableTh>
                  <TableTh>Delete</TableTh>
                </TableTr>
              </TableThead>
              <TableTbody>
                {filteredData.length > 0 ? (
-                  filteredData.map(item => (
+                  filteredData.map((item) => (
                    <TableTr key={item.id}>
                      <TableTd>{item.usia18_25}</TableTd>
                      <TableTd>{item.usia26_35}</TableTd>
                      <TableTd>{item.usia36_45}</TableTd>
                      <TableTd>{item.usia46_keatas}</TableTd>
                      <TableTd>
-                        <Button color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)}>
+                        <Button
+                          color="green"
+                          onClick={() =>
+                            router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)
+                          }
+                        >
                          <IconEdit size={20} />
                        </Button>
                      </TableTd>
                      <TableTd>
-                        <Button color="red" disabled={stategrafik.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true); }}>
+                        <Button
+                          color="red"
+                          disabled={stategrafik.delete.loading}
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
                          <IconTrash size={20} />
                        </Button>
                      </TableTd>
@@ -147,10 +168,10 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
              </TableTbody>
            </Table>
          </Box>
-
        </Stack>
      </Paper>

+      {/* Pagination */}
      <Center>
        <Pagination
          value={page}
@@ -166,48 +187,29 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
        />
      </Center>

-      {/* Chart */}
+      {/* Donut Chart */}
      <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
        <Stack>
-          <Title order={3} pb={10}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
-          {mounted && donutData.length > 0 ? (
-            <Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
-              <PieChart width={800} height={300} data={donutData}>
-                <Pie dataKey="value" nameKey="name" data={donutData} cx={400} cy={150} innerRadius={60} outerRadius={115} label>
-                  {donutData.map((entry, index) => (
-                    <Cell key={`cell-${index}`} fill={entry.color} />
-                  ))}
-                </Pie>
-              </PieChart>
-              <Stack mt="sm" gap="xs">
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={colors['blue-button']} w={20} h={20} />
-                  <Text>Usia 18-25 : {donutData.find((entry) => entry.name === 'usia18_25')?.value}</Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#10A85AFF'} w={20} h={20} />
-                  <Text>Usia 26-35 : {donutData.find((entry) => entry.name === 'usia26_35')?.value}
-                  </Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#C07B13FF'} w={20} h={20} />
-                  <Text>Usia 36-45 : {donutData.find((entry) => entry.name === 'usia36_45')?.value}
-                  </Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#1094A8FF'} w={20} h={20} />
-                  <Text>Usia 46 + : {donutData.find((entry) => entry.name === 'usia46_keatas')?.value}
-                  </Text>
-                </Flex>
-              </Stack>
-            </Box>
+          <Title order={3} pb={10}>
+            Grafik Pengangguran Berdasarkan Usia Kerja
+          </Title>
+          {donutData.length > 0 ? (
+            <Center>
+              <DonutChart
+                data={donutData}
+                withLabels
+                withTooltip
+                size={200}
+                thickness={40}
+                tooltipDataSource="segment"
+              />
+            </Center>
          ) : (
            <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
          )}
        </Stack>
      </Paper>

-
      {/* Modal Konfirmasi Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
--- a/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx
@@ -1,19 +1,38 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Select, NumberInput } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Select,
+  NumberInput,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

+// --- Helper konstanta
+const MONTHS = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+  'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des',
+];
+
 function EditDetailDataPengangguran() {
  const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran);
  const router = useRouter();
  const params = useParams();

+  // --- state lokal form
  const [formData, setFormData] = useState({
    month: '',
    year: new Date().getFullYear(),
@@ -23,97 +42,100 @@ function EditDetailDataPengangguran() {
    percentageChange: 0,
  });

-  // Hitung total & perubahan otomatis
-  const calculateTotalAndChange = async () => {
-    const total = formData.educatedUnemployment + formData.uneducatedUnemployment;
+  // --- hitung total + persentase perubahan
+  const calculateTotalAndChange = useCallback(
+    async (data: typeof formData) => {
+      const total = data.educatedUnemployment + data.uneducatedUnemployment;
+      let percentageChange = 0;

-    let percentageChange = 0;
-    const monthOrder = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
-    const currentMonthIndex = monthOrder.indexOf(formData.month);
+      const currentMonthIndex = MONTHS.indexOf(data.month);
+      if (currentMonthIndex !== -1) {
+        let prevMonthIndex = currentMonthIndex - 1;
+        let prevYear = data.year;

-    if (currentMonthIndex !== -1) {
-      let prevMonthIndex = currentMonthIndex - 1;
-      let prevYear = formData.year;
+        if (prevMonthIndex < 0) {
+          prevMonthIndex = 11;
+          prevYear--;
+        }

-      if (prevMonthIndex < 0) {
-        prevMonthIndex = 11;
-        prevYear--;
+        const prevData = await stateDetail.findByMonthYear.load({
+          month: MONTHS[prevMonthIndex],
+          year: prevYear,
+        });
+
+        if (prevData && prevData.totalUnemployment > 0) {
+          const change =
+            ((total - prevData.totalUnemployment) /
+              prevData.totalUnemployment) * 100;
+          percentageChange = parseFloat(change.toFixed(1));
+        }
      }

-      const prevMonth = monthOrder[prevMonthIndex];
-      const prevData = await stateDetail.findByMonthYear.load({ month: prevMonth, year: prevYear });
-
-      if (prevData && prevData.totalUnemployment > 0) {
-        const change = ((total - prevData.totalUnemployment) / prevData.totalUnemployment) * 100;
-        percentageChange = parseFloat(change.toFixed(1));
-      }
-    }
-
-    return { total, percentageChange };
-  };
+      return { total, percentageChange };
+    },
+    [stateDetail.findByMonthYear]
+  );

+  // --- update state lokal
  const updateFormData = async (updates: Partial<typeof formData>) => {
    const newData = { ...formData, ...updates };
-    const { total, percentageChange } = await calculateTotalAndChange();
+    const { total, percentageChange } = await calculateTotalAndChange(newData);
    setFormData({ ...newData, totalUnemployment: total, percentageChange });
  };

+  // --- load detail by ID (sekali)
  useEffect(() => {
    const loadDetail = async () => {
      const id = params?.id as string;
      if (!id) return;

      try {
-        await stateDetail.findUnique.load(id); // ambil by ID
+        await stateDetail.findUnique.load(id);
        const data = stateDetail.findUnique.data;
+        if (!data) return;

-        if (data) {
-
-          // Convert year from Date to number if needed
-          const yearValue = data.year && typeof data.year === 'object' && 'getFullYear' in data.year
+        const yearValue = 
+          data.year && typeof data.year === 'object' && 'getFullYear' in data.year
            ? (data.year as Date).getFullYear()
            : Number(data.year);

-          // Set the ID for update
-          stateDetail.update.id = id;
+        stateDetail.update.id = id; // simpan id untuk update

-          // Update Valtio state with converted year
-          stateDetail.update.form = {
-            ...data,
-            year: yearValue,
-            percentageChange: data.percentageChange || 0 // Ensure it's always a number
-          };
-
-          // Update local formData with converted year
-          setFormData({
-            month: data.month,
-            year: yearValue,
-            totalUnemployment: data.totalUnemployment,
-            educatedUnemployment: data.educatedUnemployment,
-            uneducatedUnemployment: data.uneducatedUnemployment,
-            percentageChange: data.percentageChange || 0, // Ensure it's always a number
-          });
-        }
-      } catch (error) {
-        console.error("Error loading detail:", error);
-        toast.error("Gagal memuat data detail");
+        setFormData({
+          month: data.month,
+          year: yearValue,
+          educatedUnemployment: data.educatedUnemployment,
+          uneducatedUnemployment: data.uneducatedUnemployment,
+          totalUnemployment: data.totalUnemployment,
+          percentageChange: data.percentageChange || 0,
+        });
+      } catch (err) {
+        console.error('Error loading detail:', err);
+        toast.error('Gagal memuat data detail');
      }
    };

    loadDetail();
  }, [params?.id]);

+  // --- submit form
  const handleSubmit = async () => {
-    const { total, percentageChange } = await calculateTotalAndChange();
    try {
-      stateDetail.update.form = { ...formData, totalUnemployment: total, percentageChange };
+      const { total, percentageChange } = await calculateTotalAndChange(formData);
+
+      stateDetail.update.form = {
+        ...formData,
+        totalUnemployment: total,
+        percentageChange,
+      };
+
      const success = await stateDetail.update.submit();
      if (success) {
        toast.success('Detail data pengangguran berhasil diperbarui!');
        router.push('/admin/ekonomi/jumlah-pengangguran');
      }
-    } catch (error) {
-      console.error('Error updating:', error);
+    } catch (err) {
+      console.error('Error updating:', err);
      toast.error('Terjadi kesalahan saat memperbarui data');
    }
  };
@@ -129,36 +151,58 @@ function EditDetailDataPengangguran() {
        </Title>
      </Group>

-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
        <Stack gap="md">
          <Select
            label="Bulan"
-            data={['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']}
+            data={MONTHS}
            value={formData.month}
            onChange={(val) => updateFormData({ month: val || '' })}
          />
          <NumberInput
            label="Tahun"
-            defaultValue={formData.year}
+            value={formData.year}
            onChange={(val) => updateFormData({ year: Number(val) })}
            required
          />
          <TextInput
            label="Pengangguran Terdidik"
            type="number"
-            defaultValue={formData.educatedUnemployment}
-            onChange={(val) => updateFormData({ educatedUnemployment: Number(val.currentTarget.value) || 0 })}
+            value={formData.educatedUnemployment}
+            onChange={(e) =>
+              updateFormData({
+                educatedUnemployment: Number(e.currentTarget.value) || 0,
+              })
+            }
            required
          />
          <TextInput
            label="Pengangguran Tidak Terdidik"
            type="number"
-            defaultValue={formData.uneducatedUnemployment}
-            onChange={(val) => updateFormData({ uneducatedUnemployment: Number(val.currentTarget.value) || 0 })}
+            value={formData.uneducatedUnemployment}
+            onChange={(e) =>
+              updateFormData({
+                uneducatedUnemployment: Number(e.currentTarget.value) || 0,
+              })
+            }
            required
          />
-          <Text fz="sm" fw={500}>Total Otomatis: {formData.totalUnemployment}</Text>
-          <Text fz="sm" fw={500}>Perubahan Otomatis: {formData.percentageChange !== null ? `${formData.percentageChange}%` : '-'}</Text>
+          <Text fz="sm" fw={500}>
+            Total Otomatis: {formData.totalUnemployment}
+          </Text>
+          <Text fz="sm" fw={500}>
+            Perubahan Otomatis:{' '}
+            {formData.percentageChange !== null
+              ? `${formData.percentageChange}%`
+              : '-'}
+          </Text>

          <Group justify="right">
            <Button
@@ -181,4 +225,3 @@ function EditDetailDataPengangguran() {
 }

 export default EditDetailDataPengangguran;
-
--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx
@@ -26,15 +26,17 @@ function EditLowonganKerja() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    posisi: lowonganKerjaState.update.form.posisi,
-    namaPerusahaan: lowonganKerjaState.update.form.namaPerusahaan,
-    lokasi: lowonganKerjaState.update.form.lokasi,
-    tipePekerjaan: lowonganKerjaState.update.form.tipePekerjaan,
-    gaji: lowonganKerjaState.update.form.gaji,
-    deskripsi: lowonganKerjaState.update.form.deskripsi,
-    kualifikasi: lowonganKerjaState.update.form.kualifikasi,
+    posisi: '',
+    namaPerusahaan: '',
+    lokasi: '',
+    tipePekerjaan: '',
+    gaji: '',
+    deskripsi: '',
+    kualifikasi: '',
+    notelp: '',
  });

+  // load data sekali aja ketika mount / id berubah
  useEffect(() => {
    const loadLowongan = async () => {
      const id = params?.id as string;
@@ -51,6 +53,7 @@ function EditLowonganKerja() {
            gaji: data.gaji || '',
            deskripsi: data.deskripsi || '',
            kualifikasi: data.kualifikasi || '',
+            notelp: data.notelp || '',
          });
        }
      } catch (error) {
@@ -62,14 +65,17 @@ function EditLowonganKerja() {
    loadLowongan();
  }, [params?.id]);

+  const handleChange = (field: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
      lowonganState.update.id = params?.id as string;
-
-      lowonganState.update.form = {
-        ...lowonganState.update.form,
-        ...formData,
-      };
+      lowonganState.update.form = { ...formData };

      await lowonganState.update.update();
      toast.success("Lowongan kerja berhasil diperbarui!");
@@ -107,40 +113,48 @@ function EditLowonganKerja() {
          <TextInput
            label="Posisi"
            placeholder="Masukkan posisi"
-            defaultValue={formData.posisi}
-            onChange={(e) => setFormData({ ...formData, posisi: e.target.value })}
+            value={formData.posisi}
+            onChange={(e) => handleChange("posisi", e.target.value)}
            required
          />

          <TextInput
            label="Nama Perusahaan"
            placeholder="Masukkan nama perusahaan"
-            defaultValue={formData.namaPerusahaan}
-            onChange={(e) => setFormData({ ...formData, namaPerusahaan: e.target.value })}
+            value={formData.namaPerusahaan}
+            onChange={(e) => handleChange("namaPerusahaan", e.target.value)}
            required
          />

          <TextInput
            label="Lokasi"
            placeholder="Masukkan lokasi"
-            defaultValue={formData.lokasi}
-            onChange={(e) => setFormData({ ...formData, lokasi: e.target.value })}
+            value={formData.lokasi}
+            onChange={(e) => handleChange("lokasi", e.target.value)}
+            required
+          />
+
+          <TextInput
+            label="Nomor Yang Dapat Dihubungi"
+            placeholder="Masukkan nomor yang dapat dihubungi"
+            value={formData.notelp}
+            onChange={(e) => handleChange("notelp", e.target.value)}
            required
          />

          <TextInput
            label="Tipe Pekerjaan"
            placeholder="Masukkan tipe pekerjaan"
-            defaultValue={formData.tipePekerjaan}
-            onChange={(e) => setFormData({ ...formData, tipePekerjaan: e.target.value })}
+            value={formData.tipePekerjaan}
+            onChange={(e) => handleChange("tipePekerjaan", e.target.value)}
            required
          />

          <TextInput
            label="Gaji (per bulan)"
            placeholder="Masukkan gaji"
-            defaultValue={formData.gaji}
-            onChange={(e) => setFormData({ ...formData, gaji: e.target.value })}
+            value={formData.gaji}
+            onChange={(e) => handleChange("gaji", e.target.value)}
            required
          />

@@ -150,7 +164,7 @@ function EditLowonganKerja() {
            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              onChange={(val) => handleChange("deskripsi", val)}
            />
          </Box>

@@ -160,7 +174,7 @@ function EditLowonganKerja() {
            </Text>
            <EditEditor
              value={formData.kualifikasi}
-              onChange={(val) => setFormData({ ...formData, kualifikasi: val })}
+              onChange={(val) => handleChange("kualifikasi", val)}
            />
          </Box>

--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/page.tsx
@@ -82,6 +82,11 @@ function DetailLowonganKerjaLokal() {
                <Text fz="md" c="dimmed">{data.lokasi || '-'}</Text>
              </Box>

+              <Box>
+                <Text fz="lg" fw="bold">Nomor Yang Dapat Dihubungi</Text>
+                <Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
+              </Box>
+
              <Box>
                <Text fz="lg" fw="bold">Tipe Pekerjaan</Text>
                <Text fz="md" c="dimmed">{data.tipePekerjaan || '-'}</Text>
--- a/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx
@@ -30,6 +30,7 @@ function CreateLowonganKerja() {
      gaji: '',
      deskripsi: '',
      kualifikasi: '',
+      notelp: '',
    };
  };

@@ -86,6 +87,15 @@ function CreateLowonganKerja() {
            placeholder="Masukkan nama perusahaan"
            required
          />
+          <TextInput
+            defaultValue={lowonganState.create.form.notelp}
+            onChange={(val) =>
+              (lowonganState.create.form.notelp = val.target.value)
+            }
+            label="Nomor Yang Dapat Dihubungi"
+            placeholder="Masukkan nomor yang dapat dihubungi"
+            required
+          />
          <TextInput
            defaultValue={lowonganState.create.form.lokasi}
            onChange={(val) =>
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/kategori-produk/[id]/page.tsx
@@ -25,9 +25,8 @@ function EditKategoriProduk() {
  const id = params?.id as string;
  const statePasar = useProxy(pasarDesaState.kategoriProduk);

-  const [formData, setFormData] = useState({
-    nama: '',
-  });
+  const [formData, setFormData] = useState({ nama: '' });
+  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadKategoriProduk = async () => {
@@ -37,21 +36,30 @@ function EditKategoriProduk() {
        const data = await statePasar.edit.load(id);

        if (data) {
-          // pastikan id-nya masuk ke state edit
+          // simpan id ke state global hanya untuk referensi
          statePasar.edit.id = id;
-          setFormData({
-            nama: data.nama || '',
-          });
+
+          // simpan data ke state lokal
+          setFormData({ nama: data.nama || '' });
        }
      } catch (error) {
        console.error('Error loading kategori produk:', error);
        toast.error('Gagal memuat data kategori produk');
+      } finally {
+        setLoading(false);
      }
    };

    loadKategoriProduk();
  }, [id]);

+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
      if (!formData.nama.trim()) {
@@ -59,10 +67,8 @@ function EditKategoriProduk() {
        return;
      }

-      statePasar.edit.form = {
-        nama: formData.nama.trim(),
-      };
-
+      // update global state hanya saat submit
+      statePasar.edit.form = { nama: formData.nama.trim() };
      if (!statePasar.edit.id) {
        statePasar.edit.id = id; // fallback
      }
@@ -79,12 +85,21 @@ function EditKategoriProduk() {
    }
  };

+  if (loading) {
+    return <Text>Loading...</Text>;
+  }
+
  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
      {/* Header dengan tombol back */}
      <Group mb="md">
        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -104,10 +119,11 @@ function EditKategoriProduk() {
      >
        <Stack gap="md">
          <TextInput
+            name="nama"
            label={<Text fw="bold" fz="sm">Nama Kategori Produk</Text>}
            placeholder="Masukkan nama kategori produk"
-            defaultValue={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            value={formData.nama}
+            onChange={handleChange}
            required
          />

--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx
@@ -1,5 +1,5 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
 import colors from '@/con/colors';
@@ -24,6 +24,16 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

+type FormData = {
+  nama: string;
+  harga: number;
+  alamatUsaha: string;
+  imageId: string;
+  rating: number;
+  kategoriId: string[];
+  kontak: string;
+};
+
 function EditPasarDesa() {
  const pasarState = useProxy(pasarDesaState);
  const router = useRouter();
@@ -31,17 +41,20 @@ function EditPasarDesa() {

  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
-  const [formData, setFormData] = useState({
-    nama: pasarState.pasarDesa.edit.form.nama || '',
-    harga: pasarState.pasarDesa.edit.form.harga || 0,
-    alamatUsaha: pasarState.pasarDesa.edit.form.alamatUsaha || '',
-    imageId: pasarState.pasarDesa.edit.form.imageId || '',
-    rating: pasarState.pasarDesa.edit.form.rating || 0,
-    kategoriId: pasarState.pasarDesa.edit.form.kategoriId || [],
+  const [formData, setFormData] = useState<FormData>({
+    nama: '',
+    harga: 0,
+    alamatUsaha: '',
+    imageId: '',
+    rating: 0,
+    kategoriId: [],
+    kontak: '',
  });

+  // load data awal
  useEffect(() => {
-    pasarState.kategoriProduk.findMany.load();
+    pasarState.kategoriProduk.findManyAll.load();
+
    const loadPasarDesa = async () => {
      const id = params?.id as string;
      if (!id) return;
@@ -56,6 +69,7 @@ function EditPasarDesa() {
            imageId: data.imageId || '',
            rating: data.rating || 0,
            kategoriId: data.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
+            kontak: data.kontak || '',
          });
          if (data.image?.link) setPreviewImage(data.image.link);
        }
@@ -70,19 +84,27 @@ function EditPasarDesa() {
    loadPasarDesa();
  }, [params?.id]);

+  const handleChange = (key: keyof FormData, value: any) => {
+    setFormData((prev) => ({ ...prev, [key]: value }));
+  };
+
  const handleSubmit = async () => {
    try {
-      pasarState.pasarDesa.edit.form = { ...pasarState.pasarDesa.edit.form, ...formData };
-
+      // upload image kalau ada file baru
+      let imageId = formData.imageId;
      if (file) {
        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
        const uploaded = res.data?.data;
-
        if (!uploaded?.id) return toast.error('Gagal upload gambar');
-
-        pasarState.pasarDesa.edit.form.imageId = uploaded.id;
+        imageId = uploaded.id;
      }

+      // update global state hanya saat submit
+      pasarState.pasarDesa.edit.form = {
+        ...formData,
+        imageId,
+      };
+
      await pasarState.pasarDesa.edit.update();
      toast.success('Pasar desa berhasil diperbarui!');
      router.push('/admin/ekonomi/pasar-desa/produk-pasar-desa');
@@ -114,6 +136,7 @@ function EditPasarDesa() {
        style={{ border: '1px solid #e0e0e0' }}
      >
        <Stack gap="md">
+          {/* Dropzone upload */}
          <Box>
            <Text fw="bold" fz="sm" mb={6}>
              Gambar Produk
@@ -170,11 +193,12 @@ function EditPasarDesa() {
            )}
          </Box>

+          {/* Controlled Inputs */}
          <TextInput
            label="Nama Produk"
            placeholder="Masukkan nama produk"
-            defaultValue={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
            required
          />

@@ -182,8 +206,8 @@ function EditPasarDesa() {
            type="number"
            label="Harga Produk"
            placeholder="Masukkan harga produk"
-            defaultValue={formData.harga}
-            onChange={(e) => setFormData({ ...formData, harga: Number(e.target.value) })}
+            value={formData.harga}
+            onChange={(e) => handleChange('harga', Number(e.target.value))}
            required
          />

@@ -194,16 +218,24 @@ function EditPasarDesa() {
            step={0.1}
            label="Rating Produk"
            placeholder="Masukkan rating produk (0-5)"
-            defaultValue={formData.rating}
-            onChange={(e) => setFormData({ ...formData, rating: Number(e.target.value) })}
+            value={formData.rating}
+            onChange={(e) => handleChange('rating', Number(e.target.value))}
            required
          />

          <TextInput
            label="Alamat Usaha"
            placeholder="Masukkan alamat usaha"
-            defaultValue={formData.alamatUsaha}
-            onChange={(e) => setFormData({ ...formData, alamatUsaha: e.target.value })}
+            value={formData.alamatUsaha}
+            onChange={(e) => handleChange('alamatUsaha', e.target.value)}
+            required
+          />
+
+          <TextInput
+            label="Kontak"
+            placeholder="Masukkan kontak"
+            value={formData.kontak}
+            onChange={(e) => handleChange('kontak', e.target.value)}
            required
          />

@@ -211,9 +243,9 @@ function EditPasarDesa() {
            label="Kategori Produk"
            placeholder="Pilih kategori produk"
            value={formData.kategoriId}
-            onChange={(val) => setFormData({ ...formData, kategoriId: val })}
+            onChange={(val) => handleChange('kategoriId', val)}
            data={
-              pasarState.kategoriProduk.findMany.data?.map((v) => ({
+              pasarState.kategoriProduk.findManyAll.data?.map((v) => ({
                value: v.id,
                label: v.nama,
              })) || []
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/page.tsx
@@ -85,6 +85,11 @@ function DetailPasarDesa() {
                <Text fz="md" c="dimmed">{data.alamatUsaha || '-'}</Text>
              </Box>

+              <Box>
+                <Text fz="lg" fw="bold">Kontak</Text>
+                <Text fz="md" c="dimmed">{data.kontak || '-'}</Text>
+              </Box>
+
              <Box>
                <Text fz="lg" fw="bold">Gambar</Text>
                {data.image?.link ? (
--- a/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx
@@ -30,7 +30,7 @@ export default function CreatePasarDesa() {
  const [file, setFile] = useState<File | null>(null);

  useEffect(() => {
-    statePasar.kategoriProduk.findMany.load();
+    statePasar.kategoriProduk.findManyAll.load();
  }, []);

  const resetForm = () => {
@@ -41,6 +41,7 @@ export default function CreatePasarDesa() {
      imageId: '',
      rating: 0,
      kategoriId: [],
+      kontak: '',
    };
    setPreviewImage(null);
    setFile(null);
@@ -184,6 +185,15 @@ export default function CreatePasarDesa() {
            onChange={(e) => (statePasar.pasarDesa.create.form.alamatUsaha = e.target.value)}
          />

+          {/* Kontak */}
+          <TextInput
+            label="Kontak"
+            type="number"
+            placeholder="Masukkan kontak"
+            defaultValue={statePasar.pasarDesa.create.form.kontak}
+            onChange={(e) => (statePasar.pasarDesa.create.form.kontak = e.target.value)}
+          />
+
          {/* Kategori Produk */}
          <MultiSelect
            label="Kategori Produk"
@@ -191,7 +201,7 @@ export default function CreatePasarDesa() {
            value={statePasar.pasarDesa.create.form.kategoriId}
            onChange={(val) => (statePasar.pasarDesa.create.form.kategoriId = val)}
            data={
-              statePasar.kategoriProduk.findMany.data?.map((v) => ({
+              statePasar.kategoriProduk.findManyAll.data?.map((v) => ({
                value: v.id,
                label: v.nama,
              })) || []
--- a/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 'use client'

 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
@@ -19,53 +18,105 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';

+type Statistik = {
+  tahun: string;
+  jumlah: string;
+};
+
+type FormData = {
+  nama: string;
+  deskripsi: string;
+  icon: string;
+  statistik: Statistik;
+};
+
+const initialForm: FormData = {
+  nama: '',
+  deskripsi: '',
+  icon: '',
+  statistik: {
+    tahun: '',
+    jumlah: '',
+  },
+};
+
 function EditProgramKemiskinan() {
  const router = useRouter();
-  const params = useParams() as { id: string };
+  const { id } = useParams() as { id: string };
  const stateProgram = useProxy(programKemiskinanState);
-  const id = params.id;

+  const [formData, setFormData] = useState<FormData>(initialForm);
+
+  // Load data 1x dari global state → isi local state
  useEffect(() => {
-    if (id) {
-      stateProgram.findUnique.load(id).then(() => {
+    if (!id) return;
+
+    const loadData = async () => {
+      try {
+        await stateProgram.findUnique.load(id);
        const data = stateProgram.findUnique.data;
        if (data) {
-          stateProgram.update.form = {
-            nama: data.nama || '',
-            deskripsi: data.deskripsi || '',
-            icon: data.icon || '',
+          setFormData({
+            nama: data.nama ?? '',
+            deskripsi: data.deskripsi ?? '',
+            icon: data.icon ?? '',
            statistik: {
-              tahun: data.statistik?.tahun?.toString() || '',
-              jumlah: data.statistik?.jumlah?.toString() || '',
+              tahun: data.statistik?.tahun?.toString() ?? '',
+              jumlah: data.statistik?.jumlah?.toString() ?? '',
            },
-          };
+          });
        }
-      }).catch((err) => {
-        console.error("Error load data:", err);
-        toast.error("Gagal mengambil data program");
-      });
-    }
-  }, [id]);
+      } catch (err) {
+        console.error('Error load data:', err);
+        toast.error('Gagal mengambil data program');
+      }
+    };
+
+    loadData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]); // ✅ hanya trigger saat id berubah
+
+
+  // generic handler untuk field top-level
+  const handleChange = useCallback(
+    (field: keyof FormData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
+  // khusus nested statistik
+  const handleStatistikChange = useCallback(
+    (field: keyof Statistik, value: string) => {
+      setFormData((prev) => ({
+        ...prev,
+        statistik: { ...prev.statistik, [field]: value },
+      }));
+    },
+    []
+  );

  const handleSubmit = async () => {
    try {
      stateProgram.update.id = id;
+      stateProgram.update.form = formData;
      await stateProgram.update.update();
-      toast.success("Program berhasil diperbarui!");
+
+      toast.success('Program berhasil diperbarui!');
      router.push('/admin/ekonomi/program-kemiskinan');
    } catch (error) {
-      console.error("Error update program:", error);
-      toast.error("Terjadi kesalahan saat memperbarui program");
+      console.error('Error update program:', error);
+      toast.error('Terjadi kesalahan saat memperbarui program');
    }
  };

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan tombol kembali */}
+      {/* Header */}
      <Group mb="md">
        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
          <Button
@@ -92,10 +143,8 @@ function EditProgramKemiskinan() {
      >
        <Stack gap="md">
          <TextInput
-            defaultValue={stateProgram.update.form.nama}
-            onChange={(e) => {
-              stateProgram.update.form.nama = e.target.value;
-            }}
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
            label={<Text fw="bold" fz="sm">Judul Program</Text>}
            placeholder="Masukkan judul program"
            required
@@ -106,10 +155,8 @@ function EditProgramKemiskinan() {
              Deskripsi
            </Text>
            <EditEditor
-              value={stateProgram.update.form.deskripsi}
-              onChange={(val) => {
-                stateProgram.update.form.deskripsi = val;
-              }}
+              value={formData.deskripsi}
+              onChange={(val) => handleChange('deskripsi', val)}
            />
          </Box>

@@ -118,10 +165,8 @@ function EditProgramKemiskinan() {
              Ikon Program Kreatif Desa
            </Text>
            <SelectIconProgramEdit
-              value={stateProgram.update.form.icon as IconKey}
-              onChange={(value) => {
-                stateProgram.update.form.icon = value;
-              }}
+              value={formData.icon as IconKey}
+              onChange={(val) => handleChange('icon', val)}
            />
          </Box>

@@ -131,10 +176,8 @@ function EditProgramKemiskinan() {
            </Text>
            <TextInput
              type="number"
-              defaultValue={stateProgram.update.form.statistik.jumlah}
-              onChange={(e) => {
-                stateProgram.update.form.statistik.jumlah = e.target.value;
-              }}
+              value={formData.statistik.jumlah}
+              onChange={(e) => handleStatistikChange('jumlah', e.target.value)}
              label="Jumlah Masyarakat Miskin"
              placeholder="Masukkan jumlah masyarakat miskin"
              required
@@ -142,10 +185,8 @@ function EditProgramKemiskinan() {

            <TextInput
              type="number"
-              defaultValue={stateProgram.update.form.statistik.tahun}
-              onChange={(e) => {
-                stateProgram.update.form.statistik.tahun = e.target.value;
-              }}
+              value={formData.statistik.tahun}
+              onChange={(e) => handleStatistikChange('tahun', e.target.value)}
              label="Tahun"
              placeholder="Masukkan tahun"
              required
--- a/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/[id]/edit/page.tsx
@@ -16,7 +16,7 @@ import {
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
@@ -28,28 +28,46 @@ function EditSektorUnggulanDesa() {

  const id = params.id;

+  // state lokal buat form
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    value: 0,
+  });
+
  // Load data saat komponen mount
  useEffect(() => {
    if (id) {
-      stateGrafik.findUnique.load(id).then(() => {
-        const data = stateGrafik.findUnique.data;
-        if (data) {
-          stateGrafik.update.form = {
-            name: data.name || '',
-            description: data.description || '',
-            value: data.value || 0,
-          };
-        }
-      }).catch((err) => {
-        console.error('Error load sektor unggulan:', err);
-        toast.error('Gagal mengambil data sektor unggulan');
-      });
+      stateGrafik.findUnique
+        .load(id)
+        .then(() => {
+          const data = stateGrafik.findUnique.data;
+          if (data) {
+            setFormData({
+              name: data.name || '',
+              description: data.description || '',
+              value: data.value || 0,
+            });
+          }
+        })
+        .catch((err) => {
+          console.error('Error load sektor unggulan:', err);
+          toast.error('Gagal mengambil data sektor unggulan');
+        });
    }
  }, [id]);

+  const handleChange =
+    (field: keyof typeof formData) =>
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = field === 'value' ? Number(e.currentTarget.value) : e.currentTarget.value;
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    };
+
  const handleSubmit = async () => {
    try {
      stateGrafik.update.id = id;
+      stateGrafik.update.form = { ...formData }; // update global pas submit
      await stateGrafik.update.submit();
      toast.success('Sektor unggulan berhasil diperbarui!');
      router.push('/admin/ekonomi/sektor-unggulan-desa');
@@ -89,10 +107,8 @@ function EditSektorUnggulanDesa() {
          <TextInput
            label="Nama Sektor Unggulan"
            placeholder="Masukkan nama sektor unggulan"
-            defaultValue={stateGrafik.update.form.name}
-            onChange={(val) => {
-              stateGrafik.update.form.name = val.currentTarget.value;
-            }}
+            value={formData.name}
+            onChange={handleChange('name')}
            required
          />
          <Box>
@@ -100,20 +116,18 @@ function EditSektorUnggulanDesa() {
              Konten
            </Text>
            <EditEditor
-              value={stateGrafik.update.form.description}
-              onChange={(htmlContent) => {
-                stateGrafik.update.form.description = htmlContent;
-              }}
+              value={formData.description}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, description: htmlContent }))
+              }
            />
          </Box>
          <TextInput
            label="Jumlah"
            type="number"
            placeholder="Masukkan jumlah"
-            defaultValue={stateGrafik.update.form.value}
-            onChange={(val) => {
-              stateGrafik.update.form.value = Number(val.currentTarget.value);
-            }}
+            value={formData.value}
+            onChange={handleChange('value')}
            required
          />

--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/_lib/layoutTabs.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/_lib/layoutTabs.tsx
@@ -2,6 +2,7 @@
 'use client'
 import colors from '@/con/colors';
 import {
+  ScrollArea,
  Stack,
  Tabs,
  TabsList,
@@ -9,28 +10,20 @@ import {
  TabsTab,
  Title,
  Tooltip,
-  ScrollArea,
 } from '@mantine/core';
+import {
+  IconBuildingCommunity,
+  IconHierarchy,
+  IconUsers
+} from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import {
-  IconHierarchy,
-  IconUsers,
-  IconGitBranch,
-} from '@tabler/icons-react';

 function LayoutTabs({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();

  const tabs = [
-    {
-      label: "Posisi Organisasi",
-      value: "posisiorganisasi",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi",
-      icon: <IconHierarchy size={18} stroke={1.8} />,
-      tooltip: "Kelola daftar posisi organisasi",
-    },
    {
      label: "Pegawai",
      value: "pegawai",
@@ -39,12 +32,19 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
      tooltip: "Kelola data pegawai BUMDesa",
    },
    {
-      label: "Hubungan Organisasi",
-      value: "hubunganorganisasi",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi",
-      icon: <IconGitBranch size={18} stroke={1.8} />,
-      tooltip: "Atur hubungan antar posisi organisasi",
+      label: "Posisi Organisasi",
+      value: "posisiorganisasi",
+      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi",
+      icon: <IconHierarchy size={18} stroke={1.8} />,
+      tooltip: "Kelola daftar posisi organisasi",
    },
+    {
+      label: "Struktur Organisasi",
+      value: "strukturorganisasi",
+      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/struktur-organisasi",
+      icon: <IconBuildingCommunity size={18} stroke={1.8} />,
+      tooltip: "Kelola struktur organisasi BUMDesa"
+    }
  ];

  const currentTab = tabs.find((tab) => tab.href === pathname);
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/[id]/page.tsx
@@ -1,94 +0,0 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
-
-export default function EditHubunganOrganisasi() {
-  const router = useRouter();
-  const { id } = useParams<{ id: string }>();
-  const state = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const pegawaiList = strukturorganisasiState.pegawai.findMany.data;
-
-  const [form, setForm] = useState({
-    atasanId: '',
-    bawahanId: '',
-    tipe: '',
-  });
-
-  useEffect(() => {
-    strukturorganisasiState.pegawai.findMany.load();
-
-    if (id) {
-      state.edit.load(id).then(data => {
-        if (data) {
-          setForm({
-            atasanId: data.atasanId,
-            bawahanId: data.bawahanId,
-            tipe: data.tipe || '',
-          });
-        }
-      });
-    }
-  }, [id]);
-
-  const handleSubmit = async () => {
-    if (!form.atasanId || !form.bawahanId) {
-      toast.warn("Atasan dan bawahan harus diisi");
-      return;
-    }
-
-    state.edit.id = id;
-    state.edit.form = form;
-
-    const result = await state.edit.update();
-
-    if (result) {
-      toast.success("Data berhasil diperbarui");
-      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi');
-    }
-  };
-
-  return (
-    <Box>
-      <Paper p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack>
-          <Title order={3}>Edit Hubungan Organisasi</Title>
-          <Select
-            label="Atasan"
-            placeholder="Pilih atasan"
-            searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
-            value={form.atasanId}
-            onChange={(val) => setForm({ ...form, atasanId: val || '' })}
-          />
-          <Select
-            label="Bawahan"
-            placeholder="Pilih bawahan"
-            searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
-            value={form.bawahanId}
-            onChange={(val) => setForm({ ...form, bawahanId: val || '' })}
-          />
-          <TextInput
-            label="Tipe"
-            placeholder="Contoh: langsung_melapor"
-            defaultValue={form.tipe}
-            onChange={(e) => setForm({ ...form, tipe: e.currentTarget.value })}
-          />
-          <Button onClick={handleSubmit} color="blue">Simpan</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create/page.tsx
@@ -1,78 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
-
-export default function CreateHubunganOrganisasi() {
-  const router = useRouter();
-  const state = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const pegawaiList = strukturorganisasiState.pegawai.findMany.data;
-
-  const [form, setForm] = useState({
-    atasanId: '',
-    bawahanId: '',
-    tipe: '',
-  });
-
-  useEffect(() => {
-    strukturorganisasiState.pegawai.findMany.load();
-  }, []);
-
-  const handleSubmit = async () => {
-    if (!form.atasanId || !form.bawahanId) {
-      toast.warn("Atasan dan bawahan harus diisi");
-      return;
-    }
-
-    state.create.form = form;
-    const result = await state.create.create();
-
-    if (result) {
-      toast.success("Hubungan Organisasi berhasil ditambahkan");
-      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi');
-    }
-  };
-
-  return (
-    <Box>
-      <Paper p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack>
-          <Title order={3}>Create Hubungan Organisasi</Title>
-          <Select
-            label="Atasan"
-            placeholder="Pilih atasan"
-            searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
-            value={form.atasanId}
-            onChange={(val) => setForm({ ...form, atasanId: val || '' })}
-          />
-          <Select
-            label="Bawahan"
-            placeholder="Pilih bawahan"
-            searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
-            value={form.bawahanId}
-            onChange={(val) => setForm({ ...form, bawahanId: val || '' })}
-          />
-          <TextInput
-            label="Tipe"
-            placeholder="Contoh: langsung_melapor"
-            defaultValue={form.tipe}
-            onChange={(e) => setForm({ ...form, tipe: e.currentTarget.value })}
-          />
-          <Button onClick={handleSubmit} color="blue">Simpan</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/page.tsx
@@ -1,130 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
-import { useState } from 'react';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function HubunganOrganisasi() {
-  const [search, setSearch] = useState("");
-
-  return (
-    <Box>
-      <HeaderSearch
-        title='Hubungan Organisasi'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListHubunganOrganisasi search={search} />
-    </Box>
-  );
-}
-
-
-function ListHubunganOrganisasi({ search }: { search: string }) {
-  const stateOrganisasi = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter();
-
-  useShallowEffect(() => {
-    stateOrganisasi.findMany.load();
-  }, []);
-
-  const handleHapus = () => {
-    if (selectedId) {
-      stateOrganisasi.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-    }
-  };
-
-  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.atasan?.namaLengkap?.toLowerCase().includes(keyword) ||
-      item.bawahan?.namaLengkap?.toLowerCase().includes(keyword) ||
-      item.tipe?.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!stateOrganisasi.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    );
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Hubungan Organisasi'
-          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Atasan</TableTh>
-              <TableTh>Bawahan</TableTh>
-              <TableTh>Tipe</TableTh>
-              <TableTh>Edit</TableTh>
-              <TableTh>Hapus</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData
-              .sort((a, b) =>
-                a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap)
-              )
-              .map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.atasan?.namaLengkap}</TableTd>
-                  <TableTd>{item.bawahan?.namaLengkap}</TableTd>
-                  <TableTd>{item.tipe}</TableTd>
-                  <TableTd>
-                    <Button
-                      bg="green"
-                      onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}
-                    >
-                      <IconEdit size={25} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button
-                      color="red"
-                      onClick={() => {
-                        setSelectedId(item.id);
-                        setModalHapus(true);
-                      }}
-                    >
-                      <IconTrash size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              ))}
-          </TableTbody>
-        </Table>
-      </Paper>
-
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus hubungan organisasi ini?'
-      />
-    </Box>
-  );
-}
-
-
-export default HubunganOrganisasi;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
 import {
  Box,
  Button,
@@ -12,7 +14,8 @@ import {
  Stack,
  Text,
  TextInput,
-  Title
+  Title,
+  Tooltip
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -21,42 +24,26 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

-interface PreviewImage {
-  file?: File;
-  preview: string;
-}
-
-interface PegawaiFormData {
-  namaLengkap: string;
-  gelarAkademik: string;
-  imageId: string | null;
-  tanggalMasuk: string;
-  email: string;
-  telepon: string;
-  alamat: string;
-  posisiId: string;
-  isActive: boolean;
-}
-
-export default function EditPegawai() {
+export default function EditPegawaiBumDes() {
  const router = useRouter();
  const { id } = useParams<{ id: string }>();
-  const [previewImage, setPreviewImage] = useState<PreviewImage | string | null>(null);
-  const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
-  const [formData, setFormData] = useState<PegawaiFormData>({
-    namaLengkap: "",
-    gelarAkademik: "",
-    imageId: "",
-    tanggalMasuk: "",
-    email: "",
-    telepon: "",
-    alamat: "",
-    posisiId: "",
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
+
+  const [formData, setFormData] = useState({
+    namaLengkap: '',
+    gelarAkademik: '',
+    imageId: '',
+    tanggalMasuk: '',
+    email: '',
+    telepon: '',
+    alamat: '',
+    posisiId: '',
    isActive: true,
  });
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);

-
-  // Format date to YYYY-MM-DD for date input
+  // Format date for <input type="date">
  const formatDateForInput = (dateString: string) => {
    if (!dateString) return '';
    const date = new Date(dateString);
@@ -64,34 +51,29 @@ export default function EditPegawai() {
  };

  useEffect(() => {
-    strukturorganisasiState.posisiOrganisasi.findMany.load();
    const loadPegawai = async () => {
      try {
+        await stateStrukturBumDes.posisiOrganisasi.findManyAll.load();
+
        const data = await stateOrganisasi.edit.load(id);
        if (data) {
          setFormData({
-            namaLengkap: data.namaLengkap || "",
-            gelarAkademik: data.gelarAkademik || "",
-            imageId: data.imageId || "",
-            tanggalMasuk: data.tanggalMasuk || "",
-            email: data.email || "",
-            telepon: data.telepon || "",
-            alamat: data.alamat || "",
-            posisiId: data.posisiId || "",
-            isActive: data.isActive ?? true, // pakai nullish coalescing
+            namaLengkap: data.namaLengkap || '',
+            gelarAkademik: data.gelarAkademik || '',
+            imageId: data.imageId || '',
+            tanggalMasuk: data.tanggalMasuk || '',
+            email: data.email || '',
+            telepon: data.telepon || '',
+            alamat: data.alamat || '',
+            posisiId: data.posisiId || '',
+            isActive: data.isActive ?? true,
          });

-          if (data.image?.link) {
-            setPreviewImage(data.image.link);
-          } else {
-            setPreviewImage(null);
-          }
+          setPreviewImage(data.image?.link || null);
        }
      } catch (error) {
-        console.error("Error loading pegawai:", error);
-        toast.error(
-          error instanceof Error ? error.message : "Gagal mengambil data pegawai"
-        );
+        console.error('Error loading pegawai:', error);
+        toast.error(error instanceof Error ? error.message : 'Gagal mengambil data pegawai');
      }
    };

@@ -101,182 +83,187 @@ export default function EditPegawai() {
  const handleSubmit = async () => {
    try {
      if (!formData.namaLengkap.trim()) {
-        toast.error('Nama lengkap tidak boleh kosong');
-        return;
+        return toast.error('Nama lengkap tidak boleh kosong');
      }

-      stateOrganisasi.edit.form = {
-        namaLengkap: formData.namaLengkap.trim(),
-        gelarAkademik: formData.gelarAkademik.trim(),
-        imageId: formData.imageId ? formData.imageId.trim() : "",
-        tanggalMasuk: formData.tanggalMasuk.trim(),
-        email: formData.email.trim(),
-        telepon: formData.telepon.trim(),
-        alamat: formData.alamat.trim(),
-        posisiId: formData.posisiId.trim(),
-        isActive: formData.isActive,
-      };
-    
+      // Update global state only on submit
+      const updatedForm = { ...formData };

-
-      if (id && !stateOrganisasi.edit.id) {
-        stateOrganisasi.edit.id = id;
+      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');
+        updatedForm.imageId = uploaded.id;
      }

+      stateOrganisasi.edit.form = updatedForm;
+      if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
+
      const success = await stateOrganisasi.edit.submit();
-
-      if (success) {
-        router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
-      }
+      if (success) router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai');
    } catch (error) {
-      console.error("Error updating pegawai:", error);
-      toast.error(error instanceof Error ? error.message : "Gagal memperbarui data pegawai");
+      console.error('Error updating pegawai:', error);
+      toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
    }
-
-
-
  };

  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <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 Data Pegawai PPID</Title>
+      </Group>

-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Data Pegawai</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">
+          {/* Nama Lengkap */}
          <TextInput
            label="Nama Lengkap"
            placeholder="Masukkan nama lengkap"
-            defaultValue={formData.namaLengkap}
+            value={formData.namaLengkap}
            onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
+            required
          />
+
+          {/* Gelar Akademik */}
          <TextInput
            label="Gelar Akademik"
            placeholder="Contoh: S.Kom"
-            defaultValue={formData.gelarAkademik}
+            value={formData.gelarAkademik}
            onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
          />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box >
-              <Dropzone
-                onDrop={(files) => {
-                  const file = files[0]; // Hanya ambil file pertama
-                  if (file) {
-                    setPreviewImage({
-                      file,
-                      preview: URL.createObjectURL(file)
-                    });
-                  }
-                }}
-                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>

-                  <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 && (
+          {/* Foto Profil */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>Foto Profil</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/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
+              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>
+
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
                <Image
-                  src={typeof previewImage === 'string' ? previewImage : previewImage?.preview}
-                  alt="Preview"
-                  width={280}
-                  height={180}
-                  fit="cover"
-                  radius="sm"
-                  mt="md"
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
                  loading="lazy"
                />
-              )}
-            </Box>
+              </Box>
+            )}
          </Box>
+
+          {/* Tanggal Masuk */}
          <TextInput
            label="Tanggal Masuk"
            type="date"
            placeholder="Contoh: 2022-01-01"
-            defaultValue={formatDateForInput(formData.tanggalMasuk)}
+            value={formatDateForInput(formData.tanggalMasuk)}
            onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
          />
+
+          {/* Email */}
          <TextInput
            label="Email"
-            placeholder="Contoh: email@example.com"
-            defaultValue={formData.email}
-            onChange={(e) => (formData.email = e.currentTarget.value)}
+            type="email"
+            placeholder="contoh@email.com"
+            value={formData.email}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
          />
+
+          {/* Telepon */}
          <TextInput
            label="Telepon"
-            placeholder="Contoh: 08123456789"
-            defaultValue={formData.telepon}
-            onChange={(e) => (formData.telepon = e.currentTarget.value)}
+            placeholder="08123456789"
+            value={formData.telepon}
+            onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
          />
+
+          {/* Alamat */}
          <TextInput
            label="Alamat"
-            placeholder="Contoh: Jl. Contoh No. 1"
-            defaultValue={formData.alamat}
-            onChange={(e) => (formData.alamat = e.currentTarget.value)}
-          />
-          <Select
-            label="Posisi"
-            placeholder="Pilih posisi"
-            data={
-              strukturorganisasiState.posisiOrganisasi.findMany.data?.map((p) => ({
-                value: p.id, // harus string
-                label: p.nama,
-              })) || []
-            }
-            value={formData.posisiId}
-            onChange={(value) => {
-              if (value !== null) {
-                setFormData({ ...formData, posisiId: value }); // value harus string
-              }
-            }}
-          />
-          <Select
-            label="Status Pegawai"
-            data={[
-              { value: 'true', label: 'Aktif' },
-              { value: 'false', label: 'Tidak Aktif' },
-            ]}
-            value={String(formData.isActive)} // 'true' atau 'false'
-            onChange={(val) => {
-              setFormData({ ...formData, isActive: val === 'true' });
-            }}
+            placeholder="Jl. Contoh No. 123"
+            value={formData.alamat}
+            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
          />

+          {/* Posisi */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>Posisi</Text>
+            <Select
+              placeholder="Pilih posisi"
+              data={stateStrukturBumDes.posisiOrganisasi.findManyAll.data?.map(p => ({ value: p.id, label: p.nama })) || []}
+              value={formData.posisiId}
+              onChange={(value) => value && setFormData({ ...formData, posisiId: value })}
+              searchable
+              clearable
+            />
+          </Box>

-          <Group>
+          {/* Status Pegawai */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>Status Pegawai</Text>
+            <Select
+              data={[
+                { value: 'true', label: 'Aktif' },
+                { value: 'false', label: 'Tidak Aktif' },
+              ]}
+              value={String(formData.isActive)}
+              onChange={(val) => setFormData({ ...formData, isActive: val === 'true' })}
+              clearable
+            />
+          </Box>
+
+          {/* Submit Button */}
+          <Group justify="flex-end" mt="md">
            <Button
              onClick={handleSubmit}
-              color="blue"
+              loading={stateOrganisasi.edit.loading}
+              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>
        </Stack>
      </Paper>
-    </Box >
+    </Box>
  );
 }
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx
@@ -1,42 +1,56 @@
 'use client'
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';

 function DetailPegawai() {
-  const statePegawai = useProxy(strukturorganisasiState.pegawai)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
+  const statePegawai = useProxy(stateStrukturBumDes.pegawai);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [modalNonActive, setModalNonActive] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
  const router = useRouter();

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

  const handleHapus = () => {
    if (selectedId) {
-      statePegawai.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai")
+      statePegawai.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
    }
-  }
+  };
+
+  const handleNonActive = () => {
+    if (selectedId) {
+      statePegawai.nonActive.byId(selectedId);
+      setModalNonActive(false);
+      setSelectedId(null);
+      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+    }
+  };

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

+  const data = statePegawai.findUnique.data;
+
  return (
    <Box>
      <Box mb={10}>
@@ -44,91 +58,125 @@ function DetailPegawai() {
          <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 Pegawai</Text>
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+      <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 Pegawai PPID
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="md">
              <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Lengkap</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.namaLengkap}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gelar Akademik</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.gelarAkademik}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Image</Text>
-                {statePegawai.findUnique.data?.image?.link ? (
-                  <Image src={statePegawai.findUnique.data?.image?.link} alt='' loading="lazy" />
-                ) : (
-                  <Text fz={"md"} c="dimmed">Tidak ada gambar</Text>
-                )}
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Tanggal Masuk</Text>
-                <Text fz={"lg"}>
-                  {statePegawai.findUnique.data?.tanggalMasuk
-                    ? new Date(statePegawai.findUnique.data.tanggalMasuk).toLocaleDateString()
-                    : "-"}
+                <Text fz="lg" fw="bold">Nama Lengkap</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
+                  {data.namaLengkap || '-'} {data.gelarAkademik || ''}
                </Text>
              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Email</Text>
-                <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.email}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Telepon</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.telepon}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Alamat</Text>
-                <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.alamat}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Posisi</Text>
-                <Stack gap={4}>
-                  {statePegawai.findUnique.data?.posisi ? (
-                    <Text fz={"lg"}>
-                     {statePegawai.findUnique.data.posisi.nama}
-                    </Text>
-                  ) : (
-                    <Text fz={"lg"} c="dimmed">
-                      Tidak ada posisi
-                    </Text>
-                  )}
-                </Stack>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Aktif</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.isActive ? "Ya" : "Tidak"}</Text>
-              </Box>

              <Box>
-                <Flex gap={"xs"}>
-                  <Button
-                    onClick={() => {
-                      if (statePegawai.findUnique.data) {
-                        setSelectedId(statePegawai.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                <Text fz="lg" fw="bold">Posisi</Text>
+                <Text fz="md" c="dimmed">{data.posisi?.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Email</Text>
+                <Text fz="md" c="dimmed">{data.email || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Telepon</Text>
+                <Text fz="md" c="dimmed">{data.telepon || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal Masuk</Text>
+                <Text fz="md" c="dimmed">
+                  {data.tanggalMasuk ? new Date(data.tanggalMasuk).toLocaleDateString() : '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Status</Text>
+                <Text fz="md" c={data.isActive ? 'green' : 'red'}>
+                  {data.isActive ? 'Aktif' : 'Tidak Aktif'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Foto Profil</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.namaLengkap || 'Foto Profil'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                    mt="sm"
+                    style={{
+                      border: '1px solid #e0e0e0',
+                      borderRadius: '8px',
                    }}
-                    disabled={!statePegawai.findUnique.data}
-                    color="red">
-                    <IconX size={20} />
+                    loading='lazy'
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed" mt="sm">Tidak ada foto profil</Text>
+                )}
+              </Box>
+
+              <Button
+                color={data.isActive ? "green" : "gray"}
+                onClick={() => {
+                  setSelectedId(data.id || null);
+                  setModalNonActive(true);
+                }}
+                variant="light"
+                radius="md"
+                size="md"
+              >
+                {data.isActive ? "Aktif" : "Nonaktif"}
+              </Button>
+
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Pegawai" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id || null);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Pegawai" withArrow position="top">
                  <Button
-                    onClick={() => {
-                      if (statePegawai.findUnique.data) {
-                        router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${statePegawai.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!statePegawai.findUnique.data}
-                    color="green">
+                    color="green"
+                    onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
                    <IconEdit size={20} />
                  </Button>
-                </Flex>
-              </Box>
+                </Tooltip>
+              </Group>
            </Stack>
          </Paper>
        </Stack>
@@ -139,7 +187,15 @@ function DetailPegawai() {
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus produk ini?"
+        text="Apakah Anda yakin ingin menghapus data pegawai ini?"
+      />
+
+      {/* Modal NonActive */}
+      <ModalKonfirmasiHapus
+        opened={modalNonActive}
+        onClose={() => setModalNonActive(false)}
+        onConfirm={handleNonActive}
+        text="Apakah Anda yakin ingin menonaktifkan pegawai ini?"
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx
@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,17 +12,17 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

-function CreatePegawai() {
+function CreatePegawaiBumDes() {
  const router = useRouter();
  const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
-  const stateOrganisasi = useProxy(strukturorganisasiState)
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai)
  useEffect(() => {
-    stateOrganisasi.posisiOrganisasi.findMany.load();
+    stateStrukturBumDes.posisiOrganisasi.findManyAll.load();
    resetForm();
  }, []);

  const resetForm = () => {
-    stateOrganisasi.pegawai.create.form = {
+    stateOrganisasi.create.form = {
      namaLengkap: "",
      gelarAkademik: "",
      imageId: "",
@@ -30,7 +31,7 @@ function CreatePegawai() {
      telepon: "",
      alamat: "",
      posisiId: "",
-      isActive: true,  
+      isActive: true,
    };
  };

@@ -52,15 +53,15 @@ function CreatePegawai() {
      }

      // Set status aktif secara otomatis
-      stateOrganisasi.pegawai.create.form.isActive = true;
-      
+      stateOrganisasi.create.form.isActive = true;
+
      // Simpan ID gambar ke form
-      stateOrganisasi.pegawai.create.form.imageId = uploaded.id;
-      
+      stateOrganisasi.create.form.imageId = uploaded.id;
+
      // Submit form
-      await stateOrganisasi.pegawai.create.submit();
-      
-      
+      await stateOrganisasi.create.submit();
+
+
      // Reset form dan redirect
      resetForm();
      toast.success("Data pegawai berhasil ditambahkan");
@@ -72,130 +73,194 @@ function CreatePegawai() {
  };

  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Pegawai</Title>
-          <TextInput
-            label="Nama Lengkap"
-            placeholder="Masukkan nama lengkap"
-            defaultValue={stateOrganisasi.pegawai.create.form.namaLengkap}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.namaLengkap = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Gelar Akademik"
-            placeholder="Contoh: S.Kom"
-            defaultValue={stateOrganisasi.pegawai.create.form.gelarAkademik}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.gelarAkademik = e.currentTarget.value)}
-          />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box >
-              <Dropzone
-                onDrop={(files) => {
-                  const file = files[0]; // Hanya ambil file pertama
-                  if (file) {
-                    setPreviewImage({
-                      file,
-                      preview: URL.createObjectURL(file)
-                    });
-                  }
-                }}
-                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>
+    <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">
+          Tambah Pegawai BUMDesa
+        </Title>
+      </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>
-              {previewImage && (
+      <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>
+            <TextInput
+              label="Nama Lengkap"
+              placeholder="Masukkan nama lengkap"
+              defaultValue={stateOrganisasi.create.form.namaLengkap}
+              onChange={(e) => (stateOrganisasi.create.form.namaLengkap = e.currentTarget.value)}
+              required
+            />
+          </Box>
+          <Box>
+            <TextInput
+              label="Gelar Akademik"
+              placeholder="Contoh: S.Kom"
+              defaultValue={stateOrganisasi.create.form.gelarAkademik}
+              onChange={(e) => (stateOrganisasi.create.form.gelarAkademik = e.currentTarget.value)}
+            />
+          </Box>
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Foto Profil
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const file = files[0];
+                if (file) {
+                  setPreviewImage({
+                    file,
+                    preview: URL.createObjectURL(file)
+                  });
+                }
+              }}
+              maxSize={5 * 1024 ** 2} // 5MB
+              accept={{
+                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+              }}
+              styles={{
+                root: {
+                  border: '2px dashed #ced4da',
+                  borderRadius: '8px',
+                  padding: '20px',
+                  textAlign: 'center',
+                  cursor: 'pointer',
+                  '&:hover': {
+                    borderColor: '#228be6',
+                  },
+                },
+              }}
+            >
+              <Group justify="center" gap="xl" mih={160} 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="md" inline>
+                    Seret gambar ke sini atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Format yang didukung: JPG, PNG, WebP. Maksimal 5MB
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="md">
+                <Text fw="bold" fz="sm" mb={6}>
+                  Preview Gambar
+                </Text>
                <Image
                  src={previewImage.preview}
                  alt="Preview"
-                  width={280}
-                  height={180}
+                  width={200}
+                  height={200}
                  fit="cover"
-                  radius="sm"
-                  mt="md"
-                  loading="lazy"
+                  radius="md"
+                  style={{
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                  }}
+                  loading='lazy'
                />
-              )}
-            </Box>
+              </Box>
+            )}
+          </Box>
+          <Box>
+            <TextInput
+              label="Tanggal Masuk"
+              type="date"
+              placeholder="Contoh: 2022-01-01"
+              defaultValue={stateOrganisasi.create.form.tanggalMasuk}
+              onChange={(e) => (stateOrganisasi.create.form.tanggalMasuk = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <TextInput
+              label="Email"
+              type="email"
+              placeholder="Contoh: email@example.com"
+              defaultValue={stateOrganisasi.create.form.email}
+              onChange={(e) => (stateOrganisasi.create.form.email = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <TextInput
+              label="Nomor Telepon"
+              placeholder="Contoh: 08123456789"
+              defaultValue={stateOrganisasi.create.form.telepon}
+              onChange={(e) => (stateOrganisasi.create.form.telepon = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <TextInput
+              label="Alamat"
+              placeholder="Contoh: Jl. Contoh No. 1"
+              defaultValue={stateOrganisasi.create.form.alamat}
+              onChange={(e) => (stateOrganisasi.create.form.alamat = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Posisi
+            </Text>
+            <Select
+              placeholder="Pilih posisi"
+              data={stateStrukturBumDes.posisiOrganisasi.findManyAll.data?.map(p => ({
+                value: p.id,
+                label: p.nama
+              })) || []}
+              value={stateOrganisasi.create.form.posisiId}
+              onChange={(value) => {
+                if (value) stateOrganisasi.create.form.posisiId = value;
+              }}
+              searchable
+              clearable
+            />
          </Box>
-          <TextInput
-            label="Tanggal Masuk"
-            type="date"
-            placeholder="Contoh: 2022-01-01"
-            defaultValue={stateOrganisasi.pegawai.create.form.tanggalMasuk}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.tanggalMasuk = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Email"
-            placeholder="Contoh: email@example.com"
-            defaultValue={stateOrganisasi.pegawai.create.form.email}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.email = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Telepon"
-            placeholder="Contoh: 08123456789"
-            defaultValue={stateOrganisasi.pegawai.create.form.telepon}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.telepon = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Alamat"
-            placeholder="Contoh: Jl. Contoh No. 1"
-            defaultValue={stateOrganisasi.pegawai.create.form.alamat}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.alamat = e.currentTarget.value)}
-          />
-          <Select
-            label="Posisi"
-            placeholder="Pilih posisi"
-            data={stateOrganisasi.posisiOrganisasi.findMany.data?.map(p => ({
-              value: p.id,
-              label: p.nama
-            })) || []}
-            defaultValue={stateOrganisasi.pegawai.create.form.posisiId}
-            onChange={(value) => {
-              if (value) stateOrganisasi.pegawai.create.form.posisiId = value;
-            }}
-            searchable
-          />


-          <Button
-            onClick={handleSubmit}
-            color="blue"
-          >
-            Simpan
-          </Button>
+          <Group justify="flex-end" mt="md">
+            <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>
        </Stack>
      </Paper>
    </Box>
  );
 }

-export default CreatePegawai;
+export default CreatePegawaiBumDes;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx
@@ -1,33 +1,33 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, ThemeIcon } from '@mantine/core';
-import { IconCheck, IconDeviceImacCog, IconSearch, IconX } from '@tabler/icons-react';
+import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
+import { IconCheck, IconDeviceImacCog, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';

-function Pegawai() {
+
+function PegawaiBumDes() {
  const [search, setSearch] = useState("");
  return (
    <Box>
      <HeaderSearch
-        title='Pegawai'
+        title='Pegawai BUMDesa'
        placeholder='pencarian'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
      />
-      <ListPegawai search={search} />
+      <ListPegawaiBumdes search={search} />
    </Box>
  );
 }

-function ListPegawai({ search }: { search: string }) {
-  const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
+function ListPegawaiBumdes({ search }: { search: string }) {
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
  const router = useRouter();

  const {
@@ -39,21 +39,10 @@ function ListPegawai({ search }: { search: string }) {
  } = stateOrganisasi.findMany;

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

-  const filteredData = useMemo(() => {
-    if (!data) return [];
-    return data.filter(item => {
-      const keyword = search.toLowerCase();
-      return (
-        item.namaLengkap?.toLowerCase().includes(keyword) ||
-        item.gelarAkademik?.toLowerCase().includes(keyword) ||
-        item.telepon?.toLowerCase().includes(keyword) ||
-        item.posisi?.nama?.toLowerCase().includes(keyword)
-      );
-    });
-  }, [data, search]); 
+  const filteredData = data || []

  // Handle loading state
  if (loading || !data) {
@@ -67,29 +56,51 @@ function ListPegawai({ search }: { search: string }) {
  if (data.length === 0) {
    return (
      <Box py={10}>
-        <Paper p="md" ta="center">
-          <p>Tidak ada data pegawai yang tersedia</p>
+        <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+          <Group justify="space-between" mb="md">
+            <Title order={4}>Daftar Pegawai BUMDesa</Title>
+            <Tooltip label="Tambah Pegawai Baru" withArrow>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create')}
+              >
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Group>
+          <Center py="xl">
+            <Text c="dimmed">Tidak ada data pegawai yang ditemukan</Text>
+          </Center>
        </Paper>
      </Box>
    );
  }
  return (
    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'} h={{base: 770, md: 650}}>
-        <JudulList
-          title='List Pegawai'
-          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create'
-        />
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pegawai BUMDesa</Title>
+          <Tooltip label="Tambah Pegawai Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
        <Box style={{ overflowX: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+          <Table highlightOnHover>
            <TableThead>
              <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Gelar Akademik</TableTh>
-                <TableTh>Telepon</TableTh>
-                <TableTh>Posisi</TableTh>
-                <TableTh>Aktif</TableTh>
-                <TableTh>Detail</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Lengkap</TableTh>
+                <TableTh style={{ width: '20%' }}>Posisi</TableTh>
+                <TableTh style={{ width: '10%' }}>Status</TableTh>
+                <TableTh style={{ width: '10%' }}>Aksi</TableTh>
              </TableTr>
            </TableThead>
            <TableTbody>
@@ -106,10 +117,20 @@ function ListPegawai({ search }: { search: string }) {
                }) // Aktif di atas
              ).map((item) => (
                <TableTr key={item.id}>
-                  <TableTd>{item.namaLengkap}</TableTd>
-                  <TableTd>{item.gelarAkademik}</TableTd>
-                  <TableTd>{item.telepon}</TableTd>
-                  <TableTd>{item.posisi?.nama}</TableTd>
+                  <TableTd>
+                    <Box w={150}>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.namaLengkap}
+                      </Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Box w={150}>
+                      <Badge variant="light" color="blue">
+                        {item.posisi?.nama || 'Belum diatur'}
+                      </Badge>
+                    </Box>
+                  </TableTd>
                  <TableTd>
                    <Group gap="xs" wrap="nowrap">
                      <Box visibleFrom="sm">
@@ -131,8 +152,15 @@ function ListPegawai({ search }: { search: string }) {
                    </Group>
                  </TableTd>
                  <TableTd>
-                    <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
+                    <Button
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}
+                    >
+                      Detail
                    </Button>
                  </TableTd>
                </TableTr>
@@ -140,21 +168,22 @@ function ListPegawai({ search }: { search: string }) {
            </TableTbody>
          </Table>
        </Box>
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            withEdges
+            withControls
+            radius="md"
+          />
+        </Center>
      </Paper>
-     <Center>
-     <Pagination
-        value={page}
-        onChange={(newPage) => {
-          load(newPage, 10);
-          window.scrollTo(0, 0); 
-        }}
-        total={totalPages}
-        mt="md"
-        mb="md"
-      />
-     </Center>
    </Box>
  );
 }

-export default Pegawai;
+export default PegawaiBumDes;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/[id]/page.tsx
@@ -1,30 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 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, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

-function EditPosisiOrganisasi() {
+function EditPosisiOrganisasiBumDes() {
  const router = useRouter();
  const params = useParams();
  const id = params?.id as string;
-  const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);

  const [formData, setFormData] = useState({
    nama: '',
@@ -32,13 +24,17 @@ function EditPosisiOrganisasi() {
    hierarki: 0,
  });

-  useEffect(() => {
-    const loadPosisiOrganisasi = async () => {
-      if (!id) return;
+  // Fungsi generik untuk update formData
+  const handleChange = (field: keyof typeof formData, value: any) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };

+  useEffect(() => {
+    if (!id) return;
+
+    const loadPosisiOrganisasi = async () => {
      try {
        const data = await stateOrganisasi.edit.load(id);
-
        if (data) {
          stateOrganisasi.edit.id = id;
          setFormData({
@@ -47,8 +43,8 @@ function EditPosisiOrganisasi() {
            hierarki: data.hierarki || 0,
          });
        }
-      } catch (error) {
-        console.error('Error loading posisi organisasi:', error);
+      } catch (err) {
+        console.error('Error loading posisi organisasi:', err);
        toast.error('Gagal memuat data posisi organisasi');
      }
    };
@@ -57,12 +53,13 @@ function EditPosisiOrganisasi() {
  }, [id]);

  const handleSubmit = async () => {
-    try {
-      if (!formData.nama.trim()) {
-        toast.error('Nama posisi organisasi tidak boleh kosong');
-        return;
-      }
+    if (!formData.nama.trim()) {
+      toast.error('Nama posisi organisasi tidak boleh kosong');
+      return;
+    }

+    try {
+      // Update global state hanya saat submit
      stateOrganisasi.edit.form = {
        nama: formData.nama.trim(),
        deskripsi: formData.deskripsi.trim(),
@@ -70,19 +67,17 @@ function EditPosisiOrganisasi() {
      };

      if (!stateOrganisasi.edit.id) {
-        stateOrganisasi.edit.id = id; // fallback
+        stateOrganisasi.edit.id = id;
      }

      const success = await stateOrganisasi.edit.update();

      if (success) {
-        toast.success('Posisi organisasi berhasil diperbarui!');
-        router.push(
-          '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi'
-        );
+        router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
      }
-    } catch (error) {
-      console.error('Error updating posisi organisasi:', error);
+    } catch (err) {
+      console.error('Error updating posisi organisasi:', err);
+      // toast error biasanya sudah ada di update
    }
  };

@@ -90,17 +85,12 @@ function EditPosisiOrganisasi() {
    <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"
-          >
+          <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 Posisi Organisasi
+          Edit Posisi Organisasi BUMDes
        </Title>
      </Group>

@@ -114,44 +104,40 @@ function EditPosisiOrganisasi() {
      >
        <Stack gap="md">
          <TextInput
-            defaultValue={formData.nama}
-            onChange={(e) =>
-              setFormData({ ...formData, nama: e.target.value })
-            }
            label="Nama Posisi Organisasi"
            placeholder="Masukkan nama posisi organisasi"
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
            required
          />

          <Box>
-            <Text fz="sm" mb={6}>
+            <Text fw="bold" fz="sm" mb={6}>
              Deskripsi
            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) =>
-                setFormData({ ...formData, deskripsi: htmlContent })
-              }
+              onChange={(html) => handleChange('deskripsi', html)}
            />
          </Box>

          <TextInput
-            type="number"
-            defaultValue={formData.hierarki}
-            onChange={(e) =>
-              setFormData({
-                ...formData,
-                hierarki: parseInt(e.target.value) || 0,
-              })
-            }
            label="Hierarki"
-            placeholder="Masukkan hierarki"
+            type="number"
+            min={0}
+            placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
+            value={formData.hierarki}
+            onChange={(e) => {
+              const value = parseInt(e.target.value, 10);
+              handleChange('hierarki', isNaN(value) ? 0 : value);
+            }}
            required
          />

-          <Group justify="right">
+          <Group justify="flex-end" mt="md">
            <Button
              onClick={handleSubmit}
+              loading={stateOrganisasi.edit.loading}
              radius="md"
              size="md"
              style={{
@@ -169,4 +155,4 @@ function EditPosisiOrganisasi() {
  );
 }

-export default EditPosisiOrganisasi;
+export default EditPosisiOrganisasiBumDes;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create/page.tsx
@@ -1,128 +1,127 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 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, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

-function CreatePosisiOrganisasi() {
-    const router = useRouter();
-    const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
-
-    useEffect(() => {
-        stateOrganisasi.findMany.load();
-    }, []);
-
-    const resetForm = () => {
-        stateOrganisasi.create.form = {
-            nama: '',
-            deskripsi: '',
-            hierarki: 0,
-        };
+function CreatePosisiOrganisasiBumDes() {
+  const router = useRouter();
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
+  
+  useEffect(() => {
+    stateOrganisasi.findMany.load();
+    // Initialize form with default values
+    stateOrganisasi.create.form = {
+      nama: "",
+      deskripsi: "",
+      hierarki: 0,
    };
-
-    const handleSubmit = async () => {
-        await stateOrganisasi.create.submit();
-        resetForm();
-        router.push(
-            '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi'
-        );
+    
+    return () => {
+      // Clean up form on unmount
+      stateOrganisasi.create.form = {
+        nama: "",
+        deskripsi: "",
+        hierarki: 0,
+      };
    };
+  }, []);

-    return (
-        <Box px={{ base: 'sm', md: 'lg' }} py="md">
-            {/* Header 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">
-                    Tambah Posisi Organisasi
-                </Title>
-            </Group>
+  const handleSubmit = async () => {
+    try {
+      if (!stateOrganisasi.create.form.nama.trim()) {
+        return toast.error('Nama posisi tidak boleh kosong');
+      }
+      
+      await stateOrganisasi.create.submit();
+      toast.success('Posisi organisasi berhasil ditambahkan');
+      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
+    } catch (error) {
+      toast.error('Gagal menambahkan posisi organisasi');
+      console.error('Error:', error);
+    }
+  };

-            {/* Form Card */}
-            <Paper
-                w={{ base: '100%', md: '50%' }}
-                bg={colors['white-1']}
-                p="lg"
-                radius="md"
-                shadow="sm"
-                style={{ border: '1px solid #e0e0e0' }}
+  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">
+          Tambah Posisi Organisasi BUMDes
+        </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">
+          <TextInput
+            label="Nama Posisi"
+            placeholder="Contoh: Kepala Desa"
+            defaultValue={stateOrganisasi.create.form.nama}
+            onChange={(e) => (stateOrganisasi.create.form.nama = e.target.value)}
+            required
+          />
+          
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={stateOrganisasi.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateOrganisasi.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          
+          <TextInput
+            label="Hierarki"
+            type="number"
+            min={0}
+            placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
+            defaultValue={stateOrganisasi.create.form.hierarki || ''}
+            onChange={(e) => {
+              const value = parseInt(e.target.value, 10);
+              stateOrganisasi.create.form.hierarki = isNaN(value) ? 0 : value;
+            }}
+            required
+          />
+
+          <Group justify="flex-end" mt="md">
+            <Button
+              onClick={handleSubmit}
+              loading={stateOrganisasi.create.loading}
+              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)',
+              }}
            >
-                <Stack gap="md">
-                    <TextInput
-                        label="Nama Posisi"
-                        placeholder="Contoh: Kepala Desa"
-                        defaultValue={stateOrganisasi.create.form.nama}
-                        onChange={(e) => (stateOrganisasi.create.form.nama = e.currentTarget.value)}
-                        required
-                    />
-
-                    <Box>
-                        <Text fz={"sm"} mb={6}>Deskripsi</Text>
-                        <CreateEditor
-                            value={stateOrganisasi.create.form.deskripsi}
-                            onChange={(htmlContent) => {
-                                stateOrganisasi.create.form.deskripsi = htmlContent;
-                            }}
-                        />
-                    </Box>
-
-                    <TextInput
-                        label="Hierarki"
-                        type="number"
-                        placeholder="Contoh: 1"
-                        defaultValue={stateOrganisasi.create.form.hierarki}
-                        onChange={(e) => {
-                            const value = parseInt(e.currentTarget.value, 10);
-                            if (!isNaN(value)) {
-                                stateOrganisasi.create.form.hierarki = value;
-                            }
-                        }}
-                        required
-                    />
-
-                    {/* Action Button */}
-                    <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>
-                </Stack>
-            </Paper>
-        </Box>
-    );
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
 }

-export default CreatePosisiOrganisasi;
+export default CreatePosisiOrganisasiBumDes;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx
@@ -1,58 +1,37 @@
 'use client'
 import colors from '@/con/colors';
-import {
-  Box,
-  Button,
-  Center,
-  Group,
-  Paper,
-  Pagination,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';

-function PosisiOrganisasi() {
+
+function PosisiOrganisasiBumDes() {
  const [search, setSearch] = useState("");
  return (
    <Box>
-      {/* Search Bar */}
      <HeaderSearch
-        title="Posisi Organisasi"
-        placeholder="Cari nama, deskripsi, atau hierarki..."
+        title='Posisi Organisasi BUMDes'
+        placeholder='Cari posisi organisasi...'
        searchIcon={<IconSearch size={20} />}
        value={search}
        onChange={(e) => setSearch(e.currentTarget.value)}
      />
-
-      {/* List Table */}
-      <ListPosisiOrganisasi search={search} />
+      <ListPosisiOrganisasiBumDes search={search} />
    </Box>
  );
 }

-function ListPosisiOrganisasi({ search }: { search: string }) {
-  const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
+function ListPosisiOrganisasiBumDes({ search }: { search: string }) {
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi)
  const router = useRouter();
-
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)

  const {
    data,
@@ -66,21 +45,20 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
    load(page, 10, search);
  }, [page, search]);

-  const filteredData = data || [];
-
  const handleHapus = async () => {
    if (selectedId) {
      await stateOrganisasi.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-      load(page, 10, search); // refresh
+      setModalHapus(false)
+      setSelectedId(null)
    }
-  };
+  }
+
+  const filteredData = data || []

  if (loading || !data) {
    return (
      <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton height={600} radius="md" />
      </Stack>
    );
  }
@@ -89,71 +67,70 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
    <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 Posisi Organisasi</Title>
-          <Tooltip label="Tambah Posisi Baru" withArrow>
+          <Title order={4}>Daftar Posisi Organisasi BumDes</Title>
+          <Tooltip label="Tambah Posisi Organisasi" withArrow>
            <Button
              leftSection={<IconPlus size={18} />}
              color="blue"
              variant="light"
-              onClick={() =>
-                router.push(
-                  '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create'
-                )
-              }
+              onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create')}
            >
              Tambah Baru
            </Button>
          </Tooltip>
        </Group>
-
        <Box style={{ overflowX: 'auto' }}>
          <Table highlightOnHover>
            <TableThead>
              <TableTr>
-                <TableTh style={{ width: '25%' }}>Nama Posisi</TableTh>
-                <TableTh style={{ width: '15%' }}>Hierarki</TableTh>
-                <TableTh style={{ width: '25%' }}>Edit</TableTh>
-                <TableTh style={{ width: '25%' }}>Hapus</TableTh>
+                <TableTh style={{ width: '20%' }}>Nama Posisi</TableTh>
+                <TableTh style={{ width: '20%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '20%' }}>Hierarki</TableTh>
+                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Hapus</TableTh>
              </TableTr>
            </TableThead>
            <TableTbody>
              {filteredData.length > 0 ? (
                filteredData.map((item) => (
                  <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
+                    <TableTd style={{ width: '20%' }}>
                      <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
                    </TableTd>
-                    <TableTd style={{ width: '15%' }}>
-                      <Text fz="sm">{item.hierarki ?? '-'}</Text>
+                    <TableTd style={{ width: '20%' }}>
+                      <Box w={200}>
+                        <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
+                      </Box>
                    </TableTd>
-                    <TableTd style={{ width: '25%' }}>
-                      <Tooltip label="Ubah Posisi Organisasi" withArrow>
+                    <TableTd style={{ width: '20%' }}>
+                      <Text>{item.hierarki || '-'}</Text>
+                    </TableTd>
+                    <TableTd style={{ width: '20%' }}>
+                      <Tooltip label="Edit" withArrow>
                        <Button
                          variant="light"
                          color="green"
-                          onClick={() =>
-                            router.push(
-                              `/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`
-                            )
-                          }
+                          size="sm"
+                          onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`)}
                        >
                          <IconEdit size={18} />
                        </Button>
                      </Tooltip>
                    </TableTd>
-                    <TableTd style={{ width: '25%' }}>
-                      <Tooltip label="Hapus Posisi Organisasi" withArrow>
-                        <Button
-                          variant="light"
-                          color="red"
-                          onClick={() => {
-                            setSelectedId(item.id);
-                            setModalHapus(true);
-                          }}
-                        >
-                          <IconTrash size={18} />
-                        </Button>
-                      </Tooltip>
+                    <TableTd style={{ width: '20%' }}>
+                    <Tooltip label="Hapus" withArrow>
+                      <Button
+                        variant="light"
+                        color="red"
+                        size="sm"
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={18} />
+                      </Button>
+                    </Tooltip>
                    </TableTd>
                  </TableTr>
                ))
@@ -170,8 +147,6 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
          </Table>
        </Box>
      </Paper>
-
-      {/* Pagination */}
      <Center>
        <Pagination
          value={page}
@@ -186,16 +161,15 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
          radius="md"
        />
      </Center>
-
      {/* Modal Hapus */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus posisi organisasi ini?"
+        text="Apakah anda yakin ingin menghapus posisi organisasi BumDes ini?"
      />
    </Box>
  );
 }

-export default PosisiOrganisasi;
+export default PosisiOrganisasiBumDes;
--- a/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/struktur-organisasi/page.tsx
+++ b/src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/struktur-organisasi/page.tsx
@@ -0,0 +1,133 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { Box, Center, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import { IconUsers } from '@tabler/icons-react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+function StrukturOrganisasiBumDes() {
+  return (
+    <Box py="md">
+      <ListStrukturOrganisasiBumDes />
+    </Box>
+  );
+}
+
+function ListStrukturOrganisasiBumDes() {
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
+
+  useEffect(() => {
+    stateOrganisasi.findMany.load();
+  }, []);
+
+  if (stateOrganisasi.findMany.loading) {
+    return (
+      <Center py={40}>
+        <Loader size="lg" />
+      </Center>
+    );
+  }
+
+  if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
+    return (
+      <Stack align="center" py={60} gap="sm">
+        <IconUsers size={60} stroke={1.5} color="var(--mantine-color-gray-6)" />
+        <Text fw={500} c="dimmed">Belum ada struktur organisasi yang ditambahkan</Text>
+      </Stack>
+    );
+  }
+
+  const posisiMap = new Map<string, any>();
+
+  const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
+
+  for (const pegawai of aktifPegawai) {
+    const posisiId = pegawai.posisi.id;
+    if (!posisiMap.has(posisiId)) {
+      posisiMap.set(posisiId, {
+        ...pegawai.posisi,
+        pegawaiList: [],
+        children: [],
+      });
+    }
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
+  }
+
+  let root: any[] = [];
+  posisiMap.forEach((posisi) => {
+    if (posisi.parentId) {
+      const parent = posisiMap.get(posisi.parentId);
+      if (parent) {
+        parent.children.push(posisi);
+      }
+    } else {
+      root.push(posisi);
+    }
+  });
+
+  function toOrgChartFormat(node: any): any {
+    return {
+      expanded: true,
+      type: 'person',
+      styleClass: 'p-person',
+      data: {
+        name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ada pegawai',
+        status: node.nama,
+        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
+      },
+      children: node.children.map(toOrgChartFormat),
+    };
+  }
+
+  const chartData = root.map(toOrgChartFormat);
+
+  return (
+    <Box py={10}>
+      <Paper
+        p="md"
+        radius="lg"
+        shadow="md"
+        withBorder
+        style={{
+          overflowX: 'auto',
+          background: 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)',
+        }}
+      >
+        <OrganizationChart value={chartData} nodeTemplate={nodeTemplate} />
+      </Paper>
+    </Box>
+  );
+}
+
+function nodeTemplate(node: any) {
+  const imageSrc = node?.data?.image || '/img/default.png';
+  const name = node?.data?.name || 'Tanpa Nama';
+  const status = node?.data?.status || 'Tidak ada deskripsi';
+
+  return (
+    <Stack align="center" gap={6} p="sm" style={{ minWidth: 160 }}>
+      <Tooltip label={name} position="top" withArrow>
+        <Image
+          src={imageSrc}
+          alt={name}
+          radius="xl"
+          w={100}
+          h={100}
+          fit="cover"
+          style={{
+            border: '1px solid #D3D1D1FF',
+          }}
+          loading='lazy'
+        />
+      </Tooltip>
+      <Text fw={600} ta="center" size="sm">{name}</Text>
+      <Text size="xs" c="dimmed" ta="center">{status}</Text>
+    </Stack>
+  );
+}
+
+export default StrukturOrganisasiBumDes;
--- a/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/ajukan-ide-inovatif/page.tsx
@@ -4,7 +4,6 @@ import {
  Box,
  Button,
  Center,
-  Group,
  Pagination,
  Paper,
  Skeleton,
@@ -16,11 +15,10 @@ import {
  TableThead,
  TableTr,
  Text,
-  Title,
-  Tooltip,
+  Title
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch, IconPlus } 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';
@@ -72,20 +70,7 @@ function ListAjukanIdeInovatif({ search }: { search: string }) {
  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 Ide Inovatif</Title>
-          <Tooltip label="Ajukan Ide Baru" withArrow>
-            <Button
-              leftSection={<IconPlus size={18} />}
-              color="blue"
-              variant="light"
-              onClick={() => router.push('/admin/inovasi/ajukan-ide-inovatif/create')}
-            >
-              Tambah Baru
-            </Button>
-          </Tooltip>
-        </Group>
-
+        <Title order={4}>Daftar Ide Inovatif</Title>
        <Box style={{ overflowX: "auto" }}>
          <Table highlightOnHover>
            <TableThead>
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx
@@ -1,10 +1,21 @@
-'use client'
+'use client';
 /* eslint-disable react-hooks/exhaustive-deps */
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -12,20 +23,22 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

-function EditPenghargaan() {
-  const stateDesaDigital = useProxy(desaDigitalState)
-  const router = useRouter()
-  const params = useParams()
-  const [previewImage, setPreviewImage] = useState<string | null>(null)
-  const [file, setFile] = useState<File | null>(null)
+function EditDigitalSmartVillage() {
+  const stateDesaDigital = useProxy(desaDigitalState);
+  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: stateDesaDigital.findUnique.data?.name || '',
-    deskripsi: stateDesaDigital.findUnique.data?.deskripsi || '',
-    imageId: stateDesaDigital.findUnique.data?.imageId || '',
-  })
+    name: '',
+    deskripsi: '',
+    imageId: '',
+  });

  useEffect(() => {
-    const loadPenghargaan = async () => {
+    const loadData = async () => {
      const id = params?.id as string;
      if (!id) return;

@@ -38,136 +51,160 @@ function EditPenghargaan() {
            imageId: data.imageId || '',
          });

-          if (data?.image?.link) {
-            setPreviewImage(data.image.link);
-          }
+          if (data?.image?.link) setPreviewImage(data.image.link);
        }
      } catch (error) {
-        console.error("Error loading desa digital smart village:", error);
-        toast.error("Gagal memuat data desa digital smart village");
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data desa digital smart village');
      }
    };

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

  const handleSubmit = async () => {
    try {
-      stateDesaDigital.edit.form = {
-        ...stateDesaDigital.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-      }
+      stateDesaDigital.edit.form = { ...stateDesaDigital.edit.form, ...formData };

      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');

        stateDesaDigital.edit.form.imageId = uploaded.id;
      }

      await stateDesaDigital.edit.update();
-      toast.success("Desa digital smart village berhasil diperbarui!");
-      router.push("/admin/inovasi/desa-digital-smart-village");
+      toast.success('Desa digital smart village berhasil diperbarui!');
+      router.push('/admin/inovasi/desa-digital-smart-village');
    } catch (error) {
-      console.error("Error updating desa digital smart village:", error);
-      toast.error("Terjadi kesalahan saat memperbarui desa digital smart village");
+      console.error('Error updating desa digital:', error);
+      toast.error('Terjadi kesalahan saat memperbarui data');
    }
-  }
+  };

  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Desa Digital Smart Village</Title>
-          <TextInput
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
-          />
+    <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 Desa Digital Smart Village
+        </Title>
+      </Group>
+
+      {/* Form Card */}
+      <Paper
+        w={{ base: '100%', md: '55%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Dropzone Upload */}
          <Box>
-            <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>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Desa Digital
+            </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>

-                  <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',
-                    }}
-                    loading="lazy"
-                  />
-                </Box>
-              )}
-            </Box>
+            {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']}`,
+                  }}
+                  loading="lazy"
+                />
+              </Box>
+            )}
          </Box>
+
+          {/* Input Judul */}
+          <TextInput
+            label="Judul"
+            placeholder="Masukkan judul inovasi"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+
+          {/* Editor Deskripsi */}
          <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                stateDesaDigital.edit.form.deskripsi = htmlContent;
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
            />
          </Box>

-          <Button onClick={handleSubmit}>Simpan</Button>
+          {/* 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>
        </Stack>
      </Paper>
    </Box>
  );
 }

-export default EditPenghargaan;
+export default EditDigitalSmartVillage;
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/page.tsx
@@ -1,8 +1,18 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -10,95 +20,136 @@ import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import desaDigitalState from '../../../_state/inovasi/desa-digital';

 function DetailDesaDigital() {
-  const stateDesaDigital = useProxy(desaDigitalState)
+  const stateDesaDigital = useProxy(desaDigitalState);
  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(() => {
-    stateDesaDigital.findUnique.load(params?.id as string)
-  }, [])
+    stateDesaDigital.findUnique.load(params?.id as string);
+  }, []);

  const handleHapus = () => {
    if (selectedId) {
-      stateDesaDigital.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/inovasi/desa-digital-smart-village")
+      stateDesaDigital.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/inovasi/desa-digital-smart-village");
    }
-  }
+  };

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

+  const data = stateDesaDigital.findUnique.data;
+
  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 Desa Digital Smart Village</Text>
-          {stateDesaDigital.findUnique.data ? (
-            <Paper key={stateDesaDigital.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{stateDesaDigital.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: stateDesaDigital.findUnique.data?.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={stateDesaDigital.findUnique.data?.image?.link} alt="gambar" loading="lazy"/>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Card Utama */}
+      <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 Desa Digital Smart Village
+          </Text>
+
+          {/* Sub Card Detail */}
+          <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">Deskripsi</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
+                  dangerouslySetInnerHTML={{ __html: data?.deskripsi || '-' }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data?.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.name || 'Gambar Desa Digital'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                    loading="lazy"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
+              </Box>
+
+              {/* Tombol Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Data" withArrow position="top">
                  <Button
+                    color="red"
                    onClick={() => {
-                      if (stateDesaDigital.findUnique.data) {
-                        setSelectedId(stateDesaDigital.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                    }}
-                    disabled={stateDesaDigital.delete.loading || !stateDesaDigital.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                  >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
                  <Button
-                    onClick={() => {
-                      if (stateDesaDigital.findUnique.data) {
-                        router.push(`/admin/inovasi/desa-digital-smart-village/${stateDesaDigital.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!stateDesaDigital.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
                  >
                    <IconEdit size={20} />
                  </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
        </Stack>
      </Paper>

-      {/* Modal Konfirmasi Hapus */}
+      {/* Modal Konfirmasi */}
      <ModalKonfirmasiHapus
        opened={modalHapus}
        onClose={() => setModalHapus(false)}
        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus desa digital smart village ini?'
+        text="Apakah Anda yakin ingin menghapus desa digital smart village ini?"
      />
    </Box>
  );
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx
@@ -22,7 +22,7 @@ import CreateEditor from '../../../_com/createEditor';
 import desaDigitalState from '../../../_state/inovasi/desa-digital';
 import { Dropzone } from '@mantine/dropzone';

-function CreateDesaDigital() {
+export default function CreateDesaDigital() {
  const stateDesaDigital = useProxy(desaDigitalState);
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
@@ -44,7 +44,6 @@ function CreateDesaDigital() {
    }

    try {
-      // Upload gambar dulu
      const uploadRes = await ApiFetch.api.fileStorage.create.post({
        file,
        name: file.name,
@@ -55,10 +54,8 @@ function CreateDesaDigital() {
        return toast.error('Gagal mengunggah gambar');
      }

-      // Set imageId ke form
      stateDesaDigital.create.form.imageId = uploaded.id;

-      // Submit form
      const success = await stateDesaDigital.create.create();
      if (success) {
        resetForm();
@@ -72,10 +69,16 @@ function CreateDesaDigital() {

  return (
    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header */}
-      <Group mb="md">
+      {/* Header dengan tombol kembali */}
+      <Group mb="md" align="center">
        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+            style={{ transition: 'background 0.2s ease' }}
+          >
            <IconArrowBack color={colors['blue-button']} size={24} />
          </Button>
        </Tooltip>
@@ -84,28 +87,32 @@ function CreateDesaDigital() {
        </Title>
      </Group>

-      {/* Card */}
+      {/* Card Form */}
      <Paper
        w={{ base: '100%', md: '60%' }}
        bg={colors['white-1']}
-        p="lg"
-        radius="md"
-        shadow="sm"
-        style={{ border: '1px solid #e0e0e0' }}
+        p={{ base: 'md', md: 'xl' }}
+        radius="lg"
+        shadow="md"
+        style={{
+          border: '1px solid #eaeaea',
+          transition: 'box-shadow 0.3s ease',
+        }}
      >
-        <Stack gap="md">
-          {/* Nama */}
+        <Stack gap="lg">
+          {/* Input Nama */}
          <TextInput
-            label="Nama Desa Digital Smart Village"
-            placeholder="Masukkan nama desa digital smart village"
+            label="Nama Desa Digital"
+            placeholder="Masukkan nama desa digital"
            defaultValue={stateDesaDigital.create.form.name}
            onChange={(e) => (stateDesaDigital.create.form.name = e.target.value)}
-            required
+            radius="md"
+            withAsterisk
          />

          {/* Deskripsi */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
+            <Text fw={500} fz="sm" mb={6}>
              Deskripsi
            </Text>
            <CreateEditor
@@ -118,8 +125,8 @@ function CreateDesaDigital() {

          {/* Upload Gambar */}
          <Box>
-            <Text fw="bold" fz="sm" mb={6}>
-              Gambar
+            <Text fw={500} fz="sm" mb={6}>
+              Gambar Desa Digital
            </Text>
            <Dropzone
              onDrop={(files) => {
@@ -134,6 +141,11 @@ function CreateDesaDigital() {
              accept={{ 'image/*': [] }}
              radius="md"
              p="xl"
+              style={{
+                border: '2px dashed #cfd8dc',
+                backgroundColor: '#fafafa',
+                transition: 'background-color 0.2s ease, border-color 0.2s ease',
+              }}
            >
              <Group justify="center" gap="xl" mih={180}>
                <Dropzone.Accept>
@@ -153,15 +165,22 @@ function CreateDesaDigital() {

            {/* Preview */}
            {previewImage && (
-              <Box mt="sm" style={{ textAlign: 'center' }}>
+              <Box
+                mt="sm"
+                style={{
+                  textAlign: 'center',
+                  borderRadius: 12,
+                  overflow: 'hidden',
+                }}
+              >
                <Image
                  src={previewImage}
                  alt="Preview"
                  radius="md"
                  style={{
-                    maxHeight: 200,
-                    objectFit: 'contain',
-                    border: '1px solid #ddd',
+                    maxHeight: 220,
+                    objectFit: 'cover',
+                    border: '1px solid #e0e0e0',
                  }}
                  loading="lazy"
                />
@@ -170,7 +189,7 @@ function CreateDesaDigital() {
          </Box>

          {/* Tombol Submit */}
-          <Group justify="right">
+          <Group justify="flex-end" mt="sm">
            <Button
              onClick={handleSubmit}
              radius="md"
@@ -179,6 +198,17 @@ function CreateDesaDigital() {
                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
                color: '#fff',
                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+                transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+              }}
+              onMouseEnter={(e) => {
+                (e.currentTarget.style.transform = 'translateY(-2px)');
+                (e.currentTarget.style.boxShadow =
+                  '0 6px 20px rgba(79, 172, 254, 0.5)');
+              }}
+              onMouseLeave={(e) => {
+                (e.currentTarget.style.transform = 'translateY(0)');
+                (e.currentTarget.style.boxShadow =
+                  '0 4px 15px rgba(79, 172, 254, 0.4)');
              }}
            >
              Simpan
@@ -189,5 +219,3 @@ function CreateDesaDigital() {
    </Box>
  );
 }
-
-export default CreateDesaDigital;
--- a/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx
@@ -97,17 +97,21 @@ function ListDesaDigitalSmartVillage({ search }: { search: string }) {
                filteredData.map((item) => (
                  <TableTr key={item.id}>
                    <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
-                        {item.name}
-                      </Text>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
                    </TableTd>
                    <TableTd>
-                      <Text
-                        fz="sm"
-                        c="dimmed"
-                        lineClamp={2}
-                        dangerouslySetInnerHTML={{ __html: item.deskripsi }}
-                      />
+                      <Box w={200}>
+                        <Text
+                          fz="sm"
+                          c="dimmed"
+                          lineClamp={1}
+                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        />
+                      </Box>
                    </TableTd>
                    <TableTd>
                      <Button
--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx
@@ -30,17 +30,19 @@ function EditInfoTeknologiTepatGuna() {

  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
+
  const [formData, setFormData] = useState({
-    name: stateInfoTekno.findUnique.data?.name || '',
-    deskripsi: stateInfoTekno.findUnique.data?.deskripsi || '',
-    imageId: stateInfoTekno.findUnique.data?.imageId || '',
+    name: '',
+    deskripsi: '',
+    imageId: '',
  });

+  // Load data pertama kali
  useEffect(() => {
    const id = params?.id as string;
    if (!id) return;

-    const loadPenghargaan = async () => {
+    const loadData = async () => {
      try {
        const data = await stateInfoTekno.edit.load(id);
        if (data) {
@@ -58,16 +60,19 @@ function EditInfoTeknologiTepatGuna() {
      }
    };

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

+  // Submit form
  const handleSubmit = async () => {
    try {
+      // sync local → global pas submit
      stateInfoTekno.edit.form = {
        ...stateInfoTekno.edit.form,
        ...formData,
      };

+      // upload file kalau ada
      if (file) {
        const res = await ApiFetch.api.fileStorage.create.post({
          file,
@@ -119,8 +124,8 @@ function EditInfoTeknologiTepatGuna() {
          <TextInput
            label="Judul"
            placeholder="Masukkan judul info teknologi tepat guna"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
            required
          />

@@ -188,10 +193,9 @@ function EditInfoTeknologiTepatGuna() {
            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                stateInfoTekno.edit.form.deskripsi = htmlContent;
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
            />
          </Box>

--- a/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/page.tsx
@@ -55,7 +55,7 @@ function DetailInfoTeknologiTepatGuna() {
      <Paper
        withBorder
        w={{ base: "100%", md: "70%", lg: "60%" }}
-        bg={colors['white-1']}
+        bg="#ECEEF8"
        p="lg"
        radius="md"
        shadow="sm"
--- a/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/edit/page.tsx
@@ -27,14 +27,14 @@ function EditKolaborasiInovasi() {
  const params = useParams();

  const [formData, setFormData] = useState({
-    name: kolaborasiState.update.form.name || "",
-    deskripsi: kolaborasiState.update.form.deskripsi || "",
-    tahun: kolaborasiState.update.form.tahun || "",
-    slug: kolaborasiState.update.form.slug || "",
-    kolaborator: kolaborasiState.update.form.kolaborator || "",
+    name: "",
+    deskripsi: "",
+    tahun: "",
+    slug: "",
+    kolaborator: "",
  });

-  // Load data
+  // Load data awal dari server
  useEffect(() => {
    const loadKolaborasi = async () => {
      const id = params?.id as string;
@@ -44,11 +44,11 @@ function EditKolaborasiInovasi() {
        const data = await kolaborasiState.update.load(id);
        if (data) {
          setFormData({
-            name: data.name || "",
-            deskripsi: data.deskripsi || "",
-            tahun: data.tahun || "",
-            slug: data.slug || "",
-            kolaborator: data.kolaborator || "",
+            name: data.name ?? "",
+            deskripsi: data.deskripsi ?? "",
+            tahun: data.tahun?.toString() ?? "",
+            slug: data.slug ?? "",
+            kolaborator: data.kolaborator ?? "",
          });
        }
      } catch (error) {
@@ -60,6 +60,7 @@ function EditKolaborasiInovasi() {
    loadKolaborasi();
  }, [params?.id]);

+  // Handler submit → baru update global state
  const handleSubmit = async () => {
    try {
      kolaborasiState.update.form = {
@@ -70,6 +71,7 @@ function EditKolaborasiInovasi() {
        slug: formData.slug,
        kolaborator: formData.kolaborator,
      };
+
      await kolaborasiState.update.submit();
      toast.success("Kolaborasi inovasi berhasil diperbarui!");
      router.push("/admin/inovasi/kolaborasi-inovasi");
@@ -79,6 +81,11 @@ function EditKolaborasiInovasi() {
    }
  };

+  // Handler input (biar lebih DRY)
+  const handleChange = (field: keyof typeof formData, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
  return (
    <Box px={{ base: "sm", md: "lg" }} py="md">
      <Group mb="md">
@@ -104,32 +111,32 @@ function EditKolaborasiInovasi() {
          <TextInput
            label="Nama Kolaborasi"
            placeholder="Masukkan nama kolaborasi"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => handleChange("name", e.target.value)}
            required
          />

          <TextInput
            label="Deskripsi Singkat"
            placeholder="Masukkan deskripsi singkat"
-            defaultValue={formData.slug}
-            onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
+            value={formData.slug}
+            onChange={(e) => handleChange("slug", e.target.value)}
            required
          />

          <TextInput
            label="Tahun"
            placeholder="Masukkan tahun"
-            defaultValue={formData.tahun}
-            onChange={(e) => setFormData({ ...formData, tahun: e.target.value })}
+            value={formData.tahun}
+            onChange={(e) => handleChange("tahun", e.target.value)}
            required
          />

          <TextInput
            label="Kolaborator"
            placeholder="Masukkan nama kolaborator"
-            defaultValue={formData.kolaborator}
-            onChange={(e) => setFormData({ ...formData, kolaborator: e.target.value })}
+            value={formData.kolaborator}
+            onChange={(e) => handleChange("kolaborator", e.target.value)}
            required
          />

@@ -139,10 +146,7 @@ function EditKolaborasiInovasi() {
            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                kolaborasiState.update.form.deskripsi = htmlContent;
-              }}
+              onChange={(htmlContent) => handleChange("deskripsi", htmlContent)}
            />
          </Box>

--- 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
@@ -33,17 +33,22 @@ function EditMitraKolaborasi() {
  const state = useProxy(mitraKolaborasi);
  const router = useRouter();
  const params = useParams();
+
  const [previewImage, setPreviewImage] = useState<string | null>(null);
  const [file, setFile] = useState<File | null>(null);
+
+  // Local form state (controlled)
  const [formData, setFormData] = useState({
-    name: state.update.form.name || '',
-    imageId: state.update.form.imageId || '',
+    name: '',
+    imageId: '',
  });

+  // Load data ke state lokal sekali saja
  useEffect(() => {
-    const loadFoto = async () => {
+    const loadData = async () => {
      const id = params?.id as string;
      if (!id) return;
+
      try {
        const data = await state.update.load(id);
        if (data) {
@@ -51,25 +56,31 @@ function EditMitraKolaborasi() {
            name: data.name || '',
            imageId: data.imageId || '',
          });
+
          if (data?.image?.link) {
            setPreviewImage(data.image.link);
          }
        }
      } catch (error) {
-        console.error('Error loading foto:', error);
-        toast.error('Gagal memuat data foto');
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data mitra');
      }
    };
-    loadFoto();
+
+    loadData();
  }, [params?.id]);

+  const handleChange = (key: string, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  };
+
  const handleSubmit = async () => {
    try {
-      state.update.form = {
-        ...state.update.form,
-        name: formData.name,
-        imageId: formData.imageId,
-      };
+      // upload file jika ada
+      let imageId = formData.imageId;
      if (file) {
        const res = await ApiFetch.api.fileStorage.create.post({
          file,
@@ -79,8 +90,16 @@ function EditMitraKolaborasi() {
        if (!uploaded?.id) {
          return toast.error('Gagal upload gambar');
        }
-        state.update.form.imageId = uploaded.id;
+        imageId = uploaded.id;
      }
+
+      // update global state hanya saat submit
+      state.update.form = {
+        ...state.update.form,
+        name: formData.name,
+        imageId,
+      };
+
      await state.update.update();
      toast.success('Mitra berhasil diperbarui!');
      router.push('/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi');
@@ -118,8 +137,8 @@ function EditMitraKolaborasi() {
          <TextInput
            label="Nama Mitra"
            placeholder="Masukkan nama mitra"
-            defaultValue={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            value={formData.name}
+            onChange={(e) => handleChange('name', e.target.value)}
            required
          />

--- a/src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/[id]/edit/page.tsx
+++ b/src/app/admin/(dashboard)/inovasi/layanan-online-desa/jenis-layanan/[id]/edit/page.tsx
@@ -1,9 +1,19 @@
-'use client'
+'use client';
 /* eslint-disable react-hooks/exhaustive-deps */
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import layananonlineDesa from '@/app/admin/(dashboard)/_state/inovasi/layanan-online-desa';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -11,31 +21,34 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';

 function EditJenisLayanan() {
-  const state = useProxy(layananonlineDesa.jenisLayanan)
-  const router = useRouter()
-  const params = useParams()
+  const state = useProxy(layananonlineDesa.jenisLayanan);
+  const router = useRouter();
+  const params = useParams();
+
  const [formData, setFormData] = useState({
-    nama: state.edit.form.nama,
-    deskripsi: state.edit.form.deskripsi,
-  })
+    nama: '',
+    deskripsi: '',
+  });

  useEffect(() => {
    const loadJenisLayanan = async () => {
      const id = params?.id as string;
      if (!id) return;
+
      try {
        const data = await state.edit.load(id);
        if (data) {
          setFormData({
-            nama: data.nama,
-            deskripsi: data.deskripsi,
+            nama: data.nama ?? '',
+            deskripsi: data.deskripsi ?? '',
          });
        }
      } catch (error) {
-        console.error("Error loading jenis layanan:", error);
-        toast.error("Gagal memuat data jenis layanan");
+        console.error('Error loading jenis layanan:', error);
+        toast.error('Gagal memuat data jenis layanan');
      }
    };
+
    loadJenisLayanan();
  }, [params?.id]);

@@ -43,46 +56,89 @@ function EditJenisLayanan() {
    try {
      state.edit.form = {
        ...state.edit.form,
-        nama: formData.nama,
-        deskripsi: formData.deskripsi,
-      }
-      await state.edit.update()
-      toast.success("Jenis layanan berhasil diperbarui!")
-      router.push("/admin/inovasi/layanan-online-desa/jenis-layanan")
+        ...formData,
+      };
+
+      await state.edit.update();
+      toast.success('Jenis layanan berhasil diperbarui!');
+      router.push('/admin/inovasi/layanan-online-desa/jenis-layanan');
    } catch (error) {
-      console.error("Error updating jenis layanan:", error);
-      toast.error("Terjadi kesalahan saat memperbarui jenis layanan");
+      console.error('Error updating jenis layanan:', error);
+      toast.error('Terjadi kesalahan saat memperbarui jenis layanan');
    }
-  }
+  };

  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Jenis Layanan</Title>
+    <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 Jenis Layanan
+        </Title>
+      </Group>
+
+      {/* Form Container */}
+      <Paper
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Input: Nama Jenis Layanan */}
          <TextInput
-            defaultValue={formData.nama}
-            onChange={(val) => {
-              setFormData({ ...formData, nama: val.target.value });
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Jenis Layanan</Text>}
-            placeholder="masukkan nama jenis layanan"
+            label="Nama Jenis Layanan"
+            placeholder="Masukkan nama jenis layanan"
+            value={formData.nama}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, nama: e.target.value }))
+            }
+            required
          />
+
+          {/* Input: Deskripsi (Rich Text Editor) */}
          <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
            <EditEditor
              value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData({ ...formData, deskripsi: htmlContent });
-              }}
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  deskripsi: htmlContent,
+                }))
+              }
            />
          </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          {/* Tombol Submit */}
+          <Group justify="right" mt="sm">
+            <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>
        </Stack>
      </Paper>
    </Box>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nico	ed371bd0d9	Fix QC Kak Inno 24 Okt 25 Fix QC Kak Ayu 24 Okt 25 Fix QC Keano 24 Okt 25 Fix Detail Lowongan Kerja	2025-10-27 22:15:55 +08:00
nico	f82c7b86e0	27 Oct	2025-10-27 10:54:50 +08:00
nico	b5d6585cd5	27 Oct	2025-10-27 10:54:01 +08:00
nico	aa98359ef7	Fix Revisi Kak Inno 22 Oktober && Fix Revisi Kak Ayu 22 Oktober	2025-10-23 17:45:45 +08:00
nico	0ff0d5234a	Fix QC Kak Inno 21 Oktober, QC Kak Ayu 21 Oktober, QC Keano, && QC Pak Jun 21 Oktober	2025-10-22 17:00:12 +08:00
nico	827c1c191a	Revisi QC Kak Inno tanggal 20	2025-10-22 09:58:16 +08:00
nico	fb596f9033	Fix QC Kak Inno 17 Okt 25, Fix QC Kak Ayu 17 Okt 25, & Fix Qc Pak Jun 17 Okt 25	2025-10-21 12:17:30 +08:00
nico	9055b40769	Fix navbar mobile add active page	2025-10-19 18:08:49 +08:00
nico	bbf13c1cf7	Mengerjakan QC Kak Inno & Kak Ayu Tanggal 16 Oktober Fix Search	2025-10-17 17:45:56 +08:00
nico	75bf0652b1	Fix QC Kak Inno & Kak Ayu Tanggal 15 Oct	2025-10-17 10:03:03 +08:00
nico	0b574406e2	Fix QC Kak Inno : tanggal 14 Oktober Fitur Search bisa digunakan di 6 Menu, sisa 3 Menu Lagi	2025-10-15 17:29:57 +08:00
nico	ccf39bc778	Penambahan fungsi search disetiap menu & submenu, Menu Landing Page Menu PPID Menu Desa	2025-10-15 10:13:02 +08:00
nico	3c21f7742c	Yang sudh dikerjakan: - Saat Mau minjam muncul modal data diri peminjam buku V - Ada Status Peminjamannya ( status buku bisa engga otomatis dipinjemnya), kalau dikembalikan statusnya otomatis ) Yang Mau Dikerjakan: Cek fungsi menu yang kompleks	2025-10-14 10:38:55 +08:00
nico	a158241c0b	- QC User & Admin Menu Pendidikan V - Fix SubMenu : - Beasiswa Desa ( Baca Selengkapnya terdapatkan konten ) V - Info Sekolah ( Kategori Menyesuaikan Dengan Datanya ) V - Perpustakaan Digital ( V - Kategori Menyesuaikan Dengan Datanya V - Saat Mau minjam muncul modal data diri peminjam buku V - Ada Status Peminjamannya V )	2025-10-13 11:20:38 +08:00
nico	80c5dc6361	- QC User & Admin Menu Lingkungan - Fix SubMenu : Edukasi Lingkungan & Konservasi Adat Bali dibagian User - Fix SUbMenu : Gotong Royong User ( Tabs kategori menyesuaikan dengan data kategori kegiatan )	2025-10-08 17:06:21 +08:00
nico	8ad38fc907	- QC User & Admin Menu Lingkungan - Fix SubMenu : Edukasi Lingkungan & Konservasi Adat Bali dibagian User - Fix SUbMenu : Gotong Royong User ( Tabs kategori menyesuaikan dengan data kategori kegiatan )	2025-10-08 14:02:11 +08:00
nico	d601b2fee3	Fix Bug SubMenu Struktur PPID, SubMenu Struktur Organisasi BumDes	2025-10-07 14:38:20 +08:00
nico	cee0957e07	QC - User & Admin Menu Ekonomi SubMenu Pasar Desa Fix bug kategori produk	2025-10-06 10:26:59 +08:00
nico	5c66eccf23	Fix Menu Ekonomi : Pasar Desa : Kategorinya ga tampil, Bug inputan edit di submenu : Demografi pekerjaa	2025-10-04 21:34:31 +08:00
nico	f7fd9be255	QC User & Admin Responsive : Menu Kesehatan - Ekonomi	2025-10-03 10:17:06 +08:00
nico	8a6d8ed8db	QC User & Admin Responsive : Menu Landing Page - Desa	2025-10-02 00:10:33 +08:00
nico	63054cedf0	fix inputan edit menu: desa, ekonomi, inovasi, keamanan, kesehatan, landing-page, & lingkungan	2025-09-30 21:41:26 +08:00
nico	c2f1ab8179	Fix Menu Desa Admin & User	2025-09-30 17:13:06 +08:00