Fix UI User Menu PPID & Kesehatan

-Dibagian Tanggal Gak Auto Ngambil Tanggal Yang Udah Dipakai
-Dibagian fasilitas kesehatan : data dokter dan tarif rencananya mau pakai select

prisma/data/landing-page/desa-anti-korupsi/desaantiKorpusi.json

@@ -3,126 +3,108 @@
         "id": "cmds9h9ko000pvnberdjnx64b",
         "name": "1.1 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA",
         "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PERENCANAAN, PELAKSANAAN, PENATAUSAHAAN DAN PERTANGGUNG JAWABAN APBDES BESERTA IMPLEMENTASINYA</p>",
-        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
-        "fileId": ""
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh"
     },
     {
         "id": "cmds9sjmz000svnbesv2133of",
         "name": "1.2 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA",
         "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP MENGENAI MEKANISME EVALUASI KINERJA PERANGKAT DESA</p>",
-        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
-        "fileId": ""
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh"
     },
     {
         "id": "cmds9tcpi000vvnbev3ebtlnt",
         "name": "1.3 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
         "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PENGENDALIAN GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN</p>",
-        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
-        "fileId": ""
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh"
     },
     {
         "id": "cmds9twvj000yvnbep0pq8dzf",
         "name": "1.4 PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA",
         "deskripsi": "<p>PERJANJIAN KERJA SAMA ANTARA PELAKSANA KEGIATAN ANGGARAN DENGAN PIHAK PENYEDIA, DAN TELAH MELALUI PROSES PENGADAAN BARANG/JASA DI DESA</p>",
-        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
-        "fileId": ""
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh"
     },
     {
         "id": "cmds9ugap0011vnbe118yv871",
         "name": "1.5 ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA",
         "deskripsi": "<p>ADANYA PERDES/KEPUTUSAN KEPALA DESA/SOP TENTANG PAKTA INTEGRITAS DAN SEJENISNYA</p>",
-        "kategoriId": "cmds9es2o000ivnbe1o0swrvh",
-        "fileId": ""
+        "kategoriId": "cmds9es2o000ivnbe1o0swrvh"
     },
     {
         "id": "cmdsa35310014vnbe6qy6l1rz",
         "name": "2.1 ADANYA KEGIATAN PENGAWASAN DAN EVALUASI KINERJA PERANGKAT DESA",
         "deskripsi": "<p>ADANYA KEGIATAN PENGAWASAN DAN EVALUASI KINERJA PERANGKAT DESA</p>",
-        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
-        "fileId": ""
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm"
     },
     {
         "id": "cmdsa46590017vnbepp3noso1",
         "name": "2.2 ADANYA TINDAK LANJUT HASIL PEMBINAAN, PETUNJUK, ARAH, PENGAWASAN, DAN PEMERIKSAAN DARI PEMERINTAH PUSAT/DAERAH",
         "deskripsi": "<p>ADANYA TINDAK LANJUT HASIL PEMBINAAN, PETUNJUK, ARAH, PENGAWASAN, DAN PEMERIKSAAN DARI PEMERINTAH PUSAT/DAERAH</p>",
-        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
-        "fileId": ""
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm"
     },
     {
         "id": "cmdsa5m7z001avnbe4cvfrcz0",
         "name": "2.3 TIDAK ADANYA APARATUR DESA DALAM 3(TIGA) TAHUN TERAKHIR YANG TERJERAT TINDAKAN PIDANA KORUPSI",
         "deskripsi": "<p>TIDAK ADANYA APARATUR DESA DALAM 3(TIGA) TAHUN TERAKHIR YANG TERJERAT TINDAKAN PIDANA KORUPSI</p>",
-        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm",
-        "fileId": ""
+        "kategoriId": "cmds9f2ua000jvnbeksu1sfwm"
     },
     {
         "id": "cmdsa8q5q001dvnbemch8j24x",
         "name": "3.1 ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT",
         "deskripsi": "<p>ADANYA LAYANAN PENGADUAN BAGI MASYARAKAT</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
-        "fileId": ""
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
     },
     {
         "id": "cmdsa9lbi001gvnbequn2ba7m",
         "name": "3.2 ADANYA SURVEY KEPUASAN MASYARAKAT (SKM) TERHADAP LAYANAN PEMERINTAH DESA",
         "deskripsi": "<p>ADANYA SURVEY KEPUASAN MASYARAKAT (SKM) TERHADAP LAYANAN PEMERINTAH DESA</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
-        "fileId": ""
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
     },
     {
         "id": "cmdsaa7aq001jvnbeizh04e67",
         "name": "3.3 ADANYA KETERBUKAAN AKSES MASYARAKAT TERHADAP INFORMASI LAYANAN PEMERINTAH DESA (KESEHATAN, PENDIDIKAN, SOSIAL, LINGKUNGAN, TRANTIBUMLINMAS, PEKERJAAN UMUM) PEMBANGUNAN, KEPENDUDUKAN, KEUANGAN, DAN PELAYANAN LAINNYA",
         "deskripsi": "<p>ADANYA KETERBUKAAN AKSES MASYARAKAT TERHADAP INFORMASI LAYANAN PEMERINTAH DESA (KESEHATAN, PENDIDIKAN, SOSIAL, LINGKUNGAN, TRANTIBUMLINMAS, PEKERJAAN UMUM) PEMBANGUNAN, KEPENDUDUKAN, KEUANGAN, DAN PELAYANAN LAINNYA</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
-        "fileId": ""
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
     },
     {
         "id": "cmdsaaw8d001mvnbek3tfefrk",
         "name": "3.4 ADANYA MEDIA INFORMASI TENTANG APBDES DI BALAI DESA DAN/ATAU TEMPAT LAIN YANG MUDAH DIAKSES OLEH MASYARAKAT",
         "deskripsi": "<p>ADANYA MEDIA INFORMASI TENTANG APBDES DI BALAI DESA DAN/ATAU TEMPAT LAIN YANG MUDAH DIAKSES OLEH MASYARAKAT</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
-        "fileId": ""
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
     },
     {
         "id": "cmdsabhif001pvnbepm06hry6",
         "name": "3.5 ADANYA MAKLUMAT PELAYANAN",
         "deskripsi": "<p>ADANYA MAKLUMAT PELAYANAN</p>",
-        "kategoriId": "cmds9fr73000kvnbe6w281dcl",
-        "fileId": ""
+        "kategoriId": "cmds9fr73000kvnbe6w281dcl"
     },
     {
         "id": "cmdsag40b001svnbe7krq9khc",
         "name": "4.1 ADANYA PARTISIPASI DAN KETERLIBATAN MASYARAKAT DALAM PENYUSUNAN RKP DESA",
         "deskripsi": "<p>ADANYA PARTISIPASI DAN KETERLIBATAN MASYARAKAT DALAM PENYUSUNAN RKP DESA</p>",
-        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv",
-        "fileId": ""
+        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv"
     },
     {
         "id": "cmdsagkaf001vvnbejo26w8sa",
         "name": "4.2 ADANYA KESADARAN MASYARAKAT DALAM MENCEGAH TERJADINYA PRAKTIK GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN",
         "deskripsi": "<p>ADANYA KESADARAN MASYARAKAT DALAM MENCEGAH TERJADINYA PRAKTIK GRATIFIKASI, SUAP DAN KONFLIK KEPENTINGAN</p>",
-        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv",
-        "fileId": ""
+        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv"
     },
     {
         "id": "cmdsah4qe001yvnbeiy3mwrvb",
         "name": "4.3 ADANYA KETERLIBATAN LEMBAGA KEMASYARAKATAN DALAM PELAKSANAAN PEMBANGUNAN DESA",
         "deskripsi": "<p>ADANYA KETERLIBATAN LEMBAGA KEMASYARAKATAN DALAM PELAKSANAAN PEMBANGUNAN DESA</p>",
-        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv",
-        "fileId": ""
+        "kategoriId": "cmds9g5ow000lvnbel3rkkwrv"
     },
     {
         "id": "cmdsak5vn0021vnbemg86aab4",
         "name": "5.1 ADANYA BUDAYA LOKAL/HUKUM ADAT YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
         "deskripsi": "<p>ADANYA BUDAYA LOKAL/HUKUM ADAT YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI</p>",
-        "kategoriId": "cmds9govb000mvnbesq8b4y99",
-        "fileId": ""
+        "kategoriId": "cmds9govb000mvnbesq8b4y99"
     },
     {
         "id": "cmdsalc800024vnbezgulhgrb",
         "name": "5.2 ADANYA TOKOH MASYARAKAT, TOKOH AGAMA, TOKOH ADAT, TOKOH PEMUDA, DAN KAUM PEREMPUAN YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI",
         "deskripsi": "<p>ADANYA TOKOH MASYARAKAT, TOKOH AGAMA, TOKOH ADAT, TOKOH PEMUDA, DAN KAUM PEREMPUAN YANG MENDORONG UPAYA PENCEGAHAN TINDAK PIDANA KORUPSI</p>",
-        "kategoriId": "cmds9govb000mvnbesq8b4y99",
-        "fileId": ""
+        "kategoriId": "cmds9govb000mvnbesq8b4y99"
     }
 ]

prisma/data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json

@@ -1,8 +1,14 @@
 [
     {
-        "id": "1",
-        "jenisInformasi": "Peraturan Desa",
-        "deskripsi": "Dokumen yang berisi kebijakan dan regulasi desa",
-        "tanggal": "15 Januari 2024"
+        "id": "cmeppcwzk0000vn5exmudcipd",
+        "jenisInformasi": "Potensi Desa",
+        "deskripsi": "<p>“Potensi desa adalah segenap sumber daya alam dan sumber daya manusia yang dimiliki desa sebagai modal dasar yang perlu dikelola dan dikembangkan bagi kelangsungan dan perkembangan desa. Adapun potensi yang dimiliki Desa Darmasaba yaitu:</p><ol><li><p>TPS3R Pudak Mesari</p></li><li><p>Bumdes Pudak Mesari</p></li><li><p>Pertanian</p></li><li><p>Jogging Track Tegeh Aban, Karang Gadon dan Munduk Uma Desa</p></li><li><p>Taman Beji Cengana</p></li><li><p>Dam Tanah Putih</p></li><li><p>Gumuh Sari Water Park</p></li><li><p>UMKM</p></li><li><p>Kawasan Kuliner</p></li><li><p>IKM berbasis Pengolahan Pangan</p></li><li><p>Genteng</p></li><li><p>Peternakan Ikan Lele</p></li><li><p>Pemotongan Daging”</p></li></ol>",
+        "tanggal": "2021-05-25"
+    },
+    {
+        "id": "cmeppieay0001vn5e8qe658ub",
+        "jenisInformasi": "Layanan Surat Keterangan Desa",
+        "deskripsi": "<p>“Desa Darmasaba menyediakan berbagai jenis layanan surat keterangan untuk kebutuhan administratif, antara lain:</p><ul><li><p>Surat Keterangan Domisili Organisasi</p></li><li><p>Surat Keterangan Penghasilan</p></li><li><p>Surat Keterangan Tidak Mampu</p></li><li><p>Surat Keterangan Kelahiran</p></li><li><p>Surat Keterangan Usaha</p></li><li><p>Surat Keterangan Tempat Usaha</p></li><li><p>Surat Keterangan Belum Kawin</p></li><li><p>Surat Keterangan Kelakuan Baik (Pengantar SKCK)</p></li><li><p>Surat Keterangan Kematian</p></li><li><p>Surat Keterangan Perbedaan Biodata Diri</p></li><li><p>Surat Keterangan Yatim/Piatu/Yatim Piatu<br>Untuk surat keterangan lainnya, masyarakat dapat berkonsultasi langsung ke kantor Perbekel Darmasaba.”<br><em>(Sumber: Laman Layanan Desa Darmasaba)</em></p></li></ul>",
+        "tanggal": "2025-02-21"
     }
 ]

prisma/data/ppid/ikm/jenis-kelamin/jenis-kelamin.json

@@ -0,0 +1,10 @@
+[
+    {
+        "id": "cme8bt5o5000007lb9xp11unb",
+        "name": "Laki-laki"
+    },
+    {
+        "id": "cme8btctl000107lbh2hocgg8",
+        "name": "Perempuan"
+    }
+]

prisma/data/ppid/ikm/pilihan-rating-responden/rating-responden.json

@@ -0,0 +1,18 @@
+[
+    {
+        "id": "cme8buup6000207lb54q9b0az",
+        "name": "Sangat Baik"
+    },
+    {
+        "id": "cme8bv15o000307lbft9b0vzy",
+        "name": "Baik"
+    },
+    {
+        "id": "cme8bvjvu000507lbgfsveog6",
+        "name": "Kurang Baik"
+    },
+    {
+        "id": "cme8bvvm6000607lbh6rn2ubm",
+        "name": "Sangat Kurang Baik"
+    }
+]

prisma/data/ppid/ikm/umur-responden/umur-responden.json

@@ -0,0 +1,14 @@
+[
+    {
+        "id": "cme8bwgwu000707lbawc6fz3a",
+        "name": "Muda"
+    },
+    {
+        "id": "cme8hnx09000b07jl3ipifb1k",
+        "name": "Dewasa"
+    },
+    {
+        "id": "cme8ho7dv000c07jlc7lr4b4w",
+        "name": "Lansia"
+    }   
+]

prisma/schema.prisma

