Fix Bug SubMenu Struktur PPID, SubMenu Struktur Organisasi BumDes

Fix bug kategori produk

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

prisma/seed.ts

@@ -31,9 +31,8 @@ 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/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";
@@ -807,28 +806,34 @@ import { safeSeedUnique } from "./safeseedUnique";
   }
   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,
       },
@@ -857,26 +862,6 @@ import { safeSeedUnique } from "./safeseedUnique";
   }
   console.log("pegawai success ...");
 
-  for (const p of hubunganOrganisasi) {
-    await prisma.hubunganOrganisasi.upsert({
-      where: {
-        atasanId_bawahanId: {
-          atasanId: p.atasanId,
-          bawahanId: p.bawahanId,
-        },
-      },
-      update: {
-        tipe: p.tipe,
-      },
-      create: {
-        atasanId: p.atasanId,
-        bawahanId: p.bawahanId,
-        tipe: p.tipe,
-      },
-    });
-  }
-  console.log("hubungan organisasi success ...");
-
   for (const d of detailDataPengangguran) {
     await prisma.detailDataPengangguran.upsert({
       where: {

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

@@ -581,33 +581,24 @@ const pelayananPerizinanBerusaha = proxy({
   findById: {
     data: null as pelayananPerizinanBerusahaForm | null,
     loading: false,
-    initialize() {
-      pelayananPerizinanBerusaha.findById.data = {
-        id: "",
-        name: "",
-        deskripsi: "",
-        link: "",
-      } as pelayananPerizinanBerusahaForm;
-    },
     async load(id: string) {
       try {
-        pelayananPerizinanBerusaha.findById.loading = true;
+        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;
       }
     },
   },

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/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/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) {
@@ -526,7 +563,7 @@ const pegawai = proxy({
   },
   findUnique: {
     data: null as
-      | (Prisma.PegawaiGetPayload<{
+      | (Prisma.PegawaiPPIDGetPayload<{
           include: { posisi: true; image: true };
         }> & { isActive: boolean })
       | null,
@@ -571,6 +608,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/berita/list-berita/[id]/edit/page.tsx

@@ -166,13 +166,18 @@ function EditBerita() {
             error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold">
-            placeholder="Masukkan deskripsi singkat"
+              Deskripsi Singkat
-            value={formData.deskripsi}
+            </Text>
-            onChange={(e) => handleChange("deskripsi", e.target.value)}
+            <EditEditor
-            required
+              value={formData.deskripsi}
-          />
+              onChange={(htmlContent) =>
+                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }))
+              }
+            />
+          </Box>
+
 
           {/* Upload Gambar */}
           <Box>

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

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

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

@@ -131,13 +131,17 @@ export default function CreateBerita() {
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold" mb={6}>
-            required
+              Deskripsi Singkat
-            placeholder="Masukkan deskripsi berita"
+            </Text>
-            defaultValue={beritaState.berita.create.form.deskripsi}
+            <CreateEditor
-            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
+              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/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/layanan/pelayanan_penduduk_non_permanent/page.tsx

@@ -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}`
                   )
                 }
               >

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

@@ -1,5 +1,6 @@
 /* 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';
@@ -8,6 +9,7 @@ import {
   Button,
   Group,
   Paper,
+  Skeleton,
   Stack,
   TextInput,
   Title,
@@ -21,66 +23,82 @@ import { useProxy } from 'valtio/utils';
 
 function EditPelayananPerizinanBerusaha() {
   const router = useRouter();
-  const params = useParams();
+  const params = useParams<{ id: string }>();
-  const statePerizinanBerusaha = useProxy(
+  const id = params?.id; // ini langsung string
-    stateLayananDesa.pelayananPerizinanBerusaha
+  const state = useProxy(stateLayananDesa.pelayananPerizinanBerusaha);
-  );
 
+  const [loading, setLoading] = useState(true);
   const [formData, setFormData] = useState({
+    id: '',
     name: '',
     deskripsi: '',
     link: '',
   });
 
-  // load data pertama kali
+  // 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) => {
+      (value: string) => {
-      setFormData((prev) => ({
+        setFormData((prev) => ({
-        ...prev,
+          ...prev,
-        [field]: value,
+          [field]: value,
-      }));
+        }));
-    };
+      };
 
   const handleSubmit = async () => {
-    const { name, deskripsi, link } = formData;
+    try {
-    if (statePerizinanBerusaha.findById.data) {
+      await state.update.update(formData);
-      const updatedData = {
-        ...statePerizinanBerusaha.findById.data,
-        name,
-        deskripsi,
-        link,
-      };
-      await statePerizinanBerusaha.update.update(updatedData);
       router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha');
+    } catch (error) {
+      console.error('Error updating pelayanan perizinan berusaha:', error);
+      toast.error('Terjadi kesalahan saat update data');
     }
   };
 
+  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
@@ -97,7 +115,7 @@ function EditPelayananPerizinanBerusaha() {
           </Title>
         </Group>
 
-        {/* Form Section */}
+        {/* Form */}
         <Paper
           w={{ base: '100%', md: '50%' }}
           bg={colors['white-1']}
@@ -109,7 +127,6 @@ function EditPelayananPerizinanBerusaha() {
           <Stack gap="xs">
             <Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
 
-            {/* Nama Field */}
             <TextInput
               label="Judul"
               placeholder="Masukkan judul"
@@ -118,7 +135,6 @@ function EditPelayananPerizinanBerusaha() {
               required
             />
 
-            {/* Link Field */}
             <TextInput
               label="Link"
               placeholder="Masukkan link terkait"
@@ -126,7 +142,6 @@ function EditPelayananPerizinanBerusaha() {
               onChange={(e) => handleChange('link')(e.target.value)}
             />
 
-            {/* Deskripsi Field */}
             <Box>
               <Title order={6}>Deskripsi</Title>
               <EditEditor
@@ -135,23 +150,20 @@ function EditPelayananPerizinanBerusaha() {
               />
             </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
+                {state.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
-                  ? '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 = '1'; // Replace with actual ID or get from URL params
+        await pelayananPerizinanBerusaha.findById.load(id);
+      } catch (err) {
+        setError('Gagal memuat data');
+        console.error('Error:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadData();
   }, []);
 
-  if (!pelayananPerizinanBerusaha.findById.data) {
+  if (loading) {
     return (
       <Stack align="center" justify="center" py="xl">
-        <Skeleton radius="md" height={800} />
+        <Skeleton height={800} radius="md" />
       </Stack>
     );
   }
 
+  if (error || !pelayananPerizinanBerusaha.findById.data) {
+    return (
+      <Center h={200}>
+        <Text>{error || 'Data tidak ditemukan'}</Text>
+      </Center>
+    );
+  }
+
   const data = pelayananPerizinanBerusaha.findById.data;
 
   return (
@@ -69,7 +93,7 @@ function PerizinanBerusaha() {
                 radius="md"
                 onClick={() =>
                   router.push(
-                    '/admin/desa/layanan/pelayanan_perizinan_berusaha/edit'
+                    `/admin/desa/layanan/pelayanan_perizinan_berusaha/${data.id}`
                   )
                 }
               >
@@ -183,3 +207,4 @@ function PerizinanBerusaha() {
 }
 
 export default PerizinanBerusaha;
+

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

@@ -51,25 +51,31 @@ 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();
-  }, [params?.id, stateSurat.edit]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [params?.id]);
+
+
 
   // handler untuk submit
   const handleSubmit = useCallback(async () => {

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, useCallback } 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);
@@ -111,21 +109,19 @@ function EditPelayananTelunjukSakti() {
             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) => handleChange('deskripsi', htmlContent)}
+          />
-            />
-          </Box>
 
           {/* Link */}
           <TextInput
             label="Link"
-            placeholder="Masukkan link terkait"
+            placeholder="Masukkan alamat link"
             value={formData.link}
             onChange={(e) => handleChange('link', e.target.value)}
           />

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

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

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

@@ -47,11 +47,11 @@ function EditPotensi() {
 
   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) {
@@ -62,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);
           }
@@ -72,9 +82,10 @@ function EditPotensi() {
         toast.error("Gagal memuat data potensi");
       }
     };
-
+  
     loadPotensi();
   }, [params?.id]);
+  
 
   const handleSubmit = async () => {
     try {
@@ -143,13 +154,17 @@ function EditPotensi() {
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fz="sm" fw="bold" mb={6}>
-            placeholder="Masukkan deskripsi"
+              Deskripsi Singkat
-            value={formData.deskripsi}
+            </Text>
-            onChange={(e) => handleChange("deskripsi", e.target.value)}
+            <EditEditor
-            required
+              value={formData.deskripsi}
-          />
+              onChange={(htmlContent) =>
+                handleChange("deskripsi", htmlContent)
+              }
+            />
+          </Box>
 
           <Select
             value={formData.kategoriId}

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

@@ -25,7 +25,7 @@ export default function DetailPotensi() {
       potensiState.delete.byId(selectedId);
       setModalHapus(false);
       setSelectedId(null);
-      router.push("/admin/desa/potensi");
+      router.push("/admin/desa/potensi/list-potensi");
     }
   };
 
@@ -77,7 +77,7 @@ export default function DetailPotensi() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsi || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}></Text>
               </Box>
 
               <Box>

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

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

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

@@ -102,20 +102,25 @@ function ListPotensi({ search }: { search: string }) {
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <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"}}
+                          style={{ wordBreak: "break-word", whiteSpace: "normal" }}
                         />
                       </Box>
                     </TableTd>

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

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

@@ -162,7 +162,7 @@ function Page() {
                     style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
                   >
                     <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
-                      Lambang Desa
+                      {lambang.judul}
                     </Text>
                   </Paper>
                 </Stack>
@@ -216,7 +216,7 @@ function Page() {
                 <Divider my="md" color={colors['blue-button']} />
                 <Text fz={{ base: "md", md: "h3" }} ta="justify" style={{wordBreak: "break-word", whiteSpace: "normal"}} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
                 <Stack mt="md" gap="sm">
-                  <SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
+                  <SimpleGrid cols={{ base: 1, md: 4 }} spacing="md">
                     {maskot.images.map((img, idx) => (
                       <Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
                         <Center>

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)/ekonomi/demografi-pekerjaan/[id]/page.tsx

@@ -14,7 +14,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 demografiPekerjaan from '../../../_state/ekonomi/demografi-pekerjaan';
@@ -25,59 +25,65 @@ interface FormData {
   perempuan: number;
 }
 
-function EditDemografiPekerjaan() {
+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 sekali waktu
+  // ✅ 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) {
           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');
-      });
+      }
-  }, [id]);
-
-  const handleChange =
-    (field: keyof FormData) =>
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setFormData((prev) => ({
-        ...prev,
-        [field]:
-          field === 'lakiLaki' || field === 'perempuan'
-            ? Number(e.currentTarget.value)
-            : e.currentTarget.value,
-      }));
     };
 
+    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) {
@@ -160,5 +166,3 @@ function EditDemografiPekerjaan() {
     </Box>
   );
 }
-
-export default EditDemografiPekerjaan;

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"

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-miskin/page.tsx

@@ -1,23 +1,43 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import {
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+  Box,
-import HeaderSearch from '../../_com/header';
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconEdit, IconSearch, IconTrash, IconPlus } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { useShallowEffect, useMediaQuery } from '@mantine/hooks';
 import { useProxy } from 'valtio/utils';
-import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
+import HeaderSearch from '../../_com/header';
-import { Bar, BarChart, Legend, XAxis, YAxis, Tooltip as RechartsTooltip } from 'recharts';
 import { ModalKonfirmasiHapus } from '../../_com/modalKonfirmasiHapus';
+import jumlahPendudukMiskin from '../../_state/ekonomi/jumlah-penduduk-miskin';
+
+// ✅ BarChart Mantine
+import { BarChart } from '@mantine/charts';
 
 function JumlahPendudukMiskin() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Jumlah Penduduk Miskin'
+        title="Jumlah Penduduk Miskin"
-        placeholder='Cari tahun atau jumlah penduduk miskin...'
+        placeholder="Cari tahun atau jumlah penduduk miskin..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,7 +48,7 @@ function JumlahPendudukMiskin() {
 }
 
 function ListJumlahPendudukMiskin({ search }: { search: string }) {
-  type JPMGrafik = { id: string; year: number; totalPoorPopulation: number }
+  type JPMGrafik = { year: number; totalPoorPopulation: number };
   const stateJPM = useProxy(jumlahPendudukMiskin);
   const [chartData, setChartData] = useState<JPMGrafik[]>([]);
   const [mounted, setMounted] = useState(false);
@@ -36,33 +56,27 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
 
-  const isTablet = useMediaQuery('(max-width:1024px)');
+  const { data, page, loading, load, totalPages } = stateJPM.findMany;
-  const isMobile = useMediaQuery('(max-width:768px)');
 
-  const {
+  // Load data awal
-    data,
-    page,
-    loading,
-    load,
-    totalPages,
-  } = stateJPM.findMany;
-  // Load data
   useShallowEffect(() => {
     setMounted(true);
     load(page, 10, search);
   }, [page, search]);
 
+  // Update chart data
   useEffect(() => {
     if (stateJPM.findMany.data) {
-      setChartData(stateJPM.findMany.data.map(item => ({
+      setChartData(
-        id: item.id,
+        stateJPM.findMany.data.map((item) => ({
-        year: Number(item.year),
+          year: Number(item.year),
-        totalPoorPopulation: Number(item.totalPoorPopulation)
+          totalPoorPopulation: Number(item.totalPoorPopulation),
-      })));
+        }))
+      );
     }
   }, [stateJPM.findMany.data]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   const handleDelete = () => {
     if (selectedId) {
@@ -71,7 +85,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
       setSelectedId(null);
       stateJPM.findMany.load();
     }
-  }
+  };
 
   if (loading || !data) {
     return (
@@ -83,15 +97,18 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
 
   return (
     <Box py={10}>
+      {/* Tabel */}
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
           <Title order={4}>Daftar Jumlah Penduduk Miskin</Title>
           <Tooltip label="Tambah Data" withArrow>
             <Button
-              leftSection={<IconEdit size={18} />}
+              leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')}
+              onClick={() =>
+                router.push('/admin/ekonomi/jumlah-penduduk-miskin/create')
+              }
             >
               Tambah Baru
             </Button>
@@ -109,22 +126,38 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.length > 0 ? filteredData.map(item => (
+              {filteredData.length > 0 ? (
-                <TableTr key={item.id}>
+                filteredData.map((item) => (
-                  <TableTd>{item.year}</TableTd>
+                  <TableTr key={item.id}>
-                  <TableTd>{item.totalPoorPopulation}</TableTd>
+                    <TableTd>{item.year}</TableTd>
-                  <TableTd>
+                    <TableTd>{item.totalPoorPopulation}</TableTd>
-                    <Button variant='light' color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)}>
+                    <TableTd>
-                      <IconEdit size={20} />
+                      <Button
-                    </Button>
+                        variant="light"
-                  </TableTd>
+                        color="green"
-                  <TableTd>
+                        onClick={() =>
-                    <Button variant='light' color="red" disabled={stateJPM.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true) }}>
+                          router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)
-                      <IconTrash size={20} />
+                        }
-                    </Button>
+                      >
-                  </TableTd>
+                        <IconEdit size={20} />
-                </TableTr>
+                      </Button>
-              )) : (
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="red"
+                        disabled={stateJPM.delete.loading}
+                        onClick={() => {
+                          setSelectedId(item.id);
+                          setModalHapus(true);
+                        }}
+                      >
+                        <IconTrash size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
                 <TableTr>
                   <TableTd colSpan={4}>
                     <Center py={20}>
@@ -138,6 +171,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
         </Box>
       </Paper>
 
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
@@ -153,33 +187,38 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
         />
       </Center>
 
-      {/* Chart */}
+      {/* Bar Chart */}
       <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
         <Stack>
-          <Box mt="lg" style={{ width: '100%', minHeight: 350 }}>
+          <Title order={4} mb="sm">
-            <Title order={4} mb="sm">Grafik Jumlah Penduduk Miskin</Title>
+            Grafik Jumlah Penduduk Miskin
-            {mounted && chartData.length > 0 ? (
+          </Title>
-              <BarChart width={isMobile ? 450 : isTablet ? 500 : 550} height={350} data={chartData}>
+          {mounted && chartData.length > 0 ? (
-                <XAxis dataKey="year" />
+            <BarChart
-                <YAxis />
+              h={300}
-                <RechartsTooltip />
+              data={chartData.map((item) => ({
-                <Legend />
+                name: item.year.toString(),
-                <Bar dataKey="totalPoorPopulation" fill={colors['blue-button']} name="Jumlah Penduduk Miskin" />
+                value: item.totalPoorPopulation,
-              </BarChart>
+              }))}
-            ) : (
+              dataKey="name"
-              <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+              series={[
-            )}
+                { name: 'value', color: colors['blue-button'] },
-          </Box>
+              ]}
+              withTooltip
+              valueFormatter={(v) => `${v.toLocaleString()} jiwa`}
+            />
+          ) : (
+            <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
+          )}
         </Stack>
       </Paper>
 
-
       {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus data ini?'
+        text="Apakah anda yakin ingin menghapus data ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/page.tsx

@@ -1,24 +1,42 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
+import { DonutChart } from '@mantine/charts';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
 
 function GrafikBerdasarkanPendidikan() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
-        title='Detail Data Pengangguran Berdasarkan Pendidikan'
+        title="Detail Data Pengangguran Berdasarkan Pendidikan"
-        placeholder='Cari data pendidikan...'
+        placeholder="Cari data pendidikan..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -31,7 +49,6 @@ function GrafikBerdasarkanPendidikan() {
 function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
   const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanPendidikan);
   const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
@@ -45,37 +62,45 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
     }
   };
 
-  const {
+  const { data, page, totalPages, loading, load } = stategrafik.findMany;
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = stategrafik.findMany;
 
   useShallowEffect(() => {
-    setMounted(true);
     load(page, 10, search);
   }, [page, search]);
 
   useEffect(() => {
     if (stategrafik.findMany.data) {
-      const SD = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SD || 0), 0);
+      const SD = stategrafik.findMany.data.reduce(
-      const SMP = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMP || 0), 0);
+        (acc: number, cur: any) => acc + Number(cur.SD || 0),
-      const SMA = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.SMA || 0), 0);
+        0,
-      const D3 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.D3 || 0), 0);
+      );
-      const S1 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.S1 || 0), 0);
+      const SMP = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.SMP || 0),
+        0,
+      );
+      const SMA = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.SMA || 0),
+        0,
+      );
+      const D3 = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.D3 || 0),
+        0,
+      );
+      const S1 = stategrafik.findMany.data.reduce(
+        (acc: number, cur: any) => acc + Number(cur.S1 || 0),
+        0,
+      );
       setDonutData([
-        { name: 'SD', value: SD, color: '#4b6Ef5', key: 'SD' },
+        { name: 'SD', value: SD, color: '#4b6Ef5' },
-        { name: 'SMP', value: SMP, color: '#14b885', key: 'SMP' },
+        { name: 'SMP', value: SMP, color: '#14b885' },
-        { name: 'SMA', value: SMA, color: '#E6A03B', key: 'SMA' },
+        { name: 'SMA', value: SMA, color: '#E6A03B' },
-        { name: 'D3', value: D3, color: '#DB524D', key: 'D3' },
+        { name: 'D3', value: D3, color: '#DB524D' },
-        { name: 'S1', value: S1, color: '#1018A8FF', key: 'S1' },
+        { name: 'S1', value: S1, color: '#1018A8FF' },
       ]);
     }
   }, [stategrafik.findMany.data]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
@@ -87,21 +112,26 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
 
   return (
     <Box py={10}>
+      {/* Table Data */}
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        {/* Header */}
         <Flex justify="space-between" align="center" mb="md">
-          <Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
+          <Title order={4}>List Pengangguran Berdasarkan Pendidikan</Title>
           <Tooltip label="Tambah Data" withArrow>
             <Button
               leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-              onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create')}
+              onClick={() =>
+                router.push(
+                  '/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create',
+                )
+              }
             >
               Tambah Baru
             </Button>
           </Tooltip>
         </Flex>
+
         <Box style={{ overflowX: 'auto' }}>
           <Table highlightOnHover>
             <TableThead>
@@ -120,7 +150,9 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                 <TableTr>
                   <TableTd colSpan={7}>
                     <Center py={20}>
-                      <Text color="dimmed">Belum ada data grafik responden</Text>
+                      <Text color="dimmed">
+                        Belum ada data grafik responden
+                      </Text>
                     </Center>
                   </TableTd>
                 </TableTr>
@@ -134,7 +166,15 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                     <TableTd>{item.S1}</TableTd>
                     <TableTd>
                       <Tooltip label="Edit Data" withArrow>
-                        <Button color="green" variant="light" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`)}>
+                        <Button
+                          color="green"
+                          variant="light"
+                          onClick={() =>
+                            router.push(
+                              `/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/${item.id}`,
+                            )
+                          }
+                        >
                           <IconEdit size={18} />
                         </Button>
                       </Tooltip>
@@ -148,7 +188,8 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
                           onClick={() => {
                             setSelectedId(item.id);
                             setModalHapus(true);
-                          }}>
+                          }}
+                        >
                           <IconTrash size={18} />
                         </Button>
                       </Tooltip>
@@ -161,6 +202,7 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
         </Box>
       </Paper>
 
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
@@ -176,51 +218,35 @@ function ListGrafikBerdasarkanPendidikan({ search }: { search: string }) {
         />
       </Center>
 
-      {/* Chart */}
+      {/* Donut Chart */}
-      <Box mt="md">
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md" mt="md">
-        <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Stack>
-          <Stack>
+          <Title order={3} pb={10}>
-            <Title order={3} pb={10}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
+            Grafik Pengangguran Berdasarkan Pendidikan
-            {mounted && donutData.length > 0 ? (
+          </Title>
-              <Box style={{ width: '100%', minHeight: 250 }}>
+          {donutData.length > 0 ? (
-                <PieChart width={800} height={300} data={donutData}>
+            <DonutChart
-                  <Pie
+              data={donutData}
-                    dataKey="value"
+              withLabels
-                    nameKey="name"
+              withTooltip
-                    data={donutData}
+              tooltipDataSource="segment"
-                    cx={400}
+              size={260}
-                    cy={150}
+              thickness={40}
-                    innerRadius={60}
+            />
-                    outerRadius={115}
+          ) : (
-                    label
+            <Text color="dimmed">
-                  >
+              Belum ada data untuk ditampilkan dalam grafik
-                    {donutData.map((entry, index) => (
+            </Text>
-                      <Cell key={`cell-${index}`} fill={entry.color} />
+          )}
-                    ))}
+        </Stack>
-                  </Pie>
+      </Paper>
-                </PieChart>
-                <Stack gap="xs" mt="sm">
-                  {donutData.map((entry) => (
-                    <Flex key={entry.key} gap="sm" align="center">
-                      <Box w={20} h={20} bg={entry.color} />
-                      <Text>{entry.name} : {entry.value}</Text>
-                    </Flex>
-                  ))}
-                </Stack>
-              </Box>
-            ) : (
-              <Text color="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
-            )}
-          </Stack>
-        </Paper>
-      </Box>
 
-      {/* Modal Konfirmasi Hapus */}
+      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?'
+        text="Apakah anda yakin ingin menghapus grafik pengangguran berdasarkan pendidikan ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/page.tsx

@@ -1,13 +1,30 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Flex, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Flex,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
+import { DonutChart } from '@mantine/charts';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
@@ -17,8 +34,8 @@ function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
   return (
     <Box>
       <HeaderSearch
-        title='Detail Data Pengangguran'
+        title="Detail Data Pengangguran"
-        placeholder='Cari usia...'
+        placeholder="Cari usia..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -31,7 +48,6 @@ function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
 function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: string }) {
   const stategrafik = useProxy(grafikNganggur.grafikBerdasarkanUsiaKerjaNganggur);
   const [donutData, setDonutData] = useState<any[]>([]);
-  const [mounted, setMounted] = useState(false);
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
   const router = useRouter();
@@ -45,17 +61,10 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
     }
   };
 
-  const {
+  const { data, page, totalPages, loading, load } = stategrafik.findMany;
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = stategrafik.findMany;
 
   useShallowEffect(() => {
-    setMounted(true);
+    load(page, 10, search);
-    load(page, 10, search)
   }, [page, search]);
 
   useEffect(() => {
@@ -64,16 +73,17 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
       const totalUsia26_35 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia26_35 || 0), 0);
       const totalUsia36_45 = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia36_45 || 0), 0);
       const totalUsia46_keatas = stategrafik.findMany.data.reduce((acc: number, cur: any) => acc + Number(cur.usia46_keatas || 0), 0);
+
       setDonutData([
-        { name: 'usia18_25', value: totalUsia18_25, color: colors['blue-button'], key: 'usia18_25' },
+        { name: 'Usia 18-25', value: totalUsia18_25, color: colors['blue-button'] },
-        { name: 'usia26_35', value: totalUsia26_35, color: '#10A85AFF', key: 'usia26_35' },
+        { name: 'Usia 26-35', value: totalUsia26_35, color: '#10A85AFF' },
-        { name: 'usia36_45', value: totalUsia36_45, color: '#C07B13FF', key: 'usia36_45' },
+        { name: 'Usia 36-45', value: totalUsia36_45, color: '#C07B13FF' },
-        { name: 'usia46_keatas', value: totalUsia46_keatas, color: '#1094A8FF', key: 'usia46_keatas' },
+        { name: 'Usia 46+', value: totalUsia46_keatas, color: '#1094A8FF' },
       ]);
     }
   }, [stategrafik.findMany.data]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
