Merge pull request 'nico/27-okt-25' (#1) from nico/27-okt-25 into main

Reviewed-on: http://wibugit.wibudev.com/wibu/desa-darmasaba/pulls/1

.gitignore

@@ -41,6 +41,9 @@ next-env.d.ts
 # uploads
 /uploads
 
+# download
+/download
+
 # cache
 /cache
 

next.config.ts

@@ -1,6 +1,11 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  experimental: {},
+  allowedDevOrigins: [
+    "http://192.168.1.82:3000", // buat akses dari HP/device lain
+    "http://localhost:3000",   // akses lokal
+  ],
   async headers() {
     return [
       {

package.json

@@ -39,19 +39,25 @@
     "@tiptap/pm": "^2.11.7",
     "@tiptap/react": "^2.11.7",
     "@tiptap/starter-kit": "^2.11.7",
+    "@types/adm-zip": "^0.5.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",
     "bcryptjs": "^3.0.2",
     "bun": "^1.2.2",
     "chart.js": "^4.4.8",
     "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",
+    "extract-zip": "^2.0.1",
     "form-data": "^4.0.2",
     "framer-motion": "^12.23.5",
     "get-port": "^7.1.0",
@@ -67,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",
@@ -78,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",

prisma/data/desa/berita/kategori-berita.json

@@ -1,5 +1,4 @@
 [
-  { "name": "Semua" },
   { "name": "Pemerintahan" },
   { "name": "Pembangunan" },
   { "name": "Ekonomi" },

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

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/"

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"
-  }
-]

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
+  }
+
+]

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
-    }
-  ]

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"
+      }
+    ]
+  ]
+  

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
-    }
- ]
- 

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",

prisma/data/lingkungan/gotong-royong/kategori-gotong-royong.json

@@ -0,0 +1,6 @@
+[
+    { "nama": "Kebersihan" },
+    { "nama": "Infrastruktur" },
+    { "nama": "Sosial" },
+    { "nama": "Lingkungan" }
+  ]

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" }
+  ]
+  

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",

prisma/data/user/roles.json

@@ -1,29 +1,23 @@
 [
     {
-      "id": "1",
+      "id": "role-1",
       "name": "ADMIN DESA",
       "description": "Administrator Desa",
       "permissions": ["manage_users", "manage_content", "view_reports"],
-      "isActive": true,
+      "isActive": true
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
     },
     {
-      "id": "2",
+      "id": "role-2",
       "name": "ADMIN KESEHATAN",
       "description": "Administrator Bidang Kesehatan",
       "permissions": ["manage_health_data", "view_reports"],
-      "isActive": true,
+      "isActive": true
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
     },
     {
-      "id": "3",
+      "id": "role-3",
       "name": "ADMIN SEKOLAH",
       "description": "Administrator Sekolah",
       "permissions": ["manage_school_data", "view_reports"],
-      "isActive": true,
+      "isActive": true
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
     }
   ]

prisma/data/user/users.json

@@ -1,32 +1,23 @@
 [
-    {
+  {
-      "id": "1",
+    "id": "user-1",
-      "nama": "Admin Desa",
+    "nama": "Admin Desa",
-      "nomor": "089647037426",
+    "nomor": "089647037426",
-      "roleId": "1",
+    "roleId": "role-1",
-      "isActive": true,
+    "isActive": true
-      "lastLogin": "2025-08-31T10:00:00.000Z",
+  },
-      "createdAt": "2025-09-01T00:00:00.000Z",
+  {
-      "updatedAt": "2025-09-01T00:00:00.000Z"
+    "id": "user-2",
-    },
+    "nama": "Admin Kesehatan",
-    {
+    "nomor": "082339004198",
-      "id": "2",
+    "roleId": "role-2",
-      "nama": "Admin Kesehatan",
+    "isActive": true
-      "nomor": "082339004198",
+  },
-      "roleId": "2",
+  {
-      "isActive": true,
+    "id": "user-3",
-      "lastLogin": null,
+    "nama": "Admin Sekolah",
-      "createdAt": "2025-09-01T00:00:00.000Z",
+    "nomor": "085237157222",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
+    "roleId": "role-3",
-    },
+    "isActive": true
-    {
+  }
-      "id": "3",
+]
-      "nama": "Admin Sekolah",
-      "nomor": "085237157222",
-      "roleId": "3",
-      "isActive": true,
-      "lastLogin": null,
-      "createdAt": "2025-09-01T00:00:00.000Z",
-      "updatedAt": "2025-09-01T00:00:00.000Z"
-    }
-  ]

prisma/safeseedUnique.ts

@@ -0,0 +1,30 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// helpers/safeSeedUnique.ts
+import { PrismaClient } from "@prisma/client";
+
+const prisma = new PrismaClient();
+
+/**
+ * Helper generic buat seed dengan upsert aman
+ */
+export async function safeSeedUnique<T extends keyof PrismaClient>(
+  model: T,
+  where: Record<string, any>,
+  data: Record<string, any>
+) {
+  const m = prisma[model];
+
+  if (!m) throw new Error(`Model ${String(model)} tidak ditemukan di PrismaClient`);
+
+  try {
+    // @ts-expect-error upsert dynamic
+    await m.upsert({
+      where,
+      update: data,
+      create: { ...where, ...data },
+    });
+    console.log(`✅ Seeded ${String(model)} -> ${JSON.stringify(where)}`);
+  } catch (err) {
+    console.error(`❌ Gagal seed ${String(model)} -> ${JSON.stringify(where)}`, err);
+  }
+}

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())
+  id                     String                   @id @default(cuid())
-  nama               String                 @db.VarChar(100)
+  nama                   String                   @db.VarChar(100)
-  deskripsi          String?                @db.Text
+  deskripsi              String?                  @db.Text
-  hierarki           Int
+  hierarki               Int
-  pegawai            PegawaiPPID[]
+  pegawai                PegawaiPPID[]
-  strukturOrganisasi StrukturPPID[] // Relasi balik
+  strukturOrganisasi     StrukturPPID[] // Relasi balik
-  parentId           String?
+  parentId               String?
-  isActive           Boolean                @default(true)
+  isActive               Boolean                  @default(true)
-  createdAt          DateTime               @default(now())
+  createdAt              DateTime                 @default(now())
-  updatedAt          DateTime               @updatedAt
+  updatedAt              DateTime                 @updatedAt
-  parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
+  parent                 PosisiOrganisasiPPID?    @relation("Parent", fields: [parentId], references: [id])
-  children           PosisiOrganisasiPPID[] @relation("Parent")
+  children               PosisiOrganisasiPPID[]   @relation("Parent")
+  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
 }
 
 model PegawaiPPID {
-  id                 String               @id @default(cuid())
+  id                     String                   @id @default(cuid())
-  namaLengkap        String               @db.VarChar(255)
+  namaLengkap            String                   @db.VarChar(255)
-  gelarAkademik      String?              @db.VarChar(100)
+  gelarAkademik          String?                  @db.VarChar(100)
-  image              FileStorage?         @relation(fields: [imageId], references: [id])
+  image                  FileStorage?             @relation(fields: [imageId], references: [id])
-  imageId            String?
+  imageId                String?
-  tanggalMasuk       DateTime?            @db.Date
+  tanggalMasuk           DateTime?                @db.Date
-  email              String?              @unique @db.VarChar(255)
+  email                  String?                  @unique @db.VarChar(255)
-  telepon            String?              @db.VarChar(20)
+  telepon                String?                  @db.VarChar(20)
-  alamat             String?              @db.Text
+  alamat                 String?                  @db.Text
-  posisiId           String               @db.VarChar(50)
+  posisiId               String                   @db.VarChar(50)
-  isActive           Boolean              @default(true)
+  isActive               Boolean                  @default(true)
-  createdAt          DateTime             @default(now())
+  createdAt              DateTime                 @default(now())
-  updatedAt          DateTime             @updatedAt
+  updatedAt              DateTime                 @updatedAt
-  posisi             PosisiOrganisasiPPID @relation(fields: [posisiId], references: [id])
+  posisi                 PosisiOrganisasiPPID     @relation(fields: [posisiId], references: [id])
-  strukturOrganisasi StrukturPPID[] // Relasi balik
+  strukturOrganisasi     StrukturPPID[] // Relasi balik
+  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
 }
 
 model StrukturOrganisasiPPID {
-  id                   String           @id @default(uuid())
+  id                   String               @id @default(uuid())
-  posisiOrganisasiId   String           @db.VarChar(50)
+  posisiOrganisasiId   String               @db.VarChar(50)
-  pegawaiId            String           @db.Uuid
+  pegawaiId            String
-  hubunganOrganisasiId String           @db.Uuid
+  hubunganOrganisasiId String
-  posisiOrganisasi     PosisiOrganisasi @relation(fields: [posisiOrganisasiId], references: [id])
+  posisiOrganisasi     PosisiOrganisasiPPID @relation(fields: [posisiOrganisasiId], references: [id])
-  pegawai              Pegawai          @relation(fields: [pegawaiId], references: [id])
+  pegawai              PegawaiPPID          @relation(fields: [pegawaiId], references: [id])
-  createdAt            DateTime         @default(now())
+  createdAt            DateTime             @default(now())
-  updatedAt            DateTime         @updatedAt
+  updatedAt            DateTime             @updatedAt
   deletedAt            DateTime?
-  isActive             Boolean          @default(true)
+  isActive             Boolean              @default(true)
 }
 
 // ========================================= VISI MISI PPID ========================================= //