@@ -50,23 +50,22 @@ model AppMenuChild {
 // ========================================= FILE STORAGE ========================================= //
 
 model FileStorage {
-  id           String         @id @default(cuid())
-  name         String         @unique
-  realName     String
-  path         String
-  mimeType     String
-  createdAt    DateTime       @default(now())
-  updatedAt    DateTime       @updatedAt
-  deletedAt    DateTime?
-  isActive     Boolean        @default(true)
-  link         String
-  category     String // "image" / "document" / "other"
-  Berita       Berita[]
-  PotensiDesa  PotensiDesa[]
-  Posyandu     Posyandu[]
-  StrukturPPID StrukturPPID[]
-  GalleryFoto  GalleryFoto[]
-
+  id                             String                     @id @default(cuid())
+  name                           String                     @unique
+  realName                       String
+  path                           String
+  mimeType                       String
+  createdAt                      DateTime                   @default(now())
+  updatedAt                      DateTime                   @updatedAt
+  deletedAt                      DateTime?
+  isActive                       Boolean                    @default(true)
+  link                           String
+  category                       String // "image" / "document" / "other"
+  Berita                         Berita[]
+  PotensiDesa                    PotensiDesa[]
+  Posyandu                       Posyandu[]
+  StrukturPPID                   StrukturPPID[]
+  GalleryFoto                    GalleryFoto[]
   Pelapor                        Pelapor[]
   Penghargaan                    Penghargaan[]
   ProfileDesaImage               ProfileDesaImage[]
@@ -86,7 +85,6 @@ model FileStorage {
   KontakItem                     KontakItem[]
   Pegawai                        Pegawai[]
   DesaDigital                    DesaDigital[]
-  KolaborasiInovasi              KolaborasiInovasi[]
   InfoTekno                      InfoTekno[]
   PengaduanMasyarakat            PengaduanMasyarakat[]
   KegiatanDesa                   KegiatanDesa[]
@@ -98,10 +96,11 @@ model FileStorage {
   APBDesImage                    APBDes[]                   @relation("APBDesImage")
   APBDesFile                     APBDes[]                   @relation("APBDesFile")
   PrestasiDesa                   PrestasiDesa[]
+  DataPerpustakaan               DataPerpustakaan[]
+  PegawaiPPID                    PegawaiPPID[]
+  PerbekelDariMasaKeMasa         PerbekelDariMasaKeMasa[]
 
-  DataPerpustakaan DataPerpustakaan[]
-
-  PegawaiPPID PegawaiPPID[]
+  MitraKolaborasi MitraKolaborasi[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -203,8 +202,8 @@ model PrestasiDesa {
   deskripsi  String               @db.Text
   kategori   KategoriPrestasiDesa @relation(fields: [kategoriId], references: [id])
   kategoriId String
-  image      FileStorage          @relation(fields: [imageId], references: [id])
-  imageId    String
+  image      FileStorage?          @relation(fields: [imageId], references: [id])
+  imageId    String?
   createdAt  DateTime             @default(now())
   updatedAt  DateTime             @updatedAt
   deletedAt  DateTime             @default(now())
@@ -221,6 +220,53 @@ model KategoriPrestasiDesa {
   PrestasiDesa PrestasiDesa[]
 }
 
+//========================================= INDEKS KEPUASAAN MASYARAKAT ========================================= //
+model Responden {
+  id             String                 @id @default(cuid())
+  name           String                 @unique
+  tanggal        DateTime               @db.Date // misal: 2025-05-01
+  jenisKelamin   JenisKelaminResponden  @relation(fields: [jenisKelaminId], references: [id])
+  jenisKelaminId String
+  rating         PilihanRatingResponden @relation(fields: [ratingId], references: [id])
+  ratingId       String
+  kelompokUmur   UmurResponden          @relation(fields: [kelompokUmurId], references: [id])
+  kelompokUmurId String
+  createdAt      DateTime               @default(now())
+  updatedAt      DateTime               @updatedAt
+  deletedAt      DateTime               @default(now())
+  isActive       Boolean                @default(true)
+}
+
+model JenisKelaminResponden {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+  Responden Responden[]
+}
+
+model PilihanRatingResponden {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+  Responden Responden[]
+}
+
+model UmurResponden {
+  id        String      @id @default(cuid())
+  name      String      @unique
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+  deletedAt DateTime    @default(now())
+  isActive  Boolean     @default(true)
+  Responden Responden[]
+}
+
 //========================================= MENU PPID ========================================= //
 
 //========================================= STRUKTUR PPID ========================================= //
@@ -247,6 +293,9 @@ model PosisiOrganisasiPPID {
   pegawai            PegawaiPPID[]
   strukturOrganisasi StrukturPPID[] // Relasi balik
   parentId           String?
+  isActive           Boolean              @default(true)
+  createdAt          DateTime             @default(now())
+  updatedAt          DateTime             @updatedAt
   parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
   children           PosisiOrganisasiPPID[] @relation("Parent")
 }
@@ -508,6 +557,19 @@ model ProfilPerbekel {
   isActive             Boolean      @default(true)
 }
 
+model PerbekelDariMasaKeMasa {
+  id        String       @id @default(cuid())
+  nama      String       @db.Text
+  periode   String       @db.Text
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  daerah    String
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
+}
+
 // ========================================= BERITA ========================================= //
 model Berita {
   id               String          @id @default(cuid())
@@ -853,26 +915,56 @@ model PendaftaranJadwalKegiatan {
 
 // ========================================= PERSENTASE KELAHIRAN & KEMATIAN ========================================= //
 model DataKematian_Kelahiran {
-  id             String   @id @default(cuid())
-  tahun          String
-  kematianKasar  String
-  kematianBayi   String
-  kelahiranKasar String
-  createdAt      DateTime @default(now())
-  updatedAt      DateTime @updatedAt
-  deletedAt      DateTime @default(now())
-  isActive       Boolean  @default(true)
+  id          String    @id @default(cuid())
+  kematian    Kematian  @relation(fields: [kematianId], references: [id])
+  kematianId  String
+  kelahiran   Kelahiran @relation(fields: [kelahiranId], references: [id])
+  kelahiranId String
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  deletedAt   DateTime  @default(now())
+  isActive    Boolean   @default(true)
+}
+
+model Kelahiran {
+  id                     String                   @id @default(cuid())
+  nama                   String
+  tanggal                DateTime
+  jenisKelamin           String
+  alamat                 String
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime                 @default(now())
+  isActive               Boolean                  @default(true)
+  DataKematian_Kelahiran DataKematian_Kelahiran[]
+}
+
+model Kematian {
+  id                     String                   @id @default(cuid())
+  nama                   String
+  tanggal                DateTime
+  jenisKelamin           String
+  alamat                 String
+  penyebab               String
+  createdAt              DateTime                 @default(now())
+  updatedAt              DateTime                 @updatedAt
+  deletedAt              DateTime                 @default(now())
+  isActive               Boolean                  @default(true)
+  DataKematian_Kelahiran DataKematian_Kelahiran[]
 }
 
 // ========================================= GRAFIK KEPUASAN ========================================= //
 model GrafikKepuasan {
-  id        String   @id @default(cuid())
-  label     String
-  jumlah    String
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
+  id           String   @id @default(cuid())
+  nama         String
+  tanggal      DateTime
+  jenisKelamin String
+  alamat       String
+  penyakit     String
+  createdAt    DateTime @default(now())
+  updatedAt    DateTime @updatedAt
+  deletedAt    DateTime @default(now())
+  isActive     Boolean  @default(true)
 }
 
 // ========================================= ARTIKEL KESEHATAN ========================================= //
@@ -969,16 +1061,17 @@ model DoctorSign {
 
 // ========================================= POSYANDU ========================================= //
 model Posyandu {
-  id        String      @id @default(cuid())
-  name      String
-  nomor     String
-  deskripsi String
-  image     FileStorage @relation(fields: [imageId], references: [id])
-  imageId   String
-  createdAt DateTime    @default(now())
-  updatedAt DateTime    @updatedAt
-  deletedAt DateTime    @default(now())
-  isActive  Boolean     @default(true)
+  id              String      @id @default(cuid())
+  name            String
+  nomor           String
+  deskripsi       String
+  jadwalPelayanan String
+  image           FileStorage @relation(fields: [imageId], references: [id])
+  imageId         String
+  createdAt       DateTime    @default(now())
+  updatedAt       DateTime    @updatedAt
+  deletedAt       DateTime    @default(now())
+  isActive        Boolean     @default(true)
 }
 
 // ========================================= PUSKESMAS ========================================= //
@@ -1458,7 +1551,7 @@ model DataDemografiPekerjaan {
 model DetailDataPengangguran {
   id                     String   @id @default(uuid()) @db.Uuid
   month                  String   @db.VarChar(20)
-  year                   Int
+  year                   DateTime
   totalUnemployment      Int
   educatedUnemployment   Int
   uneducatedUnemployment Int
@@ -1552,14 +1645,22 @@ model KolaborasiInovasi {
   slug        String      @db.Text //deskripsi singkat
   deskripsi   String      @db.Text //deskripsi panjang
   kolaborator String
-  image       FileStorage @relation(fields: [imageId], references: [id])
-  imageId     String
   createdAt   DateTime    @default(now())
   updatedAt   DateTime    @updatedAt
   deletedAt   DateTime    @default(now())
   isActive    Boolean     @default(true)
 }
 
+model MitraKolaborasi {
+  id        String   @id @default(cuid())
+  name      String
+  image     FileStorage? @relation(fields: [imageId], references: [id])
+  imageId   String?
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+  deletedAt DateTime @default(now())
+  isActive  Boolean  @default(true)
+}
 // ========================================= INFO TEKHNOLOGI TEPAT GUNA ========================================= //
 model InfoTekno {
   id        String      @id @default(cuid())

prisma/seed.ts

@@ -1,54 +1,62 @@
 import prisma from "@/lib/prisma";
 import profilePejabatDesa from "./data/landing-page/profile/profile.json";
-import penghargaan from "./data/landing-page/penghargaan/penghargaan.json";
 import programInovasi from "./data/landing-page/profile/programInovasi.json";
 import mediaSosial from "./data/landing-page/profile/mediaSosial.json";
+import desaAntiKorupsi from "./data/landing-page/desa-anti-korupsi/desaantiKorpusi.json";
+import kategoriDesaAntiKorupsi from "./data/landing-page/desa-anti-korupsi/kategoriDesaAntiKorupsi.json";
 import sdgsDesa from "./data/landing-page/sdgs-desa/sdgs-desa.json";
 import apbdes from "./data/landing-page/apbdes/apbdes.json";
-import pelayananSuratKeterangan from "./data/desa/layanan/pelayananSuratKeterangan.json";
-import categoryPengumuman from "./data/category-pengumuman.json";
-import kategoriBerita from "./data/kategori-berita.json";
-import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
-import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInformasi.json";
-import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
-import layanan from "./data/list-layanan.json";
-import potensi from "./data/list-potensi.json";
-import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
+import kategoriPrestasiDesa from "./data/landing-page/prestasi-desa/kategori-prestasi.json";
+import prestasiDesa from "./data/landing-page/prestasi-desa/prestasi-desa.json";
+import penghargaan from "./data/landing-page/penghargaan/penghargaan.json";
 import profilePPID from "./data/ppid/profile-ppid/profilePPid.json";
+import pegawaiPPID from "./data/ppid/struktur-ppid/pegawai-PPID.json";
+import posisiOrganisasiPPID from "./data/ppid/struktur-ppid/posisi-organisasi-PPID.json";
 import visiMisiPPID from "./data/ppid/visi-misi-ppid/visimisiPPID.json";
+import dasarHukumPPID from "./data/ppid/dasar-hukum-ppid/dasarhukumPPID.json";
+import jenisKelamin from "./data/ppid/ikm/jenis-kelamin/jenis-kelamin.json";
+import daftarInformasiPublik from "./data/ppid/daftar-informasi-publik-desa-darmasaba/daftarInformasi.json"
+import pilihanRatingResponden from "./data/ppid/ikm/pilihan-rating-responden/rating-responden.json";
+import umurResponden from "./data/ppid/ikm/umur-responden/umur-responden.json";
+import categoryPengumuman from "./data/category-pengumuman.json";
 import pelayananPerizinanBerusaha from "./data/desa/layanan/pelayananPerizinanBerusaha.json";
+import pelayananSuratKeterangan from "./data/desa/layanan/pelayananSuratKeterangan.json";
+import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSaktiDesa.json";
 import pelayananPendudukNonPermanen from "./data/desa/layanan/pelayanaPendudukNonPermanen.json";
-import sejarahDesa from "./data/desa/profile/sejarah_desa.json";
-import visiMisiDesa from "./data/desa/profile/visi_misi_desa.json";
 import lambangDesa from "./data/desa/profile/lambang_desa.json";
 import maskotDesa from "./data/desa/profile/maskot_desa.json";
 import profilPerbekel from "./data/desa/profile/profil_perbekel.json";
+import 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 posisiOrganisasi from "./data/ekonomi/struktur-organisasi/posisi-organisasi.json";
 import pegawai from "./data/ekonomi/struktur-organisasi/pegawai.json";
-import detailDataPengangguran from "./data/ekonomi/jumlah-pengangguran/detail-data-pengangguran.json";
-import tujuanEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json";
-import materiEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
+import 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 nilaiKonservasiAdat from "./data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json";
+import materiEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/materi-edukasi-yang-diberikan.json";
+import tujuanEdukasiLingkungan from "./data/lingkungan/edukasi-lingkungan/tujuan-edukasi-lingkungan.json";
 import bentukKonservasiBerdasarkanAdat from "./data/lingkungan/konservasi-adat-bali/bentuk-konservasi.json";
 import filosofiTriHita from "./data/lingkungan/konservasi-adat-bali/filosofi-tri-hita.json";
-import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-program.json";
+import nilaiKonservasiAdat from "./data/lingkungan/konservasi-adat-bali/nilai-konservasi-adat.json";
+import caraMemperolehInformasi from "./data/list-caraMemperolehInformasi.json";
+import caraMemperolehSalinanInformasi from "./data/list-caraMemperolehSalinanInformasi.json";
+import jenisInformasiDiminta from "./data/list-jenisInfromasi.json";
+import potensi from "./data/list-potensi.json";
+import fasilitasBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json";
+import lokasiJadwalBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json";
+import tujuanBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json";
+import jenisProgramYangDiselenggarakan from "./data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json";
+import tempatKegiatan from "./data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json";
 import tujuanProgram2 from "./data/pendidikan/pendidikan-non-formal/tujuan-program2.json";
 import programUnggulan from "./data/pendidikan/program-pendidikan-anak/program-unggulan.json";
-import tujuanBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/tujuan-bimbingan-belajar-desa.json";
-import lokasiJadwalBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/lokasi-dan-jadwal.json";
-import fasilitasBimbinganBelajarDesa from "./data/pendidikan/bimbingan-belajar-desa/fasilitas-yang-disediakan.json";
-import tempatKegiatan from "./data/pendidikan/pendidikan-non-formal/tempat-kegiatan.json";
-import jenisProgramYangDiselenggarakan from "./data/pendidikan/pendidikan-non-formal/jenis-program-yang-diselenggarakan.json";
-import posisiOrganisasiPPID from "./data/ppid/struktur-ppid/posisi-organisasi-PPID.json";
-import pegawaiPPID from "./data/ppid/struktur-ppid/pegawai-PPID.json";
-import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSaktiDesa.json";
+import tujuanProgram from "./data/pendidikan/program-pendidikan-anak/tujuan-program.json";
 
 (async () => {
   // =========== LANDING PAGE ===========
-  // =========== PROFILE ===========
+  // =========== SUBMENU PROFILE ===========
+  // =========== PROFILE PEJABAT DESA ===========
   for (const p of profilePejabatDesa) {
     await prisma.pejabatDesa.upsert({
       where: { id: p.id },
@@ -103,6 +111,90 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("media sosial success ...");
 
+  // =========== SUBMENU DESA ANTI KORUPSI ===========
+  // =========== KATEGORI DESA ANTI KORUPSI ===========
+  for (const k of kategoriDesaAntiKorupsi) {
+    await prisma.kategoriDesaAntiKorupsi.upsert({
+      where: { id: k.id },
+      update: {
+        name: k.name,
+      },
+      create: {
+        id: k.id,
+        name: k.name,
+      },
+    });
+  }
+  console.log("kategori desa anti korupsi success ...");
+
+  // =========== DESA ANTI KORUPSI ===========
+  for (const p of desaAntiKorupsi) {
+    await prisma.desaAntiKorupsi.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        deskripsi: p.deskripsi,
+        kategoriId: p.kategoriId,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        deskripsi: p.deskripsi,
+        kategoriId: p.kategoriId,
+      },
+    });
+  }
+  console.log("desa anti korupsi success ...");
+
+  // =========== KATEGORI DESA ANTI KORUPSI ===========
+  for (const p of kategoriDesaAntiKorupsi) {
+    await prisma.kategoriDesaAntiKorupsi.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+      },
+    });
+  }
+  console.log("desa anti korupsi success ...");
+
+  // =========== KATEGORI PRESTASI DESA===========
+  for (const c of kategoriPrestasiDesa) {
+    await prisma.kategoriPrestasiDesa.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+      },
+    });
+  }
+  console.log("kategori prestasi desa success ...");
+
+  // =========== PRESTASI DESA===========
+  for (const p of prestasiDesa) {
+    await prisma.prestasiDesa.upsert({
+      where: { id: p.id },
+      update: {
+        name: p.name,
+        deskripsi: p.deskripsi,
+        kategoriId: p.kategoriId,
+      },
+      create: {
+        id: p.id,
+        name: p.name,
+        deskripsi: p.deskripsi,
+        kategoriId: p.kategoriId,
+      },
+    });
+  }
+  console.log("prestasi desa success ...");
+
   // =========== PENGHARGAAN ===========
   for (const p of penghargaan) {
     await prisma.penghargaan.upsert({
@@ -122,8 +214,8 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("penghargaan success ...");
 
-   // =========== LAYANAN DESA ===========
-   for (const p of pelayananSuratKeterangan) {
+  // =========== LAYANAN DESA ===========
+  for (const p of pelayananSuratKeterangan) {
     await prisma.pelayananSuratKeterangan.upsert({
       where: { id: p.id },
       update: {
@@ -157,23 +249,6 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("pelayanan surat keterangan success ...");
 
-  // =========== LAYANAN ===========
-  for (const l of layanan) {
-    await prisma.layanan.upsert({
-      where: {
-        name: l.name,
-      },
-      update: {
-        name: l.name,
-      },
-      create: {
-        name: l.name,
-      },
-    });
-  }
-
-  console.log("layanan success ...");
-
   // =========== SDGSDesa ===========
   for (const l of sdgsDesa) {
     await prisma.sDGSDesa.upsert({
@@ -214,6 +289,9 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("sdgs desa success ...");
 
+  // =========== MENU DESA ===========
+  // =========== SUBMENU PROFILE ===========
+  // =========== SEJARAH DESA ===========
   for (const l of sejarahDesa) {
     await prisma.sejarahDesa.upsert({
       where: {
@@ -233,6 +311,7 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("sejarah desa success ...");
 
+  // =========== MASKOT DESA ===========
   for (const l of maskotDesa) {
     await prisma.maskotDesa.upsert({
       where: {
@@ -252,6 +331,7 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("maskot desa success ...");
 
+  // =========== LAMBANG DESA ===========
   for (const l of lambangDesa) {
     await prisma.lambangDesa.upsert({
       where: {
@@ -271,6 +351,7 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("lambang desa success ...");
 
+  // =========== PROFIL PERBEKEL ===========
   for (const c of profilPerbekel) {
     await prisma.profilPerbekel.upsert({
       where: { id: c.id },
@@ -295,6 +376,7 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
     "✅ profilePerbekel seeded without imageId (editable later via UI)"
   );
 
+  // =========== VISI MISI DESA ===========
   for (const l of visiMisiDesa) {
     await prisma.visiMisiDesa.upsert({
       where: {
@@ -314,63 +396,134 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("visi misi desa success ...");
 
-  // Flatten the nested array structure for posisiOrganisasiPPID
-  const flattenedPosisiOrganisasiPPID = posisiOrganisasiPPID.flat();
+  // =========== MENU PPID ===========
+  // =========== SUBMENU PROFILE PPID ===========
+  for (const c of profilePPID) {
+    await prisma.profilePPID.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-update
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-create
+      },
+    });
+  }
+  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
+
+  // =========== SUBMENU STRUKTUR PPID ===========
+  // =========== POSISI ORGANISASI PPID ===========
+
+  const flattenedPosisi = posisiOrganisasiPPID.flat();
+
+  // ✅ Urutkan berdasarkan hierarki
+  const sortedPosisi = flattenedPosisi.sort((a, b) => a.hierarki - b.hierarki);
+
+  for (const p of sortedPosisi) {
+    console.log(`Seeding: ${p.nama} (id: ${p.id}, parent: ${p.parentId})`);
+
+    if (p.parentId) {
+      const parentExists = flattenedPosisi.some((pos) => pos.id === p.parentId);
+      if (!parentExists) {
+        console.warn(
+          `⚠️ Parent tidak ditemukan: ${p.parentId} untuk ${p.nama}`
+        );
+        continue;
+      }
+    }
 
-  for (const p of flattenedPosisiOrganisasiPPID) {
     await prisma.posisiOrganisasiPPID.upsert({
-      where: {
-        id: p.id,
-      },
-      update: {
-        nama: p.nama,
-        deskripsi: p.deskripsi,
-        hierarki: p.hierarki,
-        parentId: p.parentId,
-      },
-      create: {
-        id: p.id,
-        nama: p.nama,
-        deskripsi: p.deskripsi,
-        hierarki: p.hierarki,
-        parentId: p.parentId,
-      },
+      where: { id: p.id },
+      update: p,
+      create: p,
     });
   }
-  console.log("posisi organisasi success ...");
+  console.log("posisi organisasi berhasil");
 
-  // Flatten the nested array structure for pegawaiPPID
-  const flattenedPegawaiPPID = pegawaiPPID.flat();
-
-  for (const p of flattenedPegawaiPPID) {
+  // =========== PEGAWAI PPID ===========
+  const flattenedPegawai = pegawaiPPID.flat();
+  for (const p of flattenedPegawai) {
     await prisma.pegawaiPPID.upsert({
+      where: { id: p.id },
+      update: p,
+      create: p,
+    });
+  }
+  console.log("pegawai berhasil");
+
+  // =========== SUBMENU VISI MISI PPID ===========
+
+  for (const v of visiMisiPPID) {
+    await prisma.visiMisiPPID.upsert({
       where: {
-        id: p.id,
+        id: v.id,
       },
       update: {
-        namaLengkap: p.namaLengkap,
-        tanggalMasuk: new Date(p.tanggalMasuk),
-        email: p.email,
-        gelarAkademik: p.gelarAkademik,
-        telepon: p.telepon,
-        alamat: p.alamat,
-        posisiId: p.posisiId,
-        isActive: p.isActive,
+        misi: v.misi,
+        visi: v.visi,
       },
       create: {
-        id: p.id,
-        namaLengkap: p.namaLengkap,
-        tanggalMasuk: new Date(p.tanggalMasuk),
-        email: p.email,
-        gelarAkademik: p.gelarAkademik,
-        telepon: p.telepon,
-        alamat: p.alamat,
-        posisiId: p.posisiId,
-        isActive: p.isActive,
+        id: v.id,
+        misi: v.misi,
+        visi: v.visi,
       },
     });
   }
-  console.log("pegawai success ...");
+  console.log("visi misi PPID success ...");
+
+  // =========== SUBMENU DASAR HUKUM PPID ===========
+  for (const v of dasarHukumPPID) {
+    await prisma.dasarHukumPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        judul: v.judul,
+        content: v.content,
+      },
+      create: {
+        id: v.id,
+        judul: v.judul,
+        content: v.content,
+      },
+    });
+  }
+  console.log("dasar hukum PPID success ...");
+
+    // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
+    for (const v of daftarInformasiPublik) {
+      // Convert string date to Date object
+      const tanggal = new Date(v.tanggal);
+      
+      await prisma.daftarInformasiPublik.upsert({
+        where: {
+          id: v.id,
+        },
+        update: {
+          jenisInformasi: v.jenisInformasi,
+          deskripsi: v.deskripsi,
+          tanggal: tanggal,
+        },
+        create: {
+          id: v.id,
+          jenisInformasi: v.jenisInformasi,
+          deskripsi: v.deskripsi,
+          tanggal: tanggal,
+        },
+      });
+    }
+    console.log("daftar informasi publik PPID success ...");
 
   for (const l of pelayananPerizinanBerusaha) {
     await prisma.pelayananPerizinanBerusaha.upsert({
@@ -504,65 +657,53 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("cara memperoleh salinan informasi success ...");
 
-  for (const c of profilePPID) {
-    await prisma.profilePPID.upsert({
-      where: { id: c.id },
-      update: {
-        name: c.name,
-        biodata: c.biodata,
-        riwayat: c.riwayat,
-        pengalaman: c.pengalaman,
-        unggulan: c.unggulan,
-        // imageId tidak di-update
-      },
-      create: {
-        id: c.id,
-        name: c.name,
-        biodata: c.biodata,
-        riwayat: c.riwayat,
-        pengalaman: c.pengalaman,
-        unggulan: c.unggulan,
-        // imageId tidak di-create
-      },
-    });
-  }
-  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
-
-  for (const v of visiMisiPPID) {
-    await prisma.visiMisiPPID.upsert({
+  for (const j of jenisKelamin) {
+    await prisma.jenisKelaminResponden.upsert({
       where: {
-        id: v.id,
+        id: j.id,
       },
       update: {
-        misi: v.misi,
-        visi: v.visi,
+        name: j.name,
       },
       create: {
-        id: v.id,
-        misi: v.misi,
-        visi: v.visi,
+        id: j.id,
+        name: j.name,
       },
     });
   }
-  console.log("visi misi PPID success ...");
+  console.log("jenis kelamin responden success ...");
 
-  for (const v of dasarHukumPPID) {
-    await prisma.dasarHukumPPID.upsert({
+  for (const r of pilihanRatingResponden) {
+    await prisma.pilihanRatingResponden.upsert({
       where: {
-        id: v.id,
+        id: r.id,
       },
       update: {
-        judul: v.judul,
-        content: v.content,
+        name: r.name,
       },
       create: {
-        id: v.id,
-        judul: v.judul,
-        content: v.content,
+        id: r.id,
+        name: r.name,
       },
     });
   }
-  console.log("dasar hukum PPID success ...");
+  console.log("pilihan rating responden success ...");
+
+  for (const u of umurResponden) {
+    await prisma.umurResponden.upsert({
+      where: {
+        id: u.id,
+      },
+      update: {
+        name: u.name,
+      },
+      create: {
+        id: u.id,
+        name: u.name,
+      },
+    });
+  }
+  console.log("umur responden success ...");
 
   for (const k of kategoriProduk) {
     await prisma.kategoriProduk.upsert({
@@ -651,9 +792,12 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   console.log("hubungan organisasi success ...");
 
   for (const d of detailDataPengangguran) {
+    // Convert the year to a Date object (using January 1st of the year as the date)
+    const yearAsDate = new Date(d.year, 0, 1);
+
     await prisma.detailDataPengangguran.upsert({
       where: {
-        month_year: { month: d.month, year: d.year },
+        month_year: { month: d.month, year: yearAsDate },
       },
       update: {
         totalUnemployment: d.totalUnemployment,
@@ -663,7 +807,7 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
       },
       create: {
         month: d.month,
-        year: d.year,
+        year: yearAsDate,
         totalUnemployment: d.totalUnemployment,
         educatedUnemployment: d.educatedUnemployment,
         uneducatedUnemployment: d.uneducatedUnemployment,

src/app/admin/(dashboard)/_com/LeafletMultiMarkerMap.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+
+import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
+import { LatLngExpression } from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import L from 'leaflet';
+import { useEffect } from 'react';
+
+type MarkerData = {
+  position: [number, number];
+  popup: string;
+};
+
+type Props = {
+  center: [number, number];
+  markers: MarkerData[];
+  zoom?: number;
+  scrollWheelZoom?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export default function LeafletMultiMarkerMap({
+  center,
+  markers,
+  zoom = 13,
+  scrollWheelZoom = true,
+  className = '',
+  style = { height: '100%', width: '100%', zIndex: 0 },
+}: Props) {
+  // Fix for default marker icons in Next.js
+  useEffect(() => {
+    delete (L.Icon.Default.prototype as any)._getIconUrl;
+    L.Icon.Default.mergeOptions({
+      iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon-2x.png',
+      iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-icon.png',
+      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
+    });
+  }, []);
+
+  return (
+    <div className={className} style={style}>
+      <MapContainer
+        center={center as LatLngExpression}
+        zoom={zoom}
+        scrollWheelZoom={scrollWheelZoom}
+        style={{ height: '100%', width: '100%' }}
+      >
+        <TileLayer
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {markers.map((marker, index) => (
+          <Marker key={index} position={marker.position as LatLngExpression}>
+            <Popup>{marker.popup}</Popup>
+          </Marker>
+        ))}
+      </MapContainer>
+    </div>
+  );
+}

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -68,10 +69,34 @@ const foto = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.desa.gallery.foto["find-many"].get();
-      if (res.status === 200) {
-        foto.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      foto.findMany.loading = true; // ✅ Akses langsung via nama path
+      foto.findMany.page = page;
+      foto.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.desa.gallery.foto["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          foto.findMany.data = res.data.data ?? [];
+          foto.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          foto.findMany.data = [];
+          foto.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch foto paginated:", err);
+        foto.findMany.data = [];
+        foto.findMany.totalPages = 1;
+      } finally {
+        foto.findMany.loading = false;
       }
     },
   },
@@ -215,6 +240,28 @@ const foto = proxy({
       foto.update.form = { ...defaultFormFoto };
     },
   },
+  findRecent: {
+      data: [] as Prisma.GalleryFotoGetPayload<{
+        include: {
+          imageGalleryFoto: true;
+        };
+      }>[],
+      loading: false,
+  
+      async load() {
+        try {
+          this.loading = true;
+          const res = await ApiFetch.api.desa.gallery.foto["find-recent"].get();
+          if (res.status === 200 && res.data?.success) {
+            this.data = res.data.data ?? [];
+          }
+        } catch (error) {
+          console.error("Gagal fetch foto recent:", error);
+        } finally {
+          this.loading = false;
+        }
+      },
+    },
 });
 
 const video = proxy({
@@ -257,10 +304,34 @@ const video = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.desa.gallery.video["find-many"].get();
-      if (res.status === 200) {
-        video.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      video.findMany.loading = true; // ✅ Akses langsung via nama path
+      video.findMany.page = page;
+      video.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.desa.gallery.video["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          video.findMany.data = res.data.data ?? [];
+          video.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          video.findMany.data = [];
+          video.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch video paginated:", err);
+        video.findMany.data = [];
+        video.findMany.totalPages = 1;
+      } finally {
+        video.findMany.loading = false;
       }
     },
   },

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

@@ -1,7 +1,9 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 import { Prisma } from "@prisma/client";
+import ApiFetch from "@/lib/api-fetch";
 
 // ========================================= SEJARAH DESA ========================================= //
 const sejarahDesaForm = z.object({
@@ -106,16 +108,13 @@ const sejarahDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
-          `/api/desa/profile/sejarah/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(this.form),
-          }
-        );
+        const response = await fetch(`/api/desa/profile/sejarah/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -409,16 +408,13 @@ const lambangDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
-          `/api/desa/profile/lambang/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify(this.form),
-          }
-        );
+        const response = await fetch(`/api/desa/profile/lambang/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -588,14 +584,11 @@ const maskotDesa = proxy({
       this.error = null;
 
       try {
-        const response = await fetch(
-          `/api/desa/profile/maskot/${this.id}`,
-          {
-            method: "PUT",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(this.form),
-          }
-        );
+        const response = await fetch(`/api/desa/profile/maskot/${this.id}`, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(this.form),
+        });
 
         const result = await response.json();
 
@@ -818,12 +811,247 @@ const profilPerbekel = proxy({
   },
 });
 
+//========================================= MANTAN PERBEKEL ========================================= //
+const mantanPerbekelForm = z.object({
+  nama: z.string().min(3, "Nama minimal 3 karakter"),
+  daerah: z.string().min(3, "Daerah minimal 3 karakter"),
+  periode: z.string().min(3, "Periode minimal 3 karakter"),
+  imageId: z.string().min(1, "Gambar wajib dipilih"),
+});
+
+const mantanPerbekelDefaultForm = {
+  nama: "",
+  daerah: "",
+  periode: "",
+  imageId: "",
+};
+
+const mantanPerbekel = proxy({
+  create: {
+    form: { ...mantanPerbekelDefaultForm },
+    loading: false,
+    async create() {
+      const cek = mantanPerbekelForm.safeParse(mantanPerbekel.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mantanPerbekel.create.loading = true;
+        const res = await ApiFetch.api.desa.mantanperbekel["create"].post(
+          mantanPerbekel.create.form
+        );
+        if (res.status === 200) {
+          mantanPerbekel.findMany.load();
+          return toast.success("Foto berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan foto");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mantanPerbekel.create.loading = false;
+      }
+    },
+    resetForm() {
+      mantanPerbekel.create.form = { ...mantanPerbekelDefaultForm };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.PerbekelDariMasaKeMasaGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      mantanPerbekel.findMany.loading = true; // ✅ Akses langsung via nama path
+      mantanPerbekel.findMany.page = page;
+      mantanPerbekel.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.desa.mantanperbekel["findMany"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          mantanPerbekel.findMany.data = res.data.data ?? [];
+          mantanPerbekel.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          mantanPerbekel.findMany.data = [];
+          mantanPerbekel.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch mantan perbekel paginated:", err);
+        mantanPerbekel.findMany.data = [];
+        mantanPerbekel.findMany.totalPages = 1;
+      } finally {
+        mantanPerbekel.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PerbekelDariMasaKeMasaGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/desa/mantanperbekel/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          mantanPerbekel.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch mantan perbekel:", res.statusText);
+          mantanPerbekel.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching mantan perbekel:", error);
+        mantanPerbekel.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        mantanPerbekel.delete.loading = true;
+        const response = await fetch(`/api/desa/mantanperbekel/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "Mantan perbekel berhasil dihapus");
+          await mantanPerbekel.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus mantan perbekel");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus mantan perbekel");
+      } finally {
+        mantanPerbekel.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...mantanPerbekelDefaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/desa/mantanperbekel/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            daerah: data.daerah,
+            periode: data.periode,
+            imageId: data.imageId || "",
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading foto:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = mantanPerbekelForm.safeParse(mantanPerbekel.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        mantanPerbekel.update.loading = true;
+        const response = await fetch(`/api/desa/mantanperbekel/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            nama: this.form.nama,
+            daerah: this.form.daerah,
+            periode: this.form.periode,
+            imageId: this.form.imageId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Mantan perbekel berhasil diupdate");
+          await mantanPerbekel.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate mantan perbekel");
+        }
+      } catch (error) {
+        console.error("Error updating mantan perbekel:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Gagal mengupdate mantan perbekel"
+        );
+        return false;
+      } finally {
+        mantanPerbekel.update.loading = false;
+      }
+    },
+    reset() {
+      mantanPerbekel.update.id = "";
+      mantanPerbekel.update.form = { ...mantanPerbekelDefaultForm };
+    },
+  },
+});
+
 const stateProfileDesa = proxy({
   lambangDesa,
   maskotDesa,
   profilPerbekel,
   visiMisiDesa,
   sejarahDesa,
+  mantanPerbekel,
 });
 
 export default stateProfileDesa;

src/app/admin/(dashboard)/_state/ekonomi/lowongan-kerja.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -61,13 +62,39 @@ const lowonganKerjaState = proxy({
   findMany: {
     data: null as
       | Prisma.LowonganPekerjaanGetPayload<{
-          omit: { isActive: true };
+          omit: {
+            isActive: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.lowongankerja["find-many"].get();
-      if (res.status === 200) {
-        lowonganKerjaState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      lowonganKerjaState.findMany.loading = true; // ✅ Akses langsung via nama path
+      lowonganKerjaState.findMany.page = page;
+      lowonganKerjaState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.ekonomi.lowongankerja["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          lowonganKerjaState.findMany.data = res.data.data ?? [];
+          lowonganKerjaState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          lowonganKerjaState.findMany.data = [];
+          lowonganKerjaState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch lowongan kerja paginated:", err);
+        lowonganKerjaState.findMany.data = [];
+        lowonganKerjaState.findMany.totalPages = 1;
+      } finally {
+        lowonganKerjaState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -53,22 +54,47 @@ const pasarDesa = proxy({
     },
   },
   findMany: {
-    data: null as Array<
-      Prisma.PasarDesaGetPayload<{
-        include: {
-          image: true;
-          KategoriToPasar: {
-            include: {
-              kategori: true;
+    data: null as
+      | Prisma.PasarDesaGetPayload<{
+          include: {
+            image: true;
+            KategoriToPasar: {
+              include: {
+                kategori: true;
+              };
             };
           };
-        };
-      }>
-    > | null,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get();
-      if (res.status === 200) {
-        pasarDesa.findMany.data = res.data?.data ?? [];
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "", categoryId?: string) => {
+      pasarDesa.findMany.loading = true;
+      pasarDesa.findMany.page = page;
+      pasarDesa.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (categoryId) query.categoryId = categoryId;
+    
+        const res = await ApiFetch.api.ekonomi.pasardesa["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          pasarDesa.findMany.data = res.data.data ?? [];
+          pasarDesa.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          pasarDesa.findMany.data = [];
+          pasarDesa.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch keamanan lingkungan paginated:", err);
+        pasarDesa.findMany.data = [];
+        pasarDesa.findMany.totalPages = 1;
+      } finally {
+        pasarDesa.findMany.loading = false;
       }
     },
   },
@@ -272,14 +298,41 @@ const kategoriProduk = proxy({
     },
   },
   findMany: {
-    data: null as Array<{
-      id: string;
-      nama: string;
-    }> | null,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get();
-      if (res.status === 200) {
-        kategoriProduk.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.KategoriProdukGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search2: "",
+   load: async (page = 1, limit = 10, search2 = "") => {
+      kategoriProduk.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriProduk.findMany.page = page;
+      kategoriProduk.findMany.search2 = search2;
+  
+      try {
+        const query: any = { page, limit };
+        if (search2) query.search2 = search2;
+    
+        const res = await ApiFetch.api.ekonomi.kategoriproduk["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          kategoriProduk.findMany.data = res.data.data ?? [];
+          kategoriProduk.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kategoriProduk.findMany.data = [];
+          kategoriProduk.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kategori produk paginated:", err);
+        kategoriProduk.findMany.data = [];
+        kategoriProduk.findMany.totalPages = 1;
+      } finally {
+        kategoriProduk.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -11,8 +12,7 @@ const templateForm = z.object({
   statistik: z.object({
     tahun: z.string().min(1, "Tahun minimal 1 karakter"),
     jumlah: z.string().min(1, "Jumlah minimal 1 karakter"),
-  })
-    
+  }),
 });
 
 const defaultForm = {
@@ -21,8 +21,8 @@ const defaultForm = {
   ikonUrl: "",
   statistik: {
     tahun: "",
-    jumlah: ""
-  }
+    jumlah: "",
+  },
 };
 
 const programKemiskinanState = proxy({
@@ -64,12 +64,35 @@ const programKemiskinanState = proxy({
       };
     }>[],
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.ekonomi.programkemiskinan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        programKemiskinanState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      programKemiskinanState.findMany.loading = true; // ✅ Akses langsung via nama path
+      programKemiskinanState.findMany.page = page;
+      programKemiskinanState.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.ekonomi.programkemiskinan[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          programKemiskinanState.findMany.data = res.data.data ?? [];
+          programKemiskinanState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          programKemiskinanState.findMany.data = [];
+          programKemiskinanState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch program kemiskinan paginated:", err);
+        programKemiskinanState.findMany.data = [];
+        programKemiskinanState.findMany.totalPages = 1;
+      } finally {
+        programKemiskinanState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/inovasi/desa-digital.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -55,10 +56,34 @@ const desaDigitalState = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.inovasi.desadigital["find-many"].get();
-      if (res.status === 200) {
-        desaDigitalState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      desaDigitalState.findMany.loading = true; // ✅ Akses langsung via nama path
+      desaDigitalState.findMany.page = page;
+      desaDigitalState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.inovasi.desadigital["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          desaDigitalState.findMany.data = res.data.data ?? [];
+          desaDigitalState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          desaDigitalState.findMany.data = [];
+          desaDigitalState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch desa digital paginated:", err);
+        desaDigitalState.findMany.data = [];
+        desaDigitalState.findMany.totalPages = 1;
+      } finally {
+        desaDigitalState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/inovasi/info-tekno.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -55,10 +56,34 @@ const infoTeknoState = proxy({
           };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.inovasi.infotekno["find-many"].get();
-      if (res.status === 200) {
-        infoTeknoState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      infoTeknoState.findMany.loading = true; // ✅ Akses langsung via nama path
+      infoTeknoState.findMany.page = page;
+      infoTeknoState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.inovasi.infotekno["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          infoTeknoState.findMany.data = res.data.data ?? [];
+          infoTeknoState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          infoTeknoState.findMany.data = [];
+          infoTeknoState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch info teknologi paginated:", err);
+        infoTeknoState.findMany.data = [];
+        infoTeknoState.findMany.totalPages = 1;
+      } finally {
+        infoTeknoState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi.ts

@@ -6,12 +6,11 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateForm = z.object({
-    name: z.string().min(1, "Nama minimal 1 karakter"),
-    tahun: z.number().min(4, "Tahun minimal 4 karakter"),
-    slug: z.string().min(1, "Deskripsi singkat minimal 1 karakter"),
-    deskripsi: z.string().min(1, "Deskripsi minimal 1 karakter"),
-    kolaborator: z.string().min(1, "Kolaborator minimal 1 karakter"),
-    imageId: z.string().min(1, "Image ID minimal 1 karakter"),
+    name: z.string().min(1, "Nama kolaborasi inovasi harus diisi"),
+    tahun: z.number().min(1900, "Tahun tidak valid").max(new Date().getFullYear() + 1, "Tahun tidak boleh lebih dari tahun depan"),
+    slug: z.string().min(1, "Slug harus dihasilkan otomatis"),
+    deskripsi: z.string().min(1, "Deskripsi harus diisi"),
+    kolaborator: z.string().min(1, "Kolaborator harus diisi"),
 })
 
 const defaultForm = {
@@ -20,7 +19,6 @@ const defaultForm = {
     slug: "",
     deskripsi: "",
     kolaborator: "",
-    imageId: "",
 }
 
 const kolaborasiInovasiState = proxy({
@@ -28,27 +26,37 @@ const kolaborasiInovasiState = proxy({
     form: { ...defaultForm },
     loading: false,
     async create() {
-      const cek = templateForm.safeParse(kolaborasiInovasiState.create.form);
-      if (!cek.success) {
-        const err = `[${cek.error.issues
-          .map((v) => `${v.path.join(".")}`)
-          .join("\n")}] required`;
-        return toast.error(err);
-      }
-
       try {
+        // Validate form
+        const validation = templateForm.safeParse(kolaborasiInovasiState.create.form);
+        if (!validation.success) {
+          const errorMessages = validation.error.issues
+            .map(issue => `- ${issue.path.join('.')}: ${issue.message}`)
+            .join('\n');
+          return toast.error(`Validasi gagal:\n${errorMessages}`);
+        }
+
         kolaborasiInovasiState.create.loading = true;
+        
         const res = await ApiFetch.api.inovasi.kolaborasiinovasi["create"].post(
           kolaborasiInovasiState.create.form
         );
+        
         if (res.status === 200) {
-          kolaborasiInovasiState.findMany.load();
-          return toast.success("success create");
+          await kolaborasiInovasiState.findMany.load();
+          return { success: true, data: res.data };
         }
-        console.log(res);
-        return toast.error("failed create");
+        
+        console.error('Create failed:', res);
+        toast.error(res.data?.message || "Gagal menyimpan data");
+        return { success: false, error: res.data };
       } catch (error) {
-        console.log((error as Error).message);
+        console.error('Error in create:', error);
+        toast.error("Terjadi kesalahan saat menyimpan data");
+        return { 
+          success: false, 
+          error: error instanceof Error ? error.message : 'Unknown error' 
+        };
       } finally {
         kolaborasiInovasiState.create.loading = false;
       }
@@ -60,13 +68,21 @@ const kolaborasiInovasiState = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
-      // Change to arrow function
-      kolaborasiInovasiState.findMany.loading = true; // Use the full path to access the property
+    search: "",
+    year: "",
+    load: async (page = 1, limit = 10, search = "", year?: string) => {
+      kolaborasiInovasiState.findMany.loading = true;
       kolaborasiInovasiState.findMany.page = page;
+      kolaborasiInovasiState.findMany.search = search;
+      kolaborasiInovasiState.findMany.year = year || "";
+
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (year) query.year = year;
+        
         const res = await ApiFetch.api.inovasi.kolaborasiinovasi["find-many"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {
@@ -124,7 +140,6 @@ const kolaborasiInovasiState = proxy({
             slug: data.slug,
             deskripsi: data.deskripsi,
             kolaborator: data.kolaborator,
-            imageId: data.imageId,
           };
           return data;
         } else {
@@ -179,7 +194,7 @@ const kolaborasiInovasiState = proxy({
   },
   findUnique: {
     data: null as Prisma.KolaborasiInovasiGetPayload<{
-      include: { image: true };
+      omit: { isActive: true };
     }> | null,
     async load(id: string) {
       try {

src/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi.ts

@@ -0,0 +1,229 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+const mitraKolaborasiForm = z.object({
+  name: z.string().min(1, { message: "Name is required" }),
+  imageId: z.string().nonempty(),
+});
+
+const defaultForm = {
+  name: "",
+  imageId: "",
+};
+
+const mitraKolaborasi = proxy({
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = mitraKolaborasiForm.safeParse(mitraKolaborasi.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+      try {
+        mitraKolaborasi.create.loading = true;
+        const res = await ApiFetch.api.inovasi.mitrakolaborasi["create"].post(
+          mitraKolaborasi.create.form
+        );
+        if (res.status === 200) {
+          mitraKolaborasi.findMany.load();
+          return toast.success("mitraKolaborasi berhasil disimpan!");
+        }
+        return toast.error("Gagal menyimpan mitraKolaborasi");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        mitraKolaborasi.create.loading = false;
+      }
+    },
+    resetForm() {
+      mitraKolaborasi.create.form = { ...defaultForm };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.MitraKolaborasiGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      mitraKolaborasi.findMany.loading = true; // ✅ Akses langsung via nama path
+      mitraKolaborasi.findMany.page = page;
+      mitraKolaborasi.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.inovasi.mitrakolaborasi["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          mitraKolaborasi.findMany.data = res.data.data ?? [];
+          mitraKolaborasi.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          mitraKolaborasi.findMany.data = [];
+          mitraKolaborasi.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch mitraKolaborasi paginated:", err);
+        mitraKolaborasi.findMany.data = [];
+        mitraKolaborasi.findMany.totalPages = 1;
+      } finally {
+        mitraKolaborasi.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.MitraKolaborasiGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/inovasi/mitrakolaborasi/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          mitraKolaborasi.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch mitraKolaborasi:", res.statusText);
+          mitraKolaborasi.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching mitraKolaborasi:", error);
+        mitraKolaborasi.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+      try {
+        mitraKolaborasi.delete.loading = true;
+        const response = await fetch(`/api/inovasi/mitrakolaborasi/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        const result = await response.json();
+        if (response.ok) {
+          toast.success(result.message || "mitraKolaborasi berhasil dihapus");
+          await mitraKolaborasi.findMany.load(); // refresh list
+        } else {
+          toast.error(result.message || "Gagal menghapus mitraKolaborasi");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus mitraKolaborasi");
+      } finally {
+        mitraKolaborasi.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      try {
+        const response = await fetch(`/api/inovasi/mitrakolaborasi/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            imageId: data.imageId,
+          };
+          return data;
+        } else {
+          throw new Error(result.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading mitraKolaborasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = mitraKolaborasiForm.safeParse(mitraKolaborasi.update.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+      try {
+        mitraKolaborasi.update.loading = true;
+        const response = await fetch(`/api/inovasi/mitrakolaborasi/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            imageId: this.form.imageId,
+          }),
+        });
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "mitraKolaborasi berhasil diupdate");
+          await mitraKolaborasi.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal mengupdate mitraKolaborasi");
+        }
+      } catch (error) {
+        console.error("Error updating mitraKolaborasi:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal mengupdate mitraKolaborasi"
+        );
+        return false;
+      } finally {
+        mitraKolaborasi.update.loading = false;
+      }
+    },
+    reset() {
+      mitraKolaborasi.update.id = "";
+      mitraKolaborasi.update.form = { ...defaultForm };
+    },
+  },
+});
+
+export default mitraKolaborasi;

src/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -53,15 +54,39 @@ const keamananLingkunganState = proxy({
   findMany: {
     data: null as
       | Prisma.KeamananLingkunganGetPayload<{
-          include: { image: true };
+          include: {
+            image: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.keamananlingkungan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        keamananLingkunganState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      keamananLingkunganState.findMany.loading = true; // ✅ Akses langsung via nama path
+      keamananLingkunganState.findMany.page = page;
+      keamananLingkunganState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.keamanan.keamananlingkungan["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          keamananLingkunganState.findMany.data = res.data.data ?? [];
+          keamananLingkunganState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          keamananLingkunganState.findMany.data = [];
+          keamananLingkunganState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch keamanan lingkungan paginated:", err);
+        keamananLingkunganState.findMany.data = [];
+        keamananLingkunganState.findMany.totalPages = 1;
+      } finally {
+        keamananLingkunganState.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/keamanan/polsek-terdekat.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -63,13 +64,41 @@ const polsekTerdekatState = proxy({
   findMany: {
     data: null as
       | Prisma.PolsekTerdekatGetPayload<{
-          include: { layananPolsek: true };
+          include: {
+            layananPolsek: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.polsekterdekat["find-many"].get();
-      if (res.status === 200) {
-        polsekTerdekatState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      polsekTerdekatState.findMany.loading = true; // ✅ Akses langsung via nama path
+      polsekTerdekatState.findMany.page = page;
+      polsekTerdekatState.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.keamanan.polsekterdekat["find-many"].get(
+          { query }
+        );
+
+        if (res.status === 200 && res.data?.success) {
+          polsekTerdekatState.findMany.data = res.data.data ?? [];
+          polsekTerdekatState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          polsekTerdekatState.findMany.data = [];
+          polsekTerdekatState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch polsek terdekat paginated:", err);
+        polsekTerdekatState.findMany.data = [];
+        polsekTerdekatState.findMany.totalPages = 1;
+      } finally {
+        polsekTerdekatState.findMany.loading = false;
       }
     },
   },
@@ -237,6 +266,29 @@ const polsekTerdekatState = proxy({
       polsekTerdekatState.edit.form = { ...defaultForm };
     },
   },
+  findFirst: {
+    data: null as Prisma.PolsekTerdekatGetPayload<{
+      include: {
+        layananPolsek: true;
+      };
+    }> | null,
+    loading: false,
+    load: async () => {  // Changed to arrow function
+      polsekTerdekatState.findFirst.loading = true;
+      try {
+        const res = await ApiFetch.api.keamanan.polsekterdekat["find-first"].get();
+        if (res.status === 200 && res.data?.success) {
+          polsekTerdekatState.findFirst.data = res.data.data || null;
+        } else {
+          polsekTerdekatState.findFirst.data = null;
+        }
+      } catch (err) {
+        console.error("Gagal fetch polsek terdekat terbaru:", err);
+      } finally {
+        polsekTerdekatState.findFirst.loading = false;
+      }
+    }
+  }
 });
 
 export default polsekTerdekatState;

src/app/admin/(dashboard)/_state/keamanan/tips-keamanan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -53,15 +54,39 @@ const tipsKeamananState = proxy({
   findMany: {
     data: null as
       | Prisma.MenuTipsKeamananGetPayload<{
-          include: { image: true };
+          include: {
+            image: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.keamanan.menutipskeamanan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        tipsKeamananState.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      tipsKeamananState.findMany.loading = true; // ✅ Akses langsung via nama path
+      tipsKeamananState.findMany.page = page;
+      tipsKeamananState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.keamanan.menutipskeamanan["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          tipsKeamananState.findMany.data = res.data.data ?? [];
+          tipsKeamananState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          tipsKeamananState.findMany.data = [];
+          tipsKeamananState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch menu tips keamanan paginated:", err);
+        tipsKeamananState.findMany.data = [];
+        tipsKeamananState.findMany.totalPages = 1;
+      } finally {
+        tipsKeamananState.findMany.loading = false;
       }
     },
   },

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

@@ -5,6 +5,7 @@ import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
+//fasilitas kesehatan aja
 // Validasi form
 const templateForm = z.object({
   name: z.string().min(1, "Nama harus diisi"),
@@ -61,7 +62,7 @@ const defaultForm = {
   },
 };
 
-const fasilitasKesehatanState = proxy({
+const fasilitasKesehatan = proxy({
   create: {
     form: { ...defaultForm },
     loading: false,
@@ -86,7 +87,7 @@ const fasilitasKesehatanState = proxy({
         if (res.status === 200) {
           toast.success("Berhasil menambahkan fasilitas kesehatan");
           this.resetForm();
-          await fasilitasKesehatanState.findMany.load();
+          await fasilitasKesehatan.findMany.load();
           return res.data;
         }
       } catch (err: any) {
@@ -102,7 +103,6 @@ const fasilitasKesehatanState = proxy({
       this.form = { ...defaultForm };
     },
   },
-
   findMany: {
     data: null as
       | Prisma.FasilitasKesehatanGetPayload<{
@@ -156,7 +156,7 @@ const fasilitasKesehatanState = proxy({
       const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/${id}`);
       if (res.ok) {
         const data = await res.json();
-        fasilitasKesehatanState.findUnique.data = data.data ?? null;
+        fasilitasKesehatan.findUnique.data = data.data ?? null;
       } else {
         toast.error("Gagal load data fasilitas kesehatan");
       }
@@ -176,8 +176,8 @@ const fasilitasKesehatanState = proxy({
       const result = await res.json();
       const data = result.data;
 
-      fasilitasKesehatanState.edit.id = data.id;
-      fasilitasKesehatanState.edit.form = {
+      fasilitasKesehatan.edit.id = data.id;
+      fasilitasKesehatan.edit.form = {
         name: data.name,
         informasiUmum: {
           fasilitas: data.informasiumum.fasilitas,
@@ -205,7 +205,7 @@ const fasilitasKesehatanState = proxy({
       };
     },
     async submit() {
-      const cek = templateForm.safeParse(fasilitasKesehatanState.edit.form);
+      const cek = templateForm.safeParse(fasilitasKesehatan.edit.form);
       if (!cek.success) {
         const errMsg = cek.error.issues
           .map((v) => `${v.path.join(".")}: ${v.message}`)
@@ -215,42 +215,38 @@ const fasilitasKesehatanState = proxy({
       }
 
       try {
-        fasilitasKesehatanState.edit.loading = true;
+        fasilitasKesehatan.edit.loading = true;
         const payload = {
-          name: fasilitasKesehatanState.edit.form.name,
+          name: fasilitasKesehatan.edit.form.name,
           informasiUmum: {
-            fasilitas:
-              fasilitasKesehatanState.edit.form.informasiUmum.fasilitas,
-            alamat: fasilitasKesehatanState.edit.form.informasiUmum.alamat,
+            fasilitas: fasilitasKesehatan.edit.form.informasiUmum.fasilitas,
+            alamat: fasilitasKesehatan.edit.form.informasiUmum.alamat,
             jamOperasional:
-              fasilitasKesehatanState.edit.form.informasiUmum.jamOperasional,
+              fasilitasKesehatan.edit.form.informasiUmum.jamOperasional,
           },
           layananUnggulan: {
-            content: fasilitasKesehatanState.edit.form.layananUnggulan.content,
+            content: fasilitasKesehatan.edit.form.layananUnggulan.content,
           },
           dokterdanTenagaMedis: {
-            name: fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.name,
+            name: fasilitasKesehatan.edit.form.dokterdanTenagaMedis.name,
             specialist:
-              fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.specialist,
-            jadwal:
-              fasilitasKesehatanState.edit.form.dokterdanTenagaMedis.jadwal,
+              fasilitasKesehatan.edit.form.dokterdanTenagaMedis.specialist,
+            jadwal: fasilitasKesehatan.edit.form.dokterdanTenagaMedis.jadwal,
           },
           fasilitasPendukung: {
-            content:
-              fasilitasKesehatanState.edit.form.fasilitasPendukung.content,
+            content: fasilitasKesehatan.edit.form.fasilitasPendukung.content,
           },
           prosedurPendaftaran: {
-            content:
-              fasilitasKesehatanState.edit.form.prosedurPendaftaran.content,
+            content: fasilitasKesehatan.edit.form.prosedurPendaftaran.content,
           },
           tarifDanLayanan: {
-            layanan: fasilitasKesehatanState.edit.form.tarifDanLayanan.layanan,
-            tarif: fasilitasKesehatanState.edit.form.tarifDanLayanan.tarif,
+            layanan: fasilitasKesehatan.edit.form.tarifDanLayanan.layanan,
+            tarif: fasilitasKesehatan.edit.form.tarifDanLayanan.tarif,
           },
         };
 
         const res = await fetch(
-          `/api/kesehatan/fasilitas-kesehatan/${fasilitasKesehatanState.edit.id}`,
+          `/api/kesehatan/fasilitas-kesehatan/${fasilitasKesehatan.edit.id}`,
           {
             method: "PUT",
             headers: { "Content-Type": "application/json" },
@@ -264,7 +260,7 @@ const fasilitasKesehatanState = proxy({
         }
 
         toast.success("Berhasil update fasilitas kesehatan");
-        await fasilitasKesehatanState.findMany.load();
+        await fasilitasKesehatan.findMany.load();
         return true;
       } catch (err) {
         toast.error(
@@ -272,37 +268,297 @@ const fasilitasKesehatanState = proxy({
         );
         return false;
       } finally {
-        fasilitasKesehatanState.edit.loading = false;
+        fasilitasKesehatan.edit.loading = false;
       }
     },
     resetForm() {
-      fasilitasKesehatanState.edit.id = "";
-      fasilitasKesehatanState.edit.form = { ...defaultForm };
+      fasilitasKesehatan.edit.id = "";
+      fasilitasKesehatan.edit.form = { ...defaultForm };
     },
   },
   delete: {
     loading: false,
-    async byId(id: string){
+    async byId(id: string) {
       try {
-        fasilitasKesehatanState.delete.loading = true;
-        const res = await fetch(`/api/kesehatan/fasilitas-kesehatan/del/${id}`, {
-          method: "DELETE",
-        });
+        fasilitasKesehatan.delete.loading = true;
+        const res = await fetch(
+          `/api/kesehatan/fasilitas-kesehatan/del/${id}`,
+          {
+            method: "DELETE",
+          }
+        );
 
         const result = await res.json();
         if (res.ok && result.success) {
           toast.success("Fasilitas kesehatan berhasil dihapus");
-          await fasilitasKesehatanState.findMany.load();
+          await fasilitasKesehatan.findMany.load();
         } else {
           toast.error(result.message || "Gagal menghapus");
         }
       } catch {
         toast.error("Terjadi kesalahan saat menghapus");
       } finally {
-        fasilitasKesehatanState.delete.loading = false;
+        fasilitasKesehatan.delete.loading = false;
       }
-    }
+    },
   },
 });
 
+//dokter & tenaga medis
+const templateDokterForm = z.object({
+  name: z.string().min(1, "Nama tidak boleh kosong"),
+  specialist: z.string().min(1, "Spesialis tidak boleh kosong"),
+  jadwal: z.string().min(1, "Jadwal tidak boleh kosong"),
+});
+
+const defaultDokterForm = {
+  name: "",
+  specialist: "",
+  jadwal: "",
+};
+
+const dokter = proxy({
+  create: {
+    create: {
+      form: defaultDokterForm,
+      loading: false,
+      async create() {
+        const cek = templateDokterForm.safeParse(dokter.create.create.form);
+        if (!cek.success) {
+          const err = `[${cek.error.issues
+            .map((v) => `${v.path.join(".")}`)
+            .join("\n")}] required`;
+          toast.error(err);
+          return null;
+        }
+        try {
+          dokter.create.create.loading = true;
+          const res = await ApiFetch.api.kesehatan.doktertenagamedis[
+            "create"
+          ].post(dokter.create.create.form);
+
+          if (res.status === 200) {
+            const id = res.data?.data;
+            if (id) {
+              toast.success("Success create");
+              dokter.create.create.form = { ...defaultDokterForm };
+              dokter.findMany.load();
+              return id;
+            }
+          }
+          toast.error("failed create");
+          return null;
+        } catch (error) {
+          console.log((error as Error).message);
+          return null;
+        } finally {
+          dokter.create.create.loading = false;
+        }
+      },
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.DokterdanTenagaMedisGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      dokter.findMany.loading = true; // ✅ Akses langsung via nama path
+      dokter.findMany.page = page;
+      dokter.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.doktertenagamedis[
+          "findMany"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          dokter.findMany.data = res.data.data ?? [];
+          dokter.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          dokter.findMany.data = [];
+          dokter.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch dokter tenaga medis paginated:", err);
+        dokter.findMany.data = [];
+        dokter.findMany.totalPages = 1;
+      } finally {
+        dokter.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.DokterdanTenagaMedisGetPayload<{
+      omit: { isActive: true };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/doktertenagamedis/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          dokter.findUnique.data = data.data ?? null;
+        } else {
+          console.error(
+            "Failed to fetch dokter dan tenaga medis",
+            res.statusText
+          );
+          dokter.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching dokter dan tenaga medis", error);
+        dokter.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultDokterForm },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/doktertenagamedis/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            specialist: data.specialist,
+            jadwal: data.jadwal,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading dokter dan tenaga medis:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const formData = {
+        name: this.form.name,
+        specialist: this.form.specialist,
+        jadwal: this.form.jadwal,
+      };
+
+      const cek = templateDokterForm.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(`/api/kesehatan/doktertenagamedis/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await dokter.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data dokter dan tenaga medis");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) {
+        return toast.warn("ID tidak valid");
+      }
+      try {
+        dokter.delete.loading = true;
+
+        const response = await fetch(
+          `/api/kesehatan/doktertenagamedis/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "Dokter dan tenaga medis berhasil dihapus"
+          );
+          await dokter.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus dokter dan tenaga medis"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus dokter dan tenaga medis");
+      } finally {
+        dokter.delete.loading = false;
+      }
+    },
+  },
+});
+
+const fasilitasKesehatanState = proxy({
+  fasilitasKesehatan,
+  dokter
+});
+
 export default fasilitasKesehatanState;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -5,20 +6,19 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 const templateGrafikKepuasan = z.object({
-  label: z.string().min(2, "Label harus diisi"),
-  jumlah: z.string().min(1, "Jumlah harus diisi"),
+  nama: z.string().min(2, "Nama harus diisi"),
+  tanggal: z.string().min(1, "Tanggal harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+  penyakit: z.string().min(1, "Penyakit harus diisi"),
 });
 
-type GrafikKepuasan = Prisma.GrafikKepuasanGetPayload<{
-  select: {
-    label: true;
-    jumlah: true;
-  };
-}>;
-
-const defaultForm: GrafikKepuasan = {
-  label: "",
-  jumlah: ""
+const defaultForm = {
+  nama: "",
+  tanggal: "",
+  jenisKelamin: "",
+  alamat: "",
+  penyakit: "",
 };
 
 const grafikkepuasan = proxy({
@@ -36,16 +36,15 @@ const grafikkepuasan = proxy({
       }
       try {
         grafikkepuasan.create.loading = true;
-        const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(grafikkepuasan.create.form);
-    
+        const res = await ApiFetch.api.kesehatan.grafikkepuasan["create"].post(
+          grafikkepuasan.create.form
+        );
+
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          const id = res.data?.data;
           if (id) {
             toast.success("Success create");
-            grafikkepuasan.create.form = {
-              label: "",
-              jumlah: "",
-            };
+            grafikkepuasan.create.form = { ...defaultForm };
             grafikkepuasan.findMany.load();
             return id;
           }
@@ -62,21 +61,49 @@ const grafikkepuasan = proxy({
   },
   findMany: {
     data: null as
-      | Prisma.GrafikKepuasanGetPayload<{ omit: { isActive: true } }>[]
+      | Prisma.GrafikKepuasanGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.grafikkepuasan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        grafikkepuasan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      grafikkepuasan.findMany.loading = true; // ✅ Akses langsung via nama path
+      grafikkepuasan.findMany.page = page;
+      grafikkepuasan.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.grafikkepuasan[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          grafikkepuasan.findMany.data = res.data.data ?? [];
+          grafikkepuasan.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          grafikkepuasan.findMany.data = [];
+          grafikkepuasan.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        grafikkepuasan.findMany.data = [];
+        grafikkepuasan.findMany.totalPages = 1;
+      } finally {
+        grafikkepuasan.findMany.loading = false;
       }
     },
   },
   findUnique: {
     data: null as Prisma.GrafikKepuasanGetPayload<{
-       omit: { isActive: true } 
-      }> | null,
+      omit: { isActive: true };
+    }> | null,
     async load(id: string) {
       try {
         const res = await fetch(`/api/kesehatan/grafikkepuasan/${id}`);
@@ -95,88 +122,137 @@ const grafikkepuasan = proxy({
   },
   update: {
     id: "",
-    form: {...defaultForm},
+    form: { ...defaultForm },
     loading: false,
-    async byId() {
-    },
-  async submit() {
-    const id = this.id;
-    if (!id) {
-      toast.warn("ID tidak valid");
-      return null;
-    }
-    const cek = templateGrafikKepuasan.safeParse(grafikkepuasan.update.form);
-    if (!cek.success) {
-      const err = `[${cek.error.issues
-        .map((v) => `${v.path.join(".")}`)
-        .join("\n")}] required`;
-      return toast.error(err);
-    }
-    try {
-      this.loading = true;
-      const response = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
-        method: "PUT",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(this.form),
-      });
-      const result = await response.json();
-
-      if (!response.ok || !result?.success) {
-        throw new Error(result?.message || "Gagal update data");
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
       }
 
-      toast.success("Berhasil update data!");
+      try {
+        const response = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
-      // ✅ Optional: refresh list kalau kamu langsung ke halaman list
-      await grafikkepuasan.findMany.load();
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
 
-      return result.data;
-    } catch (error) {
-      console.error("Error update data:", error);
-      toast.error("Gagal update data grafik kepuasan");
-    } finally {
-      this.loading = false;
-    }
-  },
-},
-delete: {
-  loading: false,
-  async byId(id: string) {
-    if (!id) {
-      return toast.warn("ID tidak valid");
-    }
-    try {
-      grafikkepuasan.delete.loading = true;
+        const result = await response.json();
 
-      const response = await fetch(`/api/kesehatan/grafikkepuasan/del/${id}`, {
-        method: "DELETE",
-        headers: {
-          "Content-Type": "application/json",
-        },
-      });
-
-      const result = await response.json();
-
-      if (response.ok && result?.success) {
-        toast.success(
-          result.message || "Grafik kepuasan berhasil dihapus"
-        );
-        await grafikkepuasan.findMany.load(); // refresh list
-      } else {
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            tanggal: data.tanggal,
+            jenisKelamin: data.jenisKelamin,
+            alamat: data.alamat,
+            penyakit: data.penyakit,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading grafik kepuasan:", error);
         toast.error(
-          result?.message || "Gagal menghapus grafik kepuasan"
+          error instanceof Error ? error.message : "Gagal memuat data"
         );
+        return null;
       }
-    } catch (error) {
-      console.error("Gagal delete:", error);
-      toast.error("Terjadi kesalahan saat menghapus grafik kepuasan");
-    } finally {
-      grafikkepuasan.delete.loading = false;
-    }
-  }
-}
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      const formData = {
+        nama: this.form.nama,
+        tanggal: this.form.tanggal,
+        jenisKelamin: this.form.jenisKelamin,
+        alamat: this.form.alamat,
+        penyakit: this.form.penyakit,
+      };
+
+      const cek = templateGrafikKepuasan.safeParse(formData);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+
+      try {
+        this.loading = true;
+        const res = await fetch(`/api/kesehatan/grafikkepuasan/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+
+        const result = await res.json();
+
+        if (!res.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+
+        toast.success("Berhasil update data!");
+        await grafikkepuasan.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Update error:", error);
+        toast.error("Gagal update data grafik kepuasan");
+        throw error;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) {
+        return toast.warn("ID tidak valid");
+      }
+      try {
+        grafikkepuasan.delete.loading = true;
+
+        const response = await fetch(
+          `/api/kesehatan/grafikkepuasan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Grafik kepuasan berhasil dihapus");
+          await grafikkepuasan.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus grafik kepuasan");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus grafik kepuasan");
+      } finally {
+        grafikkepuasan.delete.loading = false;
+      }
+    },
+  },
 });
 
 export default grafikkepuasan;

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

@@ -1,10 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
 import { proxy } from "valtio";
 import { z } from "zod";
 
-const templatePersentase = z.object({
+//persentase kelahiran kematian
+
+const templatePersentaseKelahiran = z.object({
   tahun: z.string().min(4, "Tahun harus diisi"),
   kematianKasar: z.string().min(1, "Kematian kasar harus diisi"),
   kelahiranKasar: z.string().min(1, "Kelahiran kasar harus diisi"),
@@ -13,18 +16,14 @@ const templatePersentase = z.object({
 
 type Persentase = Prisma.DataKematian_KelahiranGetPayload<{
   select: {
-    tahun: true;
-    kematianKasar: true;
-    kelahiranKasar: true;
-    kematianBayi: true;
+    kematianId: true;
+    kelahiranId: true;
   };
 }>;
 
 const defaultForm: Persentase = {
-  tahun: "",
-  kematianKasar: "",
-  kelahiranKasar: "",
-  kematianBayi: "",
+  kematianId: "",
+  kelahiranId: "",
 };
 
 const persentasekelahiran = proxy({
@@ -32,7 +31,9 @@ const persentasekelahiran = proxy({
     form: defaultForm,
     loading: false,
     async create() {
-      const cek = templatePersentase.safeParse(persentasekelahiran.create.form);
+      const cek = templatePersentaseKelahiran.safeParse(
+        persentasekelahiran.create.form
+      );
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -47,7 +48,7 @@ const persentasekelahiran = proxy({
         ].post(persentasekelahiran.create.form);
 
         if (res.status === 200) {
-          const id = res.data?.data?.id;
+          const id = res.data?.data;
           if (id) {
             toast.success("Success create");
             persentasekelahiran.create.form = { ...defaultForm };
@@ -69,21 +70,51 @@ const persentasekelahiran = proxy({
   findMany: {
     data: null as
       | Prisma.DataKematian_KelahiranGetPayload<{
-          omit: { isActive: true };
+          include: {
+            kematian: true;
+            kelahiran: true;
+          };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.persentasekelahiran[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        persentasekelahiran.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      persentasekelahiran.findMany.loading = true; // ✅ Akses langsung via nama path
+      persentasekelahiran.findMany.page = page;
+      persentasekelahiran.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.persentasekelahiran[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          persentasekelahiran.findMany.data = res.data.data ?? [];
+          persentasekelahiran.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          persentasekelahiran.findMany.data = [];
+          persentasekelahiran.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        persentasekelahiran.findMany.data = [];
+        persentasekelahiran.findMany.totalPages = 1;
+      } finally {
+        persentasekelahiran.findMany.loading = false;
       }
     },
   },
   findUnique: {
     data: null as Prisma.DataKematian_KelahiranGetPayload<{
-      omit: { isActive: true };
+      include: {
+        kematian: true;
+        kelahiran: true;
+      };
     }> | null,
     async load(id: string) {
       try {
@@ -114,13 +145,11 @@ const persentasekelahiran = proxy({
       }
 
       const formData = {
-        tahun: this.form.tahun,
-        kematianKasar: this.form.kematianKasar,
-        kelahiranKasar: this.form.kelahiranKasar,
-        kematianBayi: this.form.kematianBayi,
+        kematianId: this.form.kematianId,
+        kelahiranId: this.form.kelahiranId,
       };
 
-      const cek = templatePersentase.safeParse(formData);
+      const cek = templatePersentaseKelahiran.safeParse(formData);
       if (!cek.success) {
         const err = `[${cek.error.issues
           .map((v) => `${v.path.join(".")}`)
@@ -197,4 +226,521 @@ const persentasekelahiran = proxy({
   },
 });
 
-export default persentasekelahiran;
+// data kelahiran
+
+const templateKelahiran = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  tanggal: z.string().min(4, "Tahun harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+});
+
+const defaultKelahiran = {
+  nama: "",
+  tanggal: "",
+  jenisKelamin: "",
+  alamat: "",
+};
+
+const kelahiran = proxy({
+  create: {
+    form: { ...defaultKelahiran }, // ✅ ini kunci fix-nya
+    loading: false,
+    async create() {
+      const cek = templateKelahiran.safeParse(kelahiran.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kelahiran.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kelahiran["create"].post(
+          kelahiran.create.form
+        );
+        if (res.status === 200) {
+          kelahiran.findMany.load();
+          return toast.success("Kelahiran berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kelahiran");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kelahiran.create.loading = false;
+      }
+    },
+    resetForm() {
+      kelahiran.create.form = { ...defaultKelahiran };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KelahiranGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kelahiran.findMany.loading = true; // ✅ Akses langsung via nama path
+      kelahiran.findMany.page = page;
+      kelahiran.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kelahiran["findMany"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kelahiran.findMany.data = res.data.data ?? [];
+          kelahiran.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kelahiran.findMany.data = [];
+          kelahiran.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kelahiran paginated:", err);
+        kelahiran.findMany.data = [];
+        kelahiran.findMany.totalPages = 1;
+      } finally {
+        kelahiran.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KelahiranGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kelahiran/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kelahiran.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch kelahiran:", res.statusText);
+          kelahiran.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching kelahiran:", error);
+        kelahiran.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kelahiran.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kelahiran/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kelahiran berhasil dihapus");
+          await kelahiran.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kelahiran");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kelahiran");
+      } finally {
+        kelahiran.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultKelahiran },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kelahiran/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            tanggal: data.tanggal,
+            jenisKelamin: data.jenisKelamin,
+            alamat: data.alamat,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading data kelahiran:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateKelahiran.safeParse(kelahiran.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kelahiran.edit.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kelahiran/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            nama: this.form.nama,
+            tanggal: this.form.tanggal,
+            jenisKelamin: this.form.jenisKelamin,
+            alamat: this.form.alamat,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kelahiran");
+          await kelahiran.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data kelahiran");
+        }
+      } catch (error) {
+        console.error("Error updating data kelahiran:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kelahiran"
+        );
+        return false;
+      } finally {
+        kelahiran.edit.loading = false;
+      }
+    },
+
+    reset() {
+      kelahiran.edit.id = "";
+      kelahiran.edit.form = { ...defaultKelahiran };
+    },
+  },
+});
+
+
+// data kematian
+
+const templateKematian = z.object({
+  nama: z.string().min(1, "Nama harus diisi"),
+  tanggal: z.string().min(4, "Tahun harus diisi"),
+  jenisKelamin: z.string().min(1, "Jenis kelamin harus diisi"),
+  alamat: z.string().min(1, "Alamat harus diisi"),
+  penyebab: z.string().min(1, "Penyebab harus diisi"),
+});
+
+const defaultKematian = {
+  nama: "",
+  tanggal: "",
+  jenisKelamin: "",
+  alamat: "",
+  penyebab: "",
+};
+
+const kematian = proxy({
+  create: {
+    form: { ...defaultKematian }, // ✅ ini kunci fix-nya
+    loading: false,
+    async create() {
+      const cek = templateKematian.safeParse(kematian.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kematian.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kematian["create"].post(
+          kematian.create.form
+        );
+        if (res.status === 200) {
+          kematian.findMany.load();
+          return toast.success("Kematian berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kematian");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kematian.create.loading = false;
+      }
+    },
+    resetForm() {
+      kematian.create.form = { ...defaultKematian };
+    },
+  },
+  findMany: {
+    data: null as
+      | Prisma.KematianGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kematian.findMany.loading = true; // ✅ Akses langsung via nama path
+      kematian.findMany.page = page;
+      kematian.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kematian["findMany"].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kematian.findMany.data = res.data.data ?? [];
+          kematian.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kematian.findMany.data = [];
+          kematian.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kematian paginated:", err);
+        kematian.findMany.data = [];
+        kematian.findMany.totalPages = 1;
+      } finally {
+        kematian.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KematianGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kematian/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kematian.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch kematian:", res.statusText);
+          kematian.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching kematian:", error);
+        kematian.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kematian.delete.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kematian/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kematian berhasil dihapus");
+          await kematian.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kematian");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kematian");
+      } finally {
+        kematian.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultKematian },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kematian/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const result = await response.json();
+
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            nama: data.nama,
+            tanggal: data.tanggal,
+            jenisKelamin: data.jenisKelamin,
+            alamat: data.alamat,
+            penyebab: data.penyebab,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading data kematian:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateKematian.safeParse(kematian.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        kematian.edit.loading = true;
+
+        const response = await fetch(`/api/kesehatan/kematian/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            nama: this.form.nama,
+            tanggal: this.form.tanggal,
+            jenisKelamin: this.form.jenisKelamin,
+            alamat: this.form.alamat,
+            penyebab: this.form.penyebab,
+          }),
+        });
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update data kematian");
+          await kematian.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update data kematian");
+        }
+      } catch (error) {
+        console.error("Error updating data kematian:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update data kematian"
+        );
+        return false;
+      } finally {
+        kematian.edit.loading = false;
+      }
+    },
+
+    reset() {
+      kematian.edit.id = "";
+      kematian.edit.form = { ...defaultKematian };
+    },
+  },
+});
+
+const persentaseKelahiranKematian = proxy({
+  persentasekelahiran,
+  kelahiran,
+  kematian
+});
+
+export default persentaseKelahiranKematian;

src/app/admin/(dashboard)/_state/kesehatan/info-wabah-penyakit/infoWabahPenyakit.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -20,17 +21,41 @@ const defaultForm = {
 
 const infoWabahPenyakit = proxy({
   findMany: {
-    data: [] as Prisma.InfoWabahPenyakitGetPayload<{
-      include: {
-        image: true;
-      };
-    }>[],
-    async load() {
-      const res = await ApiFetch.api.kesehatan.infowabahpenyakit[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        infoWabahPenyakit.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.InfoWabahPenyakitGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      infoWabahPenyakit.findMany.loading = true; // ✅ Akses langsung via nama path
+      infoWabahPenyakit.findMany.page = page;
+      infoWabahPenyakit.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.infowabahpenyakit["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+         infoWabahPenyakit.findMany.data = res.data.data ?? [];
+          infoWabahPenyakit.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          infoWabahPenyakit.findMany.data = [];
+          infoWabahPenyakit.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch info wabah penyakit paginated:", err);
+        infoWabahPenyakit.findMany.data = [];
+        infoWabahPenyakit.findMany.totalPages = 1;
+      } finally {
+        infoWabahPenyakit.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/kesehatan/kontak-darurat/kontakDarurat.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -5,204 +6,241 @@ import { proxy } from "valtio";
 import { z } from "zod";
 
 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(),
-})
-
-const defaultForm = {
-    name: "",
-    deskripsi: "",
-    imageId: "",
-}
-
-const kontakDarurat = proxy({
-    findMany: {
-        data: [] as Prisma.KontakDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }>[],
-        async load() {
-            const res = await ApiFetch.api.kesehatan.kontakdarurat[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                kontakDarurat.findMany.data = res.data?.data ?? [];
-            }
-        },
-    },
-    create:{
-        form: {...defaultForm},
-        loading: false,
-        async create() {
-            const cek = templateForm.safeParse(kontakDarurat.create.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-
-            try {
-                kontakDarurat.create.loading = true;
-                const res = await ApiFetch.api.kesehatan.kontakdarurat[
-                    "create"
-                ].post(kontakDarurat.create.form);
-                if (res.status === 200) {
-                    kontakDarurat.findMany.load();
-                    return toast.success("Kontak Darurat berhasil disimpan!");
-                }
-
-                return toast.error("Gagal menyimpan kontak darurat");
-            } catch (error) {
-                console.log((error as Error).message);
-            } finally {
-                kontakDarurat.create.loading = false;
-            }
-        },
-        resetForm() {
-            kontakDarurat.create.form = {...defaultForm};
-        }
-    },
-    findUnique: {
-        data: null as Prisma.KontakDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }> | null,
-        async load(id: string) {
-           try {
-            const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
-            if (res.ok) {
-                const data = await res.json();
-                kontakDarurat.findUnique.data = data.data ?? null;
-            } else {
-                console.error("Failed to fetch data", res.status, res.statusText);
-                kontakDarurat.findUnique.data = null;
-            }
-           } catch (error) {
-            console.error("Error fetching data:", error);
-            kontakDarurat.findUnique.data = null;
-           }
-        },
-    },
-    delete: {
-        loading: false,
-        async byId(id: string) {
-          try {
-            kontakDarurat.delete.loading = true;
-            const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
-              method: 'DELETE',
-              headers: {
-                'Content-Type': 'application/json',
-              },
-            });
-            
-            const result = await response.json();
-            
-            if (response.ok && result?.success) {
-              toast.success(result.message || "Kontak darurat berhasil dihapus");
-              await kontakDarurat.findMany.load(); // refresh list
-            } else {
-              toast.error(result?.message || "Gagal menghapus kontak darurat");
-            }
-          } catch (error) {
-            console.error("Gagal delete:", error);
-            toast.error("Terjadi kesalahan saat menghapus kontak darurat");
-          } finally {
-            kontakDarurat.delete.loading = false;
-          }
-        }
-      },
-    edit: {
-        id: "",
-        form: { ...defaultForm },
-        loading: false,
-    
-        async load(id: string) {
-          if (!id) {
-            toast.warn("ID tidak valid");
-            return null;
-          }
-    
-          try {
-            const response = await fetch(`/api/kesehatan/kontakdarurat/${id}`, {
-              method: "GET",
-              headers: {
-                "Content-Type": "application/json",
-              },
-            });
-            if (!response.ok) {
-              throw new Error(`HTTP error! status: ${response.status}`);
-            }
-            const result = await response.json();
-            if (result?.success) {
-              const data = result.data;
-              this.id = data.id;
-              this.form = {
-                name: data.name,
-                deskripsi: data.deskripsi,
-                imageId: data.imageId,
-              };
-              return data; // Return the loaded data
-            } else {
-              throw new Error(result?.message || "Gagal memuat data");
-            }
-          } catch (error) {
-            console.error("Error fetching kontak darurat:", error);
-            toast.error(error instanceof Error ? error.message : "Gagal memuat data");
-            return null;
-          }
-        },
-    
-        async update() {
-            const cek = templateForm.safeParse(kontakDarurat.edit.form);
-            if (!cek.success) {
-                const err = `[${cek.error.issues
-                    .map((v) => `${v.path.join(".")}`)
-                    .join("\n")}] required`;
-                return toast.error(err);
-            }
-    
-            try {
-                kontakDarurat.edit.loading = true;
-                const response = await fetch(`/api/kesehatan/kontakdarurat/${this.id}`, {
-                    method: "PUT",
-                    headers: {
-                        "Content-Type": "application/json",
-                    },
-                    body: JSON.stringify({
-                        name: this.form.name,
-                        deskripsi: this.form.deskripsi,
-                        imageId: this.form.imageId,
-                    }),
-                });
-                if (!response.ok) {
-                    const errorData = await response.json().catch(() => ({}));
-                    throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
-                }
-                const result = await response.json();
-                if (result.success) {
-                    toast.success(result.message || "Kontak darurat berhasil diupdate");
-                    await kontakDarurat.findMany.load();  
-                    return true;
-                } else {
-                    throw new Error(result.message || "Gagal update kontak darurat");
-                }
-            } catch (error) {
-                console.error("Gagal update:", error);
-                toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate kontak darurat");
-                return false;
-            } finally {
-                kontakDarurat.edit.loading = false;
-            }
-        },
-        reset() {
-            kontakDarurat.edit.id = "";
-            kontakDarurat.edit.form = { ...defaultForm };
-        },
-      },
+  name: z.string().min(3, "Judul minimal 3 karakter"),
+  deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
+  imageId: z.string().nonempty(),
 });
 
-export default kontakDarurat
+const defaultForm = {
+  name: "",
+  deskripsi: "",
+  imageId: "",
+};
+
+const kontakDarurat = proxy({
+  findMany: {
+    data: null as
+      | Prisma.KontakDaruratGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kontakDarurat.findMany.loading = true; // ✅ Akses langsung via nama path
+      kontakDarurat.findMany.page = page;
+      kontakDarurat.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.kontakdarurat[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          kontakDarurat.findMany.data = res.data.data ?? [];
+          kontakDarurat.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kontakDarurat.findMany.data = [];
+          kontakDarurat.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kontak darurat paginated:", err);
+        kontakDarurat.findMany.data = [];
+        kontakDarurat.findMany.totalPages = 1;
+      } finally {
+        kontakDarurat.findMany.loading = false;
+      }
+    },
+  },
+  create: {
+    form: { ...defaultForm },
+    loading: false,
+    async create() {
+      const cek = templateForm.safeParse(kontakDarurat.create.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDarurat.create.loading = true;
+        const res = await ApiFetch.api.kesehatan.kontakdarurat["create"].post(
+          kontakDarurat.create.form
+        );
+        if (res.status === 200) {
+          kontakDarurat.findMany.load();
+          return toast.success("Kontak Darurat berhasil disimpan!");
+        }
+
+        return toast.error("Gagal menyimpan kontak darurat");
+      } catch (error) {
+        console.log((error as Error).message);
+      } finally {
+        kontakDarurat.create.loading = false;
+      }
+    },
+    resetForm() {
+      kontakDarurat.create.form = { ...defaultForm };
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KontakDaruratGetPayload<{
+      include: {
+        image: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/kesehatan/kontakdarurat/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kontakDarurat.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kontakDarurat.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        kontakDarurat.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      try {
+        kontakDarurat.delete.loading = true;
+        const response = await fetch(`/api/kesehatan/kontakdarurat/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Kontak darurat berhasil dihapus");
+          await kontakDarurat.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kontak darurat");
+      } finally {
+        kontakDarurat.delete.loading = false;
+      }
+    },
+  },
+  edit: {
+    id: "",
+    form: { ...defaultForm },
+    loading: false,
+
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(`/api/kesehatan/kontakdarurat/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            deskripsi: data.deskripsi,
+            imageId: data.imageId,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error fetching kontak darurat:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+
+    async update() {
+      const cek = templateForm.safeParse(kontakDarurat.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        kontakDarurat.edit.loading = true;
+        const response = await fetch(
+          `/api/kesehatan/kontakdarurat/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(result.message || "Kontak darurat berhasil diupdate");
+          await kontakDarurat.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update kontak darurat");
+        }
+      } catch (error) {
+        console.error("Gagal update:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat mengupdate kontak darurat"
+        );
+        return false;
+      } finally {
+        kontakDarurat.edit.loading = false;
+      }
+    },
+    reset() {
+      kontakDarurat.edit.id = "";
+      kontakDarurat.edit.form = { ...defaultForm };
+    },
+  },
+});
+
+export default kontakDarurat;

src/app/admin/(dashboard)/_state/kesehatan/penanganan-darurat/penangananDarurat.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -17,21 +18,45 @@ const defaultForm = {
 }
 
 const penangananDarurat = proxy({
-    findMany: {
-        data: [] as Prisma.PenangananDaruratGetPayload<{
-            include: {
-                image: true;
-            };
-        }>[],
-        async load() {
-            const res = await ApiFetch.api.kesehatan.penanganandarurat[
-                "find-many"
-            ].get();
-            if (res.status === 200) {
-                penangananDarurat.findMany.data = res.data?.data ?? [];
-            }
-        },
+  findMany: {
+    data: null as
+      | Prisma.PenangananDaruratGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      penangananDarurat.findMany.loading = true; // ✅ Akses langsung via nama path
+      penangananDarurat.findMany.page = page;
+      penangananDarurat.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.penanganandarurat["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+         penangananDarurat.findMany.data = res.data.data ?? [];
+          penangananDarurat.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          penangananDarurat.findMany.data = [];
+          penangananDarurat.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        penangananDarurat.findMany.data = [];
+        penangananDarurat.findMany.totalPages = 1;
+      } finally {
+        penangananDarurat.findMany.loading = false;
+      }
     },
+  },
     create:{
         form: {...defaultForm},
         loading: false,

src/app/admin/(dashboard)/_state/kesehatan/posyandu/posyandu.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -9,6 +10,7 @@ const templateForm = z.object({
   nomor: z.string().min(1, { message: "Nomor is required" }),
   deskripsi: z.string().min(1, { message: "Deskripsi is required" }),
   imageId: z.string().nonempty(),
+  jadwalPelayanan: z.string().min(1, { message: "Jadwal Pelayanan is required" }),
 });
 
 const defaultForm = {
@@ -16,6 +18,7 @@ const defaultForm = {
   nomor: "",
   deskripsi: "",
   imageId: "",
+  jadwalPelayanan: "",
 };
 
 const posyandustate = proxy({
@@ -50,19 +53,43 @@ const posyandustate = proxy({
     }
   },
   findMany: {
-    data: null as 
-    | Prisma.PosyanduGetPayload<{
-        include: {
+    data: null as
+      | Prisma.PosyanduGetPayload<{
+          include: {
             image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      posyandustate.findMany.loading = true; // ✅ Akses langsung via nama path
+      posyandustate.findMany.page = page;
+      posyandustate.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.posyandu["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          posyandustate.findMany.data = res.data.data ?? [];
+          posyandustate.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          posyandustate.findMany.data = [];
+          posyandustate.findMany.totalPages = 1;
         }
-    }>[]
-    | null,
-    async load() {
-        const res = await ApiFetch.api.kesehatan.posyandu["find-many"].get();
-        if (res.status === 200) {
-            posyandustate.findMany.data = res.data?.data ?? [];
-        }
-    }
+      } catch (err) {
+        console.error("Gagal fetch posyandu paginated:", err);
+        posyandustate.findMany.data = [];
+        posyandustate.findMany.totalPages = 1;
+      } finally {
+        posyandustate.findMany.loading = false;
+      }
+    },
   },
   findUnique: {
     data: null as 
@@ -148,6 +175,7 @@ const posyandustate = proxy({
                     nomor: data.nomor,
                     deskripsi: data.deskripsi,
                     imageId: data.imageId || "",
+                    jadwalPelayanan: data.jadwalPelayanan || "",
                 };
                 return data;
             } else {
@@ -181,6 +209,7 @@ const posyandustate = proxy({
                     nomor: this.form.nomor,
                     deskripsi: this.form.deskripsi,
                     imageId: this.form.imageId,
+                    jadwalPelayanan: this.form.jadwalPelayanan,
                 }),
             });
             

src/app/admin/(dashboard)/_state/kesehatan/program-kesehatan/programKesehatan.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -20,17 +21,43 @@ const defaultForm = {
 
 const programKesehatan = proxy({
   findMany: {
-    data: [] as Prisma.ProgramKesehatanGetPayload<{
-      include: {
-        image: true;
-      };
-    }>[],
-    async load() {
-      const res = await ApiFetch.api.kesehatan.programkesehatan[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        programKesehatan.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.ProgramKesehatanGetPayload<{
+          include: {
+            image: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      programKesehatan.findMany.loading = true; // ✅ Akses langsung via nama path
+      programKesehatan.findMany.page = page;
+      programKesehatan.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.kesehatan.programkesehatan[
+          "find-many"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          programKesehatan.findMany.data = res.data.data ?? [];
+          programKesehatan.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          programKesehatan.findMany.data = [];
+          programKesehatan.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        programKesehatan.findMany.data = [];
+        programKesehatan.findMany.totalPages = 1;
+      } finally {
+        programKesehatan.findMany.loading = false;
       }
     },
   },
@@ -97,12 +124,15 @@ const programKesehatan = proxy({
       try {
         programKesehatan.delete.loading = true;
 
-        const response = await fetch(`/api/kesehatan/programkesehatan/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/kesehatan/programkesehatan/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         const result = await response.json();
         if (response.ok && result?.success) {
@@ -156,57 +186,70 @@ const programKesehatan = proxy({
         }
       } catch (error) {
         console.error("Error fetching program kesehatan:", error);
-        toast.error(error instanceof Error ? error.message : "Gagal memuat data");
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
         return null;
       }
     },
 
     async update() {
-        const cek = templateForm.safeParse(programKesehatan.edit.form);
-        if (!cek.success) {
-            const err = `[${cek.error.issues
-                .map((v) => `${v.path.join(".")}`)
-                .join("\n")}] required`;
-            return toast.error(err);
-        }
+      const cek = templateForm.safeParse(programKesehatan.edit.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
 
-        try {
-            programKesehatan.edit.loading = true;
-            const response = await fetch(`/api/kesehatan/programkesehatan/${this.id}`, {
-                method: "PUT",
-                headers: {
-                    "Content-Type": "application/json",
-                },
-                body: JSON.stringify({
-                    name: this.form.name,
-                    deskripsiSingkat: this.form.deskripsiSingkat,
-                    deskripsi: this.form.deskripsi,
-                    imageId: this.form.imageId,
-                }),
-            });
-            if (!response.ok) {
-                const errorData = await response.json().catch(() => ({}));
-                throw new Error(errorData.message || `HTTP error! status: ${response.status}`);
-            }
-            const result = await response.json();
-            if (result.success) {
-                toast.success(result.message || "Program kesehatan berhasil diupdate");
-                await programKesehatan.findMany.load();  
-                return true;
-            } else {
-                throw new Error(result.message || "Gagal update program kesehatan");
-            }
-        } catch (error) {
-            console.error("Gagal update:", error);
-            toast.error(error instanceof Error ? error.message : "Terjadi kesalahan saat mengupdate program kesehatan");
-            return false;
-        } finally {
-            programKesehatan.edit.loading = false;
+      try {
+        programKesehatan.edit.loading = true;
+        const response = await fetch(
+          `/api/kesehatan/programkesehatan/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              name: this.form.name,
+              deskripsiSingkat: this.form.deskripsiSingkat,
+              deskripsi: this.form.deskripsi,
+              imageId: this.form.imageId,
+            }),
+          }
+        );
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
         }
+        const result = await response.json();
+        if (result.success) {
+          toast.success(
+            result.message || "Program kesehatan berhasil diupdate"
+          );
+          await programKesehatan.findMany.load();
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update program kesehatan");
+        }
+      } catch (error) {
+        console.error("Gagal update:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat mengupdate program kesehatan"
+        );
+        return false;
+      } finally {
+        programKesehatan.edit.loading = false;
+      }
     },
     reset() {
-        programKesehatan.edit.id = "";
-        programKesehatan.edit.form = { ...defaultForm };
+      programKesehatan.edit.id = "";
+      programKesehatan.edit.form = { ...defaultForm };
     },
   },
 });

src/app/admin/(dashboard)/_state/kesehatan/puskesmas/puskesmas.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -163,13 +164,43 @@ const puskesmasState = proxy({
   },
 
   findMany: {
-    data: null as Prisma.PuskesmasGetPayload<{
-      include: { image: true; jam: true; kontak: true };
-    }>[] | null,
-    async load() {
-      const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get();
-      if (res.status === 200) {
-        puskesmasState.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.PuskesmasGetPayload<{
+          include: {
+            image: true;
+            jam: true;
+            kontak: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      puskesmasState.findMany.loading = true; // ✅ Akses langsung via nama path
+      puskesmasState.findMany.page = page;
+      puskesmasState.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.kesehatan.puskesmas["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          puskesmasState.findMany.data = res.data.data ?? [];
+          puskesmasState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          puskesmasState.findMany.data = [];
+          puskesmasState.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch berita paginated:", err);
+        puskesmasState.findMany.data = [];
+        puskesmasState.findMany.totalPages = 1;
+      } finally {
+        puskesmasState.findMany.loading = false;
       }
     },
   },

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -50,18 +51,50 @@ const apbdes = proxy({
     },
   },
   findMany: {
-    data: null as Array<
-      Prisma.APBDesGetPayload<{
-        include: {
-          image: true;
-          file: true;
-        };
-      }>
-    > | null,
-    async load() {
-      const res = await ApiFetch.api.landingpage.apbdes["find-many"].get();
-      if (res.status === 200) {
-        apbdes.findMany.data = res.data?.data ?? [];
+    data: null as
+      | Prisma.APBDesGetPayload<{
+          include: {
+            image: true;
+            file: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
+      apbdes.findMany.loading = true;  // Use the full path to access the property
+      apbdes.findMany.page = page;
+      apbdes.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        
+        const res = await ApiFetch.api.landingpage.apbdes[
+          "findMany"
+        ].get({
+          query
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          apbdes.findMany.data = res.data.data || [];
+          apbdes.findMany.total = res.data.total || 0;
+          apbdes.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load pegawai:", res.data?.message);
+          apbdes.findMany.data = [];
+          apbdes.findMany.total = 0;
+          apbdes.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pegawai:", error);
+        apbdes.findMany.data = [];
+        apbdes.findMany.total = 0;
+        apbdes.findMany.totalPages = 1;
+      } finally {
+        apbdes.findMany.loading = false;
       }
     },
   },

src/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi.ts

@@ -60,16 +60,22 @@ const desaAntikorupsi = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      desaAntikorupsi.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      desaAntikorupsi.findMany.loading = true; // Use the full path to access the property
       desaAntikorupsi.findMany.page = page;
+      desaAntikorupsi.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
         const res = await ApiFetch.api.landingpage.desaantikorupsi[
           "findMany"
         ].get({
-          query: { page, limit },
+          query,
         });
-  
+
         if (res.status === 200 && res.data?.success) {
           desaAntikorupsi.findMany.data = res.data.data || [];
           desaAntikorupsi.findMany.total = res.data.total || 0;
@@ -305,20 +311,25 @@ const kategoriDesaAntiKorupsi = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      kategoriDesaAntiKorupsi.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      kategoriDesaAntiKorupsi.findMany.loading = true; // Use the full path to access the property
       kategoriDesaAntiKorupsi.findMany.page = page;
+      kategoriDesaAntiKorupsi.findMany.search = search;
       try {
-        const res = await ApiFetch.api.landingpage.kategoridak[
-          "findMany"
-        ].get({
-          query: { page, limit },
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.landingpage.kategoridak["findMany"].get({
+          query,
         });
-  
+
         if (res.status === 200 && res.data?.success) {
           kategoriDesaAntiKorupsi.findMany.data = res.data.data || [];
           kategoriDesaAntiKorupsi.findMany.total = res.data.total || 0;
-          kategoriDesaAntiKorupsi.findMany.totalPages = res.data.totalPages || 1;
+          kategoriDesaAntiKorupsi.findMany.totalPages =
+            res.data.totalPages || 1;
         } else {
           console.error("Failed to load media sosial:", res.data?.message);
           kategoriDesaAntiKorupsi.findMany.data = [];
@@ -363,27 +374,30 @@ const kategoriDesaAntiKorupsi = proxy({
       try {
         kategoriDesaAntiKorupsi.delete.loading = true;
 
-        const response = await fetch(
-          `/api/landingpage/kategoridak/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/landingpage/kategoridak/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(result.message || "Kategori desa anti korupsi berhasil dihapus");
+          toast.success(
+            result.message || "Kategori desa anti korupsi berhasil dihapus"
+          );
           await kategoriDesaAntiKorupsi.findMany.load(); // refresh list
         } else {
-          toast.error(result?.message || "Gagal menghapus kategori desa anti korupsi");
+          toast.error(
+            result?.message || "Gagal menghapus kategori desa anti korupsi"
+          );
         }
       } catch (error) {
         console.error("Gagal delete:", error);
-        toast.error("Terjadi kesalahan saat menghapus kategori desa anti korupsi");
+        toast.error(
+          "Terjadi kesalahan saat menghapus kategori desa anti korupsi"
+        );
       } finally {
         kategoriDesaAntiKorupsi.delete.loading = false;
       }

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

@@ -0,0 +1,834 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { toast } from "react-toastify";
+import { proxy } from "valtio";
+import { z } from "zod";
+
+// Template form responden
+
+const templateResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+  tanggal: z.string().min(1, "Tanggal harus diisi"),
+  jenisKelaminId: z.string().min(1, "Jenis kelamin harus diisi"),
+  ratingId: z.string().min(1, "Rating harus diisi"),
+  kelompokUmurId: z.string().min(1, "Kelompok umur harus diisi"),
+});
+
+const defaultFormResponden = {
+  name: "",
+  tanggal: "",
+  jenisKelaminId: "",
+  ratingId: "",
+  kelompokUmurId: "",
+};
+
+const responden = proxy({
+  create: {
+    form: { ...defaultFormResponden },
+    loading: false,
+    async create() {
+      const cek = templateResponden.safeParse(responden.create.form);
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+
+      try {
+        responden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.responden["create"].post(
+          responden.create.form
+        );
+        if (res.status === 200) {
+          toast.success("Responden berhasil ditambahkan");
+          await responden.findMany.load();
+        } else {
+          toast.error(res.data?.message ?? "Gagal tambah responden");
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error("Terjadi kesalahan saat menambahkan responden");
+      } finally {
+        responden.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      responden.findMany.loading = true; // Use the full path to access the property
+      responden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.responden["findMany"].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          responden.findMany.data = res.data.data || [];
+          responden.findMany.total = res.data.total || 0;
+          responden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load responden:", res.data?.message);
+          responden.findMany.data = [];
+          responden.findMany.total = 0;
+          responden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        responden.findMany.data = [];
+        responden.findMany.total = 0;
+        responden.findMany.totalPages = 1;
+      } finally {
+        responden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.RespondenGetPayload<{
+      include: {
+        jenisKelamin: true;
+        rating: true;
+        kelompokUmur: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/responden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          responden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          responden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        responden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormResponden },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        responden.update.loading = true;
+
+        const response = await fetch(`/api/landingpage/responden/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        if (result?.success) {
+          const data = result.data;
+          this.id = data.id;
+          this.form = {
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          };
+          return data;
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading responden:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      } finally {
+        responden.update.loading = false;
+      }
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateResponden.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/landingpage/responden/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            tanggal: this.form.tanggal,
+            jenisKelaminId: this.form.jenisKelaminId,
+            ratingId: this.form.ratingId,
+            kelompokUmurId: this.form.kelompokUmurId,
+          }),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await responden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        responden.delete.loading = true;
+
+        const response = await fetch(`/api/landingpage/responden/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "responden berhasil dihapus");
+          await responden.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus responden");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus responden");
+      } finally {
+        responden.delete.loading = false;
+      }
+    },
+  },
+});
+
+// Template form jenis kelamin responden
+const templateJenisKelaminResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormJenisKelaminResponden = {
+  name: "",
+};
+
+const jenisKelaminResponden = proxy({
+  create: {
+    form: { ...defaultFormJenisKelaminResponden },
+    loading: false,
+    async create() {
+      const cek = templateJenisKelaminResponden.safeParse(
+        jenisKelaminResponden.create.form
+      );
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+      jenisKelaminResponden.create.loading = true;
+      try {
+        jenisKelaminResponden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.jeniskelaminresponden[
+          "create"
+        ].post(jenisKelaminResponden.create.form);
+        if (res.status === 200) {
+          toast.success("Jenis kelamin responden berhasil ditambahkan");
+          await jenisKelaminResponden.findMany.load();
+        } else {
+          toast.error(
+            res.data?.message ?? "Gagal tambah jenis kelamin responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error(
+          "Terjadi kesalahan saat menambahkan jenis kelamin responden"
+        );
+      } finally {
+        jenisKelaminResponden.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      jenisKelaminResponden.findMany.loading = true; // Use the full path to access the property
+      jenisKelaminResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.jeniskelaminresponden[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          jenisKelaminResponden.findMany.data = res.data.data || [];
+          jenisKelaminResponden.findMany.total = res.data.total || 0;
+          jenisKelaminResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load jenis kelamin responden:",
+            res.data?.message
+          );
+          jenisKelaminResponden.findMany.data = [];
+          jenisKelaminResponden.findMany.total = 0;
+          jenisKelaminResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading jenis kelamin responden:", error);
+        jenisKelaminResponden.findMany.data = [];
+        jenisKelaminResponden.findMany.total = 0;
+        jenisKelaminResponden.findMany.totalPages = 1;
+      } finally {
+        jenisKelaminResponden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.JenisKelaminRespondenGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/jeniskelaminresponden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          jenisKelaminResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          jenisKelaminResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading jenis kelamin responden:", error);
+        jenisKelaminResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormJenisKelaminResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateJenisKelaminResponden.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(
+          `/api/landingpage/jeniskelaminresponden/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await jenisKelaminResponden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data jenis kelamin responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        jenisKelaminResponden.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/jeniskelaminresponden/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "jenis kelamin responden berhasil dihapus"
+          );
+          await jenisKelaminResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus jenis kelamin responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus jenis kelamin responden");
+      } finally {
+        jenisKelaminResponden.delete.loading = false;
+      }
+    },
+  },
+});
+
+// Template form pilihan rating responden
+
+const templatePilihanRatingResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormPilihanRatingResponden = {
+  name: "",
+};
+
+const pilihanRatingResponden = proxy({
+  create: {
+    form: { ...defaultFormPilihanRatingResponden },
+    loading: false,
+    async create() {
+      const cek = templatePilihanRatingResponden.safeParse(
+        pilihanRatingResponden.create.form
+      );
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+      pilihanRatingResponden.create.loading = true;
+      try {
+        pilihanRatingResponden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.pilihanratingresponden[
+          "create"
+        ].post(pilihanRatingResponden.create.form);
+        if (res.status === 200) {
+          toast.success("Jenis kelamin responden berhasil ditambahkan");
+          await pilihanRatingResponden.findMany.load();
+        } else {
+          toast.error(
+            res.data?.message ?? "Gagal tambah jenis kelamin responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error(
+          "Terjadi kesalahan saat menambahkan jenis kelamin responden"
+        );
+      } finally {
+        pilihanRatingResponden.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      pilihanRatingResponden.findMany.loading = true; // Use the full path to access the property
+      pilihanRatingResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.pilihanratingresponden[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pilihanRatingResponden.findMany.data = res.data.data || [];
+          pilihanRatingResponden.findMany.total = res.data.total || 0;
+          pilihanRatingResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load pilihan rating responden:",
+            res.data?.message
+          );
+          pilihanRatingResponden.findMany.data = [];
+          pilihanRatingResponden.findMany.total = 0;
+          pilihanRatingResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pilihan rating responden:", error);
+        pilihanRatingResponden.findMany.data = [];
+        pilihanRatingResponden.findMany.total = 0;
+        pilihanRatingResponden.findMany.totalPages = 1;
+      } finally {
+        pilihanRatingResponden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.PilihanRatingRespondenGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/pilihanratingresponden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          pilihanRatingResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          pilihanRatingResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading pilihan rating responden:", error);
+        pilihanRatingResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormPilihanRatingResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templatePilihanRatingResponden.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(
+          `/api/landingpage/pilihanratingresponden/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await pilihanRatingResponden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data pilihan rating responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        pilihanRatingResponden.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/pilihanratingresponden/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "pilihan rating responden berhasil dihapus"
+          );
+          await pilihanRatingResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus pilihan rating responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus pilihan rating responden");
+      } finally {
+        pilihanRatingResponden.delete.loading = false;
+      }
+    },
+  },
+});
+
+// Template form kelompok umur responden
+
+const templateKelompokUmurResponden = z.object({
+  name: z.string().min(1, "Nama harus diisi"),
+});
+
+const defaultFormKelompokUmurResponden = {
+  name: "",
+};
+
+const kelompokUmurResponden = proxy({
+  create: {
+    form: { ...defaultFormKelompokUmurResponden },
+    loading: false,
+    async create() {
+      const cek = templateKelompokUmurResponden.safeParse(
+        kelompokUmurResponden.create.form
+      );
+      if (!cek.success) {
+        const err = cek.error.issues.map((i) => i.message).join("\n");
+        toast.error(err);
+        return;
+      }
+      kelompokUmurResponden.create.loading = true;
+      try {
+        kelompokUmurResponden.create.loading = true;
+        const res = await ApiFetch.api.landingpage.umurresponden["create"].post(
+          kelompokUmurResponden.create.form
+        );
+        if (res.status === 200) {
+          toast.success("Kelompok umur responden berhasil ditambahkan");
+          await kelompokUmurResponden.findMany.load();
+        } else {
+          toast.error(
+            res.data?.message ?? "Gagal tambah kelompok umur responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal create:", error);
+        toast.error(
+          "Terjadi kesalahan saat menambahkan kelompok umur responden"
+        );
+      } finally {
+        kelompokUmurResponden.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: null as any[] | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      kelompokUmurResponden.findMany.loading = true; // Use the full path to access the property
+      kelompokUmurResponden.findMany.page = page;
+      try {
+        const res = await ApiFetch.api.landingpage.umurresponden[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kelompokUmurResponden.findMany.data = res.data.data || [];
+          kelompokUmurResponden.findMany.total = res.data.total || 0;
+          kelompokUmurResponden.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load kelompok umur responden:",
+            res.data?.message
+          );
+          kelompokUmurResponden.findMany.data = [];
+          kelompokUmurResponden.findMany.total = 0;
+          kelompokUmurResponden.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading kelompok umur responden:", error);
+        kelompokUmurResponden.findMany.data = [];
+        kelompokUmurResponden.findMany.total = 0;
+        kelompokUmurResponden.findMany.totalPages = 1;
+      } finally {
+        kelompokUmurResponden.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.UmurRespondenGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    async load(id: string) {
+      try {
+        const res = await fetch(`/api/landingpage/umurresponden/${id}`);
+        if (res.ok) {
+          const data = await res.json();
+          kelompokUmurResponden.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          kelompokUmurResponden.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error loading kelompok umur responden:", error);
+        kelompokUmurResponden.findUnique.data = null;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultFormKelompokUmurResponden },
+    loading: false,
+    async byId() {
+      // Method implementation if needed
+    },
+    async submit() {
+      const id = this.id;
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+      const cek = templateKelompokUmurResponden.safeParse(this.form);
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return null;
+      }
+      this.loading = true;
+      try {
+        const response = await fetch(`/api/landingpage/umurresponden/${id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(this.form),
+        });
+        const result = await response.json();
+        if (!response.ok || !result?.success) {
+          throw new Error(result?.message || "Gagal update data");
+        }
+        toast.success("Berhasil update data!");
+        await kelompokUmurResponden.findMany.load();
+        return result.data;
+      } catch (error) {
+        console.error("Error update data:", error);
+        toast.error("Gagal update data kelompok umur responden");
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async byId(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        kelompokUmurResponden.delete.loading = true;
+
+        const response = await fetch(
+          `/api/landingpage/umurresponden/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(
+            result.message || "kelompok umur responden berhasil dihapus"
+          );
+          await kelompokUmurResponden.findMany.load(); // refresh list
+        } else {
+          toast.error(
+            result?.message || "Gagal menghapus kelompok umur responden"
+          );
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus kelompok umur responden");
+      } finally {
+        kelompokUmurResponden.delete.loading = false;
+      }
+    },
+  },
+});
+
+const indeksKepuasanState = proxy({
+    responden,
+    kelompokUmurResponden,
+    jenisKelaminResponden,
+    pilihanRatingResponden
+})
+
+export default indeksKepuasanState

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -58,16 +59,43 @@ const prestasiDesa = proxy({
       Prisma.PrestasiDesaGetPayload<{
         include: {
           image: true;
-          kategori: true;
+          kategori: {
+            select: {
+              id: true;
+              name: true;
+            };
+          };
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.landingpage.prestasidesa[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        prestasiDesa.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      prestasiDesa.findMany.loading = true; // ✅ Akses langsung via nama path
+      prestasiDesa.findMany.page = page;
+      prestasiDesa.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.landingpage.prestasidesa["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          prestasiDesa.findMany.data = res.data.data ?? [];
+          prestasiDesa.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          prestasiDesa.findMany.data = [];
+          prestasiDesa.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch prestasi desa paginated:", err);
+        prestasiDesa.findMany.data = [];
+        prestasiDesa.findMany.totalPages = 1;
+      } finally {
+        prestasiDesa.findMany.loading = false;
       }
     },
   },
@@ -283,12 +311,34 @@ const kategoriPrestasi = proxy({
       id: string;
       name: string;
     }> | null,
-    async load() {
-      const res = await ApiFetch.api.landingpage.kategoriprestasi[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        kategoriPrestasi.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      kategoriPrestasi.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriPrestasi.findMany.page = page;
+      kategoriPrestasi.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.landingpage.kategoriprestasi["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          kategoriPrestasi.findMany.data = res.data.data ?? [];
+          kategoriPrestasi.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kategoriPrestasi.findMany.data = [];
+          kategoriPrestasi.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kategori prestasi paginated:", err);
+        kategoriPrestasi.findMany.data = [];
+        kategoriPrestasi.findMany.totalPages = 1;
+      } finally {
+        kategoriPrestasi.findMany.loading = false;
       }
     },
   },

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

@@ -65,14 +65,19 @@ const programInovasi = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
       programInovasi.findMany.loading = true;  // Use the full path to access the property
       programInovasi.findMany.page = page;
+      programInovasi.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        
         const res = await ApiFetch.api.landingpage.programinovasi[
           "findMany"
         ].get({
-          query: { page, limit },
+          query
         });
   
         if (res.status === 200 && res.data?.success) {
@@ -482,14 +487,19 @@ const mediaSosial = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
       mediaSosial.findMany.loading = true;  // Use the full path to access the property
       mediaSosial.findMany.page = page;
-      try {
+      mediaSosial.findMany.search = search;
+      try { 
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        
         const res = await ApiFetch.api.landingpage.mediasosial[
           "findMany"
         ].get({
-          query: { page, limit },
+          query,
         });
   
         if (res.status === 200 && res.data?.success) {

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

@@ -58,14 +58,19 @@ const sdgsDesa = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
       sdgsDesa.findMany.loading = true;  // Use the full path to access the property
       sdgsDesa.findMany.page = page;
+      sdgsDesa.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        
         const res = await ApiFetch.api.landingpage.sdgsdesa[
           "findMany"
         ].get({
-          query: { page, limit },
+          query,
         });
   
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa.ts

@@ -56,13 +56,17 @@ const dataLingkunganDesaState = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       dataLingkunganDesaState.findMany.loading = true; // Use the full path to access the property
       dataLingkunganDesaState.findMany.page = page;
+      dataLingkunganDesaState.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.datalingkungandesa["find-many"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/_state/lingkungan/gotong-royong.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -67,10 +68,46 @@ const kegiatanDesa = proxy({
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.lingkungan.kegiatandesa["find-many"].get();
-      if (res.status === 200) {
-        kegiatanDesa.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "", kategori = "") => {
+      // Change to arrow function
+      kegiatanDesa.findMany.loading = true; // Use the full path to access the property
+      kegiatanDesa.findMany.page = page;
+      kegiatanDesa.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (kategori) query.kategori = kategori;
+        const res = await ApiFetch.api.lingkungan.kegiatandesa[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          kegiatanDesa.findMany.data = res.data.data || [];
+          kegiatanDesa.findMany.total = res.data.total || 0;
+          kegiatanDesa.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load kegiatan desa:",
+            res.data?.message
+          );
+          kegiatanDesa.findMany.data = [];
+          kegiatanDesa.findMany.total = 0;
+          kegiatanDesa.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading kegiatan desa:", error);
+        kegiatanDesa.findMany.data = [];
+        kegiatanDesa.findMany.total = 0;
+        kegiatanDesa.findMany.totalPages = 1;
+      } finally {
+        kegiatanDesa.findMany.loading = false;
       }
     },
   },
@@ -244,6 +281,35 @@ const kegiatanDesa = proxy({
       kegiatanDesa.edit.form = { ...defaultKegiatanDesaForm };
     },
   },
+  findFirst: {
+    data: null as Prisma.KegiatanDesaGetPayload<{
+      include: {
+        image: true;
+        kategoriKegiatan: true;
+      };
+    }> | null,
+    loading: false,
+    // findFirst.load()
+    async load(kategori?: string) {
+      this.loading = true;
+      try {
+        const res = await ApiFetch.api.lingkungan.kegiatandesa["find-first"].get({
+          query: kategori ? { kategori } : {},
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          this.data = res.data.data || null;
+        } else {
+          this.data = null;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kegiatan desa terbaru:", err);
+        this.data = null;
+      } finally {
+        this.loading = false;
+      }
+    },
+  },
 });
 
 // ========================================= KATEGORI kegiatan ========================================= //
@@ -269,9 +335,7 @@ const kategoriKegiatan = proxy({
       }
       try {
         kategoriKegiatan.create.loading = true;
-        const res = await ApiFetch.api.lingkungan.kategorikegiatan[
-          "create"
-        ].post(kategoriKegiatan.create.form);
+        const res = await ApiFetch.api.lingkungan.kategorikegiatan["create"].post(kategoriKegiatan.create.form);
         if (res.status === 200) {
           kategoriKegiatan.findMany.load();
           return toast.success("Data berhasil ditambahkan");
@@ -305,9 +369,7 @@ const kategoriKegiatan = proxy({
     }> | null,
     async load(id: string) {
       try {
-        const res = await fetch(
-          `/api/lingkungan/kategorikegiatan/${id}`
-        );
+        const res = await fetch(`/api/lingkungan/kategorikegiatan/${id}`);
         if (res.ok) {
           const data = await res.json();
           kategoriKegiatan.findUnique.data = data.data ?? null;
@@ -367,15 +429,12 @@ const kategoriKegiatan = proxy({
       }
 
       try {
-        const response = await fetch(
-          `/api/lingkungan/kategorikegiatan/${id}`,
-          {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/lingkungan/kategorikegiatan/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }

src/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah.ts

@@ -52,15 +52,19 @@ const pengelolaanSampah = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       pengelolaanSampah.findMany.loading = true; // Use the full path to access the property
       pengelolaanSampah.findMany.page = page;
+      pengelolaanSampah.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.pengelolaansampah[
           "find-many"
         ].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/_state/lingkungan/program-penghijauan.ts

@@ -56,13 +56,17 @@ const programPenghijauanState = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       programPenghijauanState.findMany.loading = true; // Use the full path to access the property
       programPenghijauanState.findMany.page = page;
+      programPenghijauanState.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.programpenghijauan["find-many"].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {

src/app/admin/(dashboard)/_state/pendidikan/info-sekolah-paud.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -51,13 +52,46 @@ const jenjangPendidikan = proxy({
       id: string;
       nama: string;
     }> | null,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
-          "find-many"
-        ].get();
-      if (res.status === 200) {
-        jenjangPendidikan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      jenjangPendidikan.findMany.loading = true; // Use the full path to access the property
+      jenjangPendidikan.findMany.page = page;
+      jenjangPendidikan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res =
+          await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
+            "find-many"
+          ].get({
+            query,
+          });
+
+        if (res.status === 200 && res.data?.success) {
+          jenjangPendidikan.findMany.data = res.data.data || [];
+          jenjangPendidikan.findMany.total = res.data.total || 0;
+          jenjangPendidikan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load jenjang pendidikan:",
+            res.data?.message
+          );
+          jenjangPendidikan.findMany.data = [];
+          jenjangPendidikan.findMany.total = 0;
+          jenjangPendidikan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading jenjang pendidikan:", error);
+        jenjangPendidikan.findMany.data = [];
+        jenjangPendidikan.findMany.total = 0;
+        jenjangPendidikan.findMany.totalPages = 1;
+      } finally {
+        jenjangPendidikan.findMany.loading = false;
       }
     },
   },
@@ -304,13 +338,46 @@ const lembagaPendidikan = proxy({
         };
       }>
     > | null,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
-          "find-many"
-        ].get();
-      if (res.status === 200) {
-        lembagaPendidikan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      lembagaPendidikan.findMany.loading = true; // Use the full path to access the property
+      lembagaPendidikan.findMany.page = page;
+      lembagaPendidikan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res =
+          await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
+            "find-many"
+          ].get({
+            query,
+          });
+
+        if (res.status === 200 && res.data?.success) {
+          lembagaPendidikan.findMany.data = res.data.data || [];
+          lembagaPendidikan.findMany.total = res.data.total || 0;
+          lembagaPendidikan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load lembaga pendidikan:",
+            res.data?.message
+          );
+          lembagaPendidikan.findMany.data = [];
+          lembagaPendidikan.findMany.total = 0;
+          lembagaPendidikan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading lembaga pendidikan:", error);
+        lembagaPendidikan.findMany.data = [];
+        lembagaPendidikan.findMany.total = 0;
+        lembagaPendidikan.findMany.totalPages = 1;
+      } finally {
+        lembagaPendidikan.findMany.loading = false;
       }
     },
   },
@@ -558,12 +625,45 @@ const siswa = proxy({
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        siswa.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      siswa.findMany.loading = true; // Use the full path to access the property
+      siswa.findMany.page = page;
+      siswa.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          siswa.findMany.data = res.data.data || [];
+          siswa.findMany.total = res.data.total || 0;
+          siswa.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load siswa:",
+            res.data?.message
+          );
+          siswa.findMany.data = [];
+          siswa.findMany.total = 0;
+          siswa.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        siswa.findMany.data = [];
+        siswa.findMany.total = 0;
+        siswa.findMany.totalPages = 1;
+      } finally {
+        siswa.findMany.loading = false;
       }
     },
   },
@@ -798,12 +898,45 @@ const pengajar = proxy({
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        pengajar.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      pengajar.findMany.loading = true; // Use the full path to access the property
+      pengajar.findMany.page = page;
+      pengajar.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pengajar.findMany.data = res.data.data || [];
+          pengajar.findMany.total = res.data.total || 0;
+          pengajar.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load pengajar:",
+            res.data?.message
+          );
+          pengajar.findMany.data = [];
+          pengajar.findMany.total = 0;
+          pengajar.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pengajar:", error);
+        pengajar.findMany.data = [];
+        pengajar.findMany.total = 0;
+        pengajar.findMany.totalPages = 1;
+      } finally {
+        pengajar.findMany.loading = false;
       }
     },
   },
@@ -815,7 +948,9 @@ const pengajar = proxy({
     }> | null,
     async load(id: string) {
       try {
-        const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
+        const res = await fetch(
+          `/api/pendidikan/infosekolahpaud/pengajar/${id}`
+        );
         if (res.ok) {
           const data = await res.json();
           pengajar.findUnique.data = data.data ?? null;
@@ -948,7 +1083,8 @@ const pengajar = proxy({
               result
             );
             throw new Error(
-              result?.message || `Gagal mengupdate pengajar (${response.status})`
+              result?.message ||
+                `Gagal mengupdate pengajar (${response.status})`
             );
           }
 

src/app/admin/(dashboard)/_state/ppid/daftar_informasi_publik/daftarInformasiPublik.ts

@@ -49,35 +49,38 @@ const daftarInformasiPublik = proxy({
     },
   },
   findMany: {
-    data: null as any[] | null,
+    data: null as
+      | Prisma.DaftarInformasiPublikGetPayload<{
+          omit: {
+            isActive: true;
+          };
+        }>[]
+      | null,
     page: 1,
     totalPages: 1,
-    total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      daftarInformasiPublik.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      daftarInformasiPublik.findMany.loading = true; // ✅ Akses langsung via nama path
       daftarInformasiPublik.findMany.page = page;
-      try {
-        const res = await ApiFetch.api.ppid.daftarinformasipublik[
-          "find-many"
-        ].get({
-          query: { page, limit },
-        });
+      daftarInformasiPublik.findMany.search = search;
   
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.ppid.daftarinformasipublik["find-many"].get({ query });
+    
         if (res.status === 200 && res.data?.success) {
-          daftarInformasiPublik.findMany.data = res.data.data || [];
-          daftarInformasiPublik.findMany.total = res.data.total || 0;
-          daftarInformasiPublik.findMany.totalPages = res.data.totalPages || 1;
+          daftarInformasiPublik.findMany.data = res.data.data ?? [];
+          daftarInformasiPublik.findMany.totalPages = res.data.totalPages ?? 1;
         } else {
-          console.error("Failed to load daftar informasi publik:", res.data?.message);
           daftarInformasiPublik.findMany.data = [];
-          daftarInformasiPublik.findMany.total = 0;
           daftarInformasiPublik.findMany.totalPages = 1;
         }
-      } catch (error) {
-        console.error("Error loading daftar informasi publik:", error);
+      } catch (err) {
+        console.error("Gagal fetch daftar informasi publik paginated:", err);
         daftarInformasiPublik.findMany.data = [];
-        daftarInformasiPublik.findMany.total = 0;
         daftarInformasiPublik.findMany.totalPages = 1;
       } finally {
         daftarInformasiPublik.findMany.loading = false;

src/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin.ts

@@ -8,7 +8,7 @@ import { z } from "zod";
 const templateGrafikJenisKelamin = z.object({
   laki: z.string().min(1, "Data laki-laki harus diisi"),
   perempuan: z.string().min(1, "Data perempuan harus diisi"),
-}); 
+});
 
 const defaultForm = {
   laki: "",
@@ -17,10 +17,12 @@ const defaultForm = {
 
 const grafikBerdasarkanJenisKelamin = proxy({
   create: {
-    form: {...defaultForm},
+    form: { ...defaultForm },
     loading: false,
-    async create(){
-      const cek = templateGrafikJenisKelamin.safeParse(grafikBerdasarkanJenisKelamin.create.form);
+    async create() {
+      const cek = templateGrafikJenisKelamin.safeParse(
+        grafikBerdasarkanJenisKelamin.create.form
+      );
       if (!cek.success) {
         const err = cek.error.issues.map((i) => i.message).join("\n");
         toast.error(err);
@@ -33,14 +35,20 @@ const grafikBerdasarkanJenisKelamin = proxy({
           "create"
         ].post(grafikBerdasarkanJenisKelamin.create.form);
         if (res.status === 200) {
-          toast.success("Grafik berdasarkan jenis kelamin berhasil ditambahkan");
+          toast.success(
+            "Grafik berdasarkan jenis kelamin berhasil ditambahkan"
+          );
           await grafikBerdasarkanJenisKelamin.findMany.load();
         } else {
-          toast.error(res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin");
+          toast.error(
+            res.data?.message ?? "Gagal tambah grafik berdasarkan jenis kelamin"
+          );
         }
       } catch (error) {
         console.error("Gagal create:", error);
-        toast.error("Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin");
+        toast.error(
+          "Terjadi kesalahan saat menambahkan grafik berdasarkan jenis kelamin"
+        );
       } finally {
         grafikBerdasarkanJenisKelamin.create.loading = false;
       }
@@ -52,8 +60,9 @@ const grafikBerdasarkanJenisKelamin = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      grafikBerdasarkanJenisKelamin.findMany.loading = true;  // Use the full path to access the property
+    load: async (page = 1, limit = 10) => {
+      // Change to arrow function
+      grafikBerdasarkanJenisKelamin.findMany.loading = true; // Use the full path to access the property
       grafikBerdasarkanJenisKelamin.findMany.page = page;
       try {
         const res = await ApiFetch.api.ppid.grafikberdasarkanjeniskelamin[
@@ -61,13 +70,17 @@ const grafikBerdasarkanJenisKelamin = proxy({
         ].get({
           query: { page, limit },
         });
-  
+
         if (res.status === 200 && res.data?.success) {
           grafikBerdasarkanJenisKelamin.findMany.data = res.data.data || [];
           grafikBerdasarkanJenisKelamin.findMany.total = res.data.total || 0;
-          grafikBerdasarkanJenisKelamin.findMany.totalPages = res.data.totalPages || 1;
+          grafikBerdasarkanJenisKelamin.findMany.totalPages =
+            res.data.totalPages || 1;
         } else {
-          console.error("Failed to load grafik berdasarkan jenis kelamin:", res.data?.message);
+          console.error(
+            "Failed to load grafik berdasarkan jenis kelamin:",
+            res.data?.message
+          );
           grafikBerdasarkanJenisKelamin.findMany.data = [];
           grafikBerdasarkanJenisKelamin.findMany.total = 0;
           grafikBerdasarkanJenisKelamin.findMany.totalPages = 1;
@@ -106,7 +119,7 @@ const grafikBerdasarkanJenisKelamin = proxy({
   },
   update: {
     id: "",
-    form: {...defaultForm},
+    form: { ...defaultForm },
     loading: false,
     async byId() {
       // Method implementation if needed
@@ -119,20 +132,24 @@ const grafikBerdasarkanJenisKelamin = proxy({
       }
       const cek = templateGrafikJenisKelamin.safeParse(this.form);
       if (!cek.success) {
-        const err = `[${cek.error.issues.map((v) => `${v.path.join(".")}`).join("\n")}] required`;
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
         toast.error(err);
         return null;
       }
       this.loading = true;
       try {
         const response = await fetch(
-          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`, {
-          method: "PUT",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: JSON.stringify(this.form),
-        });
+          `/api/ppid/grafikberdasarkanjeniskelamin/${id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(this.form),
+          }
+        );
         const result = await response.json();
         if (!response.ok || !result?.success) {
           throw new Error(result?.message || "Gagal update data");
@@ -156,29 +173,40 @@ const grafikBerdasarkanJenisKelamin = proxy({
       try {
         grafikBerdasarkanJenisKelamin.delete.loading = true;
 
-        const response = await fetch(`/api/ppid/grafikberdasarkanjeniskelamin/del/${id}`, {
-          method: "DELETE",
-          headers: {
-            "Content-Type": "application/json",
-          },
-        });
+        const response = await fetch(
+          `/api/ppid/grafikberdasarkanjeniskelamin/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(result.message || "Grafik berdasarkan jenis kelamin berhasil dihapus");
+          toast.success(
+            result.message ||
+              "Grafik berdasarkan jenis kelamin berhasil dihapus"
+          );
           await grafikBerdasarkanJenisKelamin.findMany.load(); // refresh list
         } else {
-          toast.error(result?.message || "Gagal menghapus grafik berdasarkan jenis kelamin");
+          toast.error(
+            result?.message ||
+              "Gagal menghapus grafik berdasarkan jenis kelamin"
+          );
         }
       } catch (error) {
         console.error("Gagal delete:", error);
-        toast.error("Terjadi kesalahan saat menghapus grafik berdasarkan jenis kelamin");
+        toast.error(
+          "Terjadi kesalahan saat menghapus grafik berdasarkan jenis kelamin"
+        );
       } finally {
         grafikBerdasarkanJenisKelamin.delete.loading = false;
       }
     },
-  }
+  },
 });
 
 export default grafikBerdasarkanJenisKelamin;

src/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID.ts

@@ -348,18 +348,34 @@ const posisiOrganisasi = proxy({
       deskripsi: string | null;
       hierarki: number;
     }>,
-    async load() {
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      posisiOrganisasi.findMany.loading = true; // ✅ Akses langsung via nama path
+      posisiOrganisasi.findMany.page = page;
+      posisiOrganisasi.findMany.search = search;
+  
       try {
-        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi[
-          "find-many"
-        ].get();
-        if (res.status === 200) {
-          // The API now returns the id field, so we can use it directly
-          this.data = res.data?.data ?? [];
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.ppid.strukturppid.posisiorganisasi["find-many"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          posisiOrganisasi.findMany.data = res.data.data ?? [];
+          posisiOrganisasi.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          posisiOrganisasi.findMany.data = [];
+          posisiOrganisasi.findMany.totalPages = 1;
         }
-      } catch (error) {
-        console.error("Find many error:", error);
-        this.data = [];
+      } catch (err) {
+        console.error("Gagal fetch posisi organisasi paginated:", err);
+        posisiOrganisasi.findMany.data = [];
+        posisiOrganisasi.findMany.totalPages = 1;
+      } finally {
+        posisiOrganisasi.findMany.loading = false;
       }
     },
   },
@@ -438,9 +454,9 @@ const pegawai = proxy({
 
       try {
         pegawai.create.loading = true;
-        const res = await ApiFetch.api.ppid.strukturppid.pegawai[
-          "create"
-        ].post(pegawai.create.form);
+        const res = await ApiFetch.api.ppid.strukturppid.pegawai["create"].post(
+          pegawai.create.form
+        );
         if (res.status === 200) {
           toast.success("Pegawai berhasil ditambahkan");
           await pegawai.findMany.load();
@@ -457,42 +473,55 @@ const pegawai = proxy({
   },
 
   // In struktur-organisasi.ts
-findMany: {
-  data: null as any[] | null,
-  page: 1,
-  totalPages: 1,
-  total: 0,
-  loading: false,
-  load: async (page = 1, limit = 10) => {  // Change to arrow function
-    pegawai.findMany.loading = true;  // Use the full path to access the property
-    pegawai.findMany.page = page;
-    try {
-      const res = await ApiFetch.api.ppid.strukturppid.pegawai[
-        "find-many"
-      ].get({
-        query: { page, limit },
-      });
+  findMany: {
+    data: null as
+      | Prisma.PegawaiPPIDGetPayload<{
+          include: {
+            image: true;
+            posisi: true;
+          };
+        }>[]
+      | null,
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      pegawai.findMany.loading = true; // Use the full path to access the property
+      pegawai.findMany.page = page;
+      pegawai.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
 
-      if (res.status === 200 && res.data?.success) {
-        pegawai.findMany.data = res.data.data || [];
-        pegawai.findMany.total = res.data.total || 0;
-        pegawai.findMany.totalPages = res.data.totalPages || 1;
-      } else {
-        console.error("Failed to load pegawai:", res.data?.message);
+        const res = await ApiFetch.api.ppid.strukturppid.pegawai[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pegawai.findMany.data = res.data.data || [];
+          pegawai.findMany.total = res.data.total || 0;
+          pegawai.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load pegawai:", res.data?.message);
+          pegawai.findMany.data = [];
+          pegawai.findMany.total = 0;
+          pegawai.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pegawai:", error);
         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<{
@@ -521,12 +550,9 @@ findMany: {
       if (!id) return toast.warn("ID tidak valid");
       try {
         pegawai.delete.loading = true;
-        const res = await fetch(
-          `/api/ppid/strukturppid/pegawai/del/${id}`,
-          {
-            method: "DELETE",
-          }
-        );
+        const res = await fetch(`/api/ppid/strukturppid/pegawai/del/${id}`, {
+          method: "DELETE",
+        });
         const json = await res.json();
         if (res.ok) {
           toast.success(json.message ?? "Berhasil hapus pegawai");
@@ -555,15 +581,12 @@ findMany: {
       }
 
       try {
-        const response = await fetch(
-          `/api/ppid/strukturppid/pegawai/${id}`,
-          {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/ppid/strukturppid/pegawai/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
@@ -677,7 +700,7 @@ findMany: {
 const stateStrukturPPID = proxy({
   stateStruktur,
   posisiOrganisasi,
-  pegawai
+  pegawai,
 });
 
 export default stateStrukturPPID;

src/app/admin/(dashboard)/_state/state-file-storage.ts

@@ -0,0 +1,63 @@
+import ApiFetch from "@/lib/api-fetch";
+import { proxy } from "valtio";
+
+interface FileItem {
+  id: string;
+  name: string;
+  path: string;
+  link: string;
+  mimeType: string;
+  category: string;
+  realName: string;
+  isActive: boolean;
+  createdAt: string | Date;
+  updatedAt: string | Date;
+  deletedAt: string | Date | null;
+}
+
+const stateFileStorage = proxy<{
+  list: FileItem[] | null;
+  page: number;
+  limit: number;
+  total: number | undefined;
+  load: (params?: { search?: string }) => Promise<void>;
+  del: (params: { id: string }) => Promise<void>;
+}>({
+  list: null,
+  page: 1,
+  limit: 10,
+  total: undefined,
+  async load(params?: { search?: string }) {
+    const { search = "" } = params ?? {};
+    try {
+      const { data } = await ApiFetch.api.fileStorage.findMany.get({
+        query: {
+          page: this.page,
+          limit: this.limit,
+          search,
+          category: 'image'
+        },
+      });
+      
+      if (data?.data) {
+        this.list = data.data as FileItem[];
+        this.total = data.meta?.totalPages;
+      }
+    } catch (error) {
+      console.error('Error loading files:', error);
+      this.list = [];
+      this.total = 0;
+    }
+  },
+  async del({ id }: { id: string }) {
+    try {
+      await ApiFetch.api.fileStorage.delete({ id });
+      await this.load();
+    } catch (error) {
+      console.error('Error deleting file:', error);
+      throw error;
+    }
+  },
+});
+
+export default stateFileStorage;

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

@@ -1,28 +1,28 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 "use client";
 
+import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
+import colors from "@/con/colors";
+import ApiFetch from "@/lib/api-fetch";
 import {
   Box,
   Button,
-  Center,
+  Group,
   Image,
   Paper,
   Select,
   Stack,
   Text,
   TextInput,
-  Title,
+  Title
 } from "@mantine/core";
-import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+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";
-import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
-import colors from "@/con/colors";
-import ApiFetch from "@/lib/api-fetch";
-import { FileInput } from "@mantine/core";
-import stateDashboardBerita from "@/app/admin/(dashboard)/_state/desa/berita";
 
 
 function EditBerita() {
@@ -130,27 +130,62 @@ function EditBerita() {
             placeholder="masukkan deskripsi"
           />
 
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <EditEditor

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

@@ -3,9 +3,10 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -113,25 +114,62 @@ export default function CreateBerita() {
             placeholder="masukkan deskripsi"
           />
 
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <CreateEditor

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

@@ -47,7 +47,7 @@ function ListBerita({ search }: { search: string }) {
   if (loading || !data) {
     return <Skeleton h={500} />;
   }
-  
+
   const filteredData = data || [];
 
   return (

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

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -18,6 +19,11 @@ function EditFoto() {
   const params = useParams();
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: fotoState.update.form.name || '',
+    deskripsi: fotoState.update.form.deskripsi || '',
+    imagesId: fotoState.update.form.imagesId || ''
+  });
 
   useEffect(() => {
     const loadFoto = async () => {
@@ -26,6 +32,11 @@ function EditFoto() {
       try {
         const data = await fotoState.update.load(id);
         if (data) {
+          setFormData({
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imagesId: data.imageGalleryFoto?.id || ''
+          });
           if (data?.imageGalleryFoto?.link) {
             setPreviewImage(data.imageGalleryFoto.link);
           }
@@ -40,6 +51,12 @@ function EditFoto() {
 
   const handleSubmit = async () => {
     try {
+      fotoState.update.form = {
+        ...fotoState.update.form,
+        name: formData.name,
+        deskripsi: formData.deskripsi,
+        imagesId: formData.imagesId
+      };
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({
           file,
@@ -74,30 +91,55 @@ function EditFoto() {
           <TextInput
             label={<Text fw={"bold"} fz={"sm"}>Judul Foto</Text>}
             placeholder='Masukkan judul foto'
-            value={fotoState.update.form.name}
+            value={formData.name}
             onChange={(e) =>
-              (fotoState.update.form.name = e.target.value)
+              (formData.name = e.target.value)
             }
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text>Upload Foto</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0]; // Ambil file pertama
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2} // Maks 5MB
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg={"gray"}>
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
             <EditEditor

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

@@ -3,8 +3,9 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
@@ -69,25 +70,62 @@ function CreateFoto() {
               fotoState.create.form.name = val.target.value;
             }}
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Box>
             <Text fw={"bold"} fz={"sm"}>Deskripsi Foto</Text>
             <CreateEditor

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

@@ -1,93 +1,124 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/judulListTab';
-import { useProxy } from 'valtio/utils';
-import stateGallery from '../../../_state/desa/gallery';
-import { useShallowEffect } from '@mantine/hooks';
-import HeaderSearch from '../../../_com/header';
-import { useState } from 'react';
+"use client";
+import colors from "@/con/colors";
+import stateFileStorage from "@/state/state-list-image";
+import {
+  ActionIcon,
+  Box,
+  Flex,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  TextInput,
+  Title
+} from "@mantine/core";
+import { useShallowEffect } from "@mantine/hooks";
+import { IconSearch, IconTrash, IconX } from "@tabler/icons-react";
+import { motion } from "framer-motion";
+import toast from "react-simple-toasts";
+import { useSnapshot } from "valtio";
 
-function Foto() {
-  const [search, setSearch] = useState("");
-  return (
-    <Box>
-      <HeaderSearch
-        title='Posisi Organisasi'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
-      />
-      <ListFoto search={search} />
-    </Box>
-  );
-}
-
-function ListFoto({ search }: { search: string }) {
-  const fotoState = useProxy(stateGallery.foto)
-  const router = useRouter();
+export default function ListImage() {
+  const { list, total } = useSnapshot(stateFileStorage);
 
   useShallowEffect(() => {
-    fotoState.findMany.load()
-  }, [])
+    stateFileStorage.load();
+  }, []);
 
-  const filteredData = (fotoState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
-
-  if (!fotoState.findMany.data) {
-    return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
-  }
-  
+  let timeOut: NodeJS.Timer;
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
-          title='List Foto'
-          href='/admin/desa/gallery/foto/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
+    <Stack p={"lg"}>
+      <Flex justify="space-between">
+        <Title order={3}>List Foto</Title>
+        <TextInput
+          radius={"lg"}
+          leftSection={<IconSearch />}
+          rightSection={
+            <ActionIcon
+              variant="transparent"
+              onClick={() => {
+                stateFileStorage.load();
+              }}
+            >
+              <IconX />
+            </ActionIcon>
+          }
+          placeholder="Pencarian"
+          onChange={(e) => {
+            if (timeOut) clearTimeout(timeOut);
+            timeOut = setTimeout(() => {
+              stateFileStorage.load({ search: e.target.value });
+            }, 200);
+          }}
         />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Judul Foto</TableTh>
-              <TableTh>Tanggal Foto</TableTh>
-              <TableTh>Deskripsi Foto</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
-                <TableTd>
-                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/desa/gallery/foto/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
-              </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+      </Flex>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <SimpleGrid
+          cols={{
+            base: 3,
+            md: 5,
+            lg: 10,
+          }}
+        >
+          {list &&
+            list.map((v, k) => {
+              return (
+                <Paper key={k} shadow="sm">
+                  <Stack pos={"relative"} gap={0} justify="space-between">
+                    <motion.div
+                      onClick={() => {
+                        // copy to clipboard
+                        navigator.clipboard.writeText(v.url);
+                        toast("Berhasil disalin");
+                      }}
+                      whileHover={{ scale: 1.05 }}
+                      whileTap={{ scale: 0.8 }}
+                    >
+                      <Image
+                        h={100}
+                        src={v.url + "?size=100"}
+                        alt={v.name}
+                        fit="cover"
+                        loading="lazy"
+                        style={{
+                          objectFit: "cover",
+                          objectPosition: "center",
+                        }}
+                      />
+                    </motion.div>
+                    <Box p={"md"} h={54}>
+                      <Text lineClamp={2} fz={"xs"}>
+                        {v.name}
+                      </Text>
+                    </Box>
+                    <Group justify="end">
+                        <IconTrash
+                        color="red"
+                          onClick={() => {
+                            stateFileStorage.del({ name: v.name }).finally(() => {
+                              toast("Berhasil dihapus");
+                            });
+                          }}
+                        />
+                    </Group>
+                  </Stack>
+                </Paper>
+              );
+            })}
+        </SimpleGrid>
       </Paper>
-    </Box>
+      {total && (
+        <Pagination
+          total={total}
+          onChange={(e) => {
+            stateFileStorage.page = e;
+            stateFileStorage.load();
+          }}
+        />
+      )}
+    </Stack>
   );
 }
-
-export default Foto;

src/app/admin/(dashboard)/desa/gallery/layout.tsx

@@ -1,5 +1,5 @@
 'use client'
-import LayoutTabsGallery from "../../ppid/_com/layoutTabsGallery"
+import LayoutTabsGallery from "./lib/layoutTabs"
 
 export default function Layout({ children }: { children: React.ReactNode }) {
     return (

src/app/admin/(dashboard)/desa/gallery/lib/layoutTabs.tsx

@@ -5,30 +5,20 @@ import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core'
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
-function LayoutTabs({ children }: { children: React.ReactNode }) {
+function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
     const router = useRouter()
     const pathname = usePathname()
     const tabs = [
         {
-            label: "Grafik Hasil Kepuasan Masyarakat",
-            value: "grafikhasilkepuasamanmasyarakat",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_hasil_kepuasan_masyarakat"
+            label: "Foto",
+            value: "foto",
+            href: "/admin/desa/gallery/foto"
         },
         {
-            label: "Grafik Berdasarkan Jenis Kelamin Responden",
-            value: "grafikberdasarkanjeniskelaminresponden",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_jenis_kelamin_responden"
+            label: "Video",
+            value: "video",
+            href: "/admin/desa/gallery/video"
         },
-        {
-            label: "Grafik Berdasarkan Pilihan Responden",
-            value: "grafikberdasarkanpilihanresponden",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_responden"
-        },
-        {
-            label: "Grafik Berdasarkan Umur Responden",
-            value: "grafikberdasarkanumurresponden",
-            href: "/admin/ppid/ikm-desa-darmasaba/grafik_berdasarkan_umur"
-        }
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)
     const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
@@ -50,7 +40,7 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
 
     return (
         <Stack>
-            <Title order={3}>Indeks Kepuasan Masyarakat (IKM) Desa Darmasaba</Title>
+            <Title order={3}>Gallery</Title>
             <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
                 <TabsList p={"xs"} bg={"#BBC8E7FF"}>
                     {tabs.map((e, i) => (
@@ -69,4 +59,4 @@ function LayoutTabs({ children }: { children: React.ReactNode }) {
     );
 }
 
-export default LayoutTabs;
+export default LayoutTabsGallery;

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

@@ -1,14 +1,14 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import JudulListTab from '../../../_com/judulListTab';
-import { useProxy } from 'valtio/utils';
-import stateGallery from '../../../_state/desa/gallery';
-import { useShallowEffect } from '@mantine/hooks';
-import HeaderSearch from '../../../_com/header';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import stateGallery from '../../../_state/desa/gallery';
 
 function Video() {
   const [search, setSearch] = useState("");
@@ -29,35 +29,34 @@ function Video() {
 function ListVideo({ search }: { search: string }) {
   const videoState = useProxy(stateGallery.video)
   const router = useRouter();
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = videoState.findMany;
 
   useShallowEffect(() => {
-    videoState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (videoState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = (data || [])
 
-  if (!videoState.findMany.data) {
+  if (loading || !data) {
     return (
       <Box py={10}>
         <Skeleton h={500} />
       </Box>
     )
   }
-  
+
   return (
     <Box py={10}>
       <Paper bg={colors['white-1']} p={'md'}>
-        <JudulListTab
+        <JudulList
           title='List Video'
           href='/admin/desa/gallery/video/create'
-          placeholder='pencarian'
-          searchIcon={<IconSearch size={16} />}
         />
         <Table striped withTableBorder withRowBorders>
           <TableThead>
@@ -71,10 +70,25 @@ function ListVideo({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{new Date(item.createdAt).toDateString()}</TableTd>
                 <TableTd>
-                  <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Box w={200}>
+                    <Text lineClamp={1}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                
+                <TableTd>
+                  <Box w={200}>
+                  {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                    day: 'numeric',
+                    month: 'long',
+                    year: 'numeric',
+                  })}
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={200}>
+                    <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}>
@@ -86,6 +100,15 @@ function ListVideo({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -4,10 +4,11 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Paper, Stack, Title, TextInput, FileInput, Center, Text, Image } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
@@ -105,26 +106,62 @@ function EditPenghargaan() {
             label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
             placeholder="masukkan juara"
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
 
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>

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

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
-import penghargaanState from '../../../_state/desa/penghargaan';
-import ApiFetch from '@/lib/api-fetch';
 import CreateEditor from '../../../_com/createEditor';
+import penghargaanState from '../../../_state/desa/penghargaan';
 
 
 function CreatePenghargaan() {
@@ -85,25 +86,62 @@ function CreatePenghargaan() {
               }}
             />
           </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/desa/profile/_lib/layoutTabsDetail.tsx

@@ -18,6 +18,11 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
             label: "Profile Perbekel",
             value: "profileperbekel",
             href: "/admin/desa/profile/profile-perbekel"
+        },
+        {
+            label: "Profile Perbekel Dari Masa Ke Masa",
+            value: "profile-perbekel-dari-masa-ke-masa",
+            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa"
         }
     ];
     const curentTab = tabs.find(tab => tab.href === pathname)

src/app/admin/(dashboard)/desa/profile/profile-perbekel-dari-masa-ke-masa/[id]/edit/page.tsx

@@ -0,0 +1,170 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, 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 EditPerbekelDariMasaKeMasa() {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const router = useRouter();
+  const params = useParams();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    nama: state.update.form.nama || '',
+    daerah: state.update.form.daerah || '',
+    periode: state.update.form.periode || '',
+    imageId: state.update.form.imageId || ''
+  });
+
+  useEffect(() => {
+    const loadFoto = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await state.update.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+            daerah: data.daerah || '',
+            periode: data.periode || '',
+            imageId: data.imageId || ''
+          });
+          if (data?.imageGalleryFoto?.link) {
+            setPreviewImage(data.imageGalleryFoto.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading foto:', error);
+        toast.error('Gagal memuat data foto');
+      }
+    };
+    loadFoto();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      state.update.form = {
+        ...state.update.form,
+        nama: formData.nama,
+        daerah: formData.daerah,
+        periode: formData.periode,
+        imageId: formData.imageId
+      };
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+        state.update.form.imageId = uploaded.id;
+      }
+      await state.update.update();
+      toast.success('Perbekel dari masa ke masa berhasil diperbarui!');
+      router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
+    } catch (error) {
+      console.error('Error updating perbekel dari masa ke masa:', error);
+      toast.error('Terjadi kesalahan saat memperbarui perbekel dari masa ke masa');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Perbekel Dari Masa Ke Masa</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
+            placeholder='Masukkan nama'
+            value={formData.nama}
+            onChange={(e) =>
+              (formData.nama = e.target.value)
+            }
+          />
+          <Box>
+            <Text>Upload Foto</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0]; // Ambil file pertama
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2} // Maks 5MB
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg={"gray"}>
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Daerah</Text>}
+            placeholder='Masukkan daerah'
+            value={formData.daerah}
+            onChange={(e) =>
+              (formData.daerah = e.target.value)
+            }
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
+            placeholder='Masukkan periode'
+            value={formData.periode}
+            onChange={(e) =>
+              (formData.periode = e.target.value)
+            }
+          />
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditPerbekelDariMasaKeMasa;

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

@@ -0,0 +1,111 @@
+'use client'
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+
+function DetailPerbekelDariMasa() {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const params = useParams()
+  const router = useRouter()
+
+  useShallowEffect(() => {
+    state.findUnique.load(params?.id as string)
+  }, [])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      state.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/desa/profile/profile-perbekel-dari-masa-ke-masa")
+    }
+  }
+
+  if (!state.findUnique.data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Perbekel Dari Masa Ke Masa</Text>
+          {state.findUnique.data ? (
+            <Paper key={state.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
+              <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Nama Perbekel</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.nama}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Daerah</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.daerah}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Periode</Text>
+                  <Text fz={"lg"}>{state.findUnique.data?.periode}</Text>
+                </Box>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 300, md: 350}} src={state.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
+                <Flex gap={"xs"} mt={10}>
+                  <Button
+                    onClick={() => {
+                      if (state.findUnique.data) {
+                        setSelectedId(state.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={state.delete.loading || !state.findUnique.data}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                  <Button
+                    onClick={() => {
+                      if (state.findUnique.data) {
+                        router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${state.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!state.findUnique.data}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Flex>
+              </Stack>
+            </Paper>
+          ) : null}
+        </Stack>
+      </Paper>
+
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus perbekel dari masa ke masa ini?'
+      />
+    </Box>
+  );
+}
+
+export default DetailPerbekelDariMasa;

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

@@ -0,0 +1,155 @@
+'use client'
+import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateVideo() {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const router = useRouter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    state.create.form = {
+      nama: "",
+      daerah: "",
+      periode: "",
+      imageId: "",
+    };
+    setPreviewImage(null)
+    setFile(null)
+  };
+
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+    state.create.form.imageId = uploaded.id;
+    await state.create.create();
+    resetForm();
+    router.push("/admin/desa/profile/profile-perbekel-dari-masa-ke-masa");
+  };
+
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Perbekel Dari Masa Ke Masa</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Perbekel</Text>}
+            placeholder='Masukkan nama perbekel'
+            value={state.create.form.nama}
+            onChange={(val) => {
+              state.create.form.nama = val.target.value;
+            }}
+          />
+          <TextInput
+            label="Daerah"
+            placeholder="Masukkan daerah"
+            value={state.create.form.daerah}
+            onChange={(e) => {
+              state.create.form.daerah = e.currentTarget.value;
+            }}
+            required
+          />
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
+            placeholder='Masukkan periode'
+            value={state.create.form.periode}
+            onChange={(e) =>
+              (state.create.form.periode = e.target.value)
+            }
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateVideo;

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

@@ -0,0 +1,106 @@
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import stateProfileDesa from '../../../_state/desa/profile';
+
+function PerbekelDariMasaKeMasa() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Perbekel Dari Masa Ke Masa'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListPerbekelDariMasaKeMasa search={search} />
+    </Box>
+  );
+}
+
+function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
+  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const router = useRouter();
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = (data || [])
+
+  if (loading || !data) {
+    return (
+      <Box py={10}>
+        <Skeleton h={500} />
+      </Box>
+    )
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Perbekel Dari Masa Ke Masa'
+          href='/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>Nama Perbekel</TableTh>
+              <TableTh>Periode</TableTh>
+              <TableTh>Detail</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item) => (
+              <TableTr key={item.id}>
+                <TableTd>
+                  <Box w={200}>
+                    <Text lineClamp={1}>{item.nama}</Text>
+                  </Box>
+                </TableTd>
+                
+                <TableTd>
+                <Box w={200}>
+                    <Text lineClamp={1}>{item.periode}</Text>
+                  </Box>  
+                </TableTd>
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+    </Box>
+  );
+}
+
+export default PerbekelDariMasaKeMasa;

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

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Group, Image, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, Title } 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';
@@ -44,21 +45,7 @@ function ProfilePerbekel() {
       perbekelState.findUnique.reset(); // opsional: reset juga data lama
     };
   }, [params?.id, router]);
-  
-    const handleFileChange = (newFile: File | null) => {
-      if (!newFile) {
-        setFile(null);
-        return;
-      }
-  
-      setFile(newFile);
-  
-      const reader = new FileReader();
-      reader.onload = (event) => {
-        setPreviewImage(event.target?.result as string);
-      };
-      reader.readAsDataURL(newFile);
-    };
+
 
   const handleSubmit = async () => {
     if (isSubmitting || !perbekelState.edit.form.biodata.trim()) {
@@ -128,27 +115,61 @@ function ProfilePerbekel() {
                     value={perbekelState.edit.form.biodata}
                     onChange={(val) => perbekelState.edit.form.biodata = val}
                   />
-                  {/* File Upload */}
-                  <FileInput
-                    label={<Text fz="sm" fw="bold">Upload Gambar Baru (Opsional)</Text>}
-                    value={file}
-                    onChange={handleFileChange}
-                    accept="image/*"
-                  />
-
-                  {/* Preview Gambar */}
                   <Box>
-                    <Text fz="sm" fw="bold" mb="xs">Preview Gambar</Text>
-                    {previewImage ? (
-                      <Image alt="Profile preview" src={previewImage} w={200} h={200} fit="cover" radius="md" />
-                    ) : (
-                      <Center w={200} h={200} bg="gray.2">
-                        <Stack align="center" gap="xs">
-                          <IconImageInPicture size={48} color="gray" />
-                          <Text size="sm" c="gray">Tidak ada gambar</Text>
-                        </Stack>
-                      </Center>
-                    )}
+                    <Text fz={"md"} fw={"bold"}>Gambar</Text>
+                    <Box>
+                      <Dropzone
+                        onDrop={(files) => {
+                          const selectedFile = files[0]; // Ambil file pertama
+                          if (selectedFile) {
+                            setFile(selectedFile);
+                            setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                          }
+                        }}
+                        onReject={() => toast.error('File tidak valid.')}
+                        maxSize={5 * 1024 ** 2} // Maks 5MB
+                        accept={{ 'image/*': [] }}
+                      >
+                        <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                          <Dropzone.Accept>
+                            <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                          </Dropzone.Accept>
+                          <Dropzone.Reject>
+                            <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                          </Dropzone.Reject>
+                          <Dropzone.Idle>
+                            <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                          </Dropzone.Idle>
+
+                          <div>
+                            <Text size="xl" inline>
+                              Drag gambar ke sini atau klik untuk pilih file
+                            </Text>
+                            <Text size="sm" c="dimmed" inline mt={7}>
+                              Maksimal 5MB dan harus format gambar
+                            </Text>
+                          </div>
+                        </Group>
+                      </Dropzone>
+
+                      {/* Tampilkan preview kalau ada */}
+                      {previewImage && (
+                        <Box mt="sm">
+                          <Image
+                            src={previewImage}
+                            alt="Preview"
+                            style={{
+                              maxWidth: '100%',
+                              maxHeight: '200px',
+                              objectFit: 'contain',
+                              borderRadius: '8px',
+                              border: '1px solid #ddd',
+                            }}
+                          />
+                        </Box>
+                      )}
+
+                    </Box>
                   </Box>
 
                   <Box>

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

@@ -33,7 +33,7 @@ function Page() {
           </GridCol>
         </Grid>
         {perbekel && (
-          <Box  >
+          <Box>
             <Paper p={"xl"} bg={colors['BG-trans']}>
               <Box px={{ base: "md", md: 100 }}>
                 <Grid>

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

@@ -143,8 +143,8 @@ function ListDemografiPekerjaan({ search }: { search: string }) {
                   dataKey="pekerjaan"
                   type="stacked"
                   series={[
-                    { name: 'lakiLaki', color: 'red.6', label: 'Laki - Laki' },
-                    { name: 'perempuan', color: 'orange.6', label: 'Perempuan' },
+                    { name: 'lakiLaki', color: '#5082EE', label: 'Laki - Laki' },
+                    { name: 'perempuan', color: '#6EDF9C', label: 'Perempuan' },
                   ]}
                 />
               </Box>

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

@@ -35,7 +35,7 @@ function EditJumlahPendudukMiskin() {
     // Set the ID before submitting
     stateJPM.update.id = id;
     await stateJPM.update.submit();
-    router.push('/admin/ekonomi/jumlah-penduduk-miskin-2024-2025')
+    router.push('/admin/ekonomi/jumlah-penduduk-miskin')
   }
 return (
     <Box>

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

@@ -32,7 +32,7 @@ function CreateJumlahPendudukMiskin() {
       }
     }
     resetForm();
-    router.push("/admin/ekonomi/jumlah-penduduk-miskin-2024-2025");
+    router.push("/admin/ekonomi/jumlah-penduduk-miskin");
   }
   return (
     <Box>

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

@@ -91,7 +91,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
         <Paper bg={colors['white-1']} p={'md'}>
           <JudulList
             title='List Jumlah Penduduk Miskin'
-            href='/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/create'
+            href='/admin/ekonomi/jumlah-penduduk-miskin/create'
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
@@ -108,7 +108,7 @@ function ListJumlahPendudukMiskin({ search }: { search: string }) {
                   <TableTd>{item.year}</TableTd>
                   <TableTd>{item.totalPoorPopulation}</TableTd>
                   <TableTd>
-                    <Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin-2024-2025/${item.id}`)}>
+                    <Button color='green' onClick={() => router.push(`/admin/ekonomi/jumlah-penduduk-miskin/${item.id}`)}>
                       <IconEdit size={20} />
                     </Button>
                   </TableTd>

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

@@ -8,29 +8,36 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../../_com/judulListTab';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
 
 function GrafikBerdasarkanPendidikan() {
+  const [search, setSearch] = useState("")
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Title order={3}>Grafik Pengangguran Berdasarkan Pendidikan</Title>
-        <ListGrafikBerdasarkanPendidikan />
+      <HeaderSearch
+        title='Detail Data Pengangguran Berdasarkan Pendidikan'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+        <ListGrafikBerdasarkanPendidikan search={search}/>
       </Stack>
     </Box>
   );
 }
 
-function ListGrafikBerdasarkanPendidikan() {
+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();
-  const [search, setSearch] = useState("");
 
 
   const handleDelete = async () => {
@@ -56,11 +63,11 @@ function ListGrafikBerdasarkanPendidikan() {
       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: colors['blue-button'], key: 'SD' },
-        { name: 'SMP', value: SMP, color: '#10A85AFF', key: 'SMP' },
-        { name: 'SMA', value: SMA, color: '#C07B13FF', key: 'SMA' },
-        { name: 'D3', value: D3, color: '#1094A8FF', key: 'D3' },
-        { name: 'S1', value: S1, color: '#A83610FF', key: 'S1' },
+        { name: 'SD', value: SD, color: '#4b6Ef5', key: 'SD' },
+        { name: 'SMP', value: SMP, color: '#14b885', key: 'SMP' },
+        { name: 'SMA', value: SMA, color: '#E6A03B', key: 'SMA' },
+        { name: 'D3', value: D3, color: '#DB524D', key: 'D3' },
+        { name: 'S1', value: S1, color: '#1018A8FF', key: 'S1' },
       ]);
     }
   }, [stategrafik.findMany.data])
@@ -88,13 +95,9 @@ function ListGrafikBerdasarkanPendidikan() {
     <Box>
       <Stack gap={"xs"}>
         <Paper bg={colors['white-1']} p={"md"}>
-          <JudulListTab
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
+          <JudulList
             title='List Grafik Pengangguran Berdasarkan Pendidikan'
             href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_pendidikan/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>

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

@@ -8,29 +8,37 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { Cell, Pie, PieChart } from 'recharts';
 import { useProxy } from 'valtio/utils';
-import JudulListTab from '../../../_com/judulListTab';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import grafikNganggur from '../../../_state/ekonomi/usia-kerja-nganggur';
 
+
 function GrafikBerdasarkanUsiaKerjaYangMenganggur() {
+  const [search, setSearch] = useState("")
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Title order={3}>Grafik Pengangguran Berdasarkan Usia Kerja</Title>
-        <ListGrafikBerdasarkanUsiaKerjaYangMenganggur />
+      <HeaderSearch
+        title='Detail Data Pengangguran'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+        <ListGrafikBerdasarkanUsiaKerjaYangMenganggur search={search} />
       </Stack>
     </Box>
   );
 }
 
-function ListGrafikBerdasarkanUsiaKerjaYangMenganggur() {
+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();
-  const [search, setSearch] = useState("");
 
 
   const handleDelete = async () => {
@@ -85,13 +93,9 @@ function ListGrafikBerdasarkanUsiaKerjaYangMenganggur() {
     <Box>
       <Stack gap={"xs"}>
         <Paper bg={colors['white-1']} p={"md"}>
-          <JudulListTab
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
+          <JudulList
             title='List Pengangguran Berdasarkan Usia Kerja'
             href='/admin/ekonomi/jumlah-penduduk-usia-kerja-yang-menganggur/pengangguran_berdasarkan_usia/create'
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>

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

@@ -66,19 +66,23 @@ function EditDetailDataPengangguran() {
         const data = stateDetail.findUnique.data;
   
         if (data) {
+          // Convert year from Date to number
+          const yearValue = data.year instanceof Date ? data.year.getFullYear() : data.year;
+          
           // Set the ID for update
           stateDetail.update.id = id;
           
-          // Isi state Valtio untuk update
+          // Update Valtio state with converted year
           stateDetail.update.form = { 
             ...data,
+            year: yearValue,
             percentageChange: data.percentageChange || 0 // Ensure it's always a number
           };
   
-          // Isi local formData supaya input bisa dikontrol
+          // Update local formData with converted year
           setFormData({
             month: data.month,
-            year: data.year,
+            year: yearValue,
             totalUnemployment: data.totalUnemployment,
             educatedUnemployment: data.educatedUnemployment,
             uneducatedUnemployment: data.uneducatedUnemployment,

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

@@ -25,7 +25,7 @@ function DetailJumlahPengangguran() {
       stateDetail.delete.byId(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-      router.push("/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran")
+      router.push("/admin/ekonomi/jumlah-pengangguran")
     }
   }
 
@@ -63,7 +63,7 @@ function DetailJumlahPengangguran() {
               </Box>
               <Box>
                 <Text fw={"bold"}>Tahun</Text>
-                <Text>{stateDetail.findUnique.data?.year}</Text>
+                <Text>{stateDetail.findUnique.data?.year ? new Date(stateDetail.findUnique.data.year).getFullYear() : ''}</Text>
               </Box>
               <Box>
                 <Text fw={"bold"}>Bulan</Text>
@@ -86,7 +86,7 @@ function DetailJumlahPengangguran() {
                   color={"red"}>
                     <IconX size={20} />
                   </Button>
-                  <Button onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran/${stateDetail.findUnique.data?.id}/edit`)} color="green">
+                  <Button onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${stateDetail.findUnique.data?.id}/edit`)} color="green">
                     <IconEdit size={20} />
                   </Button>
                 </Flex>
@@ -108,4 +108,3 @@ function DetailJumlahPengangguran() {
 }
 
 export default DetailJumlahPengangguran;
-

src/app/admin/(dashboard)/ekonomi/jumlah-pengangguran/create/page.tsx

@@ -90,7 +90,7 @@ function CreateJumlahPengangguran() {
           />
           <TextInput
             label="Tahun"
-            type="number"
+            type="date"
             value={stateDetail.create.form.year}
             onChange={(e) =>
               (stateDetail.create.form.year = Number(e.currentTarget.value))

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

@@ -8,21 +8,29 @@ import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 import { BarChart } from '@mantine/charts';
+import HeaderSearch from '../../_com/header';
+import JudulList from '../../_com/judulList';
 import jumlahPengangguranState from '../../_state/ekonomi/jumlah-pengangguran';
-import JudulListTab from '../../_com/judulListTab';
 
 function DetailDataPengangguran() {
+  const [search, setSearch] = useState("")
   return (
     <Box>
       <Stack gap={"xs"}>
-        <Title order={3}>Detail Data Pengangguran</Title>
-        <ListDetailDataPengangguran />
+      <HeaderSearch
+        title='Detail Data Pengangguran'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+        <ListDetailDataPengangguran search={search} />
       </Stack>
     </Box>
   );
 }
 
-function ListDetailDataPengangguran() {
+function ListDetailDataPengangguran({search}: {search: string}) {
 
   type DetailDataPengangguran = {
     id: string;
@@ -37,7 +45,6 @@ function ListDetailDataPengangguran() {
   const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
   const stateDetail = useProxy(jumlahPengangguranState.jumlahPengangguran)
   const router = useRouter();
-  const [search, setSearch] = useState("")
 
   useShallowEffect(() => {
     setMounted(true)
@@ -50,7 +57,7 @@ function ListDetailDataPengangguran() {
       setChartData(stateDetail.findMany.data.map((item) => ({
         id: item.id,
         month: item.month,
-        year: item.year,
+        year: item.year instanceof Date ? item.year.getFullYear() : Number(item.year),
         educatedUnemployment: Number(item.educatedUnemployment),
         uneducatedUnemployment: Number(item.uneducatedUnemployment),
         percentageChange: Number(item.percentageChange),
@@ -78,13 +85,9 @@ function ListDetailDataPengangguran() {
     <Box>
       <Stack gap={"md"}>
         <Paper bg={colors['white-1']} p={'md'}>
-          <JudulListTab
+          <JudulList
             title='List Detail Data Pengangguran'
-            href='/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran/create'
-            value={search}
-            onChange={(e) => setSearch(e.currentTarget.value)}
-            placeholder='pencarian'
-            searchIcon={<IconSearch size={16} />}
+            href='/admin/ekonomi/jumlah-pengangguran/create'
           />
           <Table striped withTableBorder withRowBorders>
             <TableThead>
@@ -102,7 +105,7 @@ function ListDetailDataPengangguran() {
                   <TableTd>{item.educatedUnemployment}</TableTd>
                   <TableTd>{item.uneducatedUnemployment}</TableTd>
                   <TableTd>
-                    <Button onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/detail-data-pengangguran/${item.id}`)}>
+                    <Button onClick={() => router.push(`/admin/ekonomi/jumlah-pengangguran/${item.id}`)}>
                       <IconDeviceImac size={20} />
                     </Button>
                   </TableTd>
@@ -116,14 +119,14 @@ function ListDetailDataPengangguran() {
         {!mounted && !chartData ? (
           <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
             <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={3}>Data Kelahiran & Kematian</Title>
+              <Title pb={10} order={3}>Data Pengangguran Terdidik dan Tidak Terdidik</Title>
               <Text c='dimmed'>Belum ada data untuk ditampilkan dalam grafik</Text>
             </Paper>
           </Box>
         ) : (
           <Box style={{ width: '100%', minWidth: 300, height: 550, minHeight: 300 }}>
             <Paper bg={colors['white-1']} p={'md'}>
-              <Title pb={10} order={4}>Data Kelahiran & Kematian</Title>
+              <Title pb={10} order={4}>Data Pengangguran Terdidik dan Tidak Terdidik</Title>
               {mounted && chartData.length > 0 && (
                 <Box w={{ base: '100%', md: '70%' }}>
                   <BarChart

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

@@ -55,17 +55,17 @@ function EditLowonganKerja() {
 
   const handleSubmit = async () => {
     try {
-      lowonganKerjaState.update.form = {
-        ...lowonganKerjaState.update.form,
-        posisi: formData.posisi,
-        namaPerusahaan: formData.namaPerusahaan,
-        lokasi: formData.lokasi,
-        tipePekerjaan: formData.tipePekerjaan,
-        gaji: formData.gaji,
-        deskripsi: formData.deskripsi,
-        kualifikasi: formData.kualifikasi,
-      }
-      await lowonganState.update.update()
+      // Set the ID for the update
+      lowonganState.update.id = params?.id as string;
+      
+      // Update the form state
+      lowonganState.update.form = {
+        ...lowonganState.update.form,
+        ...formData
+      };
+      
+      // Call the update function
+      await lowonganState.update.update();
       toast.success("Lowongan kerja berhasil diperbarui!");
       router.push("/admin/ekonomi/lowongan-kerja-lokal");
     } catch (error) {
@@ -88,7 +88,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.posisi}
             onChange={(val) => {
-              formData.posisi = val.target.value;
+              setFormData(prev => ({ ...prev, posisi: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Posisi</Text>}
             placeholder='Masukkan posisi'
@@ -96,7 +96,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.namaPerusahaan}
             onChange={(val) => {
-              formData.namaPerusahaan = val.target.value;
+              setFormData(prev => ({ ...prev, namaPerusahaan: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Nama Perusahaan</Text>}
             placeholder='Masukkan nama perusahaan'
@@ -104,7 +104,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.lokasi}
             onChange={(val) => {
-              formData.lokasi = val.target.value;
+              setFormData(prev => ({ ...prev, lokasi: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Lokasi</Text>}
             placeholder='Masukkan lokasi'
@@ -112,7 +112,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.tipePekerjaan}
             onChange={(val) => {
-              formData.tipePekerjaan = val.target.value;
+              setFormData(prev => ({ ...prev, tipePekerjaan: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Tipe Pekerjaan</Text>}
             placeholder='Masukkan tipe pekerjaan'
@@ -120,7 +120,7 @@ function EditLowonganKerja() {
           <TextInput
             value={formData.gaji}
             onChange={(val) => {
-              formData.gaji = val.target.value;
+              setFormData(prev => ({ ...prev, gaji: val.target.value }));
             }}
             label={<Text fw={"bold"} fz={"sm"}>Gaji selama 1 bulan</Text>}
             placeholder='Masukkan gaji'
@@ -130,7 +130,7 @@ function EditLowonganKerja() {
             <EditEditor
               value={formData.deskripsi}
               onChange={(val) => {
-                formData.deskripsi = val;
+                setFormData(prev => ({ ...prev, deskripsi: val }));
               }}
             />
           </Box>
@@ -139,7 +139,7 @@ function EditLowonganKerja() {
             <EditEditor
               value={formData.kualifikasi}
               onChange={(val) => {
-                formData.kualifikasi = val;
+                setFormData(prev => ({ ...prev, kualifikasi: val }));
               }}
             />
           </Box>

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -30,20 +30,21 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
   const lowonganState = useProxy(lowonganKerjaState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = lowonganState.findMany
+
   useShallowEffect(() => {
-    lowonganState.findMany.load();
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (lowonganState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.posisi.toLowerCase().includes(keyword) ||
-      item.namaPerusahaan.toLowerCase().includes(keyword) ||
-      item.lokasi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!lowonganState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -60,18 +61,24 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
-              <TableTh>Bekerja Sebagai</TableTh>
-              <TableTh>Nama Usaha</TableTh>
-              <TableTh>Alamat Usaha</TableTh>
+              <TableTh>Pekerjaan</TableTh>
+              <TableTh>Nama Perusahaan</TableTh>
+              <TableTh>Lokasi</TableTh>
               <TableTh>Detail</TableTh>
               </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.posisi}</TableTd>
-                <TableTd>{item.namaPerusahaan}</TableTd>
-                <TableTd>{item.lokasi}</TableTd>
+                <TableTd>
+                  <Text fz={"md"}>{item.posisi}</Text>
+                </TableTd>
+                <TableTd>
+                  <Text fz={"md"}>{item.namaPerusahaan}</Text>
+                </TableTd>
+                <TableTd>
+                  <Text fz={"md"}>{item.lokasi}</Text>
+                </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/ekonomi/lowongan-kerja-lokal/${item.id}`)}>
                   <IconDeviceImac size={20} />
@@ -82,6 +89,14 @@ function ListLowonganKerjaLokal({ search }: { search: string }) {
           </TableTbody>
         </Table>  
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -13,31 +13,39 @@ import pasarDesaState from '../../../_state/ekonomi/pasar-desa/pasar-desa';
 
 
 function PasarDesa() {
-  const [search, setSearch] = useState("")
+  const [search2, setSearch2] = useState("")
   return (
     <Box>
       <HeaderSearch
         title='Kategori Produk'
         placeholder='pencarian'
         searchIcon={<IconSearch size={20} />}
-        value={search}
-        onChange={(e) => setSearch(e.currentTarget.value)}
+        value={search2}
+        onChange={(e) => setSearch2(e.currentTarget.value)}
       />
-      <ListPasarDesa search={search} />
+      <ListPasarDesa search2={search2} />
     </Box>
   );
 }
 
-function ListPasarDesa({ search }: { search: string }) {
+function ListPasarDesa({ search2 }: { search2: string }) {
   const statePasar = useProxy(pasarDesaState.kategoriProduk)
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
   // const params = useParams()
   const router = useRouter()
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = statePasar.findMany
+
   useShallowEffect(() => {
-    statePasar.findMany.load()
-  }, [])
+    load(page, 10, search2)
+  }, [page, search2])
 
   const handleHapus = () => {
     if (selectedId) {
@@ -47,14 +55,9 @@ function ListPasarDesa({ search }: { search: string }) {
     }
   }
 
-  const filteredData = (statePasar.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!statePasar.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -99,6 +102,14 @@ function ListPasarDesa({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my={"md"}
+        />
+      </Center>
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useShallowEffect } from '@mantine/hooks';
 import { useRouter } from 'next/navigation';
@@ -30,21 +30,21 @@ function ListPasarDesa({ search }: { search: string }) {
   const statePasar = useProxy(pasarDesaState.pasarDesa)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = statePasar.findMany
+
   useShallowEffect(() => {
-    statePasar.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (statePasar.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.harga.toString().toLowerCase().includes(keyword) ||
-      item.rating.toString().toLowerCase().includes(keyword) ||
-      item.alamatUsaha.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!statePasar.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -86,6 +86,14 @@ function ListPasarDesa({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my={"md"}
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/ekonomi/program-kemiskinan/page.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -23,7 +23,7 @@ function ProgramKemiskinan() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListProgramKemiskinan search={search}/>
+      <ListProgramKemiskinan search={search} />
     </Box>
   );
 }
@@ -34,14 +34,22 @@ function ListProgramKemiskinan({ search }: { search: string }) {
   const [lineChart, setLineChart] = useState<any[]>([]);
   const [mounted, setMounted] = useState(false);
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = programState.findMany;
+
   useShallowEffect(() => {
     setMounted(true)
-    programState.findMany.load()
+    load(page, 10, search)
   }, [])
 
   useEffect(() => {
-    if (programState.findMany.data) {
-      const chartData = programState.findMany.data
+    if (data) {
+      const chartData = data
         .filter(item => item.statistik)
         .map(item => ({
           tahun: item.statistik?.tahun,
@@ -52,18 +60,11 @@ function ListProgramKemiskinan({ search }: { search: string }) {
       setLineChart(chartData);
 
     }
-  }, [programState.findMany.data])
+  }, [data])
 
-  const filteredData = (programState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.statistik?.tahun.toString().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!programState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -112,7 +113,7 @@ function ListProgramKemiskinan({ search }: { search: string }) {
             <Box >
               <Title pb={10} order={3}>Grafik Berdasarkan Responden</Title>
               {mounted && lineChart.length > 0 ? (<Box style={{ width: '100%', height: 'auto', }}>
-                <Box w={"100%"} style={{overflowX: 'auto'}}>
+                <Box w={"100%"} style={{ overflowX: 'auto' }}>
                   <LineChart
                     width={820}
                     height={300}
@@ -143,6 +144,14 @@ function ListProgramKemiskinan({ search }: { search: string }) {
             </Box>
           </Stack>
         </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            my={"md"}
+          />
+        </Center>
       </Box>
     </Box>
   );

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/create/page.tsx

@@ -2,15 +2,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import grafikSektorUnggulan from '../../../_state/ekonomi/sektor-unggulan-desa';
+import CreateEditor from '../../../_com/createEditor';
 
 function CreateSektorUnggulanDesa() {
-  const stateGrafik= useProxy(grafikSektorUnggulan);
+  const stateGrafik = useProxy(grafikSektorUnggulan);
   const [chartData, setChartData] = useState<any[]>([]);
   const router = useRouter()
 
@@ -54,15 +55,15 @@ function CreateSektorUnggulanDesa() {
                 stateGrafik.create.form.name = val.currentTarget.value;
               }}
             />
-            <TextInput
-              label="Deskripsi Sektor Unggulan"
-              type="text"
-              value={stateGrafik.create.form.description}
-              placeholder="Masukkan deskripsi sektor unggulan"
-              onChange={(val) => {
-                stateGrafik.create.form.description = val.currentTarget.value;
-              }}
-            />
+            <Box>
+              <Text fw={"bold"} fz={"sm"}>Deskripsi Sektor Ungggulan</Text>
+              <CreateEditor
+                value={stateGrafik.create.form.description}
+                onChange={(val) => {
+                  stateGrafik.create.form.description = val;
+                }}
+              />
+            </Box>
             <TextInput
               label="Jumlah"
               type="number"

src/app/admin/(dashboard)/ekonomi/sektor-unggulan-desa/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { Box, Button, Paper, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -30,7 +30,7 @@ function SektorUnggulanDesa() {
 function ListSektorUnggulanDesa({ search }: { search: string }) {
   const router = useRouter();
   const state = useProxy(grafikSektorUnggulan);
-  const [chartData, setChartData] = useState<{id: string; name: string; description: string | null; value: number | null}[]>([]);
+  const [chartData, setChartData] = useState<{ id: string; name: string; description: string | null; value: number | null }[]>([]);
   const [mounted, setMounted] = useState(false); // untuk memastikan DOM sudah ready
   const isTablet = useMediaQuery('(max-width: 1024px)')
   const isMobile = useMediaQuery('(max-width: 768px)')
@@ -61,38 +61,41 @@ function ListSektorUnggulanDesa({ search }: { search: string }) {
   }, [state.findMany.data]);
 
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Sektor Unggulan Desa'
-          href='/admin/ekonomi/sektor-unggulan-desa/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Sektor Unggulan</TableTh>
-              <TableTh>Deskripsi Sektor Unggulan</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
-                <TableTd>{item.description}</TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/ekonomi/sektor-unggulan-desa/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+    <Box>
+      <Stack gap={"xs"}>
+        <Paper bg={colors['white-1']} p={'md'}>
+          <JudulList
+            title='List Sektor Unggulan Desa'
+            href='/admin/ekonomi/sektor-unggulan-desa/create'
+          />
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh>Nama Sektor Unggulan</TableTh>
+                <TableTh>Deskripsi Sektor Unggulan</TableTh>
+                <TableTh>Detail</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
-      </Paper>
+            </TableThead>
+            <TableTbody>
+              {filteredData.map((item) => (
+                <TableTr key={item.id}>
+                  <TableTd>{item.name}</TableTd>
+                  <TableTd>
+                    <Text truncate={"end"} fz={'sm'} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.description || '' }}></Text>
+                  </TableTd>
+                  <TableTd>
+                    <Button onClick={() => router.push(`/admin/ekonomi/sektor-unggulan-desa/${item.id}`)}>
+                      <IconDeviceImac size={20} />
+                    </Button>
+                  </TableTd>
+                </TableTr>
+              ))}
+            </TableTbody>
+          </Table>
+        </Paper>
 
-      {/* Chart */}
-      {!mounted && !chartData ? (
+        {/* Chart */}
+        {!mounted && !chartData ? (
           <Box style={{ width: '100%', minWidth: 300, height: 400, minHeight: 300 }}>
             <Paper bg={colors['white-1']} p={'md'}>
               <Title pb={10} order={3}>Grafik Hasil Kepuasan Masyarakat</Title>
@@ -115,6 +118,7 @@ function ListSektorUnggulanDesa({ search }: { search: string }) {
             </Paper>
           </Box>
         )}
+      </Stack>
     </Box>
   );
 }

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -95,27 +96,61 @@ function EditPenghargaan() {
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
             <EditEditor

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/create/page.tsx

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import desaDigitalState from '../../../_state/inovasi/desa-digital';
+import { Dropzone } from '@mantine/dropzone';
 
 
 function CreateDesaDigital() {
@@ -49,7 +50,7 @@ function CreateDesaDigital() {
 
       // Submit the form
       const success = await stateDesaDigital.create.create()
-      
+
       if (success) {
         resetForm()
         router.push("/admin/inovasi/desa-digital-smart-village")
@@ -87,25 +88,61 @@ function CreateDesaDigital() {
               }}
             />
           </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Pagination } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,19 +29,22 @@ function DesaDigitalSmartVillage() {
 function ListDesaDigitalSmartVillage({ search }: { search: string }) {
   const state = useProxy(desaDigitalState)
   const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (state.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!state.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -68,18 +71,27 @@ function ListDesaDigitalSmartVillage({ search }: { search: string }) {
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                 </TableTd>
-              <TableTd>
-                <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/inovasi/desa-digital-smart-village/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/[id]/edit/page.tsx

@@ -4,8 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import infoTeknoState from '@/app/admin/(dashboard)/_state/inovasi/info-tekno';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -94,27 +95,61 @@ function EditInfoTeknologiTepatGuna() {
             label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
             placeholder="masukkan judul"
           />
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
 
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Box>
             <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
             <EditEditor

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/create/page.tsx

@@ -1,14 +1,15 @@
 'use client'
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, FileInput, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture } from '@tabler/icons-react';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import infoTeknoState from '../../../_state/inovasi/info-tekno';
+import { Dropzone } from '@mantine/dropzone';
 
 
 function CreateInfoTeknologiTepatGuna() {
@@ -49,7 +50,7 @@ function CreateInfoTeknologiTepatGuna() {
 
       // Submit the form
       const success = await stateInfoTekno.create.create()
-      
+
       if (success) {
         resetForm()
         router.push("/admin/inovasi/info-teknologi-tepat-guna")
@@ -87,25 +88,61 @@ function CreateInfoTeknologiTepatGuna() {
               }}
             />
           </Box>
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Konten</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+            </Box>
+          </Box>
           <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
         </Stack>
       </Paper>

src/app/admin/(dashboard)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -29,19 +29,22 @@ function InfoTeknologiTepatGuna() {
 function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
   const state = useProxy(infoTeknoState)
   const router = useRouter()
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (state.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!state.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -68,17 +71,25 @@ function ListInfoTeknologiTepatGuna({ search }: { search: string }) {
               <TableTr key={item.id}>
                 <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                 </TableTd>
-              <TableTd>
-                <Button onClick={() => router.push(`/admin/inovasi/info-teknologi-tepat-guna/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
+                <TableTd>
+                  <Button onClick={() => router.push(`/admin/inovasi/info-teknologi-tepat-guna/${item.id}`)}>
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
         </Table>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)} // ini penting!
+            total={totalPages}
+            my="md"
+          />
+        </Center>
       </Paper>
     </Box>
   );

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/_lib/layoutTabs.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { usePathname, useRouter } from 'next/navigation';
+import React, { useEffect, useState } from 'react';
+
+function LayoutTabsKolaborasi({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "List Kolaborasi Inovasi",
+            value: "listkolaborasiinovasi",
+            href: "/admin/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi"
+        },
+        {
+            label: "Mitra Kolaborasi",
+            value: "mitarakolaborasi",
+            href: "/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi"
+        }
+    ];
+    const curentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const handleTabChange = (value: string | null) => {
+        const tab = tabs.find(t => t.value === value)
+        if (tab) {
+            router.push(tab.href)
+        }
+        setActiveTab(value)
+    }
+
+    useEffect(() => {
+        const match = tabs.find(tab => tab.href === pathname)
+        if (match) {
+            setActiveTab(match.value)
+        }
+    }, [pathname])
+
+    return (
+        <Stack>
+            <Title order={3}>Kolaborasi Inovasi</Title>
+            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
+                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
+                    {tabs.map((e, i) => (
+                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+                    ))}
+                </TabsList>
+                {tabs.map((e, i) => (
+                    <TabsPanel key={i} value={e.value}>
+                        {/* Konten dummy, bisa diganti tergantung routing */}
+                        <></>
+                    </TabsPanel>
+                ))}
+            </Tabs>
+            {children}
+        </Stack>
+    );
+}
+
+export default LayoutTabsKolaborasi;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/create/page.tsx

@@ -1,155 +0,0 @@
-'use client'
-import colors from '@/con/colors';
-import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import { useProxy } from 'valtio/utils';
-import CreateEditor from '../../../_com/createEditor';
-import kolaborasiInovasiState from '../../../_state/inovasi/kolaborasi-inovasi';
-import { useState } from 'react';
-import { toast } from 'react-toastify';
-import ApiFetch from '@/lib/api-fetch';
-import { Dropzone } from '@mantine/dropzone';
-
-
-function CreateProgramKreatifDesa() {
-  const stateCreate = useProxy(kolaborasiInovasiState)
-  const router = useRouter();
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
-
-  const resetForm = () => {
-    stateCreate.create.form = {
-      name: "",
-      tahun: 0,
-      slug: "",
-      deskripsi: "",
-      kolaborator: "",
-      imageId: "",
-    }
-
-    setPreviewImage(null);
-    setFile(null);
-  }
-
-  const handleSubmit = async () => {
-    if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
-    }
-
-    // Upload gambar dulu
-    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");
-    }
-
-    // Simpan ID gambar ke form
-    stateCreate.create.form.imageId = uploaded.id;
-
-    // Submit data berita
-    await stateCreate.create.create();
-
-    // Reset form setelah submit
-    resetForm();
-    router.push("/admin/inovasi/kolaborasi-inovasi")
-  }
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Kolaborasi Inovasi</Title>
-          <TextInput
-            label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
-            placeholder="masukkan nama kolaborasi inovasi"
-            onChange={(val) => stateCreate.create.form.name = val.target.value}
-          />
-          <TextInput
-            type='number'
-            label={<Text fz={"sm"} fw={"bold"}>Tahun</Text>}
-            placeholder="masukkan tahun"
-            onChange={(val) => stateCreate.create.form.tahun = parseInt(val.target.value)}
-          />
-          <TextInput
-            onChange={(e) => stateCreate.create.form.slug = e.currentTarget.value}
-            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat Kolaborasi Inovasi</Text>}
-            placeholder='Masukkan deskripsi singkat kolaborasi inovasi'
-          />
-          <TextInput
-            onChange={(e) => stateCreate.create.form.kolaborator = e.currentTarget.value}
-            label={<Text fw={"bold"} fz={"sm"}>Kolaborator</Text>}
-            placeholder='Masukkan kolaborator'
-          />
-          <Box>
-            <Stack gap={"xs"}>
-              <Text fz={"md"} fw={"bold"}>Gambar</Text>
-              <Box>
-                <Dropzone
-                  onDrop={(files) => {
-                    const newImages = files.map((file) => ({
-                      file,
-                      preview: URL.createObjectURL(file),
-                      label: '',
-                    }));
-                    setFile(newImages[0].file);
-                    setPreviewImage(newImages[0].preview); // ← ini yang kurang
-                  }}
-
-                >
-                  <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                    <Dropzone.Accept>
-                      <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                    </Dropzone.Accept>
-                    <Dropzone.Reject>
-                      <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                    </Dropzone.Reject>
-                    <Dropzone.Idle>
-                      <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                    </Dropzone.Idle>
-                    <div>
-                      <Text size="xl" inline>
-                        Drag images here or click to select files
-                      </Text>
-                      <Text size="sm" c="dimmed" inline mt={7}>
-                        Attach as many files as you like, each file should not exceed 5mb
-                      </Text>
-                    </div>
-                  </Group>
-                </Dropzone>
-              </Box>
-              {previewImage ? (
-                <Image alt="" src={previewImage} w={200} h={200} />
-              ) : (
-                <Center w={200} h={200} bg={"gray"}>
-                  <IconImageInPicture />
-                </Center>
-              )}
-            </Stack>
-          </Box>
-          <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
-            <CreateEditor
-              value={stateCreate.create.form.deskripsi}
-              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
-            />
-          </Box>
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-          </Group>
-        </Stack>
-      </Paper>
-    </Box>
-  );
-}
-
-export default CreateProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/layout.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import LayoutTabsKolaborasi from './_lib/layoutTabs';
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <LayoutTabsKolaborasi>
+      {children}
+    </LayoutTabsKolaborasi>
+  );
+}
+
+export default Layout;

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

@@ -2,41 +2,34 @@
 "use client";
 
 import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
+import kolaborasiInovasiState from "@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi";
 import colors from "@/con/colors";
-import ApiFetch from "@/lib/api-fetch";
 import {
   Box,
   Button,
-  Center,
-  FileInput,
-  Image,
   Paper,
   Stack,
   Text,
   TextInput,
   Title
 } from "@mantine/core";
-import { IconArrowBack, IconImageInPicture } from "@tabler/icons-react";
+import { IconArrowBack } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
-import kolaborasiInovasiState from "@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi";
 
 function EditKolaborasiInovasi() {
   const kolaborasiState = useProxy(kolaborasiInovasiState);
   const router = useRouter();
   const params = useParams();
 
-  const [previewImage, setPreviewImage] = useState<string | null>(null);
-  const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
     name: kolaborasiState.update.form.name || '',
     deskripsi: kolaborasiState.update.form.deskripsi || '',
     tahun: kolaborasiState.update.form.tahun || '',
     slug: kolaborasiState.update.form.slug || '',
     kolaborator: kolaborasiState.update.form.kolaborator || '',
-    imageId: kolaborasiState.update.form.imageId || ''
   });
 
   // Load berita by id saat pertama kali
@@ -54,13 +47,7 @@ function EditKolaborasiInovasi() {
             tahun: data.tahun || '',
             slug: data.slug || '',
             kolaborator: data.kolaborator || '',
-            imageId: data.imageId || '',
           });
-          if (data.image) {
-            if (data?.image?.link) {
-              setPreviewImage(data.image.link);
-            }
-          }
         }
       } catch (error) {
         console.error("Error loading berita:", error);
@@ -82,22 +69,7 @@ function EditKolaborasiInovasi() {
         tahun: Number(formData.tahun),
         slug: formData.slug,
         kolaborator: formData.kolaborator,
-        imageId: formData.imageId // Keep existing imageId if not changed
       };
-
-      // Jika ada file baru, upload
-      if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
-        const uploaded = res.data?.data;
-
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
-
-        // Update imageId in global state
-        kolaborasiState.update.form.imageId = uploaded.id;
-      }
-
       await kolaborasiState.update.submit();
       toast.success("Berita berhasil diperbarui!");
       router.push("/admin/inovasi/kolaborasi-inovasi");
@@ -144,28 +116,6 @@ function EditKolaborasiInovasi() {
             label={<Text fz={"sm"} fw={"bold"}>Kolaborator</Text>}
             placeholder="masukkan kolaborator"
           />
-
-          <FileInput
-            label={<Text fz={"sm"} fw={"bold"}>Upload Gambar Baru (Opsional)</Text>}
-            value={file}
-            onChange={async (e) => {
-              if (!e) return;
-              setFile(e);
-              const base64 = await e.arrayBuffer().then((buf) =>
-                "data:image/png;base64," + Buffer.from(buf).toString("base64")
-              );
-              setPreviewImage(base64);
-            }}
-          />
-
-          {previewImage ? (
-            <Image alt="" src={previewImage} w={200} h={200} />
-          ) : (
-            <Center w={200} h={200} bg={"gray"}>
-              <IconImageInPicture />
-            </Center>
-          )}
-
           <Box>
             <Text fz={"sm"} fw={"bold"}>Konten</Text>
             <EditEditor

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/[id]/page.tsx

@@ -1,15 +1,15 @@
 'use client'
 import { useProxy } from 'valtio/utils';
 
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
+import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
 import colors from '@/con/colors';
-import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
-import kolaborasiInovasiState from '../../../_state/inovasi/kolaborasi-inovasi';
 
 function DetailKolaborasiInovasi() {
   const kolaborasiState = useProxy(kolaborasiInovasiState)
@@ -69,10 +69,6 @@ function DetailKolaborasiInovasi() {
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
                   <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: kolaborasiState.findUnique.data?.deskripsi }} />
                 </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={kolaborasiState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Kolaborator</Text>
                   <Text fz={"lg"}>{kolaborasiState.findUnique.data?.kolaborator}</Text>

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/create/page.tsx

@@ -0,0 +1,113 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
+import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
+import colors from '@/con/colors';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { YearPickerInput } from '@mantine/dates';
+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 CreateProgramKreatifDesa() {
+  const stateCreate = useProxy(kolaborasiInovasiState)
+  const router = useRouter();
+
+  const resetForm = () => {
+    stateCreate.create.form = {
+      name: "",
+      tahun: 0,
+      slug: "",
+      deskripsi: "",
+      kolaborator: "",
+    }
+  }
+
+  // Generate slug from name
+  useEffect(() => {
+    const { name } = stateCreate.create.form;
+    if (name) {
+      const slug = name
+        .toLowerCase()
+        .replace(/[^\w\s-]/g, '')
+        .replace(/\s+/g, '-')
+        .replace(/-+/g, '-');
+      stateCreate.create.form.slug = slug;
+    }
+  }, [stateCreate.create.form.name]);
+
+  const handleSubmit = async () => {
+    try {
+      // Submit data kolaborasi inovasi
+      await stateCreate.create.create();
+
+      // Reset form setelah submit
+      resetForm();
+      router.push("/admin/inovasi/kolaborasi-inovasi");
+      toast.success("Berhasil menambahkan kolaborasi inovasi");
+    } catch (error) {
+      console.error("Error creating kolaborasi inovasi:", error);
+      toast.error("Terjadi kesalahan saat menyimpan data");
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={3}>Create Kolaborasi Inovasi</Title>
+          <TextInput
+            label={<Text fz={"sm"} fw={"bold"}>Nama Kolaborasi Inovasi</Text>}
+            placeholder="masukkan nama kolaborasi inovasi"
+            onChange={(val) => stateCreate.create.form.name = val.target.value}
+          />
+          <YearPickerInput
+            clearable
+            value={stateCreate.create.form.tahun ? new Date(stateCreate.create.form.tahun, 0, 1) : null}
+            label="Tahun"
+            placeholder="Pilih tahun"
+            onChange={(dateString: string) => {
+              const year = dateString ? new Date(dateString).getFullYear() : 0;
+              stateCreate.create.form.tahun = year;
+            }}
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(val) => {
+                stateCreate.create.form.deskripsi = val;
+              }}
+            />
+          </Box>
+          <TextInput
+            onChange={(e) => stateCreate.create.form.kolaborator = e.currentTarget.value}
+            label={<Text fw={"bold"} fz={"sm"}>Kolaborator</Text>}
+            placeholder='Masukkan kolaborator'
+          />
+          <Box>
+            <Text fw={"bold"} fz={"sm"}>Deskripsi Kolaborasi Inovasi</Text>
+            <CreateEditor
+              value={stateCreate.create.form.deskripsi}
+              onChange={(htmlContent) => stateCreate.create.form.deskripsi = htmlContent}
+            />
+          </Box>
+          <Group>
+            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateProgramKreatifDesa;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi/page.tsx

@@ -3,11 +3,11 @@
 import colors from '@/con/colors';
 import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
-import kolaborasiInovasiState from '../../_state/inovasi/kolaborasi-inovasi';
+import kolaborasiInovasiState from '../../../_state/inovasi/kolaborasi-inovasi';
 import { useProxy } from 'valtio/utils';
 
 function KolaborasiInovasi() {
@@ -28,22 +28,21 @@ function KolaborasiInovasi() {
 
 function ListKolaborasiInovasi({ search }: { search: string }) {
   const listState = useProxy(kolaborasiInovasiState)
-  const { data, loading, page, totalPages, load } = listState.findMany
   const router = useRouter();
 
-  useEffect(() => {
-    load(page, 10)
-  }, [page])
+  const {
+    data,
+    loading,
+    page,
+    totalPages,
+    load,
+  } = listState.findMany
 
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.slug.toLowerCase().includes(keyword) ||
-      item.kolaborator.toLowerCase().includes(keyword)
-    );
-  });
+  useEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
 
   if (loading || !data) {
     return (
@@ -64,11 +63,11 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
             <Table striped withTableBorder withRowBorders>
               <TableThead>
                 <TableTr>
-                  <TableTh style={{ width: '2%', textAlign: 'center' }}>No</TableTh>
-                  <TableTh style={{ width: '15%' }}>Nama Kolaborasi Inovasi</TableTh>
-                  <TableTh style={{ width: '15%', textAlign: 'center' }}>Tahun</TableTh>
-                  <TableTh style={{ width: '20%' }}>Deskripsi Singkat</TableTh>
-                  <TableTh style={{ width: '5%', textAlign: 'center' }}>Detail</TableTh>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Kolaborasi Inovasi</TableTh>
+                  <TableTh>Tahun</TableTh>
+                  <TableTh>Deskripsi Singkat</TableTh>
+                  <TableTh>Detail</TableTh>
                 </TableTr>
               </TableThead>
             </Table>
@@ -89,21 +88,21 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
         <Table striped withTableBorder withRowBorders>
           <TableThead>
             <TableTr>
-              <TableTh style={{ width: '1%', textAlign: 'center' }}>No</TableTh>
-              <TableTh style={{ width: '15%' }}>Nama Kolaborasi Inovasi</TableTh>
-              <TableTh style={{ width: '5%', textAlign: 'center' }}>Tahun</TableTh>
-              <TableTh style={{ width: '20%' }}>Deskripsi Singkat</TableTh>
-              <TableTh style={{ width: '5%', textAlign: 'center' }}>Detail</TableTh>
+              <TableTh>No</TableTh>
+              <TableTh>Nama Kolaborasi Inovasi</TableTh>
+              <TableTh>Tahun</TableTh>
+              <TableTh>Deskripsi Singkat</TableTh>
+              <TableTh>Detail</TableTh>
             </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item, index) => (
               <TableTr key={item.id}>
-                <TableTd style={{ width: '1%', textAlign: 'center' }}>{index + 1}</TableTd>
-                <TableTd style={{ width: '15%' }}>{item.name}</TableTd>
-                <TableTd style={{ width: '5%', textAlign: 'center' }}>{item.tahun}</TableTd>
-                <TableTd style={{ width: '20%' }}>{item.slug}</TableTd>
-                <TableTd style={{ width: '5%', textAlign: 'center' }}>
+                <TableTd>{index + 1}</TableTd>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>{item.tahun}</TableTd>
+                <TableTd>{item.slug}</TableTd>
+                <TableTd>
                   <Button onClick={() => router.push(`/admin/inovasi/kolaborasi-inovasi/${item.id}`)}>
                     <IconDeviceImac size={20} />
                   </Button>
@@ -116,17 +115,13 @@ function ListKolaborasiInovasi({ search }: { search: string }) {
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0);
-          }}
+          onChange={(newPage) => load(newPage)} // ini penting!
           total={totalPages}
           mt="md"
           mb="md"
         />
       </Center>
-
-    </Box>
+    </Box >
   );
 }
 

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/[id]/page.tsx

@@ -0,0 +1,148 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconImageInPicture, 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 EditFoto() {
+  const state = useProxy(mitraKolaborasi)
+  const router = useRouter();
+  const params = useParams();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+  const [formData, setFormData] = useState({
+    name: state.update.form.name || '',
+    imageId: state.update.form.imageId || ''
+  });
+
+  useEffect(() => {
+    const loadFoto = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+      try {
+        const data = await state.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+            imageId: data.imageId || ''
+          });
+          if (data?.image?.link) {
+            setPreviewImage(data.image.link);
+          }
+        }
+      } catch (error) {
+        console.error('Error loading foto:', error);
+        toast.error('Gagal memuat data foto');
+      }
+    };
+    loadFoto();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      state.update.form = {
+        ...state.update.form,
+        name: formData.name,
+        imageId: formData.imageId
+      };
+      if (file) {
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
+        const uploaded = res.data?.data;
+        if (!uploaded?.id) {
+          return toast.error("Gagal upload gambar");
+        }
+        state.update.form.imageId = uploaded.id;
+      }
+      await state.update.update();
+      toast.success('Mitra berhasil diperbarui!');
+      router.push('/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi');
+    } catch (error) {
+      console.error('Error updating mitra:', error);
+      toast.error('Terjadi kesalahan saat memperbarui mitra');
+    }
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Edit Mitra</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Mitra</Text>}
+            placeholder='Masukkan nama mitra'
+            value={formData.name}
+            onChange={(e) =>
+              (formData.name = e.target.value)
+            }
+          />
+          <Box>
+            <Text>Upload Foto</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0]; // Ambil file pertama
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                }
+              }}
+              onReject={() => toast.error('File tidak valid.')}
+              maxSize={5 * 1024 ** 2} // Maks 5MB
+              accept={{ 'image/*': [] }}
+            >
+              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                <Dropzone.Accept>
+                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+
+                <div>
+                  <Text size="xl" inline>
+                    Drag gambar ke sini atau klik untuk pilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB dan harus format gambar
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewImage ? (
+              <Image alt="" src={previewImage} w={200} h={200} />
+            ) : (
+              <Center w={200} h={200} bg={"gray"}>
+                <IconImageInPicture />
+              </Center>
+            )}
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditFoto;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create/page.tsx

@@ -0,0 +1,136 @@
+'use client'
+import mitraKolaborasi from '@/app/admin/(dashboard)/_state/inovasi/mitra-kolaborasi';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
+import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
+
+
+
+function CreateFoto() {
+  const state = useProxy(mitraKolaborasi)
+  const router = useRouter();
+  const [previewImage, setPreviewImage] = useState<string | null>(null);
+  const [file, setFile] = useState<File | null>(null);
+
+  const resetForm = () => {
+    state.create.form = {
+      name: "",
+      imageId: "",
+    };
+
+    setPreviewImage(null)
+    setFile(null)
+  };
+
+  const handleSubmit = async () => {
+    if (!file) {
+      return toast.warn("Pilih file gambar terlebih dahulu");
+    }
+
+    const res = await ApiFetch.api.fileStorage.create.post({
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
+    if (!uploaded?.id) {
+      return toast.error("Gagal upload gambar");
+    }
+
+    state.create.form.imageId = uploaded.id;
+    await state.create.create();
+    resetForm();
+    router.push("/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi")
+  };
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
+          <IconArrowBack color={colors['blue-button']} size={25} />
+        </Button>
+      </Box>
+
+      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
+        <Stack gap={"xs"}>
+          <Title order={4}>Create Mitra</Title>
+          <TextInput
+            label={<Text fw={"bold"} fz={"sm"}>Nama Mitra</Text>}
+            placeholder='Masukkan nama mitra'
+            value={state.create.form.name}
+            onChange={(val) => {
+              state.create.form.name = val.target.value;
+            }}
+          />
+          <Box>
+            <Text fz={"md"} fw={"bold"}>Gambar</Text>
+            <Box>
+              <Dropzone
+                onDrop={(files) => {
+                  const selectedFile = files[0]; // Ambil file pertama
+                  if (selectedFile) {
+                    setFile(selectedFile);
+                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  }
+                }}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // Maks 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept>
+                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  </Dropzone.Accept>
+                  <Dropzone.Reject>
+                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  </Dropzone.Reject>
+                  <Dropzone.Idle>
+                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  </Dropzone.Idle>
+
+                  <div>
+                    <Text size="xl" inline>
+                      Drag gambar ke sini atau klik untuk pilih file
+                    </Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>
+                      Maksimal 5MB dan harus format gambar
+                    </Text>
+                  </div>
+                </Group>
+              </Dropzone>
+
+              {/* Tampilkan preview kalau ada */}
+              {previewImage && (
+                <Box mt="sm">
+                  <Image
+                    src={previewImage}
+                    alt="Preview"
+                    style={{
+                      maxWidth: '100%',
+                      maxHeight: '200px',
+                      objectFit: 'contain',
+                      borderRadius: '8px',
+                      border: '1px solid #ddd',
+                    }}
+                  />
+                </Box>
+              )}
+
+            </Box>
+          </Box>
+          <Group>
+            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default CreateFoto;

src/app/admin/(dashboard)/inovasi/kolaborasi-inovasi/mitra-kolaborasi/page.tsx

@@ -0,0 +1,187 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+'use client'
+import colors from '@/con/colors';
+import { Box, Button, Center, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { useRouter } from 'next/navigation';
+import { useEffect, useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import HeaderSearch from '../../../_com/header';
+import JudulList from '../../../_com/judulList';
+import mitraKolaborasi from '../../../_state/inovasi/mitra-kolaborasi';
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
+
+function MitraKolaborasi() {
+  const [search, setSearch] = useState('');
+  return (
+    <Box>
+      <HeaderSearch
+        title='Mitra Kolaborasi'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListMitraKolaborasi search={search} />
+    </Box>
+  );
+}
+
+function ListMitraKolaborasi({ search }: { search: string }) {
+  const listState = useProxy(mitraKolaborasi)
+  const router = useRouter();
+  const [modalHapus, setModalHapus] = useState(false)
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  const handleHapus = () => {
+    if (selectedId) {
+      mitraKolaborasi.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/inovasi/kolaborasi-inovasi")
+    }
+  }
+
+  const {
+    data,
+    loading,
+    page,
+    totalPages,
+    load,
+  } = listState.findMany
+
+  useEffect(() => {
+    load(page, 10, search)
+  }, [page, search])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md" >
+          <Stack>
+            <JudulList
+              title='List Mitra Kolaborasi'
+              href='/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create'
+            />
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama Mitra</TableTh>
+                  <TableTh>Image</TableTh>
+                  <TableTh>Delete</TableTh>
+                  <TableTh>Edit</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data mitra kolaborasi yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
+
+  return (
+    <Box py={10}>
+      <Paper bg={colors['white-1']} p={'md'}>
+        <JudulList
+          title='List Mitra Kolaborasi'
+          href='/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create'
+        />
+        <Table striped withTableBorder withRowBorders>
+          <TableThead>
+            <TableTr>
+              <TableTh>No</TableTh>
+              <TableTh>Nama Mitra</TableTh>
+              <TableTh>Image</TableTh>
+              <TableTh>Delete</TableTh>
+              <TableTh>Edit</TableTh>
+            </TableTr>
+          </TableThead>
+          <TableTbody>
+            {filteredData.map((item, index) => (
+              <TableTr key={item.id}>
+                <TableTd>{index + 1}</TableTd>
+                <TableTd>{item.name}</TableTd>
+                <TableTd>
+                  <Box style={{
+                    width: 100,
+                    height: 100,
+                    position: 'relative',
+                    overflow: 'hidden',
+                    borderRadius: 4
+                  }}>
+                    <Image
+                      src={item.image?.link || ''}
+                      alt={item.name}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                        objectPosition: 'center'
+                      }}
+                    />
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    onClick={() => {
+                      if (item) {
+                        setSelectedId(item.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={mitraKolaborasi.delete.loading || !item}
+                    color={"red"}
+                  >
+                    <IconX size={20} />
+                  </Button>
+                </TableTd>
+                <TableTd>
+                  <Button
+                    onClick={() => {
+                      if (item) {
+                        router.push(`/admin/inovasi/kolaborasi-inovasi/mitra-kolaborasi/${item.id}`);
+                      }
+                    }}
+                    disabled={!item}
+                    color={"green"}
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
+          </TableTbody>
+        </Table>
+      </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
+      {/* Modal Konfirmasi Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text='Apakah anda yakin ingin menghapus mitra kolaborasi ini?'
+      />
+    </Box >
+  );
+}
+
+export default MitraKolaborasi;

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/[id]/page.tsx

@@ -54,6 +54,10 @@ function DetailKeamananLingkungan() {
           {keamananState.findUnique.data ? (
             <Paper key={keamananState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
               <Stack gap={"xs"}>
+                <Box>
+                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
+                  <Image w={{ base: 150, md: 490}} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
+                </Box>
                 <Box>
                   <Text fw={"bold"} fz={"lg"}>Judul Keamanan Lingkungan</Text>
                   <Text fz={"lg"}>{keamananState.findUnique.data?.name}</Text>
@@ -62,10 +66,6 @@ function DetailKeamananLingkungan() {
                   <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
                   <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: keamananState.findUnique.data?.deskripsi }} />
                 </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={keamananState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
                 <Flex gap={"xs"} mt={10}>
                   <Button
                     onClick={() => {

src/app/admin/(dashboard)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -30,19 +30,21 @@ function ListKeamananLingkungan({ search }: { search: string }) {
   const keamananState = useProxy(keamananLingkunganState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = keamananState.findMany;
+
   useShallowEffect(() => {
-    keamananState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (keamananState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!keamananState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -67,9 +69,15 @@ function ListKeamananLingkungan({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.name}</TableTd>
                 <TableTd>
-                  <Text fz={"md"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  <Box w={180}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.name}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={250}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/keamanan/keamanan-lingkungan-pecalang-patwal/${item.id}`)}>
@@ -81,6 +89,14 @@ function ListKeamananLingkungan({ search }: { search: string }) {
           </TableTbody>
         </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my={"md"}
+        />
+      </Center>
     </Box>
   );
 }

src/app/admin/(dashboard)/keamanan/polsek-terdekat/page.tsx

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -21,7 +21,7 @@ function PolsekTerdekat() {
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
-      <ListPolsekTerdekat search={search}/>
+      <ListPolsekTerdekat search={search} />
     </Box>
   );
 }
@@ -30,20 +30,21 @@ function ListPolsekTerdekat({ search }: { search: string }) {
   const polsekState = useProxy(polsekTerdekat)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = polsekState.findMany;
+
   useShallowEffect(() => {
-    polsekState.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (polsekState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword) ||
-      item.jarakKeDesa.toLowerCase().includes(keyword) ||
-      item.alamat.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!polsekState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -64,24 +65,44 @@ function ListPolsekTerdekat({ search }: { search: string }) {
               <TableTh>Jarak Polsek</TableTh>
               <TableTh>Alamat</TableTh>
               <TableTh>Detail</TableTh>
-              </TableTr>
+            </TableTr>
           </TableThead>
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.nama}</TableTd>
-                <TableTd>{item.jarakKeDesa}</TableTd>
-                <TableTd>{item.alamat}</TableTd>
+                <TableTd>
+                  <Box w={180}>
+                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.nama}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={180}>
+                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.jarakKeDesa}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={250}>
+                    <Text fz='md' truncate={"end"} lineClamp={1}>{item.alamat}</Text>
+                  </Box>
+                </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/keamanan/polsek-terdekat/${item.id}`)}>
-                  <IconDeviceImac size={20} />
-                </Button>
-              </TableTd>
-            </TableTr>
-          ))}
+                    <IconDeviceImac size={20} />
+                  </Button>
+                </TableTd>
+              </TableTr>
+            ))}
           </TableTbody>
-        </Table>  
+        </Table>
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Box>
   );
 }

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

@@ -1,6 +1,6 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
 import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../_com/header';
 import JudulList from '../../_com/judulList';
@@ -30,19 +30,21 @@ function ListTipsKeamanan({ search }: { search: string }) {
   const stateKeamanan = useProxy(tipsKeamananState)
   const router = useRouter();
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = stateKeamanan.findMany
+
   useShallowEffect(() => {
-    stateKeamanan.findMany.load()
-  }, [])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (stateKeamanan.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.judul.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!stateKeamanan.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -67,9 +69,15 @@ function ListTipsKeamanan({ search }: { search: string }) {
           <TableTbody>
             {filteredData.map((item) => (
               <TableTr key={item.id}>
-                <TableTd>{item.judul}</TableTd>
                 <TableTd>
-                  <Text fz={"xs"} dangerouslySetInnerHTML={{__html: item.deskripsi}} />
+                  <Box w={150}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.judul}</Text>
+                  </Box>
+                </TableTd>
+                <TableTd>
+                  <Box w={250}>
+                    <Text fz={"md"} truncate={"end"} lineClamp={1} dangerouslySetInnerHTML={{__html: item.deskripsi}} />
+                  </Box>
                 </TableTd>
                 <TableTd>
                   <Button onClick={() => router.push(`/admin/keamanan/tips-keamanan/${item.id}`)}>
@@ -81,6 +89,14 @@ function ListTipsKeamanan({ search }: { search: string }) {
           </TableTbody>
         </Table>  
       </Paper>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)}
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Box>
   );
 }