@@ -85,24 +95,23 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
 
   return (
     <Box py={10}>
+      {/* Table */}
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Stack>
-          {/* Header */}
           <Flex justify="space-between" align="center" mb="md">
             <Title order={4}>List Pengangguran Berdasarkan Usia Kerja</Title>
-            <Tooltip label="Tambah Data" withArrow>
+            <Button
-              <Button
+              leftSection={<IconPlus size={18} />}
-                leftSection={<IconPlus size={18} />}
+              color="blue"
-                color="blue"
+              variant="light"
-                variant="light"
+              onClick={() =>
-                onClick={() => router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')}
+                router.push('/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create')
-              >
+              }
-                Tambah Baru
+            >
-              </Button>
+              Tambah Baru
-            </Tooltip>
+            </Button>
           </Flex>
 
-          {/* Table */}
           <Box style={{ overflowX: 'auto' }}>
             <Table highlightOnHover>
               <TableThead>
@@ -110,26 +119,38 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
                   <TableTh>Usia 18-25</TableTh>
                   <TableTh>Usia 26-35</TableTh>
                   <TableTh>Usia 36-45</TableTh>
-                  <TableTh>Usia 46 +</TableTh>
+                  <TableTh>Usia 46+</TableTh>
                   <TableTh>Edit</TableTh>
                   <TableTh>Delete</TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
                 {filteredData.length > 0 ? (
-                  filteredData.map(item => (
+                  filteredData.map((item) => (
                     <TableTr key={item.id}>
                       <TableTd>{item.usia18_25}</TableTd>
                       <TableTd>{item.usia26_35}</TableTd>
                       <TableTd>{item.usia36_45}</TableTd>
                       <TableTd>{item.usia46_keatas}</TableTd>
                       <TableTd>
-                        <Button color="green" onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)}>
+                        <Button
+                          color="green"
+                          onClick={() =>
+                            router.push(`/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/${item.id}`)
+                          }
+                        >
                           <IconEdit size={20} />
                         </Button>
                       </TableTd>
                       <TableTd>
-                        <Button color="red" disabled={stategrafik.delete.loading} onClick={() => { setSelectedId(item.id); setModalHapus(true); }}>
+                        <Button
+                          color="red"
+                          disabled={stategrafik.delete.loading}
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
                           <IconTrash size={20} />
                         </Button>
                       </TableTd>
@@ -147,10 +168,10 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
               </TableTbody>
             </Table>
           </Box>
-
         </Stack>
       </Paper>
 
+      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
@@ -166,48 +187,29 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur({ search }: { search: stri
         />
       </Center>
 
-      {/* Chart */}
+      {/* Donut Chart */}
       <Paper bg={colors['white-1']} p="md" mt="lg" withBorder radius="md">
         <Stack>
-          <Title order={3} pb={10}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
+          <Title order={3} pb={10}>
-          {mounted && donutData.length > 0 ? (
+            Grafik Pengangguran Berdasarkan Usia Kerja
-            <Box style={{ width: '100%', height: 'auto', minHeight: 200 }}>
+          </Title>
-              <PieChart width={800} height={300} data={donutData}>
+          {donutData.length > 0 ? (
-                <Pie dataKey="value" nameKey="name" data={donutData} cx={400} cy={150} innerRadius={60} outerRadius={115} label>
+            <Center>
-                  {donutData.map((entry, index) => (
+              <DonutChart
-                    <Cell key={`cell-${index}`} fill={entry.color} />
+                data={donutData}
-                  ))}
+                withLabels
-                </Pie>
+                withTooltip
-              </PieChart>
+                size={200}
-              <Stack mt="sm" gap="xs">
+                thickness={40}
-                <Flex gap={"md"} align={"center"}>
+                tooltipDataSource="segment"
-                  <Box bg={colors['blue-button']} w={20} h={20} />
+              />
-                  <Text>Usia 18-25 : {donutData.find((entry) => entry.name === 'usia18_25')?.value}</Text>
+            </Center>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#10A85AFF'} w={20} h={20} />
-                  <Text>Usia 26-35 : {donutData.find((entry) => entry.name === 'usia26_35')?.value}
-                  </Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#C07B13FF'} w={20} h={20} />
-                  <Text>Usia 36-45 : {donutData.find((entry) => entry.name === 'usia36_45')?.value}
-                  </Text>
-                </Flex>
-                <Flex gap={"md"} align={"center"}>
-                  <Box bg={'#1094A8FF'} w={20} h={20} />
-                  <Text>Usia 46 + : {donutData.find((entry) => entry.name === 'usia46_keatas')?.value}
-                  </Text>
-                </Flex>
-              </Stack>
-            </Box>
           ) : (
             <Text c="dimmed">Belum ada data untuk ditampilkan dalam grafik</Text>
           )}
         </Stack>
       </Paper>
 
-
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import jumlahPengangguranState from '@/app/admin/(dashboard)/_state/ekonomi/jumlah-pengangguran';
 import colors from '@/con/colors';
 import {
@@ -20,11 +21,18 @@ import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
+// --- Helper konstanta
+const MONTHS = [
+  'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
+  'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des',
+];
+
 function EditDetailDataPengangguran() {
   const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran);
   const router = useRouter();
   const params = useParams();
 
+  // --- state lokal form
   const [formData, setFormData] = useState({
     month: '',
     year: new Date().getFullYear(),
@@ -34,18 +42,13 @@ function EditDetailDataPengangguran() {
     percentageChange: 0,
   });
 
-  // Hitung total & perubahan otomatis
+  // --- hitung total + persentase perubahan
   const calculateTotalAndChange = useCallback(
     async (data: typeof formData) => {
       const total = data.educatedUnemployment + data.uneducatedUnemployment;
-
       let percentageChange = 0;
-      const monthOrder = [
-        'Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun',
-        'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des',
-      ];
-      const currentMonthIndex = monthOrder.indexOf(data.month);
 
+      const currentMonthIndex = MONTHS.indexOf(data.month);
       if (currentMonthIndex !== -1) {
         let prevMonthIndex = currentMonthIndex - 1;
         let prevYear = data.year;
@@ -55,17 +58,15 @@ function EditDetailDataPengangguran() {
           prevYear--;
         }
 
-        const prevMonth = monthOrder[prevMonthIndex];
         const prevData = await stateDetail.findByMonthYear.load({
-          month: prevMonth,
+          month: MONTHS[prevMonthIndex],
           year: prevYear,
         });
 
         if (prevData && prevData.totalUnemployment > 0) {
           const change =
             ((total - prevData.totalUnemployment) /
-              prevData.totalUnemployment) *
+              prevData.totalUnemployment) * 100;
-            100;
           percentageChange = parseFloat(change.toFixed(1));
         }
       }
@@ -75,67 +76,66 @@ function EditDetailDataPengangguran() {
     [stateDetail.findByMonthYear]
   );
 
+  // --- update state lokal
   const updateFormData = async (updates: Partial<typeof formData>) => {
     const newData = { ...formData, ...updates };
     const { total, percentageChange } = await calculateTotalAndChange(newData);
-    setFormData({
+    setFormData({ ...newData, totalUnemployment: total, percentageChange });
-      ...newData,
-      totalUnemployment: total,
-      percentageChange,
-    });
   };
 
-  // Load detail hanya sekali
+  // --- load detail by ID (sekali)
   useEffect(() => {
     const loadDetail = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        await stateDetail.findUnique.load(id); // ambil by ID
+        await stateDetail.findUnique.load(id);
         const data = stateDetail.findUnique.data;
+        if (!data) return;
 
-        if (data) {
+        const yearValue = 
-          const yearValue =
+          data.year && typeof data.year === 'object' && 'getFullYear' in data.year
-            data.year && typeof data.year === 'object' && 'getFullYear' in data.year
+            ? (data.year as Date).getFullYear()
-              ? (data.year as Date).getFullYear()
+            : Number(data.year);
-              : Number(data.year);
 
-          stateDetail.update.id = id; // set ID untuk update
+        stateDetail.update.id = id; // simpan id untuk update
 
-          setFormData({
+        setFormData({
-            month: data.month,
+          month: data.month,
-            year: yearValue,
+          year: yearValue,
-            totalUnemployment: data.totalUnemployment,
+          educatedUnemployment: data.educatedUnemployment,
-            educatedUnemployment: data.educatedUnemployment,
+          uneducatedUnemployment: data.uneducatedUnemployment,
-            uneducatedUnemployment: data.uneducatedUnemployment,
+          totalUnemployment: data.totalUnemployment,
-            percentageChange: data.percentageChange || 0,
+          percentageChange: data.percentageChange || 0,
-          });
+        });
-        }
+      } catch (err) {
-      } catch (error) {
+        console.error('Error loading detail:', err);
-        console.error('Error loading detail:', error);
         toast.error('Gagal memuat data detail');
       }
     };
 
     loadDetail();
-  }, [params?.id, stateDetail.findUnique]);
+  }, [params?.id]);
 
+  // --- submit form
   const handleSubmit = async () => {
-    const { total, percentageChange } = await calculateTotalAndChange(formData);
     try {
+      const { total, percentageChange } = await calculateTotalAndChange(formData);
+
       stateDetail.update.form = {
         ...formData,
         totalUnemployment: total,
         percentageChange,
       };
+
       const success = await stateDetail.update.submit();
       if (success) {
         toast.success('Detail data pengangguran berhasil diperbarui!');
         router.push('/admin/ekonomi/jumlah-pengangguran');
       }
-    } catch (error) {
+    } catch (err) {
-      console.error('Error updating:', error);
+      console.error('Error updating:', err);
       toast.error('Terjadi kesalahan saat memperbarui data');
     }
   };
@@ -143,12 +143,7 @@ function EditDetailDataPengangguran() {
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
-        <Button
+        <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-          variant="subtle"
-          onClick={() => router.back()}
-          p="xs"
-          radius="md"
-        >
           <IconArrowBack color={colors['blue-button']} size={24} />
         </Button>
         <Title order={4} ml="sm">
@@ -167,10 +162,7 @@ function EditDetailDataPengangguran() {
         <Stack gap="md">
           <Select
             label="Bulan"
-            data={[
+            data={MONTHS}
-              'Jan','Feb','Mar','Apr','Mei','Jun',
-              'Jul','Agu','Sep','Okt','Nov','Des',
-            ]}
             value={formData.month}
             onChange={(val) => updateFormData({ month: val || '' })}
           />
@@ -184,8 +176,10 @@ function EditDetailDataPengangguran() {
             label="Pengangguran Terdidik"
             type="number"
             value={formData.educatedUnemployment}
-            onChange={(val) =>
+            onChange={(e) =>
-              updateFormData({ educatedUnemployment: Number(val.currentTarget.value) || 0 })
+              updateFormData({
+                educatedUnemployment: Number(e.currentTarget.value) || 0,
+              })
             }
             required
           />
@@ -193,8 +187,10 @@ function EditDetailDataPengangguran() {
             label="Pengangguran Tidak Terdidik"
             type="number"
             value={formData.uneducatedUnemployment}
-            onChange={(val) =>
+            onChange={(e) =>
-              updateFormData({ uneducatedUnemployment: Number(val.currentTarget.value) || 0 })
+              updateFormData({
+                uneducatedUnemployment: Number(e.currentTarget.value) || 0,
+              })
             }
             required
           />

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/edit/page.tsx

@@ -33,6 +33,7 @@ function EditLowonganKerja() {
     gaji: '',
     deskripsi: '',
     kualifikasi: '',
+    notelp: '',
   });
 
   // load data sekali aja ketika mount / id berubah
@@ -52,6 +53,7 @@ function EditLowonganKerja() {
             gaji: data.gaji || '',
             deskripsi: data.deskripsi || '',
             kualifikasi: data.kualifikasi || '',
+            notelp: data.notelp || '',
           });
         }
       } catch (error) {
@@ -132,6 +134,14 @@ function EditLowonganKerja() {
             required
           />
 
+          <TextInput
+            label="Nomor Yang Dapat Dihubungi"
+            placeholder="Masukkan nomor yang dapat dihubungi"
+            value={formData.notelp}
+            onChange={(e) => handleChange("notelp", e.target.value)}
+            required
+          />
+
           <TextInput
             label="Tipe Pekerjaan"
             placeholder="Masukkan tipe pekerjaan"

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/[id]/page.tsx

@@ -82,6 +82,11 @@ function DetailLowonganKerjaLokal() {
                 <Text fz="md" c="dimmed">{data.lokasi || '-'}</Text>
               </Box>
 
+              <Box>
+                <Text fz="lg" fw="bold">Nomor Yang Dapat Dihubungi</Text>
+                <Text fz="md" c="dimmed">{data.notelp || '-'}</Text>
+              </Box>
+
               <Box>
                 <Text fz="lg" fw="bold">Tipe Pekerjaan</Text>
                 <Text fz="md" c="dimmed">{data.tipePekerjaan || '-'}</Text>

src/app/admin/(dashboard)/ekonomi/lowongan-kerja-lokal/create/page.tsx

@@ -30,6 +30,7 @@ function CreateLowonganKerja() {
       gaji: '',
       deskripsi: '',
       kualifikasi: '',
+      notelp: '',
     };
   };
 
@@ -86,6 +87,15 @@ function CreateLowonganKerja() {
             placeholder="Masukkan nama perusahaan"
             required
           />
+          <TextInput
+            defaultValue={lowonganState.create.form.notelp}
+            onChange={(val) =>
+              (lowonganState.create.form.notelp = val.target.value)
+            }
+            label="Nomor Yang Dapat Dihubungi"
+            placeholder="Masukkan nomor yang dapat dihubungi"
+            required
+          />
           <TextInput
             defaultValue={lowonganState.create.form.lokasi}
             onChange={(val) =>

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/edit/page.tsx

@@ -31,6 +31,7 @@ type FormData = {
   imageId: string;
   rating: number;
   kategoriId: string[];
+  kontak: string;
 };
 
 function EditPasarDesa() {
@@ -47,11 +48,12 @@ function EditPasarDesa() {
     imageId: '',
     rating: 0,
     kategoriId: [],
+    kontak: '',
   });
 
   // load data awal
   useEffect(() => {
-    pasarState.kategoriProduk.findMany.load();
+    pasarState.kategoriProduk.findManyAll.load();
 
     const loadPasarDesa = async () => {
       const id = params?.id as string;
@@ -67,6 +69,7 @@ function EditPasarDesa() {
             imageId: data.imageId || '',
             rating: data.rating || 0,
             kategoriId: data.KategoriToPasar?.map((k: any) => k.kategoriId) || [],
+            kontak: data.kontak || '',
           });
           if (data.image?.link) setPreviewImage(data.image.link);
         }
@@ -228,13 +231,21 @@ function EditPasarDesa() {
             required
           />
 
+          <TextInput
+            label="Kontak"
+            placeholder="Masukkan kontak"
+            value={formData.kontak}
+            onChange={(e) => handleChange('kontak', e.target.value)}
+            required
+          />
+
           <MultiSelect
             label="Kategori Produk"
             placeholder="Pilih kategori produk"
             value={formData.kategoriId}
             onChange={(val) => handleChange('kategoriId', val)}
             data={
-              pasarState.kategoriProduk.findMany.data?.map((v) => ({
+              pasarState.kategoriProduk.findManyAll.data?.map((v) => ({
                 value: v.id,
                 label: v.nama,
               })) || []

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/[id]/page.tsx

@@ -85,6 +85,11 @@ function DetailPasarDesa() {
                 <Text fz="md" c="dimmed">{data.alamatUsaha || '-'}</Text>
               </Box>
 
+              <Box>
+                <Text fz="lg" fw="bold">Kontak</Text>
+                <Text fz="md" c="dimmed">{data.kontak || '-'}</Text>
+              </Box>
+
               <Box>
                 <Text fz="lg" fw="bold">Gambar</Text>
                 {data.image?.link ? (

src/app/admin/(dashboard)/ekonomi/pasar-desa/produk-pasar-desa/create/page.tsx

@@ -30,7 +30,7 @@ export default function CreatePasarDesa() {
   const [file, setFile] = useState<File | null>(null);
 
   useEffect(() => {
-    statePasar.kategoriProduk.findMany.load();
+    statePasar.kategoriProduk.findManyAll.load();
   }, []);
 
   const resetForm = () => {
@@ -41,6 +41,7 @@ export default function CreatePasarDesa() {
       imageId: '',
       rating: 0,
       kategoriId: [],
+      kontak: '',
     };
     setPreviewImage(null);
     setFile(null);
@@ -184,6 +185,15 @@ export default function CreatePasarDesa() {
             onChange={(e) => (statePasar.pasarDesa.create.form.alamatUsaha = e.target.value)}
           />
 
+          {/* Kontak */}
+          <TextInput
+            label="Kontak"
+            type="number"
+            placeholder="Masukkan kontak"
+            defaultValue={statePasar.pasarDesa.create.form.kontak}
+            onChange={(e) => (statePasar.pasarDesa.create.form.kontak = e.target.value)}
+          />
+
           {/* Kategori Produk */}
           <MultiSelect
             label="Kategori Produk"
@@ -191,7 +201,7 @@ export default function CreatePasarDesa() {
             value={statePasar.pasarDesa.create.form.kategoriId}
             onChange={(val) => (statePasar.pasarDesa.create.form.kategoriId = val)}
             data={
-              statePasar.kategoriProduk.findMany.data?.map((v) => ({
+              statePasar.kategoriProduk.findManyAll.data?.map((v) => ({
                 value: v.id,
                 label: v.nama,
               })) || []

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/[id]/edit/page.tsx

@@ -18,84 +18,90 @@ 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 { useProxy } from 'valtio/utils';
 import { toast } from 'react-toastify';
 
+type Statistik = {
+  tahun: string;
+  jumlah: string;
+};
+
 type FormData = {
   nama: string;
   deskripsi: string;
   icon: string;
+  statistik: Statistik;
+};
+
+const initialForm: FormData = {
+  nama: '',
+  deskripsi: '',
+  icon: '',
   statistik: {
-    tahun: string;
+    tahun: '',
-    jumlah: string;
+    jumlah: '',
-  };
+  },
 };
 
 function EditProgramKemiskinan() {
   const router = useRouter();
-  const params = useParams() as { id: string };
+  const { id } = useParams() as { id: string };
   const stateProgram = useProxy(programKemiskinanState);
-  const id = params.id;
 
-  const [formData, setFormData] = useState<FormData>({
+  const [formData, setFormData] = useState<FormData>(initialForm);
-    nama: '',
-    deskripsi: '',
-    icon: '',
-    statistik: {
-      tahun: '',
-      jumlah: '',
-    },
-  });
 
-  // load data ke local state sekali aja
+  // Load data 1x dari global state → isi local state
   useEffect(() => {
-    if (id) {
+    if (!id) return;
-      stateProgram.findUnique
+
-        .load(id)
+    stateProgram.findUnique
-        .then(() => {
+      .load(id)
-          const data = stateProgram.findUnique.data;
+      .then(() => {
-          if (data) {
+        const data = stateProgram.findUnique.data;
-            setFormData({
+        if (data) {
-              nama: data.nama || '',
+          setFormData({
-              deskripsi: data.deskripsi || '',
+            nama: data.nama ?? '',
-              icon: data.icon || '',
+            deskripsi: data.deskripsi ?? '',
-              statistik: {
+            icon: data.icon ?? '',
-                tahun: data.statistik?.tahun?.toString() || '',
+            statistik: {
-                jumlah: data.statistik?.jumlah?.toString() || '',
+              tahun: data.statistik?.tahun?.toString() ?? '',
-              },
+              jumlah: data.statistik?.jumlah?.toString() ?? '',
-            });
+            },
-          }
+          });
-        })
+        }
-        .catch((err) => {
+      })
-          console.error('Error load data:', err);
+      .catch((err) => {
-          toast.error('Gagal mengambil data program');
+        console.error('Error load data:', err);
-        });
+        toast.error('Gagal mengambil data program');
-    }
+      });
   }, [id, stateProgram.findUnique]);
 
-  const handleChange = (field: keyof FormData, value: string) => {
+  // generic handler untuk field top-level
-    setFormData((prev) => ({
+  const handleChange = useCallback(
-      ...prev,
+    (field: keyof FormData, value: string) => {
-      [field]: value,
+      setFormData((prev) => ({ ...prev, [field]: value }));
-    }));
+    },
-  };
+    []
+  );
 
-  const handleStatistikChange = (field: keyof FormData['statistik'], value: string) => {
+  // khusus nested statistik
-    setFormData((prev) => ({
+  const handleStatistikChange = useCallback(
-      ...prev,
+    (field: keyof Statistik, value: string) => {
-      statistik: {
+      setFormData((prev) => ({
-        ...prev.statistik,
+        ...prev,
-        [field]: value,
+        statistik: { ...prev.statistik, [field]: value },
-      },
+      }));
-    }));
+    },
-  };
+    []
+  );
 
   const handleSubmit = async () => {
     try {
       stateProgram.update.id = id;
       stateProgram.update.form = formData;
       await stateProgram.update.update();
+
       toast.success('Program berhasil diperbarui!');
       router.push('/admin/ekonomi/program-kemiskinan');
     } catch (error) {

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/_lib/layoutTabs.tsx

@@ -2,6 +2,7 @@
 'use client'
 import colors from '@/con/colors';
 import {
+  ScrollArea,
   Stack,
   Tabs,
   TabsList,
@@ -9,28 +10,20 @@ import {
   TabsTab,
   Title,
   Tooltip,
-  ScrollArea,
 } from '@mantine/core';
+import {
+  IconBuildingCommunity,
+  IconHierarchy,
+  IconUsers
+} from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import {
-  IconHierarchy,
-  IconUsers,
-  IconGitBranch,
-} from '@tabler/icons-react';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
   const router = useRouter();
   const pathname = usePathname();
 
   const tabs = [
-    {
-      label: "Posisi Organisasi",
-      value: "posisiorganisasi",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi",
-      icon: <IconHierarchy size={18} stroke={1.8} />,
-      tooltip: "Kelola daftar posisi organisasi",
-    },
     {
       label: "Pegawai",
       value: "pegawai",
@@ -39,12 +32,19 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
       tooltip: "Kelola data pegawai BUMDesa",
     },
     {
-      label: "Hubungan Organisasi",
+      label: "Posisi Organisasi",
-      value: "hubunganorganisasi",
+      value: "posisiorganisasi",
-      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi",
+      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi",
-      icon: <IconGitBranch size={18} stroke={1.8} />,
+      icon: <IconHierarchy size={18} stroke={1.8} />,
-      tooltip: "Atur hubungan antar posisi organisasi",
+      tooltip: "Kelola daftar posisi organisasi",
     },
+    {
+      label: "Struktur Organisasi",
+      value: "strukturorganisasi",
+      href: "/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/struktur-organisasi",
+      icon: <IconBuildingCommunity size={18} stroke={1.8} />,
+      tooltip: "Kelola struktur organisasi BUMDesa"
+    }
   ];
 
   const currentTab = tabs.find((tab) => tab.href === pathname);

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/[id]/page.tsx

@@ -1,116 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
-
-export default function EditHubunganOrganisasi() {
-  const router = useRouter();
-  const { id } = useParams<{ id: string }>();
-  const state = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const pegawaiList = strukturorganisasiState.pegawai.findMany.data;
-
-  const [form, setForm] = useState({
-    atasanId: '',
-    bawahanId: '',
-    tipe: '',
-  });
-
-  // load data awal sekali aja
-  useEffect(() => {
-    strukturorganisasiState.pegawai.findMany.load();
-
-    if (id) {
-      (async () => {
-        const data = await state.edit.load(id);
-        if (data) {
-          setForm({
-            atasanId: data.atasanId ?? '',
-            bawahanId: data.bawahanId ?? '',
-            tipe: data.tipe ?? '',
-          });
-        }
-      })();
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [id]);
-
-  const handleChange = (field: keyof typeof form, value: string) => {
-    setForm(prev => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  const handleSubmit = async () => {
-    if (!form.atasanId || !form.bawahanId) {
-      toast.warn('Atasan dan bawahan harus diisi');
-      return;
-    }
-
-    // update global state cuma pas submit
-    state.edit.id = id;
-    state.edit.form = form;
-
-    const result = await state.edit.update();
-
-    if (result) {
-      toast.success('Data berhasil diperbarui');
-      router.push(
-        '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi'
-      );
-    }
-  };
-
-  return (
-    <Box>
-      <Paper p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack>
-          <Title order={3}>Edit Hubungan Organisasi</Title>
-
-          <Select
-            label="Atasan"
-            placeholder="Pilih atasan"
-            searchable
-            data={
-              pegawaiList?.map(p => ({
-                value: p.id,
-                label: p.namaLengkap,
-              })) || []
-            }
-            value={form.atasanId}
-            onChange={val => handleChange('atasanId', val || '')}
-          />
-
-          <Select
-            label="Bawahan"
-            placeholder="Pilih bawahan"
-            searchable
-            data={
-              pegawaiList?.map(p => ({
-                value: p.id,
-                label: p.namaLengkap,
-              })) || []
-            }
-            value={form.bawahanId}
-            onChange={val => handleChange('bawahanId', val || '')}
-          />
-
-          <TextInput
-            label="Tipe"
-            placeholder="Contoh: langsung_melapor"
-            value={form.tipe}
-            onChange={e => handleChange('tipe', e.currentTarget.value)}
-          />
-
-          <Button onClick={handleSubmit} color="blue">
-            Simpan
-          </Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create/page.tsx

@@ -1,78 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import { useRouter } from 'next/navigation';
-import { Box, Button, Paper, Select, Stack, TextInput, Title } from '@mantine/core';
-import { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
-
-export default function CreateHubunganOrganisasi() {
-  const router = useRouter();
-  const state = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const pegawaiList = strukturorganisasiState.pegawai.findMany.data;
-
-  const [form, setForm] = useState({
-    atasanId: '',
-    bawahanId: '',
-    tipe: '',
-  });
-
-  useEffect(() => {
-    strukturorganisasiState.pegawai.findMany.load();
-  }, []);
-
-  const handleSubmit = async () => {
-    if (!form.atasanId || !form.bawahanId) {
-      toast.warn("Atasan dan bawahan harus diisi");
-      return;
-    }
-
-    state.create.form = form;
-    const result = await state.create.create();
-
-    if (result) {
-      toast.success("Hubungan Organisasi berhasil ditambahkan");
-      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi');
-    }
-  };
-
-  return (
-    <Box>
-      <Paper p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack>
-          <Title order={3}>Create Hubungan Organisasi</Title>
-          <Select
-            label="Atasan"
-            placeholder="Pilih atasan"
-            searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
-            value={form.atasanId}
-            onChange={(val) => setForm({ ...form, atasanId: val || '' })}
-          />
-          <Select
-            label="Bawahan"
-            placeholder="Pilih bawahan"
-            searchable
-            data={pegawaiList?.map(p => ({
-              value: p.id,
-              label: p.namaLengkap,
-            })) || []}
-            value={form.bawahanId}
-            onChange={(val) => setForm({ ...form, bawahanId: val || '' })}
-          />
-          <TextInput
-            label="Tipe"
-            placeholder="Contoh: langsung_melapor"
-            defaultValue={form.tipe}
-            onChange={(e) => setForm({ ...form, tipe: e.currentTarget.value })}
-          />
-          <Button onClick={handleSubmit} color="blue">Simpan</Button>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/page.tsx

@@ -1,130 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
-import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
-import { useState } from 'react';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-
-function HubunganOrganisasi() {
-  const [search, setSearch] = useState("");
-
-  return (
-    <Box>
-      <HeaderSearch
-        title='Hubungan Organisasi'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListHubunganOrganisasi search={search} />
-    </Box>
-  );
-}
-
-
-function ListHubunganOrganisasi({ search }: { search: string }) {
-  const stateOrganisasi = useProxy(strukturorganisasiState.hubunganOrganisasi);
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter();
-
-  useShallowEffect(() => {
-    stateOrganisasi.findMany.load();
-  }, []);
-
-  const handleHapus = () => {
-    if (selectedId) {
-      stateOrganisasi.delete.byId(selectedId);
-      setModalHapus(false);
-      setSelectedId(null);
-    }
-  };
-
-  const filteredData = (stateOrganisasi.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.atasan?.namaLengkap?.toLowerCase().includes(keyword) ||
-      item.bawahan?.namaLengkap?.toLowerCase().includes(keyword) ||
-      item.tipe?.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!stateOrganisasi.findMany.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    );
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Hubungan Organisasi'
-          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Atasan</TableTh>
-              <TableTh>Bawahan</TableTh>
-              <TableTh>Tipe</TableTh>
-              <TableTh>Edit</TableTh>
-              <TableTh>Hapus</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData
-              .sort((a, b) =>
-                a.atasan?.namaLengkap.localeCompare(b.atasan?.namaLengkap)
-              )
-              .map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.atasan?.namaLengkap}</TableTd>
-                  <TableTd>{item.bawahan?.namaLengkap}</TableTd>
-                  <TableTd>{item.tipe}</TableTd>
-                  <TableTd>
-                    <Button
-                      bg="green"
-                      onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/hubungan-organisasi/${item.id}`)}
-                    >
-                      <IconEdit size={25} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button
-                      color="red"
-                      onClick={() => {
-                        setSelectedId(item.id);
-                        setModalHapus(true);
-                      }}
-                    >
-                      <IconTrash size={20} />
-                    </Button>
-                  </TableTd>
-                </TableTr>
-              ))}
-          </TableTbody>
-        </Table>
-      </Paper>
-
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus hubungan organisasi ini?'
-      />
-    </Box>
-  );
-}
-
-
-export default HubunganOrganisasi;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/edit/page.tsx

@@ -1,8 +1,9 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
 import {
   Box,
   Button,
@@ -13,7 +14,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip
 } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -22,30 +24,12 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-interface PreviewImage {
+export default function EditPegawaiBumDes() {
-  file?: File;
-  preview: string;
-}
-
-interface PegawaiFormData {
-  namaLengkap: string;
-  gelarAkademik: string;
-  imageId: string | null;
-  tanggalMasuk: string;
-  email: string;
-  telepon: string;
-  alamat: string;
-  posisiId: string;
-  isActive: boolean;
-}
-
-export default function EditPegawai() {
   const router = useRouter();
   const { id } = useParams<{ id: string }>();
-  const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
 
-  const [previewImage, setPreviewImage] = useState<PreviewImage | string | null>(null);
+  const [formData, setFormData] = useState({
-  const [formData, setFormData] = useState<PegawaiFormData>({
     namaLengkap: '',
     gelarAkademik: '',
     imageId: '',
@@ -56,16 +40,10 @@ export default function EditPegawai() {
     posisiId: '',
     isActive: true,
   });
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
 
-  // helper buat update state formData
+  // Format date for <input type="date">
-  const updateForm = (field: keyof PegawaiFormData, value: any) => {
-    setFormData((prev) => ({
-      ...prev,
-      [field]: value,
-    }));
-  };
-
-  // Format date to YYYY-MM-DD for date input
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
     const date = new Date(dateString);
@@ -73,10 +51,10 @@ export default function EditPegawai() {
   };
 
   useEffect(() => {
-    strukturorganisasiState.posisiOrganisasi.findMany.load();
-
     const loadPegawai = async () => {
       try {
+        await stateStrukturBumDes.posisiOrganisasi.findManyAll.load();
+
         const data = await stateOrganisasi.edit.load(id);
         if (data) {
           setFormData({
@@ -95,9 +73,7 @@ export default function EditPegawai() {
         }
       } catch (error) {
         console.error('Error loading pegawai:', error);
-        toast.error(
+        toast.error(error instanceof Error ? error.message : 'Gagal mengambil data pegawai');
-          error instanceof Error ? error.message : 'Gagal mengambil data pegawai'
-        );
       }
     };
 
@@ -107,204 +83,182 @@ export default function EditPegawai() {
   const handleSubmit = async () => {
     try {
       if (!formData.namaLengkap.trim()) {
-        toast.error('Nama lengkap tidak boleh kosong');
+        return toast.error('Nama lengkap tidak boleh kosong');
-        return;
       }
 
-      stateOrganisasi.edit.form = {
+      // Update global state only on submit
-        ...formData,
+      const updatedForm = { ...formData };
-        namaLengkap: formData.namaLengkap.trim(),
-        gelarAkademik: formData.gelarAkademik.trim(),
-        imageId: formData.imageId ? formData.imageId.trim() : '',
-        tanggalMasuk: formData.tanggalMasuk.trim(),
-        email: formData.email.trim(),
-        telepon: formData.telepon.trim(),
-        alamat: formData.alamat.trim(),
-        posisiId: formData.posisiId.trim(),
-      };
 
-      if (id && !stateOrganisasi.edit.id) {
+      if (file) {
-        stateOrganisasi.edit.id = id;
+        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
+        updatedForm.imageId = uploaded.id;
       }
 
+      stateOrganisasi.edit.form = updatedForm;
+      if (id && !stateOrganisasi.edit.id) stateOrganisasi.edit.id = id;
+
       const success = await stateOrganisasi.edit.submit();
-
+      if (success) router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai');
-      if (success) {
-        router.push(
-          '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai'
-        );
-      }
     } catch (error) {
       console.error('Error updating pegawai:', error);
-      toast.error(
+      toast.error(error instanceof Error ? error.message : 'Gagal memperbarui data pegawai');
-        error instanceof Error ? error.message : 'Gagal memperbarui data pegawai'
-      );
     }
   };
 
   return (
-    <Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      <Box mb={10}>
+      <Group mb="md">
-        <Button onClick={() => router.back()} variant="subtle" color={'blue'}>
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-        </Button>
+            <IconArrowBack color={colors['blue-button']} size={24} />
-      </Box>
+          </Button>
-
+        </Tooltip>
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Title order={4} ml="sm" c="dark">Edit Data Pegawai PPID</Title>
-        <Stack gap={'xs'}>
+      </Group>
-          <Title order={4}>Edit Data Pegawai</Title>
 
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Nama Lengkap */}
           <TextInput
             label="Nama Lengkap"
             placeholder="Masukkan nama lengkap"
             value={formData.namaLengkap}
-            onChange={(e) => updateForm('namaLengkap', e.target.value)}
+            onChange={(e) => setFormData({ ...formData, namaLengkap: e.target.value })}
+            required
           />
 
+          {/* Gelar Akademik */}
           <TextInput
             label="Gelar Akademik"
             placeholder="Contoh: S.Kom"
             value={formData.gelarAkademik}
-            onChange={(e) => updateForm('gelarAkademik', e.target.value)}
+            onChange={(e) => setFormData({ ...formData, gelarAkademik: e.target.value })}
           />
 
+          {/* Foto Profil */}
           <Box>
-            <Text fz={'md'} fw={'bold'}>
+            <Text fw="bold" fz="sm" mb={6}>Foto Profil</Text>
-              Gambar
+            <Dropzone
-            </Text>
+              onDrop={(files) => {
-            <Box>
+                const selectedFile = files[0];
-              <Dropzone
+                if (selectedFile) {
-                onDrop={(files) => {
+                  setFile(selectedFile);
-                  const file = files[0];
+                  setPreviewImage(URL.createObjectURL(selectedFile));
-                  if (file) {
+                }
-                    setPreviewImage({
+              }}
-                      file,
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
-                      preview: URL.createObjectURL(file),
+              maxSize={5 * 1024 ** 2}
-                    });
+              accept={{ 'image/*': ['.jpeg', '.jpg', '.png', '.webp'] }}
-                  }
+              radius="md"
-                }}
+              p="xl"
-                maxSize={5 * 1024 ** 2}
+            >
-                accept={{
+              <Group justify="center" gap="xl" mih={180}>
-                  'image/*': ['.jpeg', '.jpg', '.png', '.webp'],
+                <Dropzone.Accept><IconUpload size={48} color={colors['blue-button']} stroke={1.5} /></Dropzone.Accept>
-                }}
+                <Dropzone.Reject><IconX size={48} color="red" stroke={1.5} /></Dropzone.Reject>
-              >
+                <Dropzone.Idle><IconPhoto size={48} color="#868e96" stroke={1.5} /></Dropzone.Idle>
-                <Group
+                <Stack gap="xs" align="center">
-                  justify="center"
+                  <Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
-                  gap="xl"
+                  <Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
-                  mih={220}
+                </Stack>
-                  style={{ pointerEvents: 'none' }}
+              </Group>
-                >
+            </Dropzone>
-                  <Dropzone.Accept>
-                    <IconUpload
-                      size={52}
-                      color="var(--mantine-color-blue-6)"
-                      stroke={1.5}
-                    />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX
-                      size={52}
-                      color="var(--mantine-color-red-6)"
-                      stroke={1.5}
-                    />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto
-                      size={52}
-                      color="var(--mantine-color-dimmed)"
-                      stroke={1.5}
-                    />
-                  </Dropzone.Idle>
 
-                  <div>
+            {previewImage && (
-                    <Text size="xl" inline>
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
-                      Drag images here or click to select files
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Attach as many files as you like, each file should not
-                      exceed 5mb
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {previewImage && (
                 <Image
-                  src={
+                  src={previewImage}
-                    typeof previewImage === 'string'
+                  alt="Preview Gambar"
-                      ? previewImage
+                  radius="md"
-                      : previewImage?.preview
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
-                  }
-                  alt="Preview"
-                  width={280}
-                  height={180}
-                  fit="cover"
-                  radius="sm"
-                  mt="md"
                   loading="lazy"
                 />
-              )}
+              </Box>
-            </Box>
+            )}
           </Box>
 
+          {/* Tanggal Masuk */}
           <TextInput
             label="Tanggal Masuk"
             type="date"
             placeholder="Contoh: 2022-01-01"
             value={formatDateForInput(formData.tanggalMasuk)}
-            onChange={(e) => updateForm('tanggalMasuk', e.target.value)}
+            onChange={(e) => setFormData({ ...formData, tanggalMasuk: e.target.value })}
           />
 
+          {/* Email */}
           <TextInput
             label="Email"
-            placeholder="Contoh: email@example.com"
+            type="email"
+            placeholder="contoh@email.com"
             value={formData.email}
-            onChange={(e) => updateForm('email', e.currentTarget.value)}
+            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
           />
 
+          {/* Telepon */}
           <TextInput
             label="Telepon"
-            placeholder="Contoh: 08123456789"
+            placeholder="08123456789"
             value={formData.telepon}
-            onChange={(e) => updateForm('telepon', e.currentTarget.value)}
+            onChange={(e) => setFormData({ ...formData, telepon: e.target.value })}
           />
 
+          {/* Alamat */}
           <TextInput
             label="Alamat"
-            placeholder="Contoh: Jl. Contoh No. 1"
+            placeholder="Jl. Contoh No. 123"
             value={formData.alamat}
-            onChange={(e) => updateForm('alamat', e.currentTarget.value)}
+            onChange={(e) => setFormData({ ...formData, alamat: e.target.value })}
           />
 
-          <Select
+          {/* Posisi */}
-            label="Posisi"
+          <Box>
-            placeholder="Pilih posisi"
+            <Text fw="bold" fz="sm" mb={6}>Posisi</Text>
-            data={
+            <Select
-              strukturorganisasiState.posisiOrganisasi.findMany.data?.map(
+              placeholder="Pilih posisi"
-                (p) => ({
+              data={stateStrukturBumDes.posisiOrganisasi.findManyAll.data?.map(p => ({ value: p.id, label: p.nama })) || []}
-                  value: p.id,
+              value={formData.posisiId}
-                  label: p.nama,
+              onChange={(value) => value && setFormData({ ...formData, posisiId: value })}
-                })
+              searchable
-              ) || []
+              clearable
-            }
+            />
-            value={formData.posisiId}
+          </Box>
-            onChange={(value) => {
-              if (value !== null) updateForm('posisiId', value);
-            }}
-          />
 
-          <Select
+          {/* Status Pegawai */}
-            label="Status Pegawai"
+          <Box>
-            data={[
+            <Text fw="bold" fz="sm" mb={6}>Status Pegawai</Text>
-              { value: 'true', label: 'Aktif' },
+            <Select
-              { value: 'false', label: 'Tidak Aktif' },
+              data={[
-            ]}
+                { value: 'true', label: 'Aktif' },
-            value={String(formData.isActive)}
+                { value: 'false', label: 'Tidak Aktif' },
-            onChange={(val) => updateForm('isActive', val === 'true')}
+              ]}
-          />
+              value={String(formData.isActive)}
+              onChange={(val) => setFormData({ ...formData, isActive: val === 'true' })}
+              clearable
+            />
+          </Box>
 
-          <Group>
+          {/* Submit Button */}
-            <Button onClick={handleSubmit} color="blue">
+          <Group justify="flex-end" mt="md">
+            <Button
+              onClick={handleSubmit}
+              loading={stateOrganisasi.edit.loading}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
               Simpan
             </Button>
           </Group>

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/[id]/page.tsx

@@ -1,42 +1,56 @@
 'use client'
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function DetailPegawai() {
-  const statePegawai = useProxy(strukturorganisasiState.pegawai)
+  const statePegawai = useProxy(stateStrukturBumDes.pegawai);
-  const [modalHapus, setModalHapus] = useState(false)
+  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalNonActive, setModalNonActive] = useState(false);
-  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
   const router = useRouter();
 
   useShallowEffect(() => {
-    statePegawai.findUnique.load(params?.id as string)
+    stateStrukturBumDes.posisiOrganisasi.findMany.load();
-  }, [])
+    statePegawai.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      statePegawai.delete.byId(selectedId)
+      statePegawai.delete.byId(selectedId);
-      setModalHapus(false)
+      setModalHapus(false);
-      setSelectedId(null)
+      setSelectedId(null);
-      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai")
+      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
     }
-  }
+  };
+
+  const handleNonActive = () => {
+    if (selectedId) {
+      statePegawai.nonActive.byId(selectedId);
+      setModalNonActive(false);
+      setSelectedId(null);
+      router.push("/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai");
+    }
+  };
 
   if (!statePegawai.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = statePegawai.findUnique.data;
+
   return (
     <Box>
       <Box mb={10}>
@@ -44,91 +58,125 @@ function DetailPegawai() {
           <IconArrowBack color={colors['blue-button']} size={25} />
         </Button>
       </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+      <Paper
-        <Stack>
+        withBorder
-          <Text fz={"xl"} fw={"bold"}>Detail Pegawai</Text>
+        w={{ base: "100%", md: "60%" }}
-          <Paper bg={colors['BG-trans']} p={'md'}>
+        bg={colors['white-1']}
-            <Stack gap={"xs"}>
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Pegawai PPID
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="md">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Lengkap</Text>
+                <Text fz="lg" fw="bold">Nama Lengkap</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.namaLengkap}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
-              </Box>
+                  {data.namaLengkap || '-'} {data.gelarAkademik || ''}
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Gelar Akademik</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.gelarAkademik}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Image</Text>
-                {statePegawai.findUnique.data?.image?.link ? (
-                  <Image src={statePegawai.findUnique.data?.image?.link} alt='' loading="lazy" />
-                ) : (
-                  <Text fz={"md"} c="dimmed">Tidak ada gambar</Text>
-                )}
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Tanggal Masuk</Text>
-                <Text fz={"lg"}>
-                  {statePegawai.findUnique.data?.tanggalMasuk
-                    ? new Date(statePegawai.findUnique.data.tanggalMasuk).toLocaleDateString()
-                    : "-"}
                 </Text>
               </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Email</Text>
-                <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.email}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Telepon</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.telepon}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Alamat</Text>
-                <Text fz={"lg"} style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{statePegawai.findUnique.data?.alamat}</Text>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Posisi</Text>
-                <Stack gap={4}>
-                  {statePegawai.findUnique.data?.posisi ? (
-                    <Text fz={"lg"}>
-                     {statePegawai.findUnique.data.posisi.nama}
-                    </Text>
-                  ) : (
-                    <Text fz={"lg"} c="dimmed">
-                      Tidak ada posisi
-                    </Text>
-                  )}
-                </Stack>
-              </Box>
-              <Box>
-                <Text fz={"lg"} fw={"bold"}>Aktif</Text>
-                <Text fz={"lg"}>{statePegawai.findUnique.data?.isActive ? "Ya" : "Tidak"}</Text>
-              </Box>
 
               <Box>
-                <Flex gap={"xs"}>
+                <Text fz="lg" fw="bold">Posisi</Text>
-                  <Button
+                <Text fz="md" c="dimmed">{data.posisi?.nama || '-'}</Text>
-                    onClick={() => {
+              </Box>
-                      if (statePegawai.findUnique.data) {
+
-                        setSelectedId(statePegawai.findUnique.data.id);
+              <Box>
-                        setModalHapus(true);
+                <Text fz="lg" fw="bold">Email</Text>
-                      }
+                <Text fz="md" c="dimmed">{data.email || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Telepon</Text>
+                <Text fz="md" c="dimmed">{data.telepon || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Alamat</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.alamat || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal Masuk</Text>
+                <Text fz="md" c="dimmed">
+                  {data.tanggalMasuk ? new Date(data.tanggalMasuk).toLocaleDateString() : '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Status</Text>
+                <Text fz="md" c={data.isActive ? 'green' : 'red'}>
+                  {data.isActive ? 'Aktif' : 'Tidak Aktif'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Foto Profil</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.namaLengkap || 'Foto Profil'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                    mt="sm"
+                    style={{
+                      border: '1px solid #e0e0e0',
+                      borderRadius: '8px',
                     }}
-                    disabled={!statePegawai.findUnique.data}
+                    loading='lazy'
-                    color="red">
+                  />
-                    <IconX size={20} />
+                ) : (
+                  <Text fz="sm" c="dimmed" mt="sm">Tidak ada foto profil</Text>
+                )}
+              </Box>
+
+              <Button
+                color={data.isActive ? "green" : "gray"}
+                onClick={() => {
+                  setSelectedId(data.id || null);
+                  setModalNonActive(true);
+                }}
+                variant="light"
+                radius="md"
+                size="md"
+              >
+                {data.isActive ? "Aktif" : "Nonaktif"}
+              </Button>
+
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Pegawai" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id || null);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Pegawai" withArrow position="top">
                   <Button
-                    onClick={() => {
+                    color="green"
-                      if (statePegawai.findUnique.data) {
+                    onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${data.id}/edit`)}
-                        router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${statePegawai.findUnique.data.id}/edit`);
+                    variant="light"
-                      }
+                    radius="md"
-                    }}
+                    size="md"
-                    disabled={!statePegawai.findUnique.data}
+                  >
-                    color="green">
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
+                </Tooltip>
-              </Box>
+              </Group>
             </Stack>
           </Paper>
         </Stack>
@@ -139,7 +187,15 @@ function DetailPegawai() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus produk ini?"
+        text="Apakah Anda yakin ingin menghapus data pegawai ini?"
+      />
+
+      {/* Modal NonActive */}
+      <ModalKonfirmasiHapus
+        opened={modalNonActive}
+        onClose={() => setModalNonActive(false)}
+        onConfirm={handleNonActive}
+        text="Apakah Anda yakin ingin menonaktifkan pegawai ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create/page.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,17 +12,17 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-function CreatePegawai() {
+function CreatePegawaiBumDes() {
   const router = useRouter();
   const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
-  const stateOrganisasi = useProxy(strukturorganisasiState)
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai)
   useEffect(() => {
-    stateOrganisasi.posisiOrganisasi.findMany.load();
+    stateStrukturBumDes.posisiOrganisasi.findManyAll.load();
     resetForm();
   }, []);
 
   const resetForm = () => {
-    stateOrganisasi.pegawai.create.form = {
+    stateOrganisasi.create.form = {
       namaLengkap: "",
       gelarAkademik: "",
       imageId: "",
@@ -30,7 +31,7 @@ function CreatePegawai() {
       telepon: "",
       alamat: "",
       posisiId: "",
-      isActive: true,  
+      isActive: true,
     };
   };
 
@@ -52,15 +53,15 @@ function CreatePegawai() {
       }
 
       // Set status aktif secara otomatis
-      stateOrganisasi.pegawai.create.form.isActive = true;
+      stateOrganisasi.create.form.isActive = true;
-      
+
       // Simpan ID gambar ke form
-      stateOrganisasi.pegawai.create.form.imageId = uploaded.id;
+      stateOrganisasi.create.form.imageId = uploaded.id;
-      
+
       // Submit form
-      await stateOrganisasi.pegawai.create.submit();
+      await stateOrganisasi.create.submit();
-      
+
-      
+
       // Reset form dan redirect
       resetForm();
       toast.success("Data pegawai berhasil ditambahkan");
@@ -72,130 +73,194 @@ function CreatePegawai() {
   };
 
   return (
-    <Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      <Box mb={10}>
+      <Group mb="md">
-        <Button variant="subtle" onClick={() => router.back()}>
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <IconArrowBack color={colors['blue-button']} size={25} />
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-        </Button>
+            <IconArrowBack color={colors['blue-button']} size={24} />
-      </Box>
+          </Button>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
+        </Tooltip>
-        <Stack gap={"xs"}>
+        <Title order={4} ml="sm" c="dark">
-          <Title order={3}>Create Pegawai</Title>
+          Tambah Pegawai BUMDesa
-          <TextInput
+        </Title>
-            label="Nama Lengkap"
+      </Group>
-            placeholder="Masukkan nama lengkap"
-            defaultValue={stateOrganisasi.pegawai.create.form.namaLengkap}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.namaLengkap = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Gelar Akademik"
-            placeholder="Contoh: S.Kom"
-            defaultValue={stateOrganisasi.pegawai.create.form.gelarAkademik}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.gelarAkademik = e.currentTarget.value)}
-          />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box >
-              <Dropzone
-                onDrop={(files) => {
-                  const file = files[0]; // Hanya ambil file pertama
-                  if (file) {
-                    setPreviewImage({
-                      file,
-                      preview: URL.createObjectURL(file)
-                    });
-                  }
-                }}
-                maxSize={5 * 1024 ** 2} // 5MB
-                accept={{
-                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
-                }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
 
-                  <div>
+      <Paper
-                    <Text size="xl" inline>
+        w={{ base: '100%', md: '50%' }}
-                      Drag images here or click to select files
+        bg={colors['white-1']}
-                    </Text>
+        p="lg"
-                    <Text size="sm" c="dimmed" inline mt={7}>
+        radius="md"
-                      Attach as many files as you like, each file should not exceed 5mb
+        shadow="sm"
-                    </Text>
+        style={{ border: '1px solid #e0e0e0' }}
-                  </div>
+      >
-                </Group>
+        <Stack gap="md">
-              </Dropzone>
+          <Box>
-              {previewImage && (
+            <TextInput
+              label="Nama Lengkap"
+              placeholder="Masukkan nama lengkap"
+              defaultValue={stateOrganisasi.create.form.namaLengkap}
+              onChange={(e) => (stateOrganisasi.create.form.namaLengkap = e.currentTarget.value)}
+              required
+            />
+          </Box>
+          <Box>
+            <TextInput
+              label="Gelar Akademik"
+              placeholder="Contoh: S.Kom"
+              defaultValue={stateOrganisasi.create.form.gelarAkademik}
+              onChange={(e) => (stateOrganisasi.create.form.gelarAkademik = e.currentTarget.value)}
+            />
+          </Box>
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Foto Profil
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const file = files[0];
+                if (file) {
+                  setPreviewImage({
+                    file,
+                    preview: URL.createObjectURL(file)
+                  });
+                }
+              }}
+              maxSize={5 * 1024 ** 2} // 5MB
+              accept={{
+                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
+              }}
+              styles={{
+                root: {
+                  border: '2px dashed #ced4da',
+                  borderRadius: '8px',
+                  padding: '20px',
+                  textAlign: 'center',
+                  cursor: 'pointer',
+                  '&:hover': {
+                    borderColor: '#228be6',
+                  },
+                },
+              }}
+            >
+              <Group justify="center" gap="xl" mih={160} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="md" inline>
+                    Seret gambar ke sini atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Format yang didukung: JPG, PNG, WebP. Maksimal 5MB
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="md">
+                <Text fw="bold" fz="sm" mb={6}>
+                  Preview Gambar
+                </Text>
                 <Image
                   src={previewImage.preview}
                   alt="Preview"
-                  width={280}
+                  width={200}
-                  height={180}
+                  height={200}
                   fit="cover"
-                  radius="sm"
+                  radius="md"
-                  mt="md"
+                  style={{
-                  loading="lazy"
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                  }}
+                  loading='lazy'
                 />
-              )}
+              </Box>
-            </Box>
+            )}
+          </Box>
+          <Box>
+            <TextInput
+              label="Tanggal Masuk"
+              type="date"
+              placeholder="Contoh: 2022-01-01"
+              defaultValue={stateOrganisasi.create.form.tanggalMasuk}
+              onChange={(e) => (stateOrganisasi.create.form.tanggalMasuk = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <TextInput
+              label="Email"
+              type="email"
+              placeholder="Contoh: email@example.com"
+              defaultValue={stateOrganisasi.create.form.email}
+              onChange={(e) => (stateOrganisasi.create.form.email = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <TextInput
+              label="Nomor Telepon"
+              placeholder="Contoh: 08123456789"
+              defaultValue={stateOrganisasi.create.form.telepon}
+              onChange={(e) => (stateOrganisasi.create.form.telepon = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <TextInput
+              label="Alamat"
+              placeholder="Contoh: Jl. Contoh No. 1"
+              defaultValue={stateOrganisasi.create.form.alamat}
+              onChange={(e) => (stateOrganisasi.create.form.alamat = e.currentTarget.value)}
+            />
+          </Box>
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Posisi
+            </Text>
+            <Select
+              placeholder="Pilih posisi"
+              data={stateStrukturBumDes.posisiOrganisasi.findManyAll.data?.map(p => ({
+                value: p.id,
+                label: p.nama
+              })) || []}
+              value={stateOrganisasi.create.form.posisiId}
+              onChange={(value) => {
+                if (value) stateOrganisasi.create.form.posisiId = value;
+              }}
+              searchable
+              clearable
+            />
           </Box>
-          <TextInput
-            label="Tanggal Masuk"
-            type="date"
-            placeholder="Contoh: 2022-01-01"
-            defaultValue={stateOrganisasi.pegawai.create.form.tanggalMasuk}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.tanggalMasuk = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Email"
-            placeholder="Contoh: email@example.com"
-            defaultValue={stateOrganisasi.pegawai.create.form.email}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.email = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Telepon"
-            placeholder="Contoh: 08123456789"
-            defaultValue={stateOrganisasi.pegawai.create.form.telepon}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.telepon = e.currentTarget.value)}
-          />
-          <TextInput
-            label="Alamat"
-            placeholder="Contoh: Jl. Contoh No. 1"
-            defaultValue={stateOrganisasi.pegawai.create.form.alamat}
-            onChange={(e) => (stateOrganisasi.pegawai.create.form.alamat = e.currentTarget.value)}
-          />
-          <Select
-            label="Posisi"
-            placeholder="Pilih posisi"
-            data={stateOrganisasi.posisiOrganisasi.findMany.data?.map(p => ({
-              value: p.id,
-              label: p.nama
-            })) || []}
-            defaultValue={stateOrganisasi.pegawai.create.form.posisiId}
-            onChange={(value) => {
-              if (value) stateOrganisasi.pegawai.create.form.posisiId = value;
-            }}
-            searchable
-          />
 
 
-          <Button
+          <Group justify="flex-end" mt="md">
-            onClick={handleSubmit}
+            <Button
-            color="blue"
+              onClick={handleSubmit}
-          >
+              radius="md"
-            Simpan
+              size="md"
-          </Button>
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
 
-export default CreatePegawai;
+export default CreatePegawaiBumDes;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/page.tsx

@@ -1,33 +1,33 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, ThemeIcon } from '@mantine/core';
+import { Badge, Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, ThemeIcon, Title, Tooltip } from '@mantine/core';
-import { IconCheck, IconDeviceImacCog, IconSearch, IconX } from '@tabler/icons-react';
+import { IconCheck, IconDeviceImacCog, IconPlus, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
-import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
 
-function Pegawai() {
+
+function PegawaiBumDes() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Pegawai'
+        title='Pegawai BUMDesa'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPegawai search={search} />
+      <ListPegawaiBumdes search={search} />
     </Box>
   );
 }
 
-function ListPegawai({ search }: { search: string }) {
+function ListPegawaiBumdes({ search }: { search: string }) {
-  const stateOrganisasi = useProxy(strukturorganisasiState.pegawai);
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
   const router = useRouter();
 
   const {
@@ -39,21 +39,10 @@ function ListPegawai({ search }: { search: string }) {
   } = stateOrganisasi.findMany;
 
   useEffect(() => {
-    load(page, 10);
+    load(page, 10, search);
-  }, [page]);
+  }, [page, search]);
 
-  const filteredData = useMemo(() => {
+  const filteredData = data || []
-    if (!data) return [];
-    return data.filter(item => {
-      const keyword = search.toLowerCase();
-      return (
-        item.namaLengkap?.toLowerCase().includes(keyword) ||
-        item.gelarAkademik?.toLowerCase().includes(keyword) ||
-        item.telepon?.toLowerCase().includes(keyword) ||
-        item.posisi?.nama?.toLowerCase().includes(keyword)
-      );
-    });
-  }, [data, search]); 
 
   // Handle loading state
   if (loading || !data) {
@@ -67,29 +56,51 @@ function ListPegawai({ search }: { search: string }) {
   if (data.length === 0) {
     return (
       <Box py={10}>
-        <Paper p="md" ta="center">
+        <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-          <p>Tidak ada data pegawai yang tersedia</p>
+          <Group justify="space-between" mb="md">
+            <Title order={4}>Daftar Pegawai BUMDesa</Title>
+            <Tooltip label="Tambah Pegawai Baru" withArrow>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create')}
+              >
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Group>
+          <Center py="xl">
+            <Text c="dimmed">Tidak ada data pegawai yang ditemukan</Text>
+          </Center>
         </Paper>
       </Box>
     );
   }
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'} h={{base: 770, md: 650}}>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
-        <JudulList
+        <Group justify="space-between" mb="md">
-          title='List Pegawai'
+          <Title order={4}>Daftar Pegawai BUMDesa</Title>
-          href='/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create'
+          <Tooltip label="Tambah Pegawai Baru" withArrow>
-        />
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
         <Box style={{ overflowX: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh>Nama</TableTh>
+                <TableTh style={{ width: '25%' }}>Nama Lengkap</TableTh>
-                <TableTh>Gelar Akademik</TableTh>
+                <TableTh style={{ width: '20%' }}>Posisi</TableTh>
-                <TableTh>Telepon</TableTh>
+                <TableTh style={{ width: '10%' }}>Status</TableTh>
-                <TableTh>Posisi</TableTh>
+                <TableTh style={{ width: '10%' }}>Aksi</TableTh>
-                <TableTh>Aktif</TableTh>
-                <TableTh>Detail</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
@@ -106,10 +117,20 @@ function ListPegawai({ search }: { search: string }) {
                 }) // Aktif di atas
               ).map((item) => (
                 <TableTr key={item.id}>
-                  <TableTd>{item.namaLengkap}</TableTd>
+                  <TableTd>
-                  <TableTd>{item.gelarAkademik}</TableTd>
+                    <Box w={150}>
-                  <TableTd>{item.telepon}</TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
-                  <TableTd>{item.posisi?.nama}</TableTd>
+                        {item.namaLengkap}
+                      </Text>
+                    </Box>
+                  </TableTd>
+                  <TableTd>
+                    <Box w={150}>
+                      <Badge variant="light" color="blue">
+                        {item.posisi?.nama || 'Belum diatur'}
+                      </Badge>
+                    </Box>
+                  </TableTd>
                   <TableTd>
                     <Group gap="xs" wrap="nowrap">
                       <Box visibleFrom="sm">
@@ -131,8 +152,15 @@ function ListPegawai({ search }: { search: string }) {
                     </Group>
                   </TableTd>
                   <TableTd>
-                    <Button bg={"green"} onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}>
+                    <Button
-                      <IconDeviceImacCog size={25} />
+                      size="xs"
+                      radius="md"
+                      variant="light"
+                      color="blue"
+                      leftSection={<IconDeviceImacCog size={16} />}
+                      onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/pegawai/${item.id}`)}
+                    >
+                      Detail
                     </Button>
                   </TableTd>
                 </TableTr>
@@ -140,21 +168,22 @@ function ListPegawai({ search }: { search: string }) {
             </TableTbody>
           </Table>
         </Box>
+        <Center mt="lg">
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            withEdges
+            withControls
+            radius="md"
+          />
+        </Center>
       </Paper>
-     <Center>
-     <Pagination
-        value={page}
-        onChange={(newPage) => {
-          load(newPage, 10);
-          window.scrollTo(0, 0); 
-        }}
-        total={totalPages}
-        mt="md"
-        mb="md"
-      />
-     </Center>
     </Box>
   );
 }
 
-export default Pegawai;
+export default PegawaiBumDes;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/[id]/page.tsx

@@ -1,30 +1,22 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 import colors from '@/con/colors';
-import {
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-  Box,
-  Button,
-  Group,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Title,
-  Tooltip,
-} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-function EditPosisiOrganisasi() {
+function EditPosisiOrganisasiBumDes() {
   const router = useRouter();
   const params = useParams();
   const id = params?.id as string;
-  const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
 
   const [formData, setFormData] = useState({
     nama: '',
@@ -32,24 +24,27 @@ function EditPosisiOrganisasi() {
     hierarki: 0,
   });
 
-  // Load data awal sekali saja
+  // Fungsi generik untuk update formData
-  useEffect(() => {
+  const handleChange = (field: keyof typeof formData, value: any) => {
-    const loadPosisiOrganisasi = async () => {
+    setFormData(prev => ({ ...prev, [field]: value }));
-      if (!id) return;
+  };
 
+  useEffect(() => {
+    if (!id) return;
+
+    const loadPosisiOrganisasi = async () => {
       try {
         const data = await stateOrganisasi.edit.load(id);
-
         if (data) {
           stateOrganisasi.edit.id = id;
           setFormData({
-            nama: data.nama ?? '',
+            nama: data.nama || '',
-            deskripsi: data.deskripsi ?? '',
+            deskripsi: data.deskripsi || '',
-            hierarki: data.hierarki ?? 0,
+            hierarki: data.hierarki || 0,
           });
         }
-      } catch (error) {
+      } catch (err) {
-        console.error('Error loading posisi organisasi:', error);
+        console.error('Error loading posisi organisasi:', err);
         toast.error('Gagal memuat data posisi organisasi');
       }
     };
@@ -57,18 +52,14 @@ function EditPosisiOrganisasi() {
     loadPosisiOrganisasi();
   }, [id]);
 
-  const handleChange = (field: string, value: string | number) => {
-    setFormData((prev) => ({ ...prev, [field]: value }));
-  };
-
   const handleSubmit = async () => {
-    try {
+    if (!formData.nama.trim()) {
-      if (!formData.nama.trim()) {
+      toast.error('Nama posisi organisasi tidak boleh kosong');
-        toast.error('Nama posisi organisasi tidak boleh kosong');
+      return;
-        return;
+    }
-      }
 
-      // update global state HANYA saat submit
+    try {
+      // Update global state hanya saat submit
       stateOrganisasi.edit.form = {
         nama: formData.nama.trim(),
         deskripsi: formData.deskripsi.trim(),
@@ -76,19 +67,17 @@ function EditPosisiOrganisasi() {
       };
 
       if (!stateOrganisasi.edit.id) {
-        stateOrganisasi.edit.id = id; // fallback
+        stateOrganisasi.edit.id = id;
       }
 
       const success = await stateOrganisasi.edit.update();
 
       if (success) {
-        toast.success('Posisi organisasi berhasil diperbarui!');
+        router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
-        router.push(
-          '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi'
-        );
       }
-    } catch (error) {
+    } catch (err) {
-      console.error('Error updating posisi organisasi:', error);
+      console.error('Error updating posisi organisasi:', err);
+      // toast error biasanya sudah ada di update
     }
   };
 
@@ -96,17 +85,12 @@ function EditPosisiOrganisasi() {
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-          <Button
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-            variant="subtle"
-            onClick={() => router.back()}
-            p="xs"
-            radius="md"
-          >
             <IconArrowBack color={colors['blue-button']} size={24} />
           </Button>
         </Tooltip>
         <Title order={4} ml="sm" c="dark">
-          Edit Posisi Organisasi
+          Edit Posisi Organisasi BUMDes
         </Title>
       </Group>
 
@@ -120,39 +104,40 @@ function EditPosisiOrganisasi() {
       >
         <Stack gap="md">
           <TextInput
-            value={formData.nama}
-            onChange={(e) => handleChange('nama', e.target.value)}
             label="Nama Posisi Organisasi"
             placeholder="Masukkan nama posisi organisasi"
+            value={formData.nama}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
           <Box>
-            <Text fz="sm" mb={6}>
+            <Text fw="bold" fz="sm" mb={6}>
               Deskripsi
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) =>
+              onChange={(html) => handleChange('deskripsi', html)}
-                handleChange('deskripsi', htmlContent)
-              }
             />
           </Box>
 
           <TextInput
-            type="number"
-            value={formData.hierarki}
-            onChange={(e) =>
-              handleChange('hierarki', parseInt(e.target.value) || 0)
-            }
             label="Hierarki"
-            placeholder="Masukkan hierarki"
+            type="number"
+            min={0}
+            placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
+            value={formData.hierarki}
+            onChange={(e) => {
+              const value = parseInt(e.target.value, 10);
+              handleChange('hierarki', isNaN(value) ? 0 : value);
+            }}
             required
           />
 
-          <Group justify="right">
+          <Group justify="flex-end" mt="md">
             <Button
               onClick={handleSubmit}
+              loading={stateOrganisasi.edit.loading}
               radius="md"
               size="md"
               style={{
@@ -170,4 +155,4 @@ function EditPosisiOrganisasi() {
   );
 }
 
-export default EditPosisiOrganisasi;
+export default EditPosisiOrganisasiBumDes;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create/page.tsx

@@ -1,128 +1,127 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
-import strukturorganisasiState from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '@/app/admin/(dashboard)/_state/ekonomi/struktur-organisasi/struktur-organisasi';
 import colors from '@/con/colors';
-import {
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-    Box,
-    Button,
-    Group,
-    Paper,
-    Stack,
-    Text,
-    TextInput,
-    Title,
-    Tooltip,
-} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-function CreatePosisiOrganisasi() {
+function CreatePosisiOrganisasiBumDes() {
-    const router = useRouter();
+  const router = useRouter();
-    const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi);
-
+  
-    useEffect(() => {
+  useEffect(() => {
-        stateOrganisasi.findMany.load();
+    stateOrganisasi.findMany.load();
-    }, []);
+    // Initialize form with default values
-
+    stateOrganisasi.create.form = {
-    const resetForm = () => {
+      nama: "",
-        stateOrganisasi.create.form = {
+      deskripsi: "",
-            nama: '',
+      hierarki: 0,
-            deskripsi: '',
-            hierarki: 0,
-        };
     };
-
+    
-    const handleSubmit = async () => {
+    return () => {
-        await stateOrganisasi.create.submit();
+      // Clean up form on unmount
-        resetForm();
+      stateOrganisasi.create.form = {
-        router.push(
+        nama: "",
-            '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi'
+        deskripsi: "",
-        );
+        hierarki: 0,
+      };
     };
+  }, []);
 
-    return (
+  const handleSubmit = async () => {
-        <Box px={{ base: 'sm', md: 'lg' }} py="md">
+    try {
-            {/* Header Back + Title */}
+      if (!stateOrganisasi.create.form.nama.trim()) {
-            <Group mb="md">
+        return toast.error('Nama posisi tidak boleh kosong');
-                <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+      }
-                    <Button
+      
-                        variant="subtle"
+      await stateOrganisasi.create.submit();
-                        onClick={() => router.back()}
+      toast.success('Posisi organisasi berhasil ditambahkan');
-                        p="xs"
+      router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi');
-                        radius="md"
+    } catch (error) {
-                    >
+      toast.error('Gagal menambahkan posisi organisasi');
-                        <IconArrowBack color={colors['blue-button']} size={24} />
+      console.error('Error:', error);
-                    </Button>
+    }
-                </Tooltip>
+  };
-                <Title order={4} ml="sm" c="dark">
-                    Tambah Posisi Organisasi
-                </Title>
-            </Group>
 
-            {/* Form Card */}
+  return (
-            <Paper
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
-                w={{ base: '100%', md: '50%' }}
+      <Group mb="md">
-                bg={colors['white-1']}
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-                p="lg"
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
-                radius="md"
+            <IconArrowBack color={colors['blue-button']} size={24} />
-                shadow="sm"
+          </Button>
-                style={{ border: '1px solid #e0e0e0' }}
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Posisi Organisasi BUMDes
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          <TextInput
+            label="Nama Posisi"
+            placeholder="Contoh: Kepala Desa"
+            defaultValue={stateOrganisasi.create.form.nama}
+            onChange={(e) => (stateOrganisasi.create.form.nama = e.target.value)}
+            required
+          />
+          
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={stateOrganisasi.create.form.deskripsi}
+              onChange={(htmlContent) => {
+                stateOrganisasi.create.form.deskripsi = htmlContent;
+              }}
+            />
+          </Box>
+          
+          <TextInput
+            label="Hierarki"
+            type="number"
+            min={0}
+            placeholder="Contoh: 1 (Angka semakin kecil, posisi semakin tinggi)"
+            defaultValue={stateOrganisasi.create.form.hierarki || ''}
+            onChange={(e) => {
+              const value = parseInt(e.target.value, 10);
+              stateOrganisasi.create.form.hierarki = isNaN(value) ? 0 : value;
+            }}
+            required
+          />
+
+          <Group justify="flex-end" mt="md">
+            <Button
+              onClick={handleSubmit}
+              loading={stateOrganisasi.create.loading}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
             >
-                <Stack gap="md">
+              Simpan
-                    <TextInput
+            </Button>
-                        label="Nama Posisi"
+          </Group>
-                        placeholder="Contoh: Kepala Desa"
+        </Stack>
-                        defaultValue={stateOrganisasi.create.form.nama}
+      </Paper>
-                        onChange={(e) => (stateOrganisasi.create.form.nama = e.currentTarget.value)}
+    </Box>
-                        required
+  );
-                    />
-
-                    <Box>
-                        <Text fz={"sm"} mb={6}>Deskripsi</Text>
-                        <CreateEditor
-                            value={stateOrganisasi.create.form.deskripsi}
-                            onChange={(htmlContent) => {
-                                stateOrganisasi.create.form.deskripsi = htmlContent;
-                            }}
-                        />
-                    </Box>
-
-                    <TextInput
-                        label="Hierarki"
-                        type="number"
-                        placeholder="Contoh: 1"
-                        defaultValue={stateOrganisasi.create.form.hierarki}
-                        onChange={(e) => {
-                            const value = parseInt(e.currentTarget.value, 10);
-                            if (!isNaN(value)) {
-                                stateOrganisasi.create.form.hierarki = value;
-                            }
-                        }}
-                        required
-                    />
-
-                    {/* Action Button */}
-                    <Group justify="right">
-                        <Button
-                            onClick={handleSubmit}
-                            radius="md"
-                            size="md"
-                            style={{
-                                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
-                                color: '#fff',
-                                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
-                            }}
-                        >
-                            Simpan
-                        </Button>
-                    </Group>
-                </Stack>
-            </Paper>
-        </Box>
-    );
 }
 
-export default CreatePosisiOrganisasi;
+export default CreatePosisiOrganisasiBumDes;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/page.tsx

@@ -1,58 +1,37 @@
 'use client'
 import colors from '@/con/colors';
-import {
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
-  Box,
+import { useShallowEffect } from '@mantine/hooks';
-  Button,
-  Center,
-  Group,
-  Paper,
-  Pagination,
-  Skeleton,
-  Stack,
-  Table,
-  TableTbody,
-  TableTd,
-  TableTh,
-  TableThead,
-  TableTr,
-  Text,
-  Title,
-  Tooltip,
-} from '@mantine/core';
 import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import strukturorganisasiState from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
 
-function PosisiOrganisasi() {
+
+function PosisiOrganisasiBumDes() {
   const [search, setSearch] = useState("");
   return (
     <Box>
-      {/* Search Bar */}
       <HeaderSearch
-        title="Posisi Organisasi"
+        title='Posisi Organisasi BUMDes'
-        placeholder="Cari nama, deskripsi, atau hierarki..."
+        placeholder='Cari posisi organisasi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-
+      <ListPosisiOrganisasiBumDes search={search} />
-      {/* List Table */}
-      <ListPosisiOrganisasi search={search} />
     </Box>
   );
 }
 
-function ListPosisiOrganisasi({ search }: { search: string }) {
+function ListPosisiOrganisasiBumDes({ search }: { search: string }) {
-  const stateOrganisasi = useProxy(strukturorganisasiState.posisiOrganisasi);
+  const stateOrganisasi = useProxy(stateStrukturBumDes.posisiOrganisasi)
   const router = useRouter();
-
+  const [modalHapus, setModalHapus] = useState(false)
-  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const [selectedId, setSelectedId] = useState<string | null>(null);
 
   const {
     data,
@@ -66,21 +45,20 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
     load(page, 10, search);
   }, [page, search]);
 
-  const filteredData = data || [];
-
   const handleHapus = async () => {
     if (selectedId) {
       await stateOrganisasi.delete.byId(selectedId);
-      setModalHapus(false);
+      setModalHapus(false)
-      setSelectedId(null);
+      setSelectedId(null)
-      load(page, 10, search); // refresh
     }
-  };
+  }
+
+  const filteredData = data || []
 
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={500} radius="md" />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
@@ -89,71 +67,70 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
     <Box py={10}>
       <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Group justify="space-between" mb="md">
-          <Title order={4}>Daftar Posisi Organisasi</Title>
+          <Title order={4}>Daftar Posisi Organisasi BumDes</Title>
-          <Tooltip label="Tambah Posisi Baru" withArrow>
+          <Tooltip label="Tambah Posisi Organisasi" withArrow>
             <Button
               leftSection={<IconPlus size={18} />}
               color="blue"
               variant="light"
-              onClick={() =>
+              onClick={() => router.push('/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create')}
-                router.push(
-                  '/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/create'
-                )
-              }
             >
               Tambah Baru
             </Button>
           </Tooltip>
         </Group>
-
         <Box style={{ overflowX: 'auto' }}>
           <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh style={{ width: '25%' }}>Nama Posisi</TableTh>
+                <TableTh style={{ width: '20%' }}>Nama Posisi</TableTh>
-                <TableTh style={{ width: '15%' }}>Hierarki</TableTh>
+                <TableTh style={{ width: '20%' }}>Deskripsi</TableTh>
-                <TableTh style={{ width: '25%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Hierarki</TableTh>
-                <TableTh style={{ width: '25%' }}>Hapus</TableTh>
+                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Hapus</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length > 0 ? (
                 filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '25%' }}>
+                    <TableTd style={{ width: '20%' }}>
                       <Text fw={500} truncate="end" lineClamp={1}>{item.nama}</Text>
                     </TableTd>
-                    <TableTd style={{ width: '15%' }}>
+                    <TableTd style={{ width: '20%' }}>
-                      <Text fz="sm">{item.hierarki ?? '-'}</Text>
+                      <Box w={200}>
+                        <Text lineClamp={1} fz="sm" c="dimmed" dangerouslySetInnerHTML={{ __html: item.deskripsi || '-' }} />
+                      </Box>
                     </TableTd>
-                    <TableTd style={{ width: '25%' }}>
+                    <TableTd style={{ width: '20%' }}>
-                      <Tooltip label="Ubah Posisi Organisasi" withArrow>
+                      <Text>{item.hierarki || '-'}</Text>
+                    </TableTd>
+                    <TableTd style={{ width: '20%' }}>
+                      <Tooltip label="Edit" withArrow>
                         <Button
                           variant="light"
                           color="green"
-                          onClick={() =>
+                          size="sm"
-                            router.push(
+                          onClick={() => router.push(`/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`)}
-                              `/admin/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/posisi-organisasi/${item.id}`
-                            )
-                          }
                         >
                           <IconEdit size={18} />
                         </Button>
                       </Tooltip>
                     </TableTd>
-                    <TableTd style={{ width: '25%' }}>
+                    <TableTd style={{ width: '20%' }}>
-                      <Tooltip label="Hapus Posisi Organisasi" withArrow>
+                    <Tooltip label="Hapus" withArrow>
-                        <Button
+                      <Button
-                          variant="light"
+                        variant="light"
-                          color="red"
+                        color="red"
-                          onClick={() => {
+                        size="sm"
-                            setSelectedId(item.id);
+                        onClick={() => {
-                            setModalHapus(true);
+                          setSelectedId(item.id);
-                          }}
+                          setModalHapus(true);
-                        >
+                        }}
-                          <IconTrash size={18} />
+                      >
-                        </Button>
+                        <IconTrash size={18} />
-                      </Tooltip>
+                      </Button>
+                    </Tooltip>
                     </TableTd>
                   </TableTr>
                 ))
@@ -170,8 +147,6 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
           </Table>
         </Box>
       </Paper>
-
-      {/* Pagination */}
       <Center>
         <Pagination
           value={page}
@@ -186,16 +161,15 @@ function ListPosisiOrganisasi({ search }: { search: string }) {
           radius="md"
         />
       </Center>
-
       {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus posisi organisasi ini?"
+        text="Apakah anda yakin ingin menghapus posisi organisasi BumDes ini?"
       />
     </Box>
   );
 }
 
-export default PosisiOrganisasi;
+export default PosisiOrganisasiBumDes;

src/app/admin/(dashboard)/ekonomi/struktur-organisasi-dan-sk-pengurus-bumdesa/struktur-organisasi/page.tsx

@@ -0,0 +1,133 @@
+/* eslint-disable prefer-const */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import { Box, Center, Image, Loader, Paper, Stack, Text, Tooltip } from '@mantine/core';
+import { IconUsers } from '@tabler/icons-react';
+import { OrganizationChart } from 'primereact/organizationchart';
+import { useEffect } from 'react';
+import { useProxy } from 'valtio/utils';
+import stateStrukturBumDes from '../../../_state/ekonomi/struktur-organisasi/struktur-organisasi';
+
+function StrukturOrganisasiBumDes() {
+  return (
+    <Box py="md">
+      <ListStrukturOrganisasiBumDes />
+    </Box>
+  );
+}
+
+function ListStrukturOrganisasiBumDes() {
+  const stateOrganisasi = useProxy(stateStrukturBumDes.pegawai);
+
+  useEffect(() => {
+    stateOrganisasi.findMany.load();
+  }, []);
+
+  if (stateOrganisasi.findMany.loading) {
+    return (
+      <Center py={40}>
+        <Loader size="lg" />
+      </Center>
+    );
+  }
+
+  if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
+    return (
+      <Stack align="center" py={60} gap="sm">
+        <IconUsers size={60} stroke={1.5} color="var(--mantine-color-gray-6)" />
+        <Text fw={500} c="dimmed">Belum ada struktur organisasi yang ditambahkan</Text>
+      </Stack>
+    );
+  }
+
+  const posisiMap = new Map<string, any>();
+
+  const aktifPegawai = stateOrganisasi.findMany.data.filter(p => p.isActive);
+
+  for (const pegawai of aktifPegawai) {
+    const posisiId = pegawai.posisi.id;
+    if (!posisiMap.has(posisiId)) {
+      posisiMap.set(posisiId, {
+        ...pegawai.posisi,
+        pegawaiList: [],
+        children: [],
+      });
+    }
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
+  }
+
+  let root: any[] = [];
+  posisiMap.forEach((posisi) => {
+    if (posisi.parentId) {
+      const parent = posisiMap.get(posisi.parentId);
+      if (parent) {
+        parent.children.push(posisi);
+      }
+    } else {
+      root.push(posisi);
+    }
+  });
+
+  function toOrgChartFormat(node: any): any {
+    return {
+      expanded: true,
+      type: 'person',
+      styleClass: 'p-person',
+      data: {
+        name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ada pegawai',
+        status: node.nama,
+        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
+      },
+      children: node.children.map(toOrgChartFormat),
+    };
+  }
+
+  const chartData = root.map(toOrgChartFormat);
+
+  return (
+    <Box py={10}>
+      <Paper
+        p="md"
+        radius="lg"
+        shadow="md"
+        withBorder
+        style={{
+          overflowX: 'auto',
+          background: 'linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%)',
+        }}
+      >
+        <OrganizationChart value={chartData} nodeTemplate={nodeTemplate} />
+      </Paper>
+    </Box>
+  );
+}
+
+function nodeTemplate(node: any) {
+  const imageSrc = node?.data?.image || '/img/default.png';
+  const name = node?.data?.name || 'Tanpa Nama';
+  const status = node?.data?.status || 'Tidak ada deskripsi';
+
+  return (
+    <Stack align="center" gap={6} p="sm" style={{ minWidth: 160 }}>
+      <Tooltip label={name} position="top" withArrow>
+        <Image
+          src={imageSrc}
+          alt={name}
+          radius="xl"
+          w={100}
+          h={100}
+          fit="cover"
+          style={{
+            border: '1px solid #D3D1D1FF',
+          }}
+          loading='lazy'
+        />
+      </Tooltip>
+      <Text fw={600} ta="center" size="sm">{name}</Text>
+      <Text size="xs" c="dimmed" ta="center">{status}</Text>
+    </Stack>
+  );
+}
+
+export default StrukturOrganisasiBumDes;

src/app/admin/(dashboard)/keamanan/kontak-darurat/kontak-darurat-keamanan/[id]/edit/page.tsx

@@ -29,10 +29,11 @@ function EditKontakDaruratKeamanan() {
   const kontakState = useProxy(kontakDarurat.kontakDaruratKeamananState);
 
   const [isLoading, setIsLoading] = useState(true);
+  // Remove the dependency on data in the initial state
   const [formData, setFormData] = useState({
     name: "",
     icon: "" as IconKey | "",
-    kategoriId: [] as string[],
+    kategoriId: [] as string[],  // Initialize as empty array
   });
 
   // Load data dari backend
@@ -41,7 +42,7 @@ function EditKontakDaruratKeamanan() {
       try {
         setIsLoading(true);
         await kontakDarurat.kontakDaruratItem.findMany.load();
-
+    
         const id = params?.id as string;
         if (id) {
           const data = await kontakState.update.load(id);
@@ -49,7 +50,7 @@ function EditKontakDaruratKeamanan() {
             setFormData({
               name: data.nama || "",
               icon: (data.icon as IconKey) || "",
-              kategoriId: data.kategoriId || [],
+              kategoriId: Array.isArray(data.kategoriId) ? data.kategoriId : [],
             });
           }
         }
@@ -134,9 +135,9 @@ function EditKontakDaruratKeamanan() {
             data={
               Array.isArray(kontakDarurat.kontakDaruratItem.findMany.data)
                 ? kontakDarurat.kontakDaruratItem.findMany.data.map((v) => ({
-                    value: v.id,
+                  value: v.id,
-                    label: v.nama,
+                  label: v.nama,
-                  }))
+                }))
                 : []
             }
             clearable

src/app/admin/(dashboard)/keamanan/laporan-publik/[id]/edit/page.tsx

@@ -48,27 +48,29 @@ function EditLaporanPublik() {
     const loadLaporanPublik = async () => {
       const id = params?.id as string;
       if (!id) return;
-
+  
       try {
         const data = await stateLaporan.edit.load(id);
         if (data) {
-          setFormData({
+          setFormData((prev) => ({
-            judul: data.judul || '',
+            ...prev,
-            lokasi: data.lokasi || '',
+            judul: data.judul ?? prev.judul,
-            tanggalWaktu: data.tanggalWaktu || '',
+            lokasi: data.lokasi ?? prev.lokasi,
-            status: data.status || '',
+            tanggalWaktu: data.tanggalWaktu ?? prev.tanggalWaktu,
-            penanganan: data.penanganan?.[0]?.deskripsi || '',
+            status: (data.status as Status) ?? prev.status,
-            kronologi: data.kronologi || '',
+            penanganan: data.penanganan?.[0]?.deskripsi ?? prev.penanganan,
-          });
+            kronologi: data.kronologi ?? prev.kronologi,
+          }));
         }
       } catch (error) {
-        console.error('Error loading laporan publik:', error);
+        console.error("Error loading laporan publik:", error);
         toast.error("Gagal mengambil data laporan publik");
       }
     };
-
+  
     loadLaporanPublik();
   }, [params?.id, stateLaporan.edit]);
+  
 
   const handleChange = (field: string, value: string | Status) => {
     setFormData((prev) => ({ ...prev, [field]: value }));

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/[id]/edit/page.tsx

@@ -10,6 +10,7 @@ import {
   Group,
   Paper,
   Stack,
+  Text,
   TextInput,
   Title,
   Tooltip,
@@ -61,9 +62,9 @@ function EditPencegahanKriminalitas() {
 
   const handleChange =
     (field: keyof typeof formData) =>
-    (e: React.ChangeEvent<HTMLInputElement>) => {
+      (e: React.ChangeEvent<HTMLInputElement>) => {
-      setFormData((prev) => ({ ...prev, [field]: e.target.value }));
+        setFormData((prev) => ({ ...prev, [field]: e.target.value }));
-    };
+      };
 
   const handleSubmit = async () => {
     const converted = convertYoutubeUrlToEmbed(formData.linkVideo);
@@ -128,13 +129,17 @@ function EditPencegahanKriminalitas() {
             required
           />
 
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fw="bold" fz="sm" mb={6}>
-            placeholder="Masukkan deskripsi singkat"
+              Deskripsi
-            value={formData.deskripsiSingkat}
+            </Text>
-            onChange={handleChange('deskripsiSingkat')}
+            <EditEditor
-            required
+              value={formData.deskripsiSingkat}
-          />
+              onChange={(val) =>
+                setFormData((prev) => ({ ...prev, deskripsiSingkat: val }))
+              }
+            />
+          </Box>
 
           <Box>
             <Title order={6} fw="bold" fz="sm" mb={6}>

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/create/page.tsx

@@ -90,15 +90,17 @@ function CreatePencegahanKriminalitas() {
           />
 
           {/* Deskripsi Singkat */}
-          <TextInput
+          <Box>
-            label="Deskripsi Singkat"
+            <Text fw="bold" fz="sm" mb={6}>
-            placeholder="Masukkan deskripsi singkat"
+              Deskripsi Singkat
-            defaultValue={kriminalitasState.create.form.deskripsiSingkat}
+            </Text>
-            onChange={(e) => {
+            <CreateEditor
-              kriminalitasState.create.form.deskripsiSingkat = e.currentTarget.value;
+              value={kriminalitasState.create.form.deskripsiSingkat}
-            }}
+              onChange={(val) => {
-            required
+                kriminalitasState.create.form.deskripsiSingkat = val;
-          />
+              }}
+            />
+          </Box>
 
           {/* Deskripsi Panjang */}
           <Box>

src/app/admin/(dashboard)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -105,9 +105,11 @@ function ListPencegahanKriminalitas({ search }: { search: string }) {
                 data.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Text fw={500} truncate="end" lineClamp={1}>
+                      <Box w={200}>
+                       <Text fw={500} truncate="end" lineClamp={1}>
                         {item.judul}
                       </Text>
+                      </Box>
                     </TableTd>
                     <TableTd>
                       <Box w={200}>

src/app/admin/(dashboard)/kesehatan/data-kesehatan-warga/fasilitas_kesehatan/page.tsx

@@ -127,7 +127,9 @@ function ListFasilitasKesehatan({ search }: { search: string }) {
                     </TableTd>
                     <TableTd>
                       <Box w={150}>
-                        {item.tarifdanlayanan?.layanan || '-'}
+                        <Text truncate="end" lineClamp={1}>
+                          {item.tarifdanlayanan?.layanan || '-'}
+                        </Text>
                       </Box>
                     </TableTd>
                     <TableTd>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/edit/page.tsx

@@ -140,15 +140,15 @@ function EditInfoWabahPenyakit() {
             required
           />
 
-          <TextInput
+          <Box>
-            value={formData.deskripsiSingkat}
+            <Text fz="sm" fw="bold">
-            onChange={(e: ChangeEvent<HTMLInputElement>) =>
+              Deskripsi Singkat
-              updateField('deskripsiSingkat', e.target.value)
+            </Text>
-            }
+            <EditEditor
-            label="Deskripsi Singkat"
+              value={formData.deskripsiSingkat}
-            placeholder="Masukkan deskripsi singkat"
+              onChange={(val) => updateField('deskripsiSingkat', val)}
-            required
+            />
-          />
+          </Box>
 
           <Box>
             <Text fz="sm" fw="bold">

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/[id]/page.tsx

@@ -84,7 +84,7 @@ function DetailInfoWabahPenyakit() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data.deskripsiSingkat || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data.deskripsiSingkat }} />
               </Box>
 
               <Box>

src/app/admin/(dashboard)/kesehatan/info-wabah-penyakit/create/page.tsx

@@ -100,15 +100,15 @@ function CreateInfoWabahPenyakit() {
             required
           />
 
-          <TextInput
+          <Box>
-            defaultValue={infoWabahPenyakitState.create.form.deskripsiSingkat}
+            <Text fz="sm" fw="bold">Deskripsi Singkat</Text>
-            onChange={(val) => {
+            <CreateEditor
-              infoWabahPenyakitState.create.form.deskripsiSingkat = val.target.value;
+              value={infoWabahPenyakitState.create.form.deskripsiSingkat}
-            }}
+              onChange={(val) => {
-            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+                infoWabahPenyakitState.create.form.deskripsiSingkat = val;
-            placeholder="Masukkan deskripsi singkat"
+              }}
-            required
+            />
-          />
+          </Box>
 
           <Box>
             <Text fz="sm" fw="bold">Deskripsi</Text>

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/edit/page.tsx

@@ -33,6 +33,7 @@ function EditKontakDarurat() {
     name: '',
     deskripsi: '',
     imageId: '',
+    whatsapp: '',
   });
   const [loading, setLoading] = useState(true);
 
@@ -49,6 +50,7 @@ function EditKontakDarurat() {
             name: data.name || '',
             deskripsi: data.deskripsi || '',
             imageId: data.imageId || '',
+            whatsapp: data.whatsapp || '',
           });
           if (data?.image?.link) setPreviewImage(data.image.link);
         }
@@ -124,6 +126,14 @@ function EditKontakDarurat() {
             required
           />
 
+          <TextInput
+            value={formData.whatsapp}
+            onChange={(e) => setFormData(prev => ({ ...prev, whatsapp: e.target.value }))}
+            label="Whatsapp"
+            placeholder="Masukkan whatsapp"
+            required
+          />
+
           <Box>
             <Text fz="sm" fw="bold">Deskripsi</Text>
             <EditEditor

src/app/admin/(dashboard)/kesehatan/kontak-darurat/[id]/page.tsx

@@ -72,6 +72,11 @@ function DetailKontakDarurat() {
                 <Text fz="md" c="dimmed">{data.name || '-'}</Text>
               </Box>
 
+              <Box>
+                <Text fz="lg" fw="bold">Whatsapp</Text>
+                <Text fz="md" c="dimmed">{data.whatsapp || '-'}</Text>
+              </Box>
+
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi</Text>
                 <Text

src/app/admin/(dashboard)/kesehatan/kontak-darurat/create/page.tsx

@@ -38,6 +38,7 @@ function CreateKontakDarurat() {
       name: '',
       deskripsi: '',
       imageId: '',
+      whatsapp: '',
     };
     setPreviewImage(null);
     setFile(null);
@@ -105,6 +106,17 @@ function CreateKontakDarurat() {
             required
           />
 
+          <TextInput
+          type='number'
+            defaultValue={kontakDaruratState.create.form.whatsapp}
+            onChange={(val) => {
+              kontakDaruratState.create.form.whatsapp = val.target.value;
+            }}
+            label={<Text fz="sm" fw="bold">Whatsapp</Text>}
+            placeholder="Masukkan whatsapp"
+            required
+          />
+
           <Box>
             <Text fz="sm" fw="bold">Deskripsi</Text>
             <CreateEditor

src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/edit/page.tsx

@@ -117,7 +117,6 @@ function EditProgramKesehatan() {
         <Stack gap="md">
           {[
             { label: 'Judul', key: 'name', placeholder: 'Masukkan judul' },
-            { label: 'Deskripsi Singkat', key: 'deskripsiSingkat', placeholder: 'Masukkan deskripsi singkat' },
           ].map((field) => (
             <TextInput
               key={field.key}
@@ -129,6 +128,16 @@ function EditProgramKesehatan() {
             />
           ))}
 
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi Singkat
+            </Text>
+            <EditEditor
+              value={formData.deskripsiSingkat}
+              onChange={(val) => handleChange('deskripsiSingkat', val)}
+            />
+          </Box>
+
           <Box>
             <Text fz="sm" fw="bold" mb={6}>
               Deskripsi

src/app/admin/(dashboard)/kesehatan/program-kesehatan/[id]/page.tsx

@@ -73,7 +73,7 @@ function DetailProgramKesehatan() {
 
               <Box>
                 <Text fz="lg" fw="bold">Deskripsi Singkat</Text>
-                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>{data?.deskripsiSingkat || '-'}</Text>
+                <Text fz="md" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }} dangerouslySetInnerHTML={{ __html: data?.deskripsiSingkat || '-' }} />
               </Box>
 
               <Box>

src/app/admin/(dashboard)/kesehatan/program-kesehatan/create/page.tsx

@@ -101,15 +101,17 @@ function CreateProgramKesehatan() {
             required
           />
 
-          <TextInput
+          <Box>
-            defaultValue={programKesehatanState.create.form.deskripsiSingkat}
+            <Title order={6} mb={6}>
-            onChange={(val) => {
+              Deskripsi Singkat
-              programKesehatanState.create.form.deskripsiSingkat = val.target.value;
+            </Title>
-            }}
+            <CreateEditor
-            label="Deskripsi Singkat"
+              value={programKesehatanState.create.form.deskripsiSingkat}
-            placeholder="Masukkan deskripsi singkat"
+              onChange={(val) => {
-            required
+                programKesehatanState.create.form.deskripsiSingkat = val;
-          />
+              }}
+            />
+          </Box>
 
           <Box>
             <Title order={6} mb={6}>

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

@@ -26,7 +26,7 @@ export default function DetailResponden() {
       stateDetail.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/ppid/ikm-desa-darmasaba/responden")
+      router.push("/admin/landing-page/indeks-kepuasan-masyarakat/responden")
     }
   }
 

src/app/admin/(dashboard)/landing-page/prestasi-desa/_lib/layoutTabs.tsx

@@ -2,7 +2,7 @@
 'use client'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconCategory, IconListDetails } from '@tabler/icons-react';
 import colors from '@/con/colors';
 
@@ -58,6 +58,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
         radius="lg"
         keepMounted={false}
       >
+        <ScrollArea type="auto" offsetScrollbars>
         <TabsList
           p="sm"
           style={{
@@ -82,6 +83,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
             </Tooltip>
           ))}
         </TabsList>
+        </ScrollArea>
 
         {tabs.map((tab, i) => (
           <TabsPanel

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

@@ -170,12 +170,11 @@ function CreatePrestasiDesa() {
             required
           />
 
-          <Group justify="flex-end" mt="md">
+          <Group justify="space-between" mt="md">
             <Button
               variant="light"
               color="gray"
               onClick={() => router.back()}
-              style={{ marginRight: 'auto' }}
             >
               Batal
             </Button>

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

@@ -46,12 +46,19 @@ function EditPejabatDesa() {
         const profileData = await profileLandingPageState.pejabatDesa.findUnique.load(id);
 
         if (profileData) {
+          // Initialize form data
           setFormData({
             name: profileData.name || '',
             position: profileData.position || '',
             imageId: profileData.imageId || null,
           });
 
+          // Initialize edit state with profile data
+          profileLandingPageState.pejabatDesa.edit.initialize({
+            ...profileData,
+            imageId: profileData.imageId || ''
+          });
+
           if (profileData.image?.link) {
             setPreviewImage(profileData.image.link);
           }
@@ -110,7 +117,14 @@ function EditPejabatDesa() {
         imageId = uploaded.id;
       }
 
-      // Update global state only on submit
+      // Ensure we have the ID from the URL
+      const id = params?.id as string;
+      if (!id) {
+        throw new Error("ID tidak ditemukan");
+      }
+
+      // Update global state with the ID and form data
+      profileLandingPageState.pejabatDesa.edit.id = id;
       profileLandingPageState.pejabatDesa.edit.form = {
         ...formData,
         imageId: imageId || '', // Ensure imageId is always a string

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

@@ -1,4 +1,5 @@
 'use client'
+
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
 import {
@@ -33,8 +34,8 @@ function EditFasilitasYangDisediakan() {
   const router = useRouter();
   const editState = useProxy(stateBimbinganBelajarDesa.fasilitasYangDisediakanState);
 
-  const [judul, setJudul] = useState('');
+  // === State lokal form ===
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Load data pertama kali
@@ -44,16 +45,22 @@ function EditFasilitasYangDisediakan() {
     }
   }, []);
 
-  // Sinkronkan state dengan data yang sudah di-load
+  // Sinkronkan formData saat data load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,9 +68,13 @@ function EditFasilitasYangDisediakan() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // Update global state hanya saat submit
-        editState.findById.data.deskripsi = content;
+        const payload = {
-        await editState.update.save(editState.findById.data);
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(payload);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan');
@@ -78,7 +89,6 @@ function EditFasilitasYangDisediakan() {
 
   const handleBack = () => router.back();
 
-  // Loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -123,9 +133,9 @@ function EditFasilitasYangDisediakan() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul fasilitas"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi */}
@@ -133,8 +143,8 @@ function EditFasilitasYangDisediakan() {
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -144,7 +154,7 @@ function EditFasilitasYangDisediakan() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

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

@@ -1,4 +1,5 @@
 'use client'
+
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
 import {
@@ -33,27 +34,33 @@ function EditLokasiDanJadwal() {
   const router = useRouter();
   const editState = useProxy(stateBimbinganBelajarDesa.lokasiDanJadwalState);
 
-  const [judul, setJudul] = useState('');
+  // state lokal untuk form, tidak langsung merubah global state
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data sekali
+  // Load data sekali
   useShallowEffect(() => {
     if (!editState.findById.data) {
       editState.findById.initialize();
     }
   }, []);
 
-  // isi state ketika data loaded
+  // Isi state lokal setelah data global ter-load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,9 +68,13 @@ function EditLokasiDanJadwal() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // update global state hanya saat submit
-        editState.findById.data.deskripsi = content;
+        const updatedData = {
-        await editState.update.save(editState.findById.data);
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal');
@@ -78,7 +89,6 @@ function EditLokasiDanJadwal() {
 
   const handleBack = () => router.back();
 
-  // loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -92,15 +102,10 @@ function EditLokasiDanJadwal() {
   return (
     <Box>
       <Stack gap="xs">
-        {/* Header dengan tombol kembali */}
+        {/* Header */}
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-              variant="subtle"
-              onClick={handleBack}
-              p="xs"
-              radius="md"
-            >
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -125,9 +130,9 @@ function EditLokasiDanJadwal() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul lokasi/jadwal"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
@@ -135,8 +140,8 @@ function EditLokasiDanJadwal() {
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -146,7 +151,7 @@ function EditLokasiDanJadwal() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

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

@@ -1,4 +1,5 @@
 'use client'
+
 import stateBimbinganBelajarDesa from '@/app/admin/(dashboard)/_state/pendidikan/bimbingan-belajar-desa';
 import colors from '@/con/colors';
 import {
@@ -33,26 +34,31 @@ function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateBimbinganBelajarDesa.stateTujuanProgram);
 
-  const [judul, setJudul] = useState('');
+  // gabung judul & content jadi formData
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data once
+  // load data sekali
   useShallowEffect(() => {
-    if (!editState.findById.data) {
+    if (!editState.findById.data) editState.findById.initialize();
-      editState.findById.initialize();
-    }
   }, []);
 
+  // sync data dari global state ke local formData sekali setelah load
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -60,8 +66,9 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // update global state hanya saat submit
-        editState.findById.data.deskripsi = content;
+        editState.findById.data.judul = formData.judul;
+        editState.findById.data.deskripsi = formData.deskripsi;
         await editState.update.save(editState.findById.data);
 
         toast.success('Berhasil menyimpan perubahan');
@@ -117,18 +124,20 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
             <Box>
-              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
+              <Text fz="sm" fw="bold" mb="xs">
+                Deskripsi
+              </Text>
               <BimbinganBelajarDesaTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                initialContent={formData.deskripsi}
-                initialContent={content}
+                onChange={(value) => handleChange('deskripsi', value)}
               />
             </Box>
 
@@ -138,7 +147,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/data-pendidikan/[id]/page.tsx

@@ -5,7 +5,7 @@ import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import dataPendidikan from '../../../_state/pendidikan/data-pendidikan';
 
@@ -15,23 +15,35 @@ export default function EditDataPendidikan() {
   const stateDPM = useProxy(dataPendidikan);
   const id = params.id;
 
+  // state lokal untuk form
+  const [formData, setFormData] = useState({
+    name: '',
+    jumlah: '',
+  });
+
   // Load data saat mount
   useEffect(() => {
     if (id) {
       stateDPM.findUnique.load(id).then(() => {
         const data = stateDPM.findUnique.data;
         if (data) {
-          stateDPM.update.form = {
+          setFormData({
             name: data.name || '',
             jumlah: data.jumlah || '',
-          };
+          });
         }
       });
     }
   }, [id]);
 
+  const handleChange = (field: 'name' | 'jumlah', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
+    // update global state hanya saat submit
     stateDPM.update.id = id;
+    stateDPM.update.form = { ...formData };
     await stateDPM.update.submit();
     router.push('/admin/pendidikan/data-pendidikan');
   };
@@ -59,8 +71,8 @@ export default function EditDataPendidikan() {
           <TextInput
             label="Nama Pendidikan"
             placeholder="Contoh: SD, SMP, SMA"
-            defaultValue={stateDPM.update.form.name}
+            value={formData.name}
-            onChange={(e) => (stateDPM.update.form.name = e.currentTarget.value)}
+            onChange={(e) => handleChange('name', e.currentTarget.value)}
             radius="md"
             required
           />
@@ -68,8 +80,8 @@ export default function EditDataPendidikan() {
             label="Jumlah Peserta"
             type="number"
             placeholder="Masukkan jumlah peserta"
-            defaultValue={stateDPM.update.form.jumlah}
+            value={formData.jumlah}
-            onChange={(e) => (stateDPM.update.form.jumlah = e.currentTarget.value)}
+            onChange={(e) => handleChange('jumlah', e.currentTarget.value)}
             radius="md"
             required
           />

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

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import {
@@ -22,64 +23,62 @@ function EditJenjangPendidikan() {
   const router = useRouter();
   const params = useParams();
   const id = params?.id as string;
+
   const stateJenjang = useProxy(infoSekolahPaud.jenjangPendidikan);
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState({ nama: '' });
-    nama: "",
+  const [loading, setLoading] = useState(true);
-  });
 
+  // Load data sekali saat component mount
   useEffect(() => {
-    const loadJenjangPendidikan = async () => {
+    if (!id) return;
-      if (!id) return;
 
+    const loadJenjang = async () => {
       try {
         const data = await stateJenjang.edit.load(id);
-
         if (data) {
-          stateJenjang.edit.id = id;
+          stateJenjang.edit.id = id; // tetap simpan di global state
-          setFormData({
+          setFormData({ nama: data.nama || '' });
-            nama: data.nama || '',
-          });
         }
       } catch (error) {
-        console.error("Error loading jenjang pendidikan:", error);
+        console.error('Error loading jenjang pendidikan:', error);
-        toast.error("Gagal memuat data jenjang pendidikan");
+        toast.error('Gagal memuat data jenjang pendidikan');
+      } finally {
+        setLoading(false);
       }
     };
 
-    loadJenjangPendidikan();
+    loadJenjang();
   }, [id]);
 
+  const handleChange = (field: string, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
+    if (!formData.nama.trim()) {
+      toast.error('Nama jenjang pendidikan tidak boleh kosong');
+      return;
+    }
+
     try {
-      if (!formData.nama.trim()) {
+      stateJenjang.edit.form = { nama: formData.nama.trim() };
-        toast.error('Nama jenjang pendidikan tidak boleh kosong');
+      if (!stateJenjang.edit.id) stateJenjang.edit.id = id;
-        return;
-      }
-
-      stateJenjang.edit.form = {
-        nama: formData.nama.trim(),
-      };
-
-      if (!stateJenjang.edit.id) {
-        stateJenjang.edit.id = id;
-      }
 
       const success = await stateJenjang.edit.update();
-
       if (success) {
-        toast.success("Jenjang pendidikan berhasil diperbarui!");
+        toast.success('Jenjang pendidikan berhasil diperbarui!');
-        router.push("/admin/pendidikan/info-sekolah/jenjang-pendidikan");
+        router.push('/admin/pendidikan/info-sekolah/jenjang-pendidikan');
       }
     } catch (error) {
-      console.error("Error updating jenjang pendidikan:", error);
+      console.error('Error updating jenjang pendidikan:', error);
-      toast.error("Terjadi kesalahan saat memperbarui jenjang pendidikan");
+      toast.error('Terjadi kesalahan saat memperbarui jenjang pendidikan');
     }
   };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header Back + Title */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -91,7 +90,7 @@ function EditJenjangPendidikan() {
         </Title>
       </Group>
 
-      {/* Form Container */}
+      {/* Form */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -104,9 +103,10 @@ function EditJenjangPendidikan() {
           <TextInput
             label="Nama Jenjang Pendidikan"
             placeholder="Masukkan nama jenjang pendidikan"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
+            disabled={loading}
           />
 
           <Group justify="right">

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

@@ -31,6 +31,7 @@ export default function EditLembaga() {
     jenjangId: '',
   });
 
+  // Load jenjang pendidikan dan data lembaga
   useEffect(() => {
     infoSekolahPaud.jenjangPendidikan.findMany.load();
 
@@ -46,12 +47,17 @@ export default function EditLembaga() {
     }
   }, [id]);
 
+  const handleChange = (field: 'nama' | 'jenjangId', value: string) => {
+    setForm((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     if (!form.nama || !form.jenjangId) {
       toast.warn('Nama dan jenjang pendidikan harus diisi');
       return;
     }
 
+    // Update global state hanya saat submit
     state.edit.id = id;
     state.edit.form = form;
 
@@ -65,7 +71,7 @@ export default function EditLembaga() {
 
   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
@@ -82,7 +88,7 @@ export default function EditLembaga() {
         </Title>
       </Group>
 
-      {/* Card Form */}
+      {/* Form Card */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -95,8 +101,8 @@ export default function EditLembaga() {
           <TextInput
             label="Nama Lembaga"
             placeholder="Masukkan nama lembaga"
-            defaultValue={form.nama}
+            value={form.nama}
-            onChange={(e) => setForm({ ...form, nama: e.currentTarget.value })}
+            onChange={(e) => handleChange('nama', e.currentTarget.value)}
             required
           />
 
@@ -111,7 +117,7 @@ export default function EditLembaga() {
               })) || []
             }
             value={form.jenjangId}
-            onChange={(val) => setForm({ ...form, jenjangId: val || '' })}
+            onChange={(val) => handleChange('jenjangId', val || '')}
             required
           />
 

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

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import {
@@ -25,21 +26,22 @@ interface FormPengajar {
 }
 
 function EditPengajar() {
-  const pengajarState = useProxy(infoSekolahPaud.pengajar)
+  const pengajarState = useProxy(infoSekolahPaud.pengajar);
-  const params = useParams()
+  const params = useParams();
-  const router = useRouter()
+  const router = useRouter();
 
   const [formData, setFormData] = useState<FormPengajar>({
     nama: '',
     lembagaId: ''
-  })
+  });
 
   useEffect(() => {
-    const loadPengajar = async () => {
+    const loadData = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
+        infoSekolahPaud.lembagaPendidikan.findMany.load();
         const data = await pengajarState.edit.load(id);
         if (data) {
           setFormData({
@@ -47,30 +49,35 @@ function EditPengajar() {
             lembagaId: data.lembagaId || '',
           });
         }
-      } catch (error) {
+      } catch (err) {
-        console.error("Error loading pengajar:", error);
+        console.error(err);
         toast.error("Gagal memuat data pengajar");
       }
-    }
+    };
-    infoSekolahPaud.lembagaPendidikan.findMany.load()
+
-    loadPengajar();
+    loadData();
   }, [params?.id]);
 
+  const handleChange = (field: keyof FormPengajar, value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // update global state hanya saat submit
       pengajarState.edit.form = {
         ...pengajarState.edit.form,
         nama: formData.nama.trim(),
-        lembagaId: formData.lembagaId.trim(),
+        lembagaId: formData.lembagaId.trim()
-      }
+      };
-      await pengajarState.edit.update()
+      await pengajarState.edit.update();
-      toast.success("Data pengajar berhasil diperbarui!")
+      toast.success("Data pengajar berhasil diperbarui!");
       router.push("/admin/pendidikan/info-sekolah/pengajar");
-    } catch (error) {
+    } catch (err) {
-      console.error("Error updating pengajar:", error);
+      console.error(err);
       toast.error("Terjadi kesalahan saat memperbarui pengajar");
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -99,8 +106,8 @@ function EditPengajar() {
           <TextInput
             label="Nama Pengajar"
             placeholder="Masukkan nama pengajar"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
@@ -112,7 +119,7 @@ function EditPengajar() {
               label: k.nama
             })) ?? []}
             value={formData.lembagaId}
-            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+            onChange={(val) => handleChange('lembagaId', val ?? '')}
             required
           />
 

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

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import infoSekolahPaud from '@/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud';
 import colors from '@/con/colors';
 import {
@@ -35,6 +36,7 @@ function EditSiswa() {
     lembagaId: '',
   });
 
+  // Load data siswa
   useEffect(() => {
     const loadSiswa = async () => {
       const id = params?.id as string;
@@ -53,10 +55,20 @@ function EditSiswa() {
         toast.error('Gagal memuat data siswa');
       }
     };
+
     infoSekolahPaud.lembagaPendidikan.findMany.load();
     loadSiswa();
   }, [params?.id]);
 
+  // Handler update local formData
+  const handleChange = (field: keyof FormSiswa, value: string) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  // Submit ke global state
   const handleSubmit = async () => {
     try {
       siswaState.edit.form = {
@@ -75,7 +87,7 @@ function EditSiswa() {
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
-      {/* Header dengan tombol kembali */}
+      {/* Header */}
       <Group mb="md">
         <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
           <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
@@ -87,7 +99,7 @@ function EditSiswa() {
         </Title>
       </Group>
 
-      {/* Card Form */}
+      {/* Form Card */}
       <Paper
         w={{ base: '100%', md: '50%' }}
         bg={colors['white-1']}
@@ -100,8 +112,8 @@ function EditSiswa() {
           <TextInput
             label={<Text fz="sm" fw="bold">Nama Siswa</Text>}
             placeholder="Masukkan nama siswa"
-            defaultValue={formData.nama}
+            value={formData.nama}
-            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            onChange={(e) => handleChange('nama', e.target.value)}
             required
           />
 
@@ -115,7 +127,7 @@ function EditSiswa() {
               })) ?? []
             }
             value={formData.lembagaId}
-            onChange={(val) => setFormData({ ...formData, lembagaId: val ?? '' })}
+            onChange={(val) => handleChange('lembagaId', val ?? '')}
             required
           />
 

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

@@ -33,8 +33,7 @@ function EditJenisProgramYangDiselenggarakan() {
   const router = useRouter();
   const editState = useProxy(pendidikanNonFormalState.stateJenisProgram);
 
-  const [judul, setJudul] = useState('');
+  const [formData, setFormData] = useState({ judul: '', content: '' });
-  const [content, setContent] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Load data pertama kali
@@ -44,16 +43,22 @@ function EditJenisProgramYangDiselenggarakan() {
     }
   }, []);
 
-  // Sync state dengan data hasil fetch
+  // Sync state lokal dengan data hasil fetch
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        content: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'content', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,11 +66,15 @@ function EditJenisProgramYangDiselenggarakan() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        const updatedData = {
-        editState.findById.data.deskripsi = content;
+          ...editState.findById.data,
-        await editState.update.save(editState.findById.data);
+          judul: formData.judul,
+          deskripsi: formData.content,
+        };
 
+        await editState.update.save(updatedData);
         toast.success('Berhasil menyimpan perubahan');
+
         router.push(
           '/admin/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan'
         );
@@ -117,17 +126,17 @@ function EditJenisProgramYangDiselenggarakan() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <JenisProgramYangDiselenggarakanTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value: string) => handleChange('content', value)}
-                initialContent={content}
+                initialContent={formData.content}
               />
             </Box>
 
@@ -136,7 +145,7 @@ function EditJenisProgramYangDiselenggarakan() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

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

@@ -1,4 +1,5 @@
 'use client'
+
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
 import {
@@ -33,8 +34,11 @@ function EditTempatKegiatan() {
   const router = useRouter();
   const editState = useProxy(pendidikanNonFormalState.stateTempatKegiatan);
 
-  const [judul, setJudul] = useState('');
+  // state lokal form
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({
+    judul: '',
+    deskripsi: '',
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // load data pertama kali
@@ -44,16 +48,22 @@ function EditTempatKegiatan() {
     }
   }, []);
 
-  // sync state dengan data hasil fetch
+  // sync state lokal ketika data fetch selesai
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -61,10 +71,13 @@ function EditTempatKegiatan() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        const updatedData = {
-        editState.findById.data.deskripsi = content;
+          ...editState.findById.data,
-        await editState.update.save(editState.findById.data);
+          judul: formData.judul,
+          deskripsi: formData.deskripsi,
+        };
 
+        await editState.update.save(updatedData);
         toast.success('Berhasil menyimpan perubahan');
         router.push(
           '/admin/pendidikan/pendidikan-non-formal/tempat-kegiatan'
@@ -117,9 +130,9 @@ function EditTempatKegiatan() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul tempat kegiatan"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
@@ -128,8 +141,8 @@ function EditTempatKegiatan() {
               </Text>
               <TempatKegiatanTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -138,7 +151,7 @@ function EditTempatKegiatan() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

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

@@ -1,4 +1,5 @@
 'use client'
+
 import pendidikanNonFormalState from '@/app/admin/(dashboard)/_state/pendidikan/pendidikan-non-formal';
 import colors from '@/con/colors';
 import {
@@ -30,41 +31,49 @@ function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(pendidikanNonFormalState.stateTujuanPendidikanNonFormal);
 
-  const [judul, setJudul] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
-  const [content, setContent] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
 
-  // load data pertama kali
+  // Load data pertama kali
   useShallowEffect(() => {
     if (!editState.findById.data) {
       editState.findById.initialize();
     }
   }, []);
 
-  // sync data hasil fetch ke local state
+  // Sync hasil fetch ke local state (sekali)
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
 
+    if (!editState.findById.data) return;
+
     setIsSubmitting(true);
     try {
-      if (editState.findById.data) {
+      const payload = {
-        editState.findById.data.judul = judul;
+        ...editState.findById.data,
-        editState.findById.data.deskripsi = content;
+        judul: formData.judul,
-        await editState.update.save(editState.findById.data);
+        deskripsi: formData.deskripsi
+      };
 
-        toast.success('Berhasil menyimpan perubahan');
+      await editState.update.save(payload);
-        router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
+      toast.success('Berhasil menyimpan perubahan');
-      }
+      router.push('/admin/pendidikan/pendidikan-non-formal/tujuan-program');
     } catch (err) {
       console.error('Error saving:', err);
       toast.error('Gagal menyimpan data');
@@ -88,16 +97,13 @@ function EditTujuanProgram() {
   return (
     <Box>
       <Stack gap="xs">
-        {/* Back Button + Title */}
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
             <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
               <IconArrowBack color={colors['blue-button']} size={22} />
             </Button>
           </Tooltip>
-          <Title order={4} ml="sm" c="dark">
+          <Title order={4} ml="sm" c="dark">Edit Tujuan Program</Title>
-            Edit Tujuan Program
-          </Title>
         </Group>
 
         <Paper
@@ -112,17 +118,17 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <PendidikanNonFormalTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -131,7 +137,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/data-perpustakaan/[id]/edit/page.tsx

@@ -1,74 +1,86 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
+import { useEffect, useState } from 'react';
+import { useParams, useRouter } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
-import { 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 { toast } from 'react-toastify';
-import { useProxy } from 'valtio/utils';
 
 function EditPerpustakaanDigital() {
-  const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan)
   const router = useRouter();
   const params = useParams();
+  const editState = useProxy(perpustakaanDigitalState.dataPerpustakaan);
+
+  const [formData, setFormData] = useState({
+    judul: '',
+    deskripsi: '',
+    kategoriId: '',
+    imageId: '',
+  });
 
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [formData, setFormData] = useState({
-    judul: editState.update.form.judul || "",
-    deskripsi: editState.update.form.deskripsi || "",
-    imageId: editState.update.form.imageId || "",
-    kategoriId: editState.update.form.kategoriId || "",
-  })
 
+  // Load kategori & data awal
   useEffect(() => {
     perpustakaanDigitalState.kategoriBuku.findMany.load();
-    const loadDataPerpustakaan = async () => {
+
-      const id = params?.id as string;
+    const loadData = async () => {
+      const id = Array.isArray(params?.id) ? params.id[0] : params?.id;
       if (!id) return;
 
       try {
         const data = await editState.update.load(id);
-        if (data) {
+        if (!data) return;
-          setFormData({
-            judul: data.judul || "",
-            deskripsi: data.deskripsi || "",
-            imageId: data.imageId || "",
-            kategoriId: data.kategoriId || "",
-          });
-          if (data.image?.link) setPreviewImage(data.image.link);
-        }
-      } catch (error) {
-        console.error("Error loading data perpustakaan:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal mengambil data perpustakaan");
-      }
-    }
 
-    loadDataPerpustakaan();
+        setFormData({
+          judul: data.judul || '',
+          deskripsi: data.deskripsi || '',
+          kategoriId: data.kategoriId || '',
+          imageId: data.imageId || '',
+        });
+
+        if (data.image?.link) setPreviewImage(data.image.link);
+      } catch (error) {
+        console.error(error);
+        toast.error(error instanceof Error ? error.message : 'Gagal memuat data perpustakaan');
+      }
+    };
+
+    loadData();
   }, [params?.id]);
 
+  const handleInputChange = (field: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
-      editState.update.form = { ...editState.update.form, ...formData }
+      // Update global state hanya pas submit
+      editState.update.form = { ...editState.update.form, ...formData };
 
+      // Upload file jika 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");
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
         editState.update.form.imageId = uploaded.id;
       }
 
       await editState.update.update();
-      toast.success("Data perpustakaan berhasil diperbarui!");
+      toast.success('Data perpustakaan berhasil diperbarui!');
-      router.push("/admin/pendidikan/perpustakaan-digital/data-perpustakaan");
+      router.push('/admin/pendidikan/perpustakaan-digital/data-perpustakaan');
     } catch (error) {
-      console.error("Error updating data perpustakaan:", error);
+      console.error(error);
-      toast.error("Terjadi kesalahan saat memperbarui data perpustakaan");
+      toast.error('Terjadi kesalahan saat memperbarui data perpustakaan');
     }
   };
 
@@ -86,18 +98,26 @@ function EditPerpustakaanDigital() {
         </Title>
       </Group>
 
-      {/* Form Paper */}
+      <Paper
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p="lg" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
         <Stack gap="md">
           {/* Dropzone Image */}
           <Box>
-            <Text fw="bold" fz="sm" mb={6}>Gambar</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar
+            </Text>
             <Dropzone
               onDrop={(files) => {
-                const selectedFile = files[0];
+                const selected = files[0];
-                if (selectedFile) {
+                if (selected) {
-                  setFile(selectedFile);
+                  setFile(selected);
-                  setPreviewImage(URL.createObjectURL(selectedFile));
+                  setPreviewImage(URL.createObjectURL(selected));
                 }
               }}
               onReject={() => toast.error('File tidak valid.')}
@@ -117,8 +137,12 @@ function EditPerpustakaanDigital() {
                   <IconPhoto size={48} color="#868e96" stroke={1.5} />
                 </Dropzone.Idle>
                 <Stack gap="xs" align="center">
-                  <Text size="md" fw={500}>Seret gambar atau klik untuk memilih file</Text>
+                  <Text size="md" fw={500}>
-                  <Text size="sm" c="dimmed">Maksimal 5MB, format gambar wajib</Text>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
                 </Stack>
               </Group>
             </Dropzone>
@@ -140,28 +164,30 @@ function EditPerpustakaanDigital() {
           <TextInput
             label="Judul"
             placeholder="Masukkan judul"
-            defaultValue={formData.judul}
+            value={formData.judul}
-            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
+            onChange={(e) => handleInputChange('judul', e.target.value)}
             required
           />
 
           {/* Deskripsi */}
           <Box>
-            <Text fw="bold" fz="sm" mb={6}>Deskripsi</Text>
+            <Text fw="bold" fz="sm" mb={6}>
-            <EditEditor value={formData.deskripsi} onChange={(val) => setFormData({ ...formData, deskripsi: val })} />
+              Deskripsi
+            </Text>
+            <EditEditor value={formData.deskripsi} onChange={(val) => handleInputChange('deskripsi', val)} />
           </Box>
 
           {/* Kategori */}
           <Select
             value={formData.kategoriId}
-            onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
+            onChange={(val) => handleInputChange('kategoriId', val || '')}
             label="Kategori"
-            placeholder='Pilih kategori'
+            placeholder="Pilih kategori"
-            data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map(v => ({ value: v.id, label: v.name })) || []}
+            data={perpustakaanDigitalState.kategoriBuku.findMany.data?.map((v) => ({ value: v.id, label: v.name })) || []}
             clearable
             searchable
             required
-            error={!formData.kategoriId ? "Pilih kategori" : undefined}
+            error={!formData.kategoriId ? 'Pilih kategori' : undefined}
           />
 
           {/* Submit Button */}

src/app/admin/(dashboard)/pendidikan/perpustakaan-digital/kategori-buku/[id]/page.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+
 import perpustakaanDigitalState from '@/app/admin/(dashboard)/_state/pendidikan/perpustakaan-digital';
 import colors from '@/con/colors';
 import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
@@ -14,9 +15,8 @@ function EditKategoriBuku() {
   const router = useRouter();
   const params = useParams();
 
-  const [formData, setFormData] = useState({
+  const [formData, setFormData] = useState({ name: '' });
-    name: editState.update.form.name || '',
+  const [loading, setLoading] = useState(true);
-  });
 
   useEffect(() => {
     const loadKategori = async () => {
@@ -26,21 +26,26 @@ function EditKategoriBuku() {
       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 buku:', error);
         toast.error('Gagal memuat data kategori buku');
+      } finally {
+        setLoading(false);
       }
     };
 
     loadKategori();
   }, [params?.id]);
 
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData((prev) => ({ ...prev, name: e.target.value }));
+  };
+
   const handleSubmit = async () => {
     try {
+      // Update global state hanya saat submit
       editState.update.form = { ...editState.update.form, name: formData.name };
       await editState.update.update();
       toast.success('Kategori Buku berhasil diperbarui!');
@@ -76,9 +81,10 @@ function EditKategoriBuku() {
           <TextInput
             label="Nama Kategori Buku"
             placeholder="Masukkan nama kategori buku"
-            defaultValue={formData.name}
+            value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            onChange={handleChange}
             required
+            disabled={loading}
           />
 
           <Group justify="right">
@@ -91,6 +97,7 @@ function EditKategoriBuku() {
                 color: '#fff',
                 boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
               }}
+              disabled={loading || !formData.name.trim()}
             >
               Simpan
             </Button>

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

@@ -1,4 +1,5 @@
 'use client'
+
 import stateProgramPendidikanAnak from '@/app/admin/(dashboard)/_state/pendidikan/program-pendidikan-anak';
 import colors from '@/con/colors';
 import {
@@ -17,7 +18,7 @@ import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/navigation';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -29,30 +30,46 @@ const ProgramPendidikanAnakTextEditor = dynamic(
   { ssr: false }
 );
 
+interface FormData {
+  judul: string;
+  deskripsi: string;
+}
+
 function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateProgramPendidikanAnak.programUnggulanState);
 
-  const [judul, setJudul] = useState('');
+  // lokal state form
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState<FormData>({
+    judul: '',
+    deskripsi: ''
+  });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // load data once
   useShallowEffect(() => {
-    if (!editState.findById.data) {
+    if (!editState.findById.data) editState.findById.initialize();
-      editState.findById.initialize();
-    }
   }, []);
 
+  // populate formData saat data global tersedia
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? ''
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = useCallback(
+    (field: keyof FormData, value: string) => {
+      setFormData((prev) => ({ ...prev, [field]: value }));
+    },
+    []
+  );
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -60,9 +77,13 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        // update global state only on submit
-        editState.findById.data.deskripsi = content;
+        const updatedData = {
-        await editState.update.save(editState.findById.data);
+          ...editState.findById.data,
+          judul: formData.judul,
+          deskripsi: formData.deskripsi
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/program-pendidikan-anak/program-unggulan');
@@ -77,7 +98,6 @@ function EditTujuanProgram() {
 
   const handleBack = () => router.back();
 
-  // loading state
   if (editState.findById.loading) {
     return (
       <Box>
@@ -93,12 +113,7 @@ function EditTujuanProgram() {
       <Stack gap="xs">
         <Group mb="md">
           <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
-            <Button
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
-              variant="subtle"
-              onClick={handleBack}
-              p="xs"
-              radius="md"
-            >
               <IconArrowBack color={colors['blue-button']} size={24} />
             </Button>
           </Tooltip>
@@ -122,18 +137,20 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             {/* Deskripsi Field */}
             <Box>
-              <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
+              <Text fz="sm" fw="bold" mb="xs">
+                Deskripsi
+              </Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -143,7 +160,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

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

@@ -11,7 +11,7 @@ import {
   Text,
   TextInput,
   Title,
-  Tooltip
+  Tooltip,
 } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
@@ -30,8 +30,8 @@ function EditTujuanProgram() {
   const router = useRouter();
   const editState = useProxy(stateProgramPendidikanAnak.stateTujuanProgram);
 
-  const [judul, setJudul] = useState('');
+  // Menggunakan satu state lokal untuk form
-  const [content, setContent] = useState('');
+  const [formData, setFormData] = useState({ judul: '', deskripsi: '' });
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Load data pertama kali
@@ -41,16 +41,22 @@ function EditTujuanProgram() {
     }
   }, []);
 
-  // Sync state dengan data hasil fetch
+  // Sync hanya sekali saat data fetch berhasil
   useEffect(() => {
     if (editState.findById.data) {
-      setJudul(editState.findById.data.judul ?? '');
+      setFormData({
-      setContent(editState.findById.data.deskripsi ?? '');
+        judul: editState.findById.data.judul ?? '',
+        deskripsi: editState.findById.data.deskripsi ?? '',
+      });
     }
   }, [editState.findById.data]);
 
+  const handleChange = (field: 'judul' | 'deskripsi', value: string) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
-    if (!judul.trim()) {
+    if (!formData.judul.trim()) {
       toast.error('Judul wajib diisi');
       return;
     }
@@ -58,9 +64,12 @@ function EditTujuanProgram() {
     setIsSubmitting(true);
     try {
       if (editState.findById.data) {
-        editState.findById.data.judul = judul;
+        const updatedData = {
-        editState.findById.data.deskripsi = content;
+          ...editState.findById.data,
-        await editState.update.save(editState.findById.data);
+          judul: formData.judul,
+          deskripsi: formData.deskripsi,
+        };
+        await editState.update.save(updatedData);
 
         toast.success('Berhasil menyimpan perubahan');
         router.push('/admin/pendidikan/program-pendidikan-anak/tujuan-program');
@@ -112,17 +121,17 @@ function EditTujuanProgram() {
             <TextInput
               label={<Text fz="sm" fw="bold">Judul</Text>}
               placeholder="Masukkan judul program"
-              defaultValue={judul}
+              value={formData.judul}
-              onChange={(e) => setJudul(e.currentTarget.value)}
+              onChange={(e) => handleChange('judul', e.currentTarget.value)}
-              error={!judul && 'Judul wajib diisi'}
+              error={!formData.judul && 'Judul wajib diisi'}
             />
 
             <Box>
               <Text fz="sm" fw="bold" mb="xs">Deskripsi</Text>
               <ProgramPendidikanAnakTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                onChange={(value) => handleChange('deskripsi', value)}
-                initialContent={content}
+                initialContent={formData.deskripsi}
               />
             </Box>
 
@@ -131,7 +140,7 @@ function EditTujuanProgram() {
                 bg={colors['blue-button']}
                 onClick={handleSubmit}
                 loading={isSubmitting || editState.update.loading}
-                disabled={!judul}
+                disabled={!formData.judul}
               >
                 {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
               </Button>

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/edit/page.tsx

@@ -1,5 +1,6 @@
-'use client';
 /* eslint-disable react-hooks/exhaustive-deps */
+'use client';
+
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import daftarInformasiPublik from '@/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik';
 import colors from '@/con/colors';
@@ -17,15 +18,15 @@ interface FormDaftarInformasi {
 }
 
 function EditDaftarInformasiPublik() {
-  const daftarInformasi = useProxy(daftarInformasiPublik)
+  const daftarInformasi = useProxy(daftarInformasiPublik);
-  const router = useRouter()
+  const router = useRouter();
-  const params = useParams()
+  const params = useParams();
 
   const [formData, setFormData] = useState<FormDaftarInformasi>({
     jenisInformasi: '',
     deskripsi: '',
     tanggal: '',
-  })
+  });
 
   const formatDateForInput = (dateString: string) => {
     if (!dateString) return '';
@@ -33,6 +34,7 @@ function EditDaftarInformasiPublik() {
     return date.toISOString().split('T')[0];
   };
 
+  // Load data once on mount / when ID changes
   useEffect(() => {
     const loadDaftarInformasi = async () => {
       const id = params?.id as string;
@@ -48,14 +50,18 @@ function EditDaftarInformasiPublik() {
           });
         }
       } catch (error) {
-        console.error("Error loading daftar informasi:", error);
+        console.error('Error loading daftar informasi:', error);
-        toast.error("Gagal memuat data daftar informasi");
+        toast.error('Gagal memuat data daftar informasi');
       }
-    }
+    };
 
     loadDaftarInformasi();
   }, [params?.id]);
 
+  const handleChange = (field: keyof FormDaftarInformasi, value: string) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+  };
+
   const handleSubmit = async () => {
     try {
       daftarInformasi.edit.form = {
@@ -63,14 +69,14 @@ function EditDaftarInformasiPublik() {
         jenisInformasi: formData.jenisInformasi.trim(),
         deskripsi: formData.deskripsi.trim(),
         tanggal: formData.tanggal.trim(),
-      }
+      };
-      await daftarInformasi.edit.update()
+      await daftarInformasi.edit.update();
-      router.push("/admin/ppid/daftar-informasi-publik-desa-darmasaba");
+      router.push('/admin/ppid/daftar-informasi-publik-desa-darmasaba');
     } catch (error) {
-      console.error("Error updating berita:", error);
+      console.error('Error updating berita:', error);
-      toast.error("Terjadi kesalahan saat memperbarui berita");
+      toast.error('Terjadi kesalahan saat memperbarui berita');
     }
-  }
+  };
 
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
@@ -97,13 +103,8 @@ function EditDaftarInformasiPublik() {
           <TextInput
             label="Jenis Informasi"
             placeholder="Masukkan jenis informasi"
-            defaultValue={formData.jenisInformasi}
+            value={formData.jenisInformasi}
-            onChange={(val) => {
+            onChange={(e) => handleChange('jenisInformasi', e.target.value)}
-              setFormData({
-                ...formData,
-                jenisInformasi: val.target.value
-              });
-            }}
             required
           />
 
@@ -113,10 +114,7 @@ function EditDaftarInformasiPublik() {
             </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => {
+              onChange={(htmlContent) => handleChange('deskripsi', htmlContent)}
-                setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
-                daftarInformasi.edit.form.deskripsi = htmlContent;
-              }}
             />
           </Box>
 
@@ -124,13 +122,8 @@ function EditDaftarInformasiPublik() {
             type="date"
             label="Tanggal Publikasi"
             placeholder="Pilih tanggal publikasi"
-            defaultValue={formatDateForInput(formData.tanggal)}
+            value={formatDateForInput(formData.tanggal)}
-            onChange={(val) => {
+            onChange={(e) => handleChange('tanggal', e.target.value)}
-              setFormData({
-                ...formData,
-                tanggal: val.target.value
-              });
-            }}
             required
           />
 

src/app/admin/(dashboard)/ppid/daftar-informasi-publik-desa-darmasaba/[id]/page.tsx

@@ -63,7 +63,7 @@ function DetailDaftarInformasiPublik() {
             Detail Informasi Publik
           </Text>
 
-          <Paper bg="#f8f9fa" p="md" radius="md" shadow="xs">
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
             <Stack gap="lg">
               <Box>
                 <Text fz="lg" fw="bold" mb={4}>Jenis Informasi</Text>

src/app/admin/(dashboard)/ppid/dasar-hukum/edit/page.tsx

@@ -9,37 +9,44 @@ import stateDasarHukumPPID from '../../../_state/ppid/dasar_hukum/dasarHukum';
 import { useRouter } from 'next/navigation';
 import { IconArrowBack } from '@tabler/icons-react';
 
-const PPIDTextEditor = dynamic(() => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor), {
+const PPIDTextEditor = dynamic(
-  ssr: false,
+  () => import('../../_com/PPIDTextEditor').then(mod => mod.PPIDTextEditor),
-});
+  { ssr: false }
+);
 
 function EditDasarHukum() {
-  const router = useRouter()
+  const router = useRouter();
-  const dasarHukumState = useProxy(stateDasarHukumPPID)
+  const dasarHukumState = useProxy(stateDasarHukumPPID);
-  const [judul, setJudul] = useState('');
-  const [content, setContent] = useState('');
 
+  // Gabungkan judul & content jadi satu state lokal
+  const [formData, setFormData] = useState({ judul: '', content: '' });
+
+  // Load data awal sekali
   useShallowEffect(() => {
     if (!dasarHukumState.findById.data) {
-      dasarHukumState.findById.initialize(); // biar masuk ke `findFirst` route kamu
+      dasarHukumState.findById.initialize();
     }
   }, []);
 
+  // Set state lokal saat data global sudah tersedia
   useEffect(() => {
     if (dasarHukumState.findById.data) {
-      setJudul(dasarHukumState.findById.data.judul ?? '')
+      setFormData({
-      setContent(dasarHukumState.findById.data.content ?? '')
+        judul: dasarHukumState.findById.data.judul ?? '',
+        content: dasarHukumState.findById.data.content ?? '',
+      });
     }
-  }, [dasarHukumState.findById.data])
+  }, [dasarHukumState.findById.data]);
 
-  const submit = () => {
+  const handleSubmit = () => {
     if (dasarHukumState.findById.data) {
-      dasarHukumState.findById.data.judul = judul;
+      // Update global state hanya saat submit
-      dasarHukumState.findById.data.content = content;
+      const updated = { ...dasarHukumState.findById.data, ...formData };
-      dasarHukumState.update.save(dasarHukumState.findById.data)
+      dasarHukumState.update.save(updated);
     }
-    router.push('/admin/ppid/dasar-hukum')
+    router.push('/admin/ppid/dasar-hukum');
-  }
+  };
+
   return (
     <Box px={{ base: 'sm', md: 'lg' }} py="md">
       <Group mb="md">
@@ -69,12 +76,12 @@ function EditDasarHukum() {
             <Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
               <PPIDTextEditor
                 showSubmit={false}
-                onChange={setJudul}
+                initialContent={formData.judul}
-                initialContent={judul}
+                onChange={value => setFormData(prev => ({ ...prev, judul: value }))}
               />
             </Box>
           </Box>
-          
+
           <Box>
             <Text fw="bold" fz="sm" mb={6}>
               Konten
@@ -82,15 +89,15 @@ function EditDasarHukum() {
             <Box style={{ border: '1px solid #dee2e6', borderRadius: '0.25rem' }}>
               <PPIDTextEditor
                 showSubmit={false}
-                onChange={setContent}
+                initialContent={formData.content}
-                initialContent={content}
+                onChange={value => setFormData(prev => ({ ...prev, content: value }))}
               />
             </Box>
           </Box>
 
           <Group justify="flex-end" mt="md">
             <Button
-              onClick={submit}
+              onClick={handleSubmit}
               loading={dasarHukumState.update.loading}
               radius="md"
               size="md"

src/app/admin/(dashboard)/ppid/ikm-desa-darmasaba/_lib/layoutTabs.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { ScrollArea, Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { IconChartBar, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
@@ -49,41 +49,49 @@ function LayoutTabsIKM({ children }: { children: React.ReactNode }) {
                 IKM Desa Darmasaba
             </Title>
             <Tabs
-                radius="xl"
+                color={colors["blue-button"]}
-                color={colors['blue-button']}
                 variant="pills"
                 value={activeTab}
                 onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
             >
-                <TabsList
+                <ScrollArea type="auto" offsetScrollbars>
-                    p="sm"
+                    <TabsList
-                    style={{
+                        p="sm"
-                        background: "#F3F4FB",
+                        style={{
-                        borderRadius: "1rem",
+                            background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
-                    }}
+                            borderRadius: "1rem",
-                >
+                            boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
-                    {tabs.map((e, i) => (
+                            display: "flex",
-                        <Tooltip 
+                            flexWrap: "nowrap",
-                            key={i} 
+                            gap: "0.5rem",
-                            label={e.description} 
+                            paddingInline: "0.5rem", // ✅ biar nggak nempel ke tepi
-                            withArrow 
+                        }}
-                            position="bottom" 
+                    >
-                            transitionProps={{ transition: 'pop', duration: 200 }}
+                        {tabs.map((e, i) => (
-                        >
+                            <Tooltip
-                            <TabsTab
+                                key={i}
-                                value={e.value}
+                                label={e.description}
-                                leftSection={e.icon}
+                                withArrow
-                                style={{
+                                position="bottom"
-                                    fontWeight: 500,
+                                transitionProps={{ transition: 'pop', duration: 200 }}
-                                    fontSize: "0.9rem",
-                                    transition: "all 0.2s ease",
-                                }}
                             >
-                                {e.label}
+                                <TabsTab
-                            </TabsTab>
+                                    value={e.value}
-                        </Tooltip>
+                                    leftSection={e.icon}
-                    ))}
+                                    style={{
-                </TabsList>
+                                        fontWeight: 500,
+                                        fontSize: "0.9rem",
+                                        transition: "all 0.2s ease",
+                                    }}
+                                >
+                                    {e.label}
+                                </TabsTab>
+                            </Tooltip>
+                        ))}
+                    </TabsList>
+                </ScrollArea>
                 {tabs.map((e, i) => (
                     <TabsPanel key={i} value={e.value} mt="md">
                         {/* Konten dummy, bisa diganti tergantung routing */}