@@ -672,17 +675,18 @@ model GalleryVideo {
 
 // ========================================= LAYANAN DESA ========================================= //
 model PelayananSuratKeterangan {
-  id        String       @id @default(cuid())
+  id               String             @id @default(cuid())
-  name      String
+  name             String
-  deskripsi String       @db.Text
+  deskripsi        String             @db.Text
-  image     FileStorage? @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
+  image            FileStorage?       @relation("PelayananSuratKeteranganImage", fields: [imageId], references: [id])
-  imageId   String?
+  imageId          String?
-  image2    FileStorage? @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
+  image2           FileStorage?       @relation("PelayananSuratKeteranganImage2", fields: [image2Id], references: [id])
-  image2Id  String?
+  image2Id         String?
-  createdAt DateTime     @default(now())
+  createdAt        DateTime           @default(now())
-  updatedAt DateTime     @updatedAt
+  updatedAt        DateTime           @updatedAt
-  deletedAt DateTime     @default(now())
+  deletedAt        DateTime           @default(now())
-  isActive  Boolean      @default(true)
+  isActive         Boolean            @default(true)
+  AjukanPermohonan AjukanPermohonan[]
 }
 
 model PelayananTelunjukSaktiDesa {
@@ -717,6 +721,20 @@ model PelayananPendudukNonPermanen {
   isActive  Boolean  @default(true)
 }
 
+model AjukanPermohonan {
+  id         String                   @id @default(cuid())
+  nama       String
+  nik        String
+  alamat     String
+  nomorKk    String
+  kategori   PelayananSuratKeterangan @relation(fields: [kategoriId], references: [id])
+  kategoriId String
+  createdAt  DateTime                 @default(now())
+  updatedAt  DateTime                 @updatedAt
+  deletedAt  DateTime                 @default(now())
+  isActive   Boolean                  @default(true)
+}
+
 // ========================================= PENGHARGAAN ========================================= //
 model Penghargaan {
   id        String       @id @default(cuid())
@@ -835,8 +853,8 @@ 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
+  pendaftaranJadwalKegiatanId     String?
   createdAt                       DateTime                      @default(now())
   updatedAt                       DateTime                      @updatedAt
   deletedAt                       DateTime                      @default(now())
@@ -1152,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())
@@ -1254,15 +1273,15 @@ model KontakDaruratToItem {
 
 // ========================================= PENCEGAHAN KRIMINALITAS ========================================= //
 model PencegahanKriminalitas {
-  id                String           @id @default(cuid())
+  id               String   @id @default(cuid())
-  judul             String
+  judul            String
-  deskripsi         String
+  deskripsi        String
-  deskripsiSingkat  String
+  deskripsiSingkat String
-  linkVideo         String
+  linkVideo        String
-  createdAt         DateTime         @default(now())
+  createdAt        DateTime @default(now())
-  updatedAt         DateTime         @updatedAt
+  updatedAt        DateTime @updatedAt
-  deletedAt         DateTime         @default(now())
+  deletedAt        DateTime @default(now())
-  isActive          Boolean          @default(true)
+  isActive         Boolean  @default(true)
 }
 
 // ========================================= LAPORAN PUBLIK ========================================= //
@@ -1325,6 +1344,7 @@ model PasarDesa {
   harga            Int
   rating           Float
   alamatUsaha      String
+  kontak           String
   createdAt        DateTime          @default(now())
   updatedAt        DateTime          @updatedAt
   deletedAt        DateTime          @default(now())
@@ -1367,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())
@@ -1376,79 +1397,67 @@ model LowonganPekerjaan {
 
 // ========================================= STRUKTUR ORGANISASI ========================================= //
 
-model PosisiOrganisasi {
+model StrukturBumDes {
-  id        String  @id @default(uuid()) @db.VarChar(50)
+  id                       String                  @id @default(cuid())
-  nama      String  @db.VarChar(100)
+  name                     String                  @db.Text
-  deskripsi String? @db.Text
+  image                    FileStorage?            @relation(fields: [imageId], references: [id])
-  hierarki  Int
+  imageId                  String?
-
+  createdAt                DateTime                @default(now())
-  pegawai                Pegawai[]
+  updatedAt                DateTime                @updatedAt
-  strukturOrganisasi     StrukturOrganisasi[] // Relasi balik
+  deletedAt                DateTime                @default(now())
-  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
+  isActive                 Boolean                 @default(true)
-  isActive               Boolean                  @default(true)
+  PosisiOrganisasiBumDes   PosisiOrganisasiBumDes? @relation(fields: [posisiOrganisasiBumDesId], references: [id])
-  createdAt              DateTime                 @default(now())
+  posisiOrganisasiBumDesId String?
-  updatedAt              DateTime                 @updatedAt
+  PegawaiBumDes            PegawaiBumDes?          @relation(fields: [pegawaiBumDesId], references: [id])
-
+  pegawaiBumDesId          String?
-  @@map("posisi_organisasi")
 }
 
-model Pegawai {
+model PosisiOrganisasiBumDes {
-  id            String       @id @default(uuid()) @db.Uuid
+  id                       String                     @id @default(cuid())
-  namaLengkap   String       @db.VarChar(255)
+  nama                     String                     @db.VarChar(100)
-  gelarAkademik String?      @db.VarChar(100)
+  deskripsi                String?                    @db.Text
-  image         FileStorage? @relation(fields: [imageId], references: [id])
+  hierarki                 Int
-  imageId       String?
+  pegawai                  PegawaiBumDes[]
-  tanggalMasuk  DateTime?    @db.Date
+  strukturOrganisasi       StrukturBumDes[] // Relasi balik
-  email         String?      @unique @db.VarChar(255)
+  parentId                 String?
-  telepon       String?      @db.VarChar(20)
+  isActive                 Boolean                    @default(true)
-  alamat        String?      @db.Text
+  createdAt                DateTime                   @default(now())
-  posisiId      String       @db.VarChar(50)
+  updatedAt                DateTime                   @updatedAt
-  isActive      Boolean      @default(true)
+  parent                   PosisiOrganisasiBumDes?    @relation("Parent", fields: [parentId], references: [id])
-  createdAt     DateTime     @default(now())
+  children                 PosisiOrganisasiBumDes[]   @relation("Parent")
-  updatedAt     DateTime     @updatedAt
+  StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
-
-  posisi PosisiOrganisasi @relation(fields: [posisiId], references: [id])
-
-  sebagaiAtasan  HubunganOrganisasi[] @relation("AtasanToBawahan")
-  sebagaiBawahan HubunganOrganisasi[] @relation("BawahanToAtasan")
-
-  strukturOrganisasi     StrukturOrganisasi[] // Relasi balik
-  StrukturOrganisasiPPID StrukturOrganisasiPPID[]
-
-  @@map("pegawai")
 }
 
-model HubunganOrganisasi {
+model PegawaiBumDes {
-  id        String  @id @default(uuid()) @db.Uuid
+  id                       String                     @id @default(cuid())
-  atasanId  String  @db.Uuid
+  namaLengkap              String                     @db.VarChar(255)
-  bawahanId String  @db.Uuid
+  gelarAkademik            String?                    @db.VarChar(100)
-  tipe      String? @db.VarChar(50)
+  image                    FileStorage?               @relation(fields: [imageId], references: [id])
-
+  imageId                  String?
-  atasan  Pegawai @relation("AtasanToBawahan", fields: [atasanId], references: [id])
+  tanggalMasuk             DateTime?                  @db.Date
-  bawahan Pegawai @relation("BawahanToAtasan", fields: [bawahanId], references: [id])
+  email                    String?                    @unique @db.VarChar(255)
-
+  telepon                  String?                    @db.VarChar(20)
-  strukturOrganisasi StrukturOrganisasi[] // Relasi balik
+  alamat                   String?                    @db.Text
-
+  posisiId                 String                     @db.VarChar(50)
-  @@unique([atasanId, bawahanId])
+  isActive                 Boolean                    @default(true)
-  @@map("hubungan_organisasi")
+  createdAt                DateTime                   @default(now())
+  updatedAt                DateTime                   @updatedAt
+  posisi                   PosisiOrganisasiBumDes     @relation(fields: [posisiId], references: [id])
+  strukturOrganisasi       StrukturBumDes[] // Relasi balik
+  StrukturOrganisasiBumDes StrukturOrganisasiBumDes[]
 }
 
-model StrukturOrganisasi {
+model StrukturOrganisasiBumDes {
-  id                   String @id @default(uuid())
+  id                   String                 @id @default(uuid())
-  posisiOrganisasiId   String @db.VarChar(50)
+  posisiOrganisasiId   String                 @db.VarChar(50)
-  pegawaiId            String @db.Uuid
+  pegawaiId            String
-  hubunganOrganisasiId String @db.Uuid
+  hubunganOrganisasiId String
-
+  posisiOrganisasi     PosisiOrganisasiBumDes @relation(fields: [posisiOrganisasiId], references: [id])
-  posisiOrganisasi   PosisiOrganisasi   @relation(fields: [posisiOrganisasiId], references: [id])
+  pegawai              PegawaiBumDes          @relation(fields: [pegawaiId], references: [id])
-  pegawai            Pegawai            @relation(fields: [pegawaiId], references: [id])
+  createdAt            DateTime               @default(now())
-  hubunganOrganisasi HubunganOrganisasi @relation(fields: [hubunganOrganisasiId], references: [id])
+  updatedAt            DateTime               @updatedAt
-
+  deletedAt            DateTime?
-  createdAt DateTime  @default(now())
+  isActive             Boolean                @default(true)
-  updatedAt DateTime  @updatedAt
-  deletedAt DateTime?
-  isActive  Boolean   @default(true)
-
-  @@map("struktur_organisasi")
 }
 
 // ========================================= PROGRAM KEMISKINAN ========================================= //
@@ -1597,7 +1606,7 @@ model Pembiayaan {
   ApbDesa   ApbDesa[] @relation("ApbDesaPembiayaan")
 }
 
-// ========================================= INOVASI ========================================= //
+// ========================================= MENU INOVASI ========================================= //
 // ========================================= DESA DIGITAL / SMART VILLAGE ========================================= //
 model DesaDigital {
   id        String      @id @default(cuid())
@@ -2078,6 +2087,9 @@ model DataPerpustakaan {
   updatedAt  DateTime     @updatedAt
   deletedAt  DateTime     @default(now())
   isActive   Boolean      @default(true)
+
+  // relasi baru ke peminjaman
+  peminjamanBuku PeminjamanBuku[]
 }
 
 model KategoriBuku {
@@ -2090,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 {

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-bumdes.json";
-import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
+import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi-bumdes.json";
-import posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi.json";
+import kategoriBerita from "./data/desa/berita/kategori-berita.json";
-import kategoriBerita from "./data/kategori-berita.json";
 import contohEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/contoh-kegiatan-di-desa-darmasaba.json";
 import materiEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
 import tujuanEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json";
 import bentukKonservasiBerdasarkanAdat from "./data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json";
+import 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,9 @@ 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";
 
 (async () => {
   // =========== USER & ROLE ===========
@@ -63,23 +66,14 @@ import fileStorage from "./data/file-storage.json";
   // =========== ROLES ===========
   console.log("🔄 Seeding roles...");
   for (const r of roles) {
-    await prisma.role.upsert({
+    await safeSeedUnique("role", { id: r.id }, {
-      where: { id: r.id },
+      name: r.name,
-      update: {
+      description: r.description,
-        name: r.name,
+      permissions: r.permissions,
-        description: r.description,
+      isActive: r.isActive,
-        permissions: r.permissions,
-        isActive: r.isActive,
-      },
-      create: {
-        id: r.id,
-        name: r.name,
-        description: r.description,
-        permissions: r.permissions,
-        isActive: r.isActive,
-      },
     });
   }
+
   console.log("✅ Roles seeded");
 
   // =========== USERS ===========
@@ -95,22 +89,12 @@ import fileStorage from "./data/file-storage.json";
       continue;
     }
 
-    await prisma.user.upsert({
+    await safeSeedUnique("user", { id: u.id }, {
-      where: { id: u.id },
+      username: u.nama,
-      update: {
+      nomor: u.nomor,
-        username: u.nama,
+      roleId: u.roleId,
-        nomor: u.nomor,
-        roleId: u.roleId,
         isActive: u.isActive,
-      },
+      });
-      create: {
-        id: u.id,
-        username: u.nama,
-        nomor: u.nomor,
-        roleId: u.roleId,
-        isActive: u.isActive,
-      },
-    });
   }
   console.log("✅ Users seeded");
 
@@ -364,6 +348,7 @@ import fileStorage from "./data/file-storage.json";
         jumlah: l.jumlah,
       },
       create: {
+        id: l.id,
         name: l.name,
         jumlah: l.jumlah,
       },
@@ -823,28 +808,34 @@ import fileStorage from "./data/file-storage.json";
   }
   console.log("kategori produk success ...");
 
-  for (const p of posisiOrganisasi) {
+  const flattenedPosisiBumdes = posisiOrganisasi.flat();
-    await prisma.posisiOrganisasi.upsert({
+
-      where: {
+  // ✅ Urutkan berdasarkan hierarki
-        id: p.id,
+  const sortedPosisiBumdes = flattenedPosisiBumdes.sort((a, b) => a.hierarki - b.hierarki);
-      },
+
-      update: {
+  for (const p of sortedPosisiBumdes) {
-        nama: p.nama,
+    console.log(`Seeding: ${p.nama} (id: ${p.id}, parent: ${p.parentId})`);
-        deskripsi: p.deskripsi,
+
-        hierarki: p.hierarki,
+    if (p.parentId) {
-      },
+      const parentExists = flattenedPosisi.some((pos) => pos.id === p.parentId);
-      create: {
+      if (!parentExists) {
-        id: p.id,
+        console.warn(
-        nama: p.nama,
+          `⚠️ Parent tidak ditemukan: ${p.parentId} untuk ${p.nama}`
-        deskripsi: p.deskripsi,
+        );
-        hierarki: p.hierarki,
+        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,
       },
@@ -873,26 +864,6 @@ import fileStorage from "./data/file-storage.json";
   }
   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: {
@@ -916,6 +887,30 @@ import fileStorage from "./data/file-storage.json";
   }
   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: {
@@ -1169,6 +1164,26 @@ import fileStorage from "./data/file-storage.json";
   console.log(
     "✅ 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();
+
 })()
   .then(() => prisma.$disconnect())
   .catch((e) => {

prisma/seed_assets.ts

@@ -0,0 +1,118 @@
+// prisma/seedAssets.ts
+import fs from "fs/promises";
+import path from "path";
+import sharp from "sharp";
+import fetch from "node-fetch";
+import AdmZip from "adm-zip";
+import prisma from "@/lib/prisma";
+
+const UPLOADS_DIR =
+  process.env.WIBU_UPLOAD_DIR || path.join(process.cwd(), "uploads");
+
+// --- Helper: deteksi kategori file ---
+function detectCategory(filename: string): "image" | "document" | "other" {
+  const ext = path.extname(filename).toLowerCase();
+  if ([".jpg", ".jpeg", ".png", ".webp"].includes(ext)) return "image";
+  if ([".pdf", ".doc", ".docx"].includes(ext)) return "document";
+  return "other";
+}
+
+// --- Helper: recursive walk dir ---
+async function walkDir(dir: string, fileList: string[] = []): Promise<string[]> {
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      if (entry.name === "__MACOSX") continue; // skip folder sampah
+      await walkDir(fullPath, fileList);
+    } else {
+      if (entry.name.startsWith(".") || entry.name === ".DS_Store") continue; // skip file sampah
+      fileList.push(fullPath);
+    }
+  }
+
+  return fileList;
+}
+
+export default async function seedAssets() {
+  console.log("🚀 Seeding assets...");
+
+  // 1. Download zip
+  const url =
+    "https://cld-dkr-makuro-seafile.wibudev.com/f/ffd5a548a04f47939474/?dl=1";
+  const res = await fetch(url);
+  if (!res.ok) throw new Error(`Gagal download assets: ${res.statusText}`);
+  const buffer = Buffer.from(await res.arrayBuffer());
+
+  // 2. Extract zip ke folder tmp
+  const extractDir = path.join(process.cwd(), "tmp_assets");
+  await fs.rm(extractDir, { recursive: true, force: true });
+  await fs.mkdir(extractDir, { recursive: true });
+
+  const zip = new AdmZip(buffer);
+  zip.extractAllTo(extractDir, true);
+
+  // 3. Cari semua file valid (recursive)
+  const files = await walkDir(extractDir);
+
+  // 4. Loop tiap file & simpan
+  for (const filePath of files) {
+    const entryName = path.basename(filePath);
+    const category = detectCategory(entryName);
+
+    let finalName = entryName;
+    let mimeType = "application/octet-stream";
+    let targetPath = "";
+
+    if (category === "image") {
+      const fileBaseName = path.parse(entryName).name;
+      finalName = `${fileBaseName}.webp`;
+      targetPath = path.join(UPLOADS_DIR, "images", finalName);
+      await fs.mkdir(path.dirname(targetPath), { recursive: true });
+      await sharp(filePath).webp({ quality: 80 }).toFile(targetPath);
+      mimeType = "image/webp";
+    } else if (category === "document") {
+      targetPath = path.join(UPLOADS_DIR, "documents", entryName);
+      await fs.mkdir(path.dirname(targetPath), { recursive: true });
+      await fs.copyFile(filePath, targetPath);
+      mimeType = "application/pdf";
+    } else {
+      targetPath = path.join(UPLOADS_DIR, "other", entryName);
+      await fs.mkdir(path.dirname(targetPath), { recursive: true });
+      await fs.copyFile(filePath, targetPath);
+    }
+
+    // 5. Simpan ke DB
+    await prisma.fileStorage.create({
+      data: {
+        name: finalName,
+        realName: entryName,
+        path: targetPath,
+        mimeType,
+        link: `/uploads/${category}/${finalName}`,
+        category,
+      },
+    });
+
+    console.log(`📂 saved: ${category}/${finalName}`);
+  }
+
+  // 6. Cleanup
+  await fs.rm(extractDir, { recursive: true, force: true });
+
+  console.log("✅ Selesai seed assets!");
+}
+
+// --- Auto run kalau dipanggil langsung ---
+if (import.meta.main) {
+  seedAssets()
+    .catch((err) => {
+      console.error("❌ Error seeding assets:", err);
+      process.exit(1);
+    })
+    .finally(async () => {
+      await prisma.$disconnect();
+    });
+}

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: {

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

@@ -71,6 +71,22 @@ const pelayananPendudukNonPermanenForm = {
   deskripsi: "",
 };
 
+const templateAjukanForm = z.object({
+  nama: z.string().min(1).max(5000),
+  nik: z.string().min(1).max(5000),
+  alamat: z.string().min(1).max(5000),
+  nomorKk: z.string().min(1).max(5000),
+  kategoriId: z.string().min(1).max(5000),
+});
+
+const defaultAjukanForm = {
+  nama: "",
+  nik: "",
+  alamat: "",
+  nomorKk: "",
+  kategoriId: "",
+};
+
 const suratKeterangan = proxy({
   create: {
     form: { ...suratKeteranganForm },
@@ -146,6 +162,30 @@ const suratKeterangan = proxy({
       }
     },
   },
+  findManyAll: {
+    data: null as Prisma.PelayananSuratKeteranganGetPayload<{
+      omit: { isActive: true };
+    }>[] | null,
+    loading: false,
+    load: async () => {
+      suratKeterangan.findManyAll.loading = true;
+      try {
+        const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan["findManyAll"].get();
+
+        if (res.status === 200 && res.data?.success) {
+          suratKeterangan.findManyAll.data = res.data.data || [];
+        } else {
+          suratKeterangan.findManyAll.data = [];
+          console.error("Failed to load surat keterangan all:", res.data?.message);
+        }
+      } catch (error) {
+        console.error("Error loading surat keterangan all:", error);
+        suratKeterangan.findManyAll.data = [];
+      } finally {
+        suratKeterangan.findManyAll.loading = false;
+      }
+    },
+  },
   findUnique: {
     data: null as Prisma.PelayananSuratKeteranganGetPayload<{
       include: {
@@ -541,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;
+        this.loading = true;
-        const res = await fetch(
+        const response = await fetch(`/api/desa/layanan/pelayananperizinanberusaha/${id}`);
-          `/api/desa/layanan/pelayananperizinanberusaha/${id}`
+        if (!response.ok) {
-        );
+          throw new Error(`HTTP error! status: ${response.status}`);
-        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;
         }
+        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);
+        console.error('Error loading data:', error);
-        pelayananPerizinanBerusaha.findById.data = null;
+        toast.error('Gagal memuat data');
+        return null;
+      } finally {
+        this.loading = false;
       }
     },
   },
@@ -769,11 +800,250 @@ const pelayananPendudukNonPermanen = proxy({
   },
 });
 
+const ajukanPermohonan = proxy({
+  create: {
+    form: { ...defaultAjukanForm },
+    loading: false,
+    async create() {
+      const cek = templateAjukanForm.safeParse(
+        ajukanPermohonan.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        ajukanPermohonan.create.loading = true;
+        const res = await ApiFetch.api.desa.ajukanpermohonan[
+          "create"
+        ].post(ajukanPermohonan.create.form);
+        if (res.status === 200) {
+          ajukanPermohonan.findMany.load();
+          return toast.success("Ajukan permohonan berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan ajukan permohonan");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        ajukanPermohonan.create.loading = false;
+      }
+    },
+    resetForm() {
+      ajukanPermohonan.create.form = { ...defaultAjukanForm };
+    },
+  },
+  findMany: {
+    data: null as Prisma.AjukanPermohonanGetPayload<{
+      include: {
+        kategori: true;
+      };
+    }>[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      ajukanPermohonan.findMany.loading = true; // Use the full path to access the property
+      ajukanPermohonan.findMany.page = page;
+      ajukanPermohonan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res = await ApiFetch.api.desa.ajukanpermohonan[
+          "findMany"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          ajukanPermohonan.findMany.data = res.data.data || [];
+          ajukanPermohonan.findMany.total = res.data.total || 0;
+          ajukanPermohonan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load ajukan permohonan:", res.data?.message);
+          ajukanPermohonan.findMany.data = [];
+          ajukanPermohonan.findMany.total = 0;
+          ajukanPermohonan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading ajukan permohonan:", error);
+        ajukanPermohonan.findMany.data = [];
+        ajukanPermohonan.findMany.total = 0;
+        ajukanPermohonan.findMany.totalPages = 1;
+      } finally {
+        ajukanPermohonan.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.AjukanPermohonanGetPayload<{
+      include: {
+        kategori: true;
+      }
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/desa/ajukanpermohonan/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          ajukanPermohonan.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch ajukan permohonan:", res.statusText);
+          ajukanPermohonan.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching ajukan permohonan:", error);
+        ajukanPermohonan.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        ajukanPermohonan.delete.loading = true;
+        const response = await fetch(
+          `/api/desa/ajukanpermohonan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Ajukan permohonan berhasil dihapus");
+          await ajukanPermohonan.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus ajukan permohonan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus ajukan permohonan");
+      } finally {
+        ajukanPermohonan.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultAjukanForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(
+          `/api/desa/ajukanpermohonan/${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,
+            nik: data.nik,
+            alamat: data.alamat,
+            nomorKk: data.nomorKk,
+            kategoriId: data.kategoriId,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching ajukan permohonan:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateAjukanForm.safeParse(
+        ajukanPermohonan.edit.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        ajukanPermohonan.edit.loading = true;
+        const response = await fetch(
+          `/api/desa/ajukanpermohonan/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              nama: this.form.nama,
+              nik: this.form.nik,
+              alamat: this.form.alamat,
+              nomorKk: this.form.nomorKk,
+              kategoriId: this.form.kategoriId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Ajukan permohonan berhasil diupdate");
+          await ajukanPermohonan.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(
+            result.message || "Gagal mengupdate ajukan permohonan"
+          );
+        }
+      } catch (error) {
+        console.error("Error updating ajukan permohonan:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update ajukan permohonan"
+        );
+        return false;
+      } finally {
+        ajukanPermohonan.edit.loading = false;
+      }
+    },
+  },
+});
+
 const stateLayananDesa = proxy({
   suratKeterangan,
   pelayananPerizinanBerusaha,
   pelayananTelunjukSaktiDesa,
   pelayananPendudukNonPermanen,
+  ajukanPermohonan,
 });
 
 export default stateLayananDesa;

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) {

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

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"][
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi']['posisi-organisasi']['create'].post(this.form);
-          "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 = "") => {
+    load: async (page = 1, limit?: number, search = "") => {
-      posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
+      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(),
+  gelarAkademik: z.string().min(1, "Gelar Akademik wajib diisi"),
-  imageId: z.string().nullable().optional(),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
-  tanggalMasuk: z.string().optional(), // ISO format
+  tanggalMasuk: z.string().min(1, "Tanggal masuk wajib diisi"), // ISO format
   email: z.string().email("Email tidak valid").optional(),
-  telepon: z.string().optional(),
+  telepon: z.string().min(1, "Telepom wajib diisi"),
-  alamat: z.string().optional(),
+  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"][
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi'].pegawai['create'].post(
-          "pegawai"
+          pegawai.create.form
-        ]["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: {
+  findMany: {
-  data: null as any[] | null,
+    data: null as
-  page: 1,
+      | Prisma.PegawaiBumDesGetPayload<{
-  totalPages: 1,
+          include: {
-  total: 0,
+            image: true;
-  loading: false,
+            posisi: true;
-  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;
+      | null,
-    try {
+    page: 1,
-      const res = await ApiFetch.api.ekonomi["struktur-organisasi"][
+    totalPages: 1,
-        "pegawai"
+    total: 0,
-      ]["find-many"].get({
+    loading: false,
-        query: { page, limit },
+    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) {
+        const res = await ApiFetch.api.ekonomi['struktur-organisasi'].pegawai['find-many'].get({
-        pegawai.findMany.data = res.data.data || [];
+          query,
-        pegawai.findMany.total = res.data.total || 0;
+        });
-        pegawai.findMany.totalPages = res.data.totalPages || 1;
+
-      } else {
+        if (res.status === 200 && res.data?.success) {
-        console.error("Failed to load pegawai:", res.data?.message);
+          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(
+        const res = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/del/${id}`, {
-          `/api/ekonomi/struktur-organisasi/pegawai/del/${id}`,
+          method: "DELETE",
-          {
+        });
-            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(
+        const response = await fetch(`/api/ekonomi/struktur-organisasi/pegawai/${id}`, {
-          `/api/ekonomi/struktur-organisasi/pegawai/${id}`,
+          method: "GET",
-          {
+          headers: {
-            method: "GET",
+            "Content-Type": "application/json",
-            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 stateStrukturBumDes = proxy({
-const templateHubunganOrganisasiForm = z.object({
+  stateStruktur,
-  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({
   posisiOrganisasi,
   pegawai,
-  hubunganOrganisasi,
 });
 
-export default strukturorganisasiState;
+export default stateStrukturBumDes;

src/app/admin/(dashboard)/_state/kesehatan/data_kesehatan_warga/jadwalKegiatan.ts

@@ -26,14 +26,6 @@ const templateForm = z.object({
   dokumenJadwalKegiatan: z.object({
     content: z.string().min(1, "Content minimal 1 karakter"),
   }),
-  pendaftaranJadwalKegiatan: z.object({
-    name: z.string().min(1, "Name minimal 1 karakter"),
-    tanggal: z.string().min(1, "Tanggal minimal 1 karakter"),
-    namaOrangtua: z.string().min(1, "Nama Orangtua minimal 1 karakter"),
-    nomor: z.string().min(1, "Nomor minimal 1 karakter"),
-    alamat: z.string().min(1, "Alamat minimal 1 karakter"),
-    catatan: z.string().min(1, "Catatan minimal 1 karakter"),
-  }),
 });
 
 const defaultForm = {
@@ -55,15 +47,7 @@ const defaultForm = {
   },
   dokumenJadwalKegiatan: {
     content: "",
-  },
+  }
-  pendaftaranJadwalKegiatan: {
-    name: "",
-    tanggal: "",
-    namaOrangtua: "",
-    nomor: "",
-    alamat: "",
-    catatan: "",
-  },
 };
 
 const jadwalkegiatanState = proxy({
@@ -116,7 +100,6 @@ const jadwalkegiatanState = proxy({
             deskripsijadwalkegiatan: true;
             layananjadwalkegiatan: true;
             dokumenjadwalkegiatan: true;
-            pendaftaranjadwalkegiatan: true;
           };
         }>[]
       | null,
@@ -161,7 +144,6 @@ const jadwalkegiatanState = proxy({
         layananjadwalkegiatan: true;
         syaratketentuanjadwalkegiatan: true;
         dokumenjadwalkegiatan: true;
-        pendaftaranjadwalkegiatan: true;
       };
     }> | null,
     loading: false,
@@ -209,15 +191,7 @@ const jadwalkegiatanState = proxy({
         },
         dokumenJadwalKegiatan: {
           content: data.dokumenjadwalkegiatan.content,
-        },
+        }
-        pendaftaranJadwalKegiatan: {
-          name: data.pendaftaranjadwalkegiatan.name,
-          tanggal: data.pendaftaranjadwalkegiatan.tanggal,
-          namaOrangtua: data.pendaftaranjadwalkegiatan.namaOrangtua,
-          nomor: data.pendaftaranjadwalkegiatan.nomor,
-          alamat: data.pendaftaranjadwalkegiatan.alamat,
-          catatan: data.pendaftaranjadwalkegiatan.catatan,
-        },
       };
     },
     async submit() {
@@ -259,20 +233,6 @@ const jadwalkegiatanState = proxy({
             content:
               jadwalkegiatanState.edit.form.dokumenJadwalKegiatan.content,
           },
-          pendaftaranJadwalKegiatan: {
-            name: jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.name,
-            tanggal:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.tanggal,
-            namaOrangtua:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan
-                .namaOrangtua,
-            nomor:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.nomor,
-            alamat:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.alamat,
-            catatan:
-              jadwalkegiatanState.edit.form.pendaftaranJadwalKegiatan.catatan,
-          },
         };
 
         const res = await fetch(

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

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

@@ -388,16 +388,15 @@ const pejabatDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
+        // Ensure ID is properly encoded in the URL
-          `/api/landingpage/pejabatdesa/${this.id}`,
+        const url = new URL(`/api/landingpage/pejabatdesa/${encodeURIComponent(this.id)}`, window.location.origin);
-          {
+        const response = await fetch(url.toString(), {
-            method: "PUT",
+          method: "PUT",
-            headers: {
+          headers: {
-              "Content-Type": "application/json",
+            "Content-Type": "application/json",
-            },
+          },
-            body: JSON.stringify(this.form),
+          body: JSON.stringify(this.form),
-          }
+        });
-        );
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));

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

src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital.ts

@@ -55,46 +55,95 @@ const dataPerpustakaan = proxy({
     },
   },
   findMany: {
-      data: null as
+    data: null as
-        | Prisma.DataPerpustakaanGetPayload<{
+      | Prisma.DataPerpustakaanGetPayload<{
-            include: {
+          include: {
-              image: true;
+            image: true;
-              kategori: true;
+            kategori: true;
-            };
+          };
-          }>[]
+        }>[]
-        | null,
+      | null,
-      page: 1,
+    page: 1,
-      totalPages: 1,
+    totalPages: 1,
-      loading: false,
+    loading: false,
-      search: "",
+    search: "",
-     load: async (page = 1, limit = 10, search = "", kategori = "") => {
+    load: async (page = 1, limit = 10, search = "", kategori = "") => {
-        dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
+      const startTime = Date.now();
-        dataPerpustakaan.findMany.page = page;
+      dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
-        dataPerpustakaan.findMany.search = search;
+      dataPerpustakaan.findMany.page = page;
-    
+      dataPerpustakaan.findMany.search = search;
-        try {
+
-          const query: any = { page, limit };
+      try {
-          if (search) query.search = search;
+        const query: any = { page, limit };
-          if (kategori) query.kategori = kategori;
+        if (search) query.search = search;
-      
+        if (kategori) query.kategori = kategori;
-          const res = await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan["findMany"].get({ query });
+
-      
+        const res =
-          if (res.status === 200 && res.data?.success) {
+          await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
-            dataPerpustakaan.findMany.data = res.data.data ?? [];
+            "findMany"
-            dataPerpustakaan.findMany.totalPages = res.data.totalPages ?? 1;
+          ].get({ query });
-          } else {
+
-            dataPerpustakaan.findMany.data = [];
+        if (res.status === 200 && res.data?.success) {
-            dataPerpustakaan.findMany.totalPages = 1;
+          dataPerpustakaan.findMany.data = res.data.data ?? [];
-          }
+          dataPerpustakaan.findMany.totalPages = res.data.totalPages ?? 1;
-        } catch (err) {
+        } else {
-          console.error("Gagal fetch data perpustakaan paginated:", err);
           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;

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({

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;

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 },

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

@@ -4,7 +4,7 @@ import colors from '@/con/colors';
 import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { IconFileText, IconBuildingStore, IconSparkles, IconUsers } from '@tabler/icons-react';
+import { IconFileText, IconBuildingStore, IconSparkles, IconUsers, IconUsersPlus } from '@tabler/icons-react';
 
 function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
     const router = useRouter()
@@ -37,6 +37,13 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
             href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent",
             icon: <IconUsers size={18} stroke={1.8} />,
             tooltip: "Pendataan penduduk non-permanent"
+        },
+        {
+            label: "Ajukan Permohonan",
+            value: "ajukanpermohonan",
+            href: "/admin/desa/layanan/ajukan_permohonan",
+            icon: <IconUsersPlus size={18} stroke={1.8} />,
+            tooltip: "Ajukan permohonan"
         }
     ];
 

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"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={handleChange}
             required
           />
 

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

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -62,9 +61,9 @@ function CreateKategoriBerita() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Berita</Text>}
+            label="Nama Kategori Berita"
             placeholder="Masukkan nama kategori berita"
-            value={createState.create.form.name || ''}
+            defaultValue={createState.create.form.name || ''}
             onChange={(e) => (createState.create.form.name = e.target.value)}
             required
           />

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 || "",
+    judul: "",
-    deskripsi: beritaState.berita.edit.form.deskripsi || "",
+    deskripsi: "",
-    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || "",
+    kategoriBeritaId: "",
-    content: beritaState.berita.edit.form.content || "",
+    content: "",
-    imageId: beritaState.berita.edit.form.imageId || "",
+    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"]}
@@ -132,22 +145,41 @@ function EditBerita() {
             label="Judul"
             placeholder="Masukkan judul"
             value={formData.judul}
-            onChange={(e) =>
+            onChange={(e) => handleChange("judul", e.target.value)}
-              setFormData({ ...formData, judul: e.target.value })
-            }
             required
           />
 
-          <TextInput
+          <Select
-            label="Deskripsi"
+            value={formData.kategoriBeritaId}
-            placeholder="Masukkan deskripsi"
+            onChange={(val) => handleChange("kategoriBeritaId", val || "")}
-            value={formData.deskripsi}
+            label="Kategori"
-            onChange={(e) =>
+            placeholder="Pilih kategori"
-              setFormData({ ...formData, deskripsi: e.target.value })
+            data={
+              beritaState.kategoriBerita.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
             }
+            clearable
+            searchable
             required
+            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
+          <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
@@ -160,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"
@@ -168,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} />
@@ -204,38 +242,20 @@ function EditBerita() {
             )}
           </Box>
 
+          {/* Konten */}
           <Box>
             <Text fz="sm" fw="bold">
               Konten
             </Text>
             <EditEditor
               value={formData.content}
-              onChange={(htmlContent) => {
+              onChange={(htmlContent) =>
-                setFormData((prev) => ({ ...prev, content: htmlContent }));
+                setFormData((prev) => ({ ...prev, content: htmlContent }))
-                beritaState.berita.edit.form.content = htmlContent;
+              }
-              }}
             />
           </Box>
 
-          <Select
+          {/* Action */}
-            value={formData.kategoriBeritaId}
-            onChange={(val) =>
-              setFormData({ ...formData, kategoriBeritaId: val || "" })
-            }
-            label="Kategori"
-            placeholder="Pilih kategori"
-            data={
-              beritaState.kategoriBerita.findMany.data?.map((v) => ({
-                value: v.id,
-                label: v.name,
-              })) || []
-            }
-            clearable
-            searchable
-            required
-            error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
-          />
-
           <Group justify="right">
             <Button
               onClick={handleSubmit}

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">{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }} />
               </Box>
 
               <Box>

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

@@ -100,7 +100,7 @@ export default function CreateBerita() {
           <TextInput
             label="Judul"
             placeholder="Masukkan judul berita"
-            value={beritaState.berita.create.form.judul}
+            defaultValue={beritaState.berita.create.form.judul}
             onChange={(e) => (beritaState.berita.create.form.judul = e.target.value)}
             required
           />
@@ -112,7 +112,7 @@ export default function CreateBerita() {
               label: item.name,
               value: item.id,
             }))}
-            value={beritaState.berita.create.form.kategoriBeritaId || null}
+            defaultValue={beritaState.berita.create.form.kategoriBeritaId || null}
             onChange={(val: string | null) => {
               if (val) {
                 const selected = beritaState.kategoriBerita.findMany.data?.find(
@@ -131,12 +131,17 @@ export default function CreateBerita() {
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold" mb={6}>
-            placeholder="Masukkan deskripsi berita"
+              Deskripsi Singkat
-            value={beritaState.berita.create.form.deskripsi}
+            </Text>
-            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
+            <CreateEditor
-          />
+              value={beritaState.berita.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                beritaState.berita.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
 
           <Box>
             <Text fw="bold" fz="sm" mb={6}>

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

@@ -5,7 +5,6 @@ import {
   Button,
   Center,
   Group,
-  Image,
   Pagination,
   Paper,
   Skeleton,
@@ -18,7 +17,7 @@ import {
   TableTr,
   Text,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
@@ -87,7 +86,6 @@ function ListBerita({ search }: { search: string }) {
               <TableTr>
                 <TableTh style={{ width: '30%' }}>Judul</TableTh>
                 <TableTh style={{ width: '20%' }}>Kategori</TableTh>
-                <TableTh style={{ width: '25%' }}>Gambar</TableTh>
                 <TableTh style={{ width: '15%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
@@ -96,7 +94,7 @@ function ListBerita({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd style={{ width: '30%' }}>
-                      <Box w={200}>
+                      <Box w={150}>
                         <Text fw={500} truncate="end" lineClamp={1}>
                           {item.judul}
                         </Text>
@@ -107,19 +105,6 @@ function ListBerita({ search }: { search: string }) {
                         {item.kategoriBerita?.name || '-'}
                       </Text>
                     </TableTd>
-                    <TableTd style={{ width: '25%' }}>
-                      <Box
-                        w={80}
-                        h={80}
-                        style={{ borderRadius: 8, overflow: 'hidden' }}
-                      >
-                        {item.image?.link ? (
-                          <Image loading='lazy' src={item.image.link} alt="gambar" fit="cover" />
-                        ) : (
-                          <Box bg={colors['blue-button']} w="100%" h="100%" />
-                        )}
-                      </Box>
-                    </TableTd>
                     <TableTd style={{ width: '15%' }}>
                       <Button
                         variant="light"

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;
-//   }
-  

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 || '',
+            name: data.name ?? '',
-            deskripsi: data.deskripsi || '',
+            deskripsi: data.deskripsi ?? '',
-            linkVideo: data.linkVideo || '',
+            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>
@@ -103,7 +117,7 @@ function EditVideo() {
             label="Judul Video"
             placeholder="Masukkan judul video"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange('name', e.currentTarget.value)}
             required
           />
 
@@ -112,7 +126,7 @@ function EditVideo() {
               label="Link Video YouTube"
               placeholder="https://www.youtube.com/watch?v=abc123"
               value={formData.linkVideo}
-              onChange={(e) => setFormData({ ...formData, linkVideo: e.currentTarget.value })}
+              onChange={(e) => 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>
 

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

@@ -102,6 +102,7 @@ function DetailVideo() {
                     fz="md"
                     c="dimmed"
                     dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                    style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                   />
                 ) : (
                   <Text fz="sm" c="dimmed">Tidak ada deskripsi</Text>

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

@@ -80,7 +80,7 @@ function CreateVideo() {
           <TextInput
             label="Judul Video"
             placeholder="Masukkan judul video"
-            value={videoState.create.form.name}
+            defaultValue={videoState.create.form.name}
             onChange={(e) => {
               videoState.create.form.name = e.currentTarget.value;
             }}
@@ -91,7 +91,7 @@ function CreateVideo() {
           <TextInput
             label="Link Video YouTube"
             placeholder="https://www.youtube.com/watch?v=abc123"
-            value={link}
+            defaultValue={link}
             onChange={(e) => setLink(e.currentTarget.value)}
             required
           />

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

@@ -0,0 +1,178 @@
+/* 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,
+} 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 EditAjukanPermohonan() {
+  const router = useRouter();
+  const params = useParams();
+  const stateAjukan = useProxy(stateLayananDesa.ajukanPermohonan);
+
+  // State lokal form
+  const [formData, setFormData] = useState({
+    nama: '',
+    nik: '',
+    alamat: '',
+    nomorKk: '',
+    kategoriId: '',
+  });
+
+  // Load data awal
+  useEffect(() => {
+    stateLayananDesa.suratKeterangan.findManyAll.load();
+
+    const loadAjukan = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      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');
+      }
+    };
+
+    loadAjukan();
+  }, [params?.id]);
+
+  // 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)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditAjukanPermohonan;

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

@@ -0,0 +1,172 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailAjukanPermohonan() {
+  const ajukanPermohonanState = useProxy(stateLayananDesa.ajukanPermohonan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
+
+  useShallowEffect(() => {
+    ajukanPermohonanState.findUnique.load(params?.id as string);
+  }, []);
+
+  const handleHapus = () => {
+    if (selectedId) {
+      ajukanPermohonanState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/desa/layanan/ajukan_permohonan');
+    }
+  };
+
+  if (!ajukanPermohonanState.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
+  }
+
+  const data = ajukanPermohonanState.findUnique.data;
+
+  return (
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Surat Keterangan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Nama
+                </Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
+                  {data?.nama || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  NIK
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.nik || '-'}
+                </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">
+                  Nomor KK
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.nomorKk || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Kategori
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.kategori.name || '-'}
+                </Text>
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Surat" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={ajukanPermohonanState.delete.loading}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Surat" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/desa/layanan/ajukan_permohonan/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah Anda yakin ingin menghapus ajukan permohonan ini?"
+      />
+    </Box>
+  );
+}
+
+export default DetailAjukanPermohonan;

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

@@ -0,0 +1,155 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import {
+  Box,
+  Button,
+  Center,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title
+} from '@mantine/core';
+import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import stateLayananDesa from '../../../_state/desa/layananDesa';
+
+function AjukanPermohonan() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Pelayanan Ajukan Permohonan'
+        placeholder='Cari nama atau deskripsi...'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListAjukanPermohonan search={search} />
+    </Box>
+  );
+}
+
+function ListAjukanPermohonan({ search }: { search: string }) {
+  const AjukanPermohonanState = useProxy(stateLayananDesa.ajukanPermohonan);
+  const router = useRouter();
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = AjukanPermohonanState.findMany;
+
+  useEffect(() => {
+    load(page, 10, search);
+  }, [page, search]);
+
+  // Loading state
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Title order={4}>List Ajukan Permohonan</Title>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Nama</TableTh>
+                <TableTh style={{ width: '45%' }}>Alamat</TableTh>
+                <TableTh style={{ width: '15%' }}>NIK</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {data.length > 0 ? (
+                data.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '30%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.nama}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '45%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.alamat}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '45%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.nik}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '15%' }}>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(`/admin/desa/layanan/ajukan_permohonan/${item.id}`)
+                        }
+                      >
+                        Detail
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data ajukan permohonan yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default AjukanPermohonan;

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 params = useParams();
-  const statePendudukNonPermanent = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
+  const statePendudukNonPermanent = useProxy(
-  const [formData, setFormData] = useState({
+    stateLayananDesa.pelayananPendudukNonPermanen
-    name: statePendudukNonPermanent.findById.data?.name || '',
+  );
-    deskripsi: statePendudukNonPermanent.findById.data?.deskripsi || '',
-  })
 
+  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);
+        console.error('Error loading data:', error);
-        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+        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) {
+    if (!statePendudukNonPermanent.findById.data) return;
-      statePendudukNonPermanent.findById.data.name = formData.name;
+
-      statePendudukNonPermanent.findById.data.deskripsi = formData.deskripsi;
+    // Update global state hanya di submit
-      statePendudukNonPermanent.update.update(statePendudukNonPermanent.findById.data)
+    const updated = {
-    }
+      ...statePendudukNonPermanent.findById.data,
-    router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent')
+      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"
@@ -77,22 +114,18 @@ function EditPelayananPendudukNonPermanent() {
               label="Judul"
               placeholder="Masukkan judul"
               value={formData.name}
-              onChange={(e) =>
+              onChange={(e) => handleChange('name')(e.target.value)}
-                setFormData({ ...formData, name: e.target.value })
-              }
               required
             />
 
-            {/* Posisi Field */}
+            {/* Deskripsi Field */}
             <Box>
               <Text fz="sm" fw="bold">
                 Deskripsi
               </Text>
               <EditEditor
                 value={formData.deskripsi}
-                onChange={(htmlContent) => {
+                onChange={handleChange('deskripsi')}
-                  setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                }}
               />
             </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

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}`
                   )
                 }
               >
@@ -91,6 +91,7 @@ function PelayananPendudukNonPermanent() {
                 ta="justify"
                 fz={{ base: '1rem', md: '1.2rem' }}
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{wordBreak: "break-word", whiteSpace: "normal"}}
               />
             </Box>
           </Box>

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 params = useParams<{ id: string }>();
-  const statePerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
+  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 || '',
+    id: '',
-    deskripsi: statePerizinanBerusaha.findById.data?.deskripsi || '',
+    name: '',
-    link: statePerizinanBerusaha.findById.data?.link || '',
+    deskripsi: '',
-  })
+    link: '',
+  });
 
+  // Load data detail
   useEffect(() => {
-    const loadPelayananPerizinan = async () => {
+    if (!id) {
-      const id = params?.id as string;
+      toast.error("ID tidak valid");
-      if (!id) return;
+      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 || '',
+            id: data.id,
-            deskripsi: data.deskripsi || '',
+            name: data.name || "",
-            link: data.link || '',
+            deskripsi: data.deskripsi || "",
+            link: data.link || "",
           });
+        } else {
+          toast.error("Data tidak ditemukan");
         }
       } catch (error) {
-        console.error("Error loading pelayanan perizinan berusaha:", error);
+        console.error("Error loading data:", error);
-        toast.error("Gagal memuat data pelayanan perizinan berusaha");
+        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) {
+    try {
-      statePerizinanBerusaha.findById.data.name = formData.name;
+      await state.update.update(formData);
-      statePerizinanBerusaha.findById.data.deskripsi = formData.deskripsi;
+      router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha');
-      statePerizinanBerusaha.findById.data.link = formData.link;
+    } catch (error) {
-      statePerizinanBerusaha.update.update(statePerizinanBerusaha.findById.data)
+      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"
               value={formData.name}
-              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              onChange={(e) => handleChange('name')(e.target.value)}
               required
             />
 
-            {/* Link Field */}
             <TextInput
               label="Link"
               placeholder="Masukkan link terkait"
               value={formData.link}
-              onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+              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>

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 { useEffect, useState } from 'react';
-import { 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(() => {
+  useEffect(() => {
-    pelayananPerizinanBerusaha.findById.load('1');
+    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}`
                   )
                 }
               >
@@ -101,6 +125,7 @@ function PerizinanBerusaha() {
                 ta="justify"
                 fz={{ base: '1rem', md: '1.2rem' }}
                 dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                style={{wordBreak: "break-word", whiteSpace: "normal"}}
               />
 
               <Text
@@ -182,3 +207,4 @@ function PerizinanBerusaha() {
 }
 
 export default PerizinanBerusaha;
+

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);
+  // state lokal untuk form
-  const [previewImage2, setPreviewImage2] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-  const [file2, setFile2] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    name: stateSurat.edit.form.name,
+    name: '',
-    deskripsi: stateSurat.edit.form.deskripsi,
+    deskripsi: '',
-    imageId: stateSurat.edit.form.imageId,
+    imageId: '',
-    image2Id: stateSurat.edit.form.image2Id,
+    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) {
+        if (!data) return;
-          setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            imageId: data.imageId || '',
-            image2Id: data.image2Id || '',
-          });
 
-          setPreviewImage(data.image?.link || null);
+        setFormData((prev) => ({
-          setPreviewImage2(data.image2?.link || null);
+          ...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);
+        console.error("Error loading surat:", error);
-        toast.error('Gagal memuat data surat');
+        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"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            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) => {

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

@@ -95,6 +95,7 @@ function DetailSuratKeterangan() {
                   dangerouslySetInnerHTML={{
                     __html: data?.deskripsi || '-',
                   }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

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

@@ -106,9 +106,9 @@ function CreateSuratKeterangan() {
         <Stack gap="md">
           {/* Nama Surat */}
           <TextInput
-            value={stateSurat.create.form.name}
+            defaultValue={stateSurat.create.form.name}
             onChange={(val) => (stateSurat.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Nama Surat Keterangan</Text>}
+            label="Nama Surat Keterangan"
             placeholder="Masukkan nama surat keterangan"
             required
           />

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

@@ -119,6 +119,7 @@ function ListSuratKeterangan({ search }: { search: string }) {
                       <Box w={200}>
                         <Text truncate="end" lineClamp={1} fz="sm" c="dimmed"
                           dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                          style={{wordBreak: "break-word", whiteSpace: "normal"}}
                         />
                       </Box>
                     </TableTd>

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,
+    name: '',
-    deskripsi: stateTelunjukDesa.edit.form.deskripsi,
+    deskripsi: '',
-    link: stateTelunjukDesa.edit.form.link,
+    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 || '',
+            name: data.name ?? '',
-            deskripsi: data.deskripsi || '',
+            deskripsi: data.deskripsi ?? '',
-            link: data.link || '',
+            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 = {
@@ -95,27 +105,25 @@ function EditPelayananTelunjukSakti() {
             label="Nama Pelayanan"
             placeholder="Masukkan nama pelayanan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange('name', e.target.value)}
             required
           />
 
-          {/* Deskripsi pakai editor */}
+          {/* Deskripsi */}
-          <Box>
+          <TextInput
-            <Text fz="sm" fw="bold" mb={6}>
+            value={formData.deskripsi}
-              Deskripsi
+            onChange={(e) => handleChange('deskripsi', e.target.value)}
-            </Text>
+            label="Judul Link"
-            <EditEditor
+            placeholder="Masukkan judul link"
-              value={formData.deskripsi}
+            required
-              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
+          />
-            />
-          </Box>
 
           {/* Link */}
           <TextInput
             label="Link"
-            placeholder="Masukkan link terkait"
+            placeholder="Masukkan alamat link"
             value={formData.link}
-            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+            onChange={(e) => handleChange('link', e.target.value)}
           />
 
           {/* Tombol Simpan */}

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

@@ -103,6 +103,7 @@ function DetailPelayananTelunjukSakti() {
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
                       whiteSpace: 'nowrap',
+                      wordBreak: "break-word",
                     }}
                   >
                     {data.link}
@@ -124,6 +125,7 @@ function DetailPelayananTelunjukSakti() {
                   dangerouslySetInnerHTML={{
                     __html: data?.deskripsi || '-',
                   }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

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

@@ -8,15 +8,14 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
 
 function CreatePelayananTelunjukDesa() {
   const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
@@ -68,33 +67,35 @@ function CreatePelayananTelunjukDesa() {
         <Stack gap="md">
           {/* Nama */}
           <TextInput
-            value={stateTelunjukDesa.create.form.name}
+            defaultValue={stateTelunjukDesa.create.form.name}
             onChange={(val) => {
               stateTelunjukDesa.create.form.name = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Nama Pelayanan</Text>}
+            label="Nama Pelayanan"
             placeholder="Masukkan nama pelayanan telunjuk sakti desa"
             required
           />
 
           {/* Deskripsi */}
           <TextInput
-            value={stateTelunjukDesa.create.form.deskripsi}
+            defaultValue={stateTelunjukDesa.create.form.deskripsi}
             onChange={(val) => {
               stateTelunjukDesa.create.form.deskripsi = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            label="Judul Link"
-            placeholder="Masukkan deskripsi pelayanan"
+            placeholder="Masukkan judul link"
+            required
           />
 
           {/* Link */}
           <TextInput
-            value={stateTelunjukDesa.create.form.link}
+            defaultValue={stateTelunjukDesa.create.form.link}
             onChange={(val) => {
               stateTelunjukDesa.create.form.link = val.target.value;
             }}
-            label={<Text fz="sm" fw="bold">Link</Text>}
+            label="Link"
             placeholder="Masukkan link pelayanan"
+            required
           />
 
           {/* Tombol Simpan */}

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

@@ -261,7 +261,7 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
                     <TableTd>
                       <Box w={200}>
                         <a href={item.link} target="_blank" rel="noopener noreferrer">
-                          <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
+                          <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} style={{wordBreak: "break-word", whiteSpace: "normal"}} truncate="end" fz={"sm"} />
                         </a>
                       </Box>
                     </TableTd>

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 statePenghargaan = useProxy(penghargaanState);
-  const router = useRouter()
+  const router = useRouter();
-  const params = useParams()
+  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 [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);
+        console.error('Error loading penghargaan:', error);
-        toast.error("Gagal memuat data penghargaan");
+        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,
+        ...formData,
-        juara: formData.juara,
+      };
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-      }
 
+      // 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!");
+      toast.success('Penghargaan berhasil diperbarui!');
-      router.push("/admin/desa/penghargaan");
+      router.push('/admin/desa/penghargaan');
     } catch (error) {
-      console.error("Error updating penghargaan:", error);
+      console.error('Error updating penghargaan:', error);
-      toast.error("Terjadi kesalahan saat memperbarui penghargaan");
+      toast.error('Terjadi kesalahan saat memperbarui penghargaan');
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -123,7 +127,7 @@ function EditPenghargaan() {
             label="Judul"
             placeholder="Masukkan judul penghargaan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
             required
           />
 
@@ -132,7 +136,7 @@ function EditPenghargaan() {
             label="Juara"
             placeholder="Masukkan juara"
             value={formData.juara}
-            onChange={(e) => setFormData({ ...formData, juara: e.target.value })}
+            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) => {
+              onChange={(htmlContent) =>
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
-                statePenghargaan.edit.form.deskripsi = htmlContent;
+              }
-              }}
             />
           </Box>
 

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

@@ -122,6 +122,7 @@ function DetailPenghargaan() {
                   fz="md"
                   c="dimmed"
                   dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

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

@@ -87,17 +87,17 @@ function CreatePenghargaan() {
       >
         <Stack gap="md">
           <TextInput
-            value={statePenghargaan.create.form.name}
+            defaultValue={statePenghargaan.create.form.name}
             onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Nama Penghargaan</Text>}
+            label="Nama Penghargaan"
             placeholder="Masukkan nama penghargaan"
             required
           />
 
           <TextInput
-            value={statePenghargaan.create.form.juara}
+            defaultValue={statePenghargaan.create.form.juara}
             onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
-            label={<Text fz="sm" fw="bold">Juara</Text>}
+            label="Juara"
             placeholder="Masukkan juara"
             required
           />

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

@@ -108,6 +108,7 @@ function ListPenghargaan({ search }: { search: string }) {
                           fz="sm"
                           c="dimmed"
                           dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                          style={{wordBreak: "break-word", whiteSpace: "normal"}}
                         />
                       </Box>
                     </TableTd>

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 {
@@ -11,7 +12,6 @@ import {
   TextInput,
   Title,
   Tooltip,
-  Text,
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -24,10 +24,9 @@ function EditKategoriPengumuman() {
   const router = useRouter();
   const params = useParams();
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState({ name: '' });
-    name: editState.update.form.name || '',
-  });
 
+  // Load data awal sekali aja
   useEffect(() => {
     const loadKategori = async () => {
       const id = params?.id as string;
@@ -36,9 +35,7 @@ function EditKategoriPengumuman() {
       try {
         const data = await editState.update.load(id);
         if (data) {
-          setFormData({
+          setFormData({ name: data.name || '' });
-            name: data.name || '',
-          });
         }
       } catch (error) {
         console.error('Error loading kategori Pengumuman:', error);
@@ -49,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,
@@ -95,16 +100,10 @@ function EditKategoriPengumuman() {
       >
         <Stack gap="md">
           <TextInput
-            label={
+            label="Nama Kategori Pengumuman"
-              <Text fz="sm" fw="bold">
-                Nama Kategori Pengumuman
-              </Text>
-            }
             placeholder="Masukkan nama kategori Pengumuman"
             value={formData.name}
-            onChange={(e) =>
+            onChange={(e) => handleChange('name', e.target.value)}
-              setFormData({ ...formData, name: e.target.value })
-            }
             required
           />
 

src/app/admin/(dashboard)/desa/pengumuman/kategori-pengumuman/create/page.tsx

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -62,9 +61,9 @@ function CreateKategoriPengumuman() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Pengumuman</Text>}
+            label="Nama Kategori Pengumuman"
             placeholder="Masukkan nama kategori pengumuman"
-            value={createState.create.form.name || ''}
+            defaultValue={createState.create.form.name || ''}
             onChange={(e) => (createState.create.form.name = e.target.value)}
             required
           />

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 || "",
+    judul: "",
-    deskripsi: editState.pengumuman.edit.form.deskripsi || "",
+    deskripsi: "",
-    categoryPengumumanId:
+    categoryPengumumanId: "",
-      editState.pengumuman.edit.form.categoryPengumumanId || "",
+    content: "",
-    content: editState.pengumuman.edit.form.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,
@@ -109,7 +113,7 @@ function EditPengumuman() {
             label="Judul Pengumuman"
             placeholder="Masukkan judul"
             value={formData.judul}
-            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            onChange={(e) => handleChange("judul", e.target.value)}
             required
           />
 
@@ -117,17 +121,13 @@ function EditPengumuman() {
             label="Deskripsi Singkat"
             placeholder="Masukkan deskripsi"
             value={formData.deskripsi}
-            onChange={(e) =>
+            onChange={(e) => handleChange("deskripsi", e.target.value)}
-              setFormData({ ...formData, deskripsi: e.target.value })
-            }
             required
           />
 
           <Select
             value={formData.categoryPengumumanId}
-            onChange={(val) =>
+            onChange={(val) => handleChange("categoryPengumumanId", val || "")}
-              setFormData({ ...formData, categoryPengumumanId: val || "" })
-            }
             label="Kategori"
             placeholder="Pilih kategori"
             data={
@@ -150,9 +150,7 @@ function EditPengumuman() {
             </Text>
             <EditEditor
               value={formData.content}
-              onChange={(htmlContent) =>
+              onChange={(htmlContent) => handleChange("content", htmlContent)}
-                setFormData({ ...formData, content: htmlContent })
-              }
             />
           </Box>
 

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/[id]/page.tsx

@@ -97,7 +97,7 @@ export default function DetailPengumuman() {
                 <Text fz="lg" fw="bold">
                   Deskripsi
                 </Text>
-                <Text fz="md" c="dimmed">
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
                   {data?.deskripsi || '-'}
                 </Text>
               </Box>
@@ -112,6 +112,7 @@ export default function DetailPengumuman() {
                   dangerouslySetInnerHTML={{
                     __html: data?.content || '-',
                   }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/create/page.tsx

@@ -68,16 +68,16 @@ function CreatePengumuman() {
         <Stack gap="md">
           {/* Judul */}
           <TextInput
-            value={pengumumanState.pengumuman.create.form.judul}
+            defaultValue={pengumumanState.pengumuman.create.form.judul}
             onChange={(val) => (pengumumanState.pengumuman.create.form.judul = val.target.value)}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
+            label="Judul"
             placeholder="Masukkan judul pengumuman"
             required
           />
 
           {/* Kategori */}
           <Select
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
             value={pengumumanState.pengumuman.create.form.categoryPengumumanId || ""}
             onChange={(val) => {
@@ -93,9 +93,9 @@ function CreatePengumuman() {
 
           {/* Deskripsi Singkat */}
           <TextInput
-            value={pengumumanState.pengumuman.create.form.deskripsi}
+            defaultValue={pengumumanState.pengumuman.create.form.deskripsi}
             onChange={(val) => (pengumumanState.pengumuman.create.form.deskripsi = val.target.value)}
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+            label="Deskripsi Singkat"
             placeholder="Masukkan deskripsi singkat"
             required
           />

src/app/admin/(dashboard)/desa/pengumuman/list-pengumuman/page.tsx

@@ -94,9 +94,11 @@ function ListPengumuman({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Box w={150}>
-                        {item.judul}
+                        <Text fw={500} truncate="end" lineClamp={1}>
-                      </Text>
+                          {item.judul}
+                        </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Text fz="sm" c="dimmed">

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>
@@ -90,11 +104,11 @@ function EditKategoriPotensi() {
             label="Nama Kategori Potensi"
             placeholder="Masukkan nama kategori potensi"
             value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.currentTarget.value)}
             required
           />
 
-          <Group justify="right">
+          <Group justify="flex-end">
             <Button
               onClick={handleSubmit}
               radius="md"

src/app/admin/(dashboard)/desa/potensi/kategori-potensi/create/page.tsx

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -62,9 +61,9 @@ function CreateKategoriPotensi() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Kategori Potensi</Text>}
+            label="Nama Kategori Potensi"
             placeholder="Masukkan nama kategori potensi"
-            value={createState.create.form.nama || ''}
+            defaultValue={createState.create.form.nama || ''}
             onChange={(e) => (createState.create.form.nama = e.target.value)}
             required
           />

src/app/admin/(dashboard)/desa/potensi/kategori-potensi/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
+import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination, Group } from '@mantine/core';
 import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -60,7 +60,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
     <Box py={10}>
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Stack>
-          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
+          <Group justify="space-between">
             <Title order={4}>List Kategori Potensi</Title>
             <Tooltip label="Tambah Kategori Potensi" withArrow>
               <Button
@@ -72,7 +72,7 @@ function ListKategoriPotensi({ search }: { search: string }) {
                 Tambah Baru
               </Button>
             </Tooltip>
-          </Box>
+          </Group>
 
           <Box style={{ overflowX: 'auto' }}>
             <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>

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 = {
+      let imageId = formData.imageId;
-        ...potensiState.edit.form,
-        ...formData,
-      };
 
       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>
@@ -123,21 +150,25 @@ function EditPotensi() {
             label="Judul Potensi"
             placeholder="Masukkan judul"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange("name", e.target.value)}
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold" mb={6}>
-            placeholder="Masukkan deskripsi"
+              Deskripsi Singkat
-            value={formData.deskripsi}
+            </Text>
-            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            <EditEditor
-            required
+              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>
 

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">{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
               </Box>
 
               <Box>
@@ -103,6 +103,7 @@ export default function DetailPotensi() {
                   fz="md"
                   c="dimmed"
                   dangerouslySetInnerHTML={{ __html: data.content || '-' }}
+                  style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                 />
               </Box>
 

src/app/admin/(dashboard)/desa/potensi/list-potensi/create/page.tsx

@@ -93,25 +93,29 @@ function CreatePotensi() {
         <Stack gap="md">
           {/* Judul */}
           <TextInput
-            value={potensiState.create.form.name}
+            defaultValue={potensiState.create.form.name}
             onChange={(val) => (potensiState.create.form.name = val.target.value)}
-            label={<Text fz="sm" fw="bold">Judul</Text>}
+            label="Judul"
             placeholder="Masukkan judul potensi"
             required
           />
 
           {/* Deskripsi */}
-          <TextInput
+          <Box>
-            value={potensiState.create.form.deskripsi}
+            <Text fz="sm" fw="bold" mb={6}>
-            onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
+              Deskripsi Singkat
-            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            </Text>
-            placeholder="Masukkan deskripsi singkat"
+            <CreateEditor
-            required
+              value={potensiState.create.form.deskripsi}
-          />
+              onChange={(htmlContent) => {
+                potensiState.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
 
           {/* Kategori */}
           <Select
-            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
             value={potensiState.create.form.kategoriId || ""}
             onChange={(val) => {

src/app/admin/(dashboard)/desa/potensi/list-potensi/page.tsx

@@ -102,19 +102,25 @@ function ListPotensi({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Box w={200}>
-                        {item.name}
+                        <Text fw={500} truncate="end" lineClamp={1}>
-                      </Text>
+                          {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" }}
                         />
                       </Box>
                     </TableTd>

src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/lambang_desa/page.tsx

@@ -115,7 +115,7 @@ function Page() {
                         <TextInput
                             label={<Text fw="bold">Judul</Text>}
                             placeholder="Judul lambang"
-                            value={lambangState.update.form.judul}
+                            defaultValue={lambangState.update.form.judul}
                             onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
                             error={!lambangState.update.form.judul && "Judul wajib diisi"}
                         />

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.imageId) continue; // kalau benar2 kosong, skip
-          if (!img.preview) continue;
+          uploadedImages.push({ imageId: img.imageId, label: img.label });
-          uploadedImages.push({ 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);
@@ -175,7 +177,7 @@ function Page() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul maskot"
-              value={formData.judul}
+              defaultValue={formData.judul}
               onChange={(e) => setFormData({ ...formData, judul: e.currentTarget.value })}
               error={!formData.judul && "Judul wajib diisi"}
             />

src/app/admin/(dashboard)/desa/profile/profile-desa/[id]/sejarah_desa/page.tsx

@@ -116,7 +116,7 @@ function Page() {
                         <TextInput
                             label={<Text fw="bold">Judul</Text>}
                             placeholder="Judul sejarah"
-                            value={sejarahState.update.form.judul}
+                            defaultValue={sejarahState.update.form.judul}
                             onChange={(e) => sejarahState.update.form.judul = e.currentTarget.value}
                             error={!sejarahState.update.form.judul && "Judul wajib diisi"}
                         />

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

@@ -70,7 +70,7 @@ function Page() {
                   </Paper>
                 </Stack>
                 <Divider my="md" color={colors['blue-button']} />
-                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: sejarah.deskripsi }} />
+                <Text fz={{ base: "md", md: "h3" }} style={{wordBreak: "break-word", whiteSpace: "normal"}} ta="justify" dangerouslySetInnerHTML={{ __html: sejarah.deskripsi }} />
               </Paper>
             </Box>
           </Paper>
@@ -118,9 +118,9 @@ function Page() {
                 </Stack>
                 <Divider my="md" color={colors['blue-button']} />
                 <Text fw="bold" fz={{ base: "lg", md: "h2" }}>Visi Desa</Text>
-                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: visiMisi.visi }} />
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: visiMisi.visi }} />
                 <Text fw="bold" fz={{ base: "lg", md: "h2" }}>Misi Desa</Text>
-                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: visiMisi.misi }} />
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: visiMisi.misi }} />
               </Paper>
             </Box>
           </Paper>
@@ -162,12 +162,12 @@ 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>
                 <Divider my="md" color={colors['blue-button']} />
-                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: lambang.deskripsi }} />
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: lambang.deskripsi }} />
               </Paper>
             </Box>
           </Paper>
@@ -214,9 +214,9 @@ function Page() {
                   </Paper>
                 </Stack>
                 <Divider my="md" color={colors['blue-button']} />
-                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
+                <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>

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 || '',
+    nama: '',
-    daerah: state.update.form.daerah || '',
+    daerah: '',
-    periode: state.update.form.periode || '',
+    periode: '',
-    imageId: state.update.form.imageId || ''
+    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) {
@@ -107,7 +120,7 @@ function EditPerbekelDariMasaKeMasa() {
             label="Nama"
             placeholder="Masukkan nama"
             value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            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>
             )}
@@ -171,7 +184,7 @@ function EditPerbekelDariMasaKeMasa() {
             label="Daerah"
             placeholder="Masukkan daerah"
             value={formData.daerah}
-            onChange={(e) => setFormData({ ...formData, daerah: e.target.value })}
+            onChange={(e) => handleChange('daerah', e.target.value)}
             required
           />
 
@@ -179,7 +192,7 @@ function EditPerbekelDariMasaKeMasa() {
             label="Periode"
             placeholder="Masukkan periode"
             value={formData.periode}
-            onChange={(e) => setFormData({ ...formData, periode: e.target.value })}
+            onChange={(e) => handleChange('periode', e.target.value)}
             required
           />
 

src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/create/page.tsx

@@ -70,23 +70,23 @@ function CreatePerbekelDariMasaKeMasa() {
       >
         <Stack gap="md">
           <TextInput
-            label={<Text fw="bold" fz="sm">Nama Perbekel</Text>}
+            label="Nama Perbekel"
             placeholder="Masukkan nama perbekel"
-            value={state.create.form.nama}
+            defaultValue={state.create.form.nama}
             onChange={(e) => (state.create.form.nama = e.target.value)}
             required
           />
           <TextInput
-            label={<Text fw="bold" fz="sm">Daerah</Text>}
+            label="Daerah"
             placeholder="Masukkan daerah"
-            value={state.create.form.daerah}
+            defaultValue={state.create.form.daerah}
             onChange={(e) => (state.create.form.daerah = e.target.value)}
             required
           />
           <TextInput
-            label={<Text fw="bold" fz="sm">Periode</Text>}
+            label="Periode"
             placeholder="Masukkan periode"
-            value={state.create.form.periode}
+            defaultValue={state.create.form.periode}
             onChange={(e) => (state.create.form.periode = e.target.value)}
             required
           />

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
+                      <Box w={200}>
-                        size="xs"
+                        <Button
-                        radius="md"
+                          size="xs"
-                        variant="light"
+                          radius="md"
-                        color="blue"
+                          variant="light"
-                        leftSection={<IconDeviceImacCog size={16} />}
+                          color="blue"
-                        onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
+                          leftSection={<IconDeviceImacCog size={16} />}
-                      >
+                          onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
-                        Detail
+                        >
-                      </Button>
+                          Detail
+                        </Button>
+                      </Box>
                     </TableTd>
                   </TableTr>
                 ))

src/app/admin/(dashboard)/desa/profile/profile-perbekel/page.tsx

@@ -97,16 +97,16 @@ function Page() {
           {/* Biodata & Info */}
           <Box mt="lg">
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Biodata</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
 
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
 
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman Organisasi</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
 
             <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Program Kerja Unggulan</Text>
-            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
           </Box>
         </Paper>
       </Stack>

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 || '',
+    tahun: '',
-    pendapatanIds: apbState.update.form.pendapatanIds || [],
+    pendapatanIds: [] as string[],
-    belanjaIds: apbState.update.form.belanjaIds || [],
+    belanjaIds: [] as string[],
-    pembiayaanIds: apbState.update.form.pembiayaanIds || [],
+    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),
@@ -112,9 +117,7 @@ function EditAPBDesa() {
           <TextInput
             type="number"
             value={formData.tahun}
-            onChange={(e) =>
+            onChange={(e) => handleChange("tahun", e.target.value)}
-              setFormData({ ...formData, 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) =>
+            onSelectionChange={(ids) => handleChange("pendapatanIds", ids)}
-              setFormData({ ...formData, pendapatanIds: ids })
-            }
           />
 
           <SelectBelanja
             selectedIds={formData.belanjaIds}
-            onSelectionChange={(ids) =>
+            onSelectionChange={(ids) => handleChange("belanjaIds", ids)}
-              setFormData({ ...formData, belanjaIds: ids })
-            }
           />
 
           <SelectPembiayaan
             selectedIds={formData.pembiayaanIds}
-            onSelectionChange={(ids) =>
+            onSelectionChange={(ids) => handleChange("pembiayaanIds", ids)}
-              setFormData({ ...formData, 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(() => {

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/apbdesa/create/page.tsx

@@ -65,7 +65,7 @@ function CreateAPBDesa() {
         <Stack gap="md">
           <TextInput
             type="number"
-            value={apbDesaState.create.form.tahun}
+            defaultValue={apbDesaState.create.form.tahun}
             onChange={(val) => {
               apbDesaState.create.form.tahun = Number(val.target.value);
             }}

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 || '',
+    name: '',
-    value: belanjaState.update.form.value || '',
+    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">
@@ -113,18 +119,20 @@ function EditBelanja() {
             label="Nama Jenis Belanja"
             placeholder="Masukkan nama jenis belanja"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) =>
+              setFormData({ ...formData, name: e.target.value })
+            }
             required
           />
 
           <TextInput
             label="Nilai"
             placeholder="Masukkan nilai"
-            value={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
           />

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/belanja/create/page.tsx

@@ -85,7 +85,7 @@ function CreateBelanja() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nama Jenis Belanja</Text>}
             placeholder="Masukkan nama jenis belanja"
-            value={belanjaState.create.form.name}
+            defaultValue={belanjaState.create.form.name}
             onChange={(e) => (belanjaState.create.form.name = e.target.value)}
             required
           />
@@ -94,7 +94,7 @@ function CreateBelanja() {
             type="text"
             label={<Text fw="bold" fz="sm">Nilai</Text>}
             placeholder="Masukkan nilai belanja"
-            value={formatRupiah(belanjaState.create.form.value)}
+            defaultValue={formatRupiah(belanjaState.create.form.value)}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               belanjaState.create.form.value = unformatRupiah(raw);

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 || '',
+    name: '',
-    value: pembiayaanState.update.form.value || '',
+    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
@@ -113,18 +116,20 @@ function EditPembiayaan() {
             label="Nama Jenis Pembiayaan"
             placeholder="Masukkan nama jenis pembiayaan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) =>
+              setFormData((prev) => ({ ...prev, name: e.target.value }))
+            }
             required
           />
 
           <TextInput
             label="Nilai"
             placeholder="Masukkan nilai"
-            value={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
           />

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pembiayaan/create/page.tsx

@@ -85,7 +85,7 @@ function CreatePembiayaan() {
           <TextInput
             label={<Text fw="bold" fz="sm">Nama Jenis Pembiayaan</Text>}
             placeholder="Masukkan nama jenis pembiayaan"
-            value={pembiayaanState.create.form.name}
+            defaultValue={pembiayaanState.create.form.name}
             onChange={(e) => {
               pembiayaanState.create.form.name = e.currentTarget.value;
             }}
@@ -96,7 +96,7 @@ function CreatePembiayaan() {
             type="text"
             label={<Text fw="bold" fz="sm">Nilai</Text>}
             placeholder="Masukkan nilai"
-            value={formatRupiah(pembiayaanState.create.form.value)}
+            defaultValue={formatRupiah(pembiayaanState.create.form.value)}
             onChange={(e) => {
               const raw = e.currentTarget.value;
               pembiayaanState.create.form.value = unformatRupiah(raw);

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 || '',
+    name: '',
-    value: pendapatanState.update.form.value || '',
+    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 || '',
+            name: data.name ?? '',
-            value: data.value || '',
+            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 = {
@@ -111,18 +123,18 @@ function EditPendapatan() {
             label="Nama Jenis Pendapatan"
             placeholder="Masukkan nama jenis pendapatan"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={(e) => handleChange('name', e.target.value)}
             required
           />
 
           <TextInput
             label="Nilai"
             placeholder="Masukkan nilai"
-            value={formatRupiah(formData.value)}
+            value={formData.value ? formatRupiah(formData.value) : ''}
             onChange={(e) => {
               const raw = e.currentTarget.value;
-              const cleanValue = unformatRupiah(raw);
+              const cleanValue = unformatRupiah(raw).toString();
-              setFormData({ ...formData, value: cleanValue });
+              handleChange('value', cleanValue);
             }}
             required
           />

src/app/admin/(dashboard)/ekonomi/PADesa-pendapatan-asli-desa/pendapatan/create/page.tsx

@@ -7,10 +7,9 @@ import {
   Group,
   Paper,
   Stack,
-  Text,
   TextInput,
   Title,
-  Tooltip,
+  Tooltip
 } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -76,32 +75,24 @@ function CreatePendapatan() {
       >
         <Stack gap="md">
           <TextInput
-            value={pendapatanState.create.form.name}
+            defaultValue={pendapatanState.create.form.name}
             onChange={(val) => {
               pendapatanState.create.form.name = val.target.value;
             }}
-            label={
+            label="Nama Jenis Pendapatan"
-              <Text fw="bold" fz="sm">
-                Nama Jenis Pendapatan
-              </Text>
-            }
             placeholder="Masukkan nama jenis pendapatan"
             required
           />
 
           <TextInput
             type="text"
-            value={formatRupiah(pendapatanState.create.form.value)}
+            defaultValue={formatRupiah(pendapatanState.create.form.value)}
             onChange={(val) => {
               const raw = val.currentTarget.value;
               const cleanValue = unformatRupiah(raw);
               pendapatanState.create.form.value = cleanValue;
             }}
-            label={
+            label="Nilai"
-              <Text fw="bold" fz="sm">
-                Nilai
-              </Text>
-            }
             placeholder="Masukkan nilai"
             required
           />

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
+    const loadData = async () => {
-      .load(id)
+      try {
-      .then(() => {
+        stateDemografi.update.id = id;
+        await stateDemografi.findUnique.load(id);
+
         const data = stateDemografi.findUnique.data;
         if (data) {
-          stateDemografi.update.form = {
+          setFormData({
-            pekerjaan: String(data.pekerjaan || ''),
+            pekerjaan: data.pekerjaan ?? '',
-            lakiLaki: Number(data.lakiLaki || 0),
+            lakiLaki: Number(data.lakiLaki ?? 0),
-            perempuan: Number(data.perempuan || 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"
-            value={stateDemografi.update.form.pekerjaan}
+            value={formData.pekerjaan}
-            onChange={(e) =>
+            onChange={handleChange('pekerjaan')}
-              (stateDemografi.update.form.pekerjaan = e.currentTarget.value)
-            }
             required
           />
 
@@ -102,12 +133,8 @@ function EditDemografiPekerjaan() {
             label="Jumlah Pekerja Laki-laki"
             type="number"
             placeholder="Masukkan jumlah pekerja laki-laki"
-            value={stateDemografi.update.form.lakiLaki}
+            value={formData.lakiLaki}
-            onChange={(e) =>
+            onChange={handleChange('lakiLaki')}
-              (stateDemografi.update.form.lakiLaki = Number(
-                e.currentTarget.value
-              ))
-            }
             required
           />
 
@@ -115,12 +142,8 @@ function EditDemografiPekerjaan() {
             label="Jumlah Pekerja Perempuan"
             type="number"
             placeholder="Masukkan jumlah pekerja perempuan"
-            value={stateDemografi.update.form.perempuan}
+            value={formData.perempuan}
-            onChange={(e) =>
+            onChange={handleChange('perempuan')}
-              (stateDemografi.update.form.perempuan = Number(
-                e.currentTarget.value
-              ))
-            }
             required
           />
 
@@ -143,5 +166,3 @@ function EditDemografiPekerjaan() {
     </Box>
   );
 }
-
-export default EditDemografiPekerjaan;

src/app/admin/(dashboard)/ekonomi/demografi-pekerjaan/create/page.tsx

@@ -77,7 +77,7 @@ function CreateDemografiPekerjaan() {
           <TextInput
             label="Pekerjaan"
             type="text"
-            value={stateDemografi.create.form.pekerjaan}
+            defaultValue={stateDemografi.create.form.pekerjaan}
             placeholder="Masukkan pekerjaan"
             onChange={(val) => {
               stateDemografi.create.form.pekerjaan = val.currentTarget.value;
@@ -87,7 +87,7 @@ function CreateDemografiPekerjaan() {
           <TextInput
             label="Jumlah Pekerja Laki-Laki"
             type="number"
-            value={stateDemografi.create.form.lakiLaki}
+            defaultValue={stateDemografi.create.form.lakiLaki}
             placeholder="Masukkan jumlah pekerja laki-laki"
             onChange={(val) => {
               stateDemografi.create.form.lakiLaki = Number(val.currentTarget.value);
@@ -97,7 +97,7 @@ function CreateDemografiPekerjaan() {
           <TextInput
             label="Jumlah Pekerja Perempuan"
             type="number"
-            value={stateDemografi.create.form.perempuan}
+            defaultValue={stateDemografi.create.form.perempuan}
             placeholder="Masukkan jumlah pekerja perempuan"
             onChange={(val) => {
               stateDemografi.create.form.perempuan = Number(val.currentTarget.value);

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 style={{ minWidth: 200 }}>Pekerjaan</TableTh>
-                <TableTh>Laki - Laki</TableTh>
+                <TableTh style={{ minWidth: 200 }}>Laki - Laki</TableTh>
-                <TableTh>Perempuan</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 style={{ minWidth: 200 }}>{item.pekerjaan}</TableTd>
-                    <TableTd>{item.lakiLaki}</TableTd>
+                    <TableTd style={{ minWidth: 200 }}>{item.lakiLaki}</TableTd>
-                    <TableTd>{item.perempuan}</TableTd>
+                    <TableTd style={{ minWidth: 200 }}>{item.perempuan}</TableTd>
                     <TableTd>
                       <Button
                         variant="light"