Fix Menu Lingkungan Darmasaba User

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/schema.prisma

@@ -85,7 +85,6 @@ model FileStorage {
   KontakItem                     KontakItem[]
   Pegawai                        Pegawai[]
   DesaDigital                    DesaDigital[]
-  KolaborasiInovasi              KolaborasiInovasi[]
   InfoTekno                      InfoTekno[]
   PengaduanMasyarakat            PengaduanMasyarakat[]
   KegiatanDesa                   KegiatanDesa[]
@@ -100,6 +99,8 @@ model FileStorage {
   DataPerpustakaan               DataPerpustakaan[]
   PegawaiPPID                    PegawaiPPID[]
   PerbekelDariMasaKeMasa         PerbekelDariMasaKeMasa[]
+
+  MitraKolaborasi MitraKolaborasi[]
 }
 
 //========================================= MENU LANDING PAGE ========================================= //
@@ -201,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())
@@ -223,7 +224,7 @@ model KategoriPrestasiDesa {
 model Responden {
   id             String                 @id @default(cuid())
   name           String                 @unique
-  tanggal        String // misal: 2025-05-01
+  tanggal        DateTime               @db.Date // misal: 2025-05-01
   jenisKelamin   JenisKelaminResponden  @relation(fields: [jenisKelaminId], references: [id])
   jenisKelaminId String
   rating         PilihanRatingResponden @relation(fields: [ratingId], references: [id])
@@ -1644,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,57 +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 },
@@ -106,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({
@@ -160,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({
@@ -217,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: {
@@ -236,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: {
@@ -255,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: {
@@ -274,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 },
@@ -298,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: {
@@ -317,6 +396,35 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
 
   console.log("visi misi desa success ...");
 
+  // =========== MENU PPID ===========
+  // =========== SUBMENU PROFILE PPID ===========
+  for (const c of profilePPID) {
+    await prisma.profilePPID.upsert({
+      where: { id: c.id },
+      update: {
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-update
+      },
+      create: {
+        id: c.id,
+        name: c.name,
+        biodata: c.biodata,
+        riwayat: c.riwayat,
+        pengalaman: c.pengalaman,
+        unggulan: c.unggulan,
+        // imageId tidak di-create
+      },
+    });
+  }
+  console.log("✅ profilePPID seeded without imageId (editable later via UI)");
+
+  // =========== SUBMENU STRUKTUR PPID ===========
+  // =========== POSISI ORGANISASI PPID ===========
+
   const flattenedPosisi = posisiOrganisasiPPID.flat();
 
   // ✅ Urutkan berdasarkan hierarki
@@ -341,9 +449,9 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
       create: p,
     });
   }
-  console.log("✅ Posisi organisasi berhasil");
+  console.log("posisi organisasi berhasil");
 
-  // 2. Seed Pegawai
+  // =========== PEGAWAI PPID ===========
   const flattenedPegawai = pegawaiPPID.flat();
   for (const p of flattenedPegawai) {
     await prisma.pegawaiPPID.upsert({
@@ -352,7 +460,70 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
       create: p,
     });
   }
-  console.log("✅ Pegawai berhasil");
+  console.log("pegawai berhasil");
+
+  // =========== SUBMENU VISI MISI PPID ===========
+
+  for (const v of visiMisiPPID) {
+    await prisma.visiMisiPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        misi: v.misi,
+        visi: v.visi,
+      },
+      create: {
+        id: v.id,
+        misi: v.misi,
+        visi: v.visi,
+      },
+    });
+  }
+  console.log("visi misi PPID success ...");
+
+  // =========== SUBMENU DASAR HUKUM PPID ===========
+  for (const v of dasarHukumPPID) {
+    await prisma.dasarHukumPPID.upsert({
+      where: {
+        id: v.id,
+      },
+      update: {
+        judul: v.judul,
+        content: v.content,
+      },
+      create: {
+        id: v.id,
+        judul: v.judul,
+        content: v.content,
+      },
+    });
+  }
+  console.log("dasar hukum PPID success ...");
+
+    // =========== SUBMENU DAFTAR INFORMASI PUBLIK PPID ===========
+    for (const v of daftarInformasiPublik) {
+      // Convert string date to Date object
+      const tanggal = new Date(v.tanggal);
+      
+      await prisma.daftarInformasiPublik.upsert({
+        where: {
+          id: v.id,
+        },
+        update: {
+          jenisInformasi: v.jenisInformasi,
+          deskripsi: v.deskripsi,
+          tanggal: tanggal,
+        },
+        create: {
+          id: v.id,
+          jenisInformasi: v.jenisInformasi,
+          deskripsi: v.deskripsi,
+          tanggal: tanggal,
+        },
+      });
+    }
+    console.log("daftar informasi publik PPID success ...");
 
   for (const l of pelayananPerizinanBerusaha) {
     await prisma.pelayananPerizinanBerusaha.upsert({
@@ -486,48 +657,6 @@ 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({
-      where: {
-        id: v.id,
-      },
-      update: {
-        misi: v.misi,
-        visi: v.visi,
-      },
-      create: {
-        id: v.id,
-        misi: v.misi,
-        visi: v.visi,
-      },
-    });
-  }
-  console.log("visi misi PPID success ...");
-
   for (const j of jenisKelamin) {
     await prisma.jenisKelaminResponden.upsert({
       where: {
@@ -576,24 +705,6 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
   }
   console.log("umur responden success ...");
 
-  for (const v of dasarHukumPPID) {
-    await prisma.dasarHukumPPID.upsert({
-      where: {
-        id: v.id,
-      },
-      update: {
-        judul: v.judul,
-        content: v.content,
-      },
-      create: {
-        id: v.id,
-        judul: v.judul,
-        content: v.content,
-      },
-    });
-  }
-  console.log("dasar hukum PPID success ...");
-
   for (const k of kategoriProduk) {
     await prisma.kategoriProduk.upsert({
       where: {
@@ -681,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,
@@ -693,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/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/landing-page/prestasi-desa.ts

@@ -59,7 +59,12 @@ const prestasiDesa = proxy({
       Prisma.PrestasiDesaGetPayload<{
         include: {
           image: true;
-          kategori: true;
+          kategori: {
+            select: {
+              id: true;
+              name: true;
+            };
+          };
         };
       }>
     > | null,

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

@@ -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>
@@ -108,4 +108,3 @@ function DetailJumlahPengangguran() {
 }
 
 export default DetailJumlahPengangguran;
-

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

@@ -57,7 +57,7 @@ function ListDetailDataPengangguran({search}: {search: string}) {
       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),

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/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)/landing-page/indeks-kepuasan-masyarakat/_lib/layoutTab.tsx

@@ -0,0 +1,63 @@
+/* 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 LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
+    const router = useRouter()
+    const pathname = usePathname()
+    const tabs = [
+        {
+            label: "Grafik Kepuasan Masyarakat",
+            value: "grafikkepuasannamasyarakat",
+            href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat"
+        },
+        {
+            label: "Responden",
+            value: "responden",
+            href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden"
+        },
+        
+    ];
+    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}>Indeks Kepuasan Masyarakat</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 LayoutTabsKepuasan;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat/page.tsx

@@ -0,0 +1,256 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client';
+import colors from '@/con/colors';
+import { PieChart, BarChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
+import {
+  Box,
+  Center,
+  Flex,
+  Paper,
+  SimpleGrid,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+} from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
+import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
+
+interface ChartDataItem {
+  name: string;
+  value: number;
+  color: string;
+  label?: string;
+}
+
+
+
+function Page() {
+  const state = useProxy(indeksKepuasanState.responden);
+  const { data, loading } = state.findMany;
+  const [donutDataJenisKelamin, setDonutDataJenisKelamin] = useState<ChartDataItem[]>([]);
+  const [donutDataRating, setDonutDataRating] = useState<ChartDataItem[]>([]);
+  const [donutDataKelompokUmur, setDonutDataKelompokUmur] = useState<ChartDataItem[]>([]);
+  const [barChartData, setBarChartData] = useState<Array<{ month: string; count: number }>>([]);
+
+  useShallowEffect(() => {
+    if (!data && !loading) {
+      state.findMany.load();
+      return;
+    }
+    if (data) {
+      // Hitung total berdasarkan jenis kelamin
+      const totalLaki = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'laki-laki').length;
+      const totalPerempuan = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'perempuan').length;
+
+      // Hitung total berdasarkan rating
+      const totalSangatBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat baik').length;
+      const totalBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'baik').length;
+      const totalKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'kurang baik').length;
+      const totalSangatKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat kurang baik').length;
+
+      // Hitung total berdasarkan kelompok umur
+      const totalMuda = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'muda').length;
+      const totalDewasa = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'dewasa').length;
+      const totalLansia = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'lansia').length;
+
+      // Update gender chart data
+      setDonutDataJenisKelamin([
+        { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
+        { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
+      ]);
+
+      // Update rating chart data
+      setDonutDataRating([
+        { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
+        { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
+        { name: 'Kurang Baik', value: totalKurangBaik, color: '#FFA500' },
+        { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
+      ]);
+
+      // Update age group chart data
+      setDonutDataKelompokUmur([
+        { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
+        { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
+        { name: 'Lansia', value: totalLansia, color: '#FFA500' },
+      ]);
+
+      // Process data for bar chart (group by month)
+      const monthYearMap = new Map<string, number>();
+
+      data.forEach((item: any) => {
+        // Try both createdAt and tanggal fields
+        const dateValue = item.tanggal || item.createdAt;
+        if (!dateValue) return;
+
+        const parsedDate = new Date(dateValue);
+        if (isNaN(parsedDate.getTime())) return;
+
+        const month = parsedDate.getMonth() + 1;
+        const year = parsedDate.getFullYear();
+        const monthYearKey = `${year}-${String(month).padStart(2, '0')}`;
+
+        monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
+      });
+
+      // Convert map to array and sort by date
+      const barData = Array.from(monthYearMap.entries())
+        .map(([key, count]) => {
+          const [year, month] = key.split('-');
+          const monthName = new Date(Number(year), Number(month) - 1, 1)
+            .toLocaleString('id-ID', { month: 'long' });
+          return {
+            month: `${monthName} ${year}`,
+            count,
+            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
+          };
+        })
+        .sort((a, b) => a.sortKey - b.sortKey)
+        .map(({ month, count }) => ({ month, count }));
+
+      setBarChartData(barData);
+    }
+  }, [data]);
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Stack py={10}>
+        <Text c="dimmed" ta="center" my="md">
+          Belum ada data untuk ditampilkan
+        </Text>
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack gap="xs">
+      {/* Bar Chart - Data per Tanggal */}
+      <Paper bg={colors['white-1']} p="md" radius="md" mb="md">
+        <Title order={4} mb="md" ta="center">Jumlah Responden per Bulan</Title>
+        <Box h={300}>
+          <BarChart
+            h={300}
+            data={barChartData}
+            dataKey="month"
+            series={[{ name: 'count', color: colors['blue-button'] }]}
+            tickLine="y"
+            xAxisLabel="Bulan"
+            yAxisLabel="Jumlah Responden"
+            withTooltip
+            tooltipAnimationDuration={200}
+          />
+        </Box>
+      </Paper>
+
+      <SimpleGrid cols={{ base: 1, md: 3 }}>
+        {/* Chart Jenis Kelamin */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Jenis Kelamin</Title>
+            {donutDataJenisKelamin.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataJenisKelamin}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataJenisKelamin.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
+
+        {/* Chart Rating */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Pilihan</Title>
+            {donutDataRating.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataRating}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataRating.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
+
+        {/* Chart Kelompok Umur */}
+        <Paper bg={colors['white-1']} p="md" radius="md">
+          <Stack>
+            <Title order={4}>Umur</Title>
+            {donutDataKelompokUmur.every(item => item.value === 0) ? (
+              <Text c="dimmed" ta="center" my="md">
+                Belum ada data untuk ditampilkan dalam grafik
+              </Text>
+            ) : (
+              <Box>
+                <Center>
+                  <PieChart
+                    withLabels
+                    withTooltip
+                    labelsType="percent"
+                    size={250}
+                    data={donutDataKelompokUmur}
+                  />
+                </Center>
+                <Stack gap="sm" mt="md">
+                  {donutDataKelompokUmur.map((entry) => (
+                    <Flex key={entry.name} gap="md" align="center">
+                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
+                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    </Flex>
+                  ))}
+                </Stack>
+              </Box>
+            )}
+          </Stack>
+        </Paper>
+      </SimpleGrid>
+    </Stack>
+  );
+}
+
+export default Page;

src/app/admin/(dashboard)/landing-page/indeks-kepuasan-masyarakat/layout.tsx

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

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

@@ -0,0 +1,190 @@
+'use client'
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useEffect, useState } from 'react';
+import { useRouter, useParams } from 'next/navigation';
+import { useProxy } from 'valtio/utils';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput, Text, Select } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
+import { toast } from 'react-toastify';
+
+interface FormResponden {
+  name: string;
+  tanggal: string;
+  jenisKelaminId: string;
+  ratingId: string;
+  kelompokUmurId: string;
+}
+
+function EditResponden() {
+  const router = useRouter()
+  const params = useParams() as { id: string }
+  const state = useProxy(indeksKepuasanState.responden)
+  const id = params.id
+  const [formData, setFormData] = useState<FormResponden>({
+    name: '',
+    tanggal: '',
+    jenisKelaminId: '',
+    ratingId: '',
+    kelompokUmurId: '',
+  })
+  useEffect(() => {
+    indeksKepuasanState.jenisKelaminResponden.findMany.load();
+    indeksKepuasanState.pilihanRatingResponden.findMany.load();
+    indeksKepuasanState.kelompokUmurResponden.findMany.load();
+
+    const loadResponden = async () => {
+      const id = params?.id as string;
+      if (!id) return;
+
+      try {
+        const data = await state.update.load(id);
+        if (data) {
+          state.update.id = id;
+
+          state.update.form = {
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          };
+
+          setFormData({
+            name: data.name,
+            tanggal: data.tanggal,
+            jenisKelaminId: data.jenisKelaminId,
+            ratingId: data.ratingId,
+            kelompokUmurId: data.kelompokUmurId,
+          });
+
+
+        }
+      } catch (error) {
+        console.error("Error loading program penghijauan:", error);
+        toast.error("Gagal memuat data program penghijauan");
+      }
+    }
+
+    loadResponden();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    state.update.id = id;
+    state.update.form = { ...formData }; // <-- sinkronisasi manual
+    await state.update.submit();
+    router.push('/admin/ppid/ikm-desa-darmasaba/responden')
+  }
+
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Edit Responden</Title>
+          <TextInput
+            label="Nama"
+            type='text'
+            placeholder="masukkan nama"
+            value={formData.name}
+            onChange={(val) => {
+              setFormData({
+                ...formData,
+                name: val.currentTarget.value
+              })
+            }}
+          />
+          <TextInput
+            label="Tanggal"
+            type="date"
+            placeholder='Pilih tanggal'
+            value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
+            onChange={(e) => {
+              const selectedDate = e.currentTarget.value;
+              setFormData({
+                ...formData,
+                tanggal: selectedDate,
+              });
+            }}
+          />
+          <Select
+            key={"jenisKelamin"}
+            label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+            placeholder="Pilih jenis kelamin"
+            value={formData.jenisKelaminId}
+            onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
+            data={
+              (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null/undefined
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
+            }
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading} // ✅ disable saat loading
+            clearable
+            searchable
+            required
+            error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
+          />
+          <Select
+            key={"rating"}
+            value={formData.ratingId}
+            onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
+            label={<Text fw={"bold"} fz={"sm"}>Rating</Text>}
+            placeholder='Pilih rating'
+            data={
+              (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                .filter(Boolean)
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
+            }
+            disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+            clearable
+            searchable
+            required
+            error={!formData.ratingId ? "Pilih rating" : undefined}
+          />
+
+          <Select
+            key={"kelompokUmur"}
+            value={formData.kelompokUmurId}
+            onChange={(val) => setFormData({ ...formData, kelompokUmurId: val || "" })}
+            label={<Text fw={"bold"} fz={"sm"}>Kelompok Umur</Text>}
+            placeholder='Pilih kelompok umur'
+            data={
+              (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                .filter(Boolean)
+                .map((v) => ({
+                  value: v.id || '',
+                  label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
+                }))
+            }
+            disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+            clearable
+            searchable
+            required
+            error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
+          />
+
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default EditResponden;

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

@@ -0,0 +1,116 @@
+'use client'
+
+import { ModalKonfirmasiHapus } from "@/app/admin/(dashboard)/_com/modalKonfirmasiHapus"
+import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan"
+import colors from "@/con/colors"
+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 { useRouter, useParams } from "next/navigation"
+import { useState } from "react"
+import { useProxy } from "valtio/utils"
+
+export default function DetailResponden() {
+  const [modalHapus, setModalHapus] = useState(false)
+  const stateDetail = useProxy(indeksKepuasanState.responden)
+  const router = useRouter()
+  const params = useParams()
+  const [selectedId, setSelectedId] = useState<string | null>(null)
+
+  useShallowEffect(() => {
+    stateDetail.findUnique.load(params?.id as string)
+  }, [params?.id])
+
+  const handleHapus = () => {
+    if (selectedId) {
+      stateDetail.delete.byId(selectedId)
+      setModalHapus(false)
+      setSelectedId(null)
+      router.push("/admin/ppid/ikm-desa-darmasaba/responden")
+    }
+  }
+
+  if (!stateDetail.findUnique.data) {
+    return (
+      <Stack>
+        <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 w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
+        <Stack>
+          <Text fz={"xl"} fw={"bold"}>Detail Responden</Text>
+
+          <Paper bg={colors['BG-trans']} p={'md'}>
+            <Stack gap={"xs"}>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Nama Responden</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Tanggal</Text>
+                <Text fz={"lg"}>{
+                  stateDetail.findUnique.data?.tanggal
+                    ? new Date(stateDetail.findUnique.data.tanggal).toLocaleDateString('id-ID')
+                    : '-'
+                }</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Jenis Kelamin</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.jenisKelamin?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Rating</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.rating?.name}</Text>
+              </Box>
+              <Box>
+                <Text fz={"lg"} fw={"bold"}>Kelompok Umur</Text>
+                <Text fz={"lg"}>{stateDetail.findUnique.data?.kelompokUmur?.name}</Text>
+              </Box>
+              <Flex gap={"xs"} mt={10}>
+                <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      setSelectedId(stateDetail.findUnique.data.id);
+                      setModalHapus(true);
+                    }
+                  }}
+                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
+                  color={"red"}
+                >
+                  <IconX size={20} />
+                </Button>
+                <Button
+                  onClick={() => {
+                    if (stateDetail.findUnique.data) {
+                      router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${stateDetail.findUnique.data.id}/edit`);
+                    }
+                  }}
+                  disabled={!stateDetail.findUnique.data}
+                  color={"green"}
+                >
+                  <IconEdit size={20} />
+                </Button>
+              </Flex>
+            </Stack>
+          </Paper>
+        </Stack>
+      </Paper>
+
+      {/* Modal Hapus */}
+      <ModalKonfirmasiHapus
+        opened={modalHapus}
+        onClose={() => setModalHapus(false)}
+        onConfirm={handleHapus}
+        text="Apakah anda yakin ingin menghapus responden ini?"
+      />
+    </Box>
+  )
+}

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

@@ -0,0 +1,148 @@
+'use client'
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import grafikBerdasarkanJenisKelamin from '@/app/admin/(dashboard)/_state/ppid/indeks_kepuasan_masyarakat/grafikBerdasarkanJenisKelamin';
+import { useProxy } from 'valtio/utils';
+import { useState } from 'react';
+import colors from '@/con/colors';
+import { Box, Button, Paper, Stack, Title, TextInput, Select, Text } from '@mantine/core';
+import { IconArrowBack } from '@tabler/icons-react';
+import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
+import { useShallowEffect } from '@mantine/hooks';
+
+function RespondenCreate() {
+  const router = useRouter();
+  const stategrafikBerdasarkanResponden = useProxy(indeksKepuasanState.responden)
+  const [donutData, setDonutData] = useState<any[]>([]);
+
+  const resetForm = () => {
+    stategrafikBerdasarkanResponden.create.form = {
+      ...stategrafikBerdasarkanResponden.create.form,
+      name: "",
+      tanggal: "",
+      jenisKelaminId: "",
+      ratingId: "",
+      kelompokUmurId: "",
+    }
+  }
+
+  useShallowEffect(() => {
+    indeksKepuasanState.jenisKelaminResponden.findMany.load()
+    indeksKepuasanState.pilihanRatingResponden.findMany.load()
+    indeksKepuasanState.kelompokUmurResponden.findMany.load()
+  })
+
+  const handleSubmit = async () => {
+    try {
+      const id = await stategrafikBerdasarkanResponden.create.create();
+      if (typeof id !== 'undefined') {
+        const idStr = String(id);
+        await stategrafikBerdasarkanResponden.findUnique.load(idStr);
+        if (stategrafikBerdasarkanResponden.findUnique.data) {
+          setDonutData([stategrafikBerdasarkanResponden.findUnique.data]);
+        }
+      }
+      resetForm();
+      router.push("/admin/ppid/ikm-desa-darmasaba/responden");
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  }
+  return (
+    <Box>
+      <Box mb={10}>
+        <Button variant="subtle" onClick={() => router.back()}>
+          <IconArrowBack size={20} />
+        </Button>
+      </Box>
+      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
+        <Stack>
+          <Title order={3}>Grafik Hasil Kepuasan Masyarakat Terhadap Pelayanan Publik</Title>
+          <TextInput
+            label="Nama"
+            type='text'
+            placeholder="masukkan nama"
+            value={stategrafikBerdasarkanResponden.create.form.name}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.name = val.currentTarget.value;
+            }}
+          />
+          <TextInput
+            label="Tanggal"
+            type="date"
+            placeholder="masukkan tanggal"
+            value={stategrafikBerdasarkanResponden.create.form.tanggal}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.tanggal = val.currentTarget.value;
+            }}
+          />
+          <Select
+            key={"jenisKelamin"}
+            label={"Jenis Kelamin"}
+            placeholder={indeksKepuasanState.jenisKelaminResponden.findMany.loading ? 'Memuat...' : 'Pilih jenis kelamin'}
+            value={stategrafikBerdasarkanResponden.create.form.jenisKelaminId || ""}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.jenisKelaminId = val ?? "";
+            }}
+            data={
+              (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null, undefined, dll
+                .map((item) => ({
+                  value: item.id,
+                  label: item.name || 'Tanpa Nama',
+                }))
+            }
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
+          />
+            <Select
+            key={"rating_responden"}
+              label={"Rating"}
+              placeholder={indeksKepuasanState.pilihanRatingResponden.findMany.loading ? 'Memuat...' : 'Pilih rating'}
+              value={stategrafikBerdasarkanResponden.create.form.ratingId || ""}
+              onChange={(val) => {
+                stategrafikBerdasarkanResponden.create.form.ratingId = val ?? "";
+              }}
+              data={
+                (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
+                  .filter(Boolean) // Hapus null, undefined, dll
+                  .map((item) => ({
+                    value: item.id,
+                    label: item.name || 'Tanpa Nama',
+                  }))
+              }
+              disabled={indeksKepuasanState.pilihanRatingResponden.findMany.loading}
+            />
+          <Select
+            key={"kelompokUmur"}
+            label={"Kelompok Umur"}
+            placeholder={indeksKepuasanState.kelompokUmurResponden.findMany.loading ? 'Memuat...' : 'Pilih kelompok umur'}
+            value={stategrafikBerdasarkanResponden.create.form.kelompokUmurId || ""}
+            onChange={(val) => {
+              stategrafikBerdasarkanResponden.create.form.kelompokUmurId = val ?? "";
+            }}
+            data={
+              (indeksKepuasanState.kelompokUmurResponden.findMany.data || [])
+                .filter(Boolean) // Hapus null, undefined, dll
+                .map((item) => ({
+                  value: item.id,
+                  label: item.name || 'Tanpa Nama',
+                }))
+            }
+            disabled={indeksKepuasanState.kelompokUmurResponden.findMany.loading}
+          />
+          <Button
+            mt={10}
+            bg={colors['blue-button']}
+            onClick={handleSubmit}
+          >
+            Submit
+          </Button>
+        </Stack>
+      </Paper>
+    </Box>
+  );
+}
+
+export default RespondenCreate;

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

@@ -0,0 +1,144 @@
+'use client';
+import colors from '@/con/colors';
+import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
+import { 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 indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
+
+function Responden() {
+  const [search, setSearch] = useState("");
+  return (
+    <Box>
+      <HeaderSearch
+        title='Responden'
+        placeholder='pencarian'
+        searchIcon={<IconSearch size={20} />}
+        value={search}
+        onChange={(e) => setSearch(e.currentTarget.value)}
+      />
+      <ListResponden search={search} />
+    </Box>
+  );
+}
+
+interface ListRespondenProps {
+  search: string;
+}
+
+function ListResponden({ search }: ListRespondenProps) {
+  const state = useProxy(indeksKepuasanState.responden);
+  const router = useRouter();
+  const { data, page, totalPages, loading, load } = state.findMany;
+
+
+  useShallowEffect(() => {
+    load(page, 10)
+  }, [page]);
+
+
+  const filteredData = (data || []).filter(item => {
+    const keyword = search.toLowerCase();
+    return (
+      item.name.toLowerCase().includes(keyword)
+    );
+  });
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={730} />
+      </Stack>
+    );
+  }
+  if (data.length === 0) {
+    return (
+      <Box py={10}>
+        <Paper p="md">
+          <Stack>
+            <Title>Responden</Title>
+            <Table striped withTableBorder withRowBorders>
+              <TableThead>
+                <TableTr>
+                  <TableTh>No</TableTh>
+                  <TableTh>Nama</TableTh>
+                  <TableTh>Tanggal</TableTh>
+                  <TableTh>Jenis Kelamin</TableTh>
+                  <TableTh>Detail</TableTh>
+                </TableTr>
+              </TableThead>
+            </Table>
+            <Text ta="center">Tidak ada data berdasarkan jenis kelamin responden yang tersedia</Text>
+          </Stack>
+        </Paper>
+      </Box >
+    );
+  }
+
+  return (
+    <Box>
+      <Stack gap="xs">
+        <Paper bg={colors['white-1']} p="md" h={{ base: 730, md: 650 }}>
+          <Title mb={10} order={3}>List Responden</Title>
+          <Table striped withTableBorder withRowBorders>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Nama</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={6}>
+                    <Text ta='center' c='dimmed'>Belum ada data responden</Text>
+                  </TableTd>
+                </TableTr>
+              ) : (
+                filteredData.map((item, index) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.name}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
+                      ? new Date(item.tanggal).toLocaleDateString('id-ID')
+                      : '-'}</TableTd>
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.jenisKelamin.name}</TableTd>
+                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
+                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}>
+                        <IconDeviceImac size={20} />
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
+            </TableTbody>
+          </Table>
+        </Paper>
+        <Center>
+          <Pagination
+            value={page}
+            onChange={(newPage) => {
+              load(newPage, 10);
+              window.scrollTo(0, 0);
+            }}
+            total={totalPages}
+            mt="md"
+            mb="md"
+          />
+        </Center>
+
+       
+      </Stack>
+    </Box>
+  );
+}
+
+export default Responden;
+
+

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

@@ -39,8 +39,22 @@ function ListPrestasi({ search }: { search: string }) {
     load,
   } = listState.findMany
 
+  // Debug log
+  console.log('ListPrestasi state:', {
+    loading,
+    data: data?.length,
+    page,
+    totalPages,
+    search
+  });
+
   useEffect(() => {
-    load(page, 10, search)
+    console.log('Loading data...', { page, search });
+    load(page, 10, search).then(() => {
+      console.log('Data loaded:', listState.findMany.data);
+    }).catch(error => {
+      console.error('Error loading data:', error);
+    });
   }, [page, search])
 
   const filteredData = data || []
@@ -84,7 +98,7 @@ function ListPrestasi({ search }: { search: string }) {
                         <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
                       </Box>
                     </TableTd>
-                    <TableTd>{item.kategori?.name}</TableTd>
+                    <TableTd>{item.kategori?.name || 'No Category'}</TableTd>
                     <TableTd>
                       <Button onClick={() => router.push(`/admin/landing-page/prestasi-desa/list-prestasi-desa/${item.id}`)}>
                         <IconDeviceImacCog size={25} />

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

@@ -42,18 +42,10 @@ function ListDataLingkunganDesa({ search }: { search: string }) {
   const router = useRouter();
 
   useEffect(() => {
-    load(page, 10)
-  }, [page])
+    load(page, 10, search)
+  }, [page, search])
 
-  const filteredData = (data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword) ||
-      item.jumlah.toLowerCase().includes(keyword) ||
-      item.icon.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
   const iconMap: Record<string, React.FC<any>> = {
     ekowisata: IconLeaf,

src/app/admin/(dashboard)/lingkungan/program-penghijauan/page.tsx

@@ -126,7 +126,9 @@ function ListProgramPenghijauan({ search }: { search: string }) {
                 <TableTr key={item.id}>
                   <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
                   <TableTd style={{ width: '20%', wordWrap: 'break-word' }}>{item.name}</TableTd>
-                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }} dangerouslySetInnerHTML={{ __html: item.judul }}></TableTd>
+                  <TableTd style={{ width: '35%', wordWrap: 'break-word' }}>
+                    <Text lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.judul }}/>
+                  </TableTd>
                   <TableTd style={{ width: '10%' }}>
                     {iconMap[item.icon] && (
                       <Box title={item.icon}>

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

@@ -105,10 +105,12 @@ function ListDaftarInformasi({ search }: { search: string }) {
               <TableTbody>
                 {filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ textAlign: 'center' }}>{index + 1}</TableTd>
+                    <TableTd style={{ textAlign: 'center' }}>
+                      <Text mt={10} fz={"md"}>{index + 1}</Text>
+                    </TableTd>
                     <TableTd style={{ wordWrap: 'break-word' }}>
                       <Box w={200}>
-                        <Text fz={"md"} truncate={"end"} lineClamp={1}>{item.jenisInformasi}</Text>
+                        <Text mt={10} fz={"md"} truncate={"end"} lineClamp={1}>{item.jenisInformasi}</Text>
                       </Box>
                     </TableTd>
                     <TableTd style={{ wordWrap: 'break-word' }}>

src/app/admin/_com/list_PageAdmin.tsx

@@ -17,7 +17,7 @@ export const navBar = [
       {
         id: "Landing_Page_3",
         name: "Indeks Kepuasan Masyarakat",
-        path: "/admin/landing-page/indeks-kepuasan-masyarakat/list-survey"
+        path: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat"
       },
       {
         id: "Landing_Page_4",
@@ -286,7 +286,7 @@ export const navBar = [
       {
         id: "Inovasi_4",
         name: "Kolaborasi Inovasi",
-        path: "/admin/inovasi/kolaborasi-inovasi"
+        path: "/admin/inovasi/kolaborasi-inovasi/list-kolaborasi-inovasi"
       },
       {
         id: "Inovasi_5",

src/app/api/[[...slugs]]/_lib/ekonomi/jumlah-pengangguran/detail-data-pengangguran/create.ts

@@ -96,28 +96,36 @@ export default async function detailDataPengangguranCreate(context: Context) {
   // Cari bulan sebelumnya
   const currentMonthIndex = monthOrder.indexOf(body.month);
   const prevMonth = currentMonthIndex > 0 ? monthOrder[currentMonthIndex - 1] : "Des";
-  const prevYear = currentMonthIndex > 0 ? body.year : body.year - 1;
-
+  
+  // Handle year as number for calculations
+  const currentYear = typeof body.year === 'number' ? body.year : new Date(body.year).getFullYear();
+  const prevYear = currentMonthIndex > 0 ? currentYear : currentYear - 1;
+  
+  // Create date objects for Prisma
+  const currentYearDate = new Date(currentYear, 0, 1);
+  const prevYearDate = new Date(prevYear, 0, 1);
+  
   const prevData = await prisma.detailDataPengangguran.findFirst({
     where: {
       month: prevMonth,
-      year: prevYear,
+      year: prevYearDate,
     },
   });
 
   let percentageChange: number | null = null;
   if (prevData) {
-    const change = ((body.totalUnemployment - prevData.totalUnemployment) / prevData.totalUnemployment) * 100;
+    const change = ((Number(body.totalUnemployment) - Number(prevData.totalUnemployment)) / Number(prevData.totalUnemployment)) * 100;
     percentageChange = parseFloat(change.toFixed(1));
   }
 
+  // Create the new record with properly typed values
   const created = await prisma.detailDataPengangguran.create({
     data: {
       month: body.month,
-      year: body.year,
-      totalUnemployment: body.totalUnemployment,
-      educatedUnemployment: body.educatedUnemployment,
-      uneducatedUnemployment: body.uneducatedUnemployment,
+      year: currentYearDate,
+      totalUnemployment: Number(body.totalUnemployment),
+      educatedUnemployment: Number(body.educatedUnemployment),
+      uneducatedUnemployment: Number(body.uneducatedUnemployment),
       percentageChange,
     },
     select: {

src/app/api/[[...slugs]]/_lib/ekonomi/jumlah-pengangguran/detail-data-pengangguran/findByMonthYear.ts

@@ -15,7 +15,7 @@ export default async function findByMonthYear(context: Context) {
   const data = await prisma.detailDataPengangguran.findFirst({
     where: {
       month,
-      year: Number(year),
+      year: new Date(Number(year), 0, 1), // Convert year number to Date object for Prisma
     },
   });
 

src/app/api/[[...slugs]]/_lib/ekonomi/jumlah-pengangguran/detail-data-pengangguran/updt.ts

@@ -81,13 +81,18 @@ export default async function detailDataPengangguranUpdate(context: Context) {
       return { success: false, message: "ID tidak ditemukan" };
     }
   
-    const { month, year, totalUnemployment, educatedUnemployment, uneducatedUnemployment } = context.body as {
+    const { month, year: yearInput, totalUnemployment, educatedUnemployment, uneducatedUnemployment } = context.body as {
       month: string;
-      year: number;
-      totalUnemployment: number;
-      educatedUnemployment: number;
-      uneducatedUnemployment: number;
+      year: number | string | Date;
+      totalUnemployment: number | string;
+      educatedUnemployment: number | string;
+      uneducatedUnemployment: number | string;
     };
+    
+    // Normalize year to Date object
+    const year = typeof yearInput === 'number' ? new Date(yearInput, 0, 1) : 
+                yearInput instanceof Date ? yearInput : 
+                new Date(parseInt(yearInput as string), 0, 1);
   
     const duplicate = await prisma.detailDataPengangguran.findFirst({
       where: {
@@ -109,18 +114,19 @@ export default async function detailDataPengangguranUpdate(context: Context) {
   
     const currentMonthIndex = monthOrder.indexOf(month);
     const prevMonth = currentMonthIndex > 0 ? monthOrder[currentMonthIndex - 1] : "Des";
-    const prevYear = currentMonthIndex > 0 ? year : year - 1;
+    const currentYear = year.getFullYear();
+    const prevYear = currentMonthIndex > 0 ? currentYear : currentYear - 1;
   
     const prevData = await prisma.detailDataPengangguran.findFirst({
       where: {
         month: prevMonth,
-        year: prevYear,
+        year: new Date(prevYear, 0, 1),
       },
     });
   
     let percentageChange: number | null = null;
     if (prevData) {
-      const change = ((totalUnemployment - prevData.totalUnemployment) / prevData.totalUnemployment) * 100;
+      const change = ((Number(totalUnemployment) - Number(prevData.totalUnemployment)) / Number(prevData.totalUnemployment)) * 100;
       percentageChange = parseFloat(change.toFixed(1));
     }
   
@@ -128,10 +134,10 @@ export default async function detailDataPengangguranUpdate(context: Context) {
       where: { id },
       data: {
         month,
-        year,
-        totalUnemployment,
-        educatedUnemployment,
-        uneducatedUnemployment,
+        year: new Date(year), // Ensure it's a new Date instance
+        totalUnemployment: Number(totalUnemployment),
+        educatedUnemployment: Number(educatedUnemployment),
+        uneducatedUnemployment: Number(uneducatedUnemployment),
         percentageChange,
       },
     });

src/app/api/[[...slugs]]/_lib/inovasi/desa-digital/findMany.ts

@@ -1,23 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function desaDigitalFindMany() {
-    try {
-        const data = await prisma.desaDigital.findMany({
-            include: {
-                image: true,
-            },
-        });
+export default async function desaDigitalFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
 
-        return {
-            success: true,
-            message: "Success fetch desa digital",
-            data,
-        };
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch desa digital",
-        };
-    }
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.desaDigital.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.desaDigital.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil desa digital dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data desa digital",
+    };
+  }
 }

src/app/api/[[...slugs]]/_lib/inovasi/index.ts

@@ -5,6 +5,7 @@ import KolaborasiInovasi from "./kolaborasi-inovasi";
 import InfoTekno from "./info-teknologi";
 import AjukanIdeInovatif from "./ajukan-ide-inovatif";
 import LayananOnlineDesa from "./layanan-online-desa";
+import MitraKolaborasi from "./kolaborasi-inovasi/mitra-kolaborasi";
 
 const Inovasi = new Elysia({
   prefix: "/api/inovasi",
@@ -16,5 +17,6 @@ const Inovasi = new Elysia({
   .use(InfoTekno)
   .use(AjukanIdeInovatif)
   .use(LayananOnlineDesa)
-
+  .use(MitraKolaborasi)
+  
 export default Inovasi;

src/app/api/[[...slugs]]/_lib/inovasi/info-teknologi/findMany.ts

@@ -1,23 +1,61 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
+import { Context } from "elysia";
 
-export default async function infoTeknoFindMany() {
-    try {
-        const data = await prisma.infoTekno.findMany({
-            include: {
-                image: true,
-            },
-        });
+// Di findMany.ts
+export default async function infoTeknoFindMany(context: Context) {
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
 
-        return {
-            success: true,
-            message: "Success fetch info teknologi",
-            data,
-        };
-    } catch (error) {
-        console.error("Find many error:", error);
-        return {
-            success: false,
-            message: "Failed fetch info teknologi",
-        };
-    }
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+
+  try {
+    const [data, total] = await Promise.all([
+      prisma.infoTekno.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.infoTekno.count({
+        where
+      })
+    ]);
+
+    const totalPages = Math.ceil(total / limit);
+
+    return {
+      success: true,
+      message: "Success fetch info teknologi with pagination",
+      data,
+      page,
+      totalPages,
+      total,
+    };
+  } catch (e) {
+    console.error("Find many paginated error:", e);
+    return {
+      success: false,
+      message: "Failed fetch info teknologi with pagination",
+      data: [],
+      page: 1,
+      totalPages: 1,
+      total: 0,
+    };
+  }
 }

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/create.ts

@@ -1,34 +1,37 @@
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
+import { Prisma } from "@prisma/client";
 
-type FormCreateKolaborasiInovasi = {
-    name: string;
-    tahun: number;
-    slug: string;
-    deskripsi: string;
-    kolaborator: string;
-    imageId: string;
+// Define validation schema
+type FormCreateKolaborasiInovasi = Prisma.KolaborasiInovasiGetPayload<{
+  select: {
+    name: true;
+    tahun: true;
+    slug: true;
+    deskripsi: true;
+    kolaborator: true;
+  };
+}>;
+
+export default async function kolaborasiInovasiCreate(context: Context) {
+  const body = context.body as FormCreateKolaborasiInovasi;
+
+  // Create new kolaborasi inovasi
+  await prisma.kolaborasiInovasi.create({
+    data: {
+      name: body.name,
+      tahun: body.tahun,
+      slug: body.slug,
+      deskripsi: body.deskripsi,
+      kolaborator: body.kolaborator,
+    },
+  });
+
+  return {
+    success: true,
+    message: "Berhasil membuat kolaborasi inovasi",
+    data: {
+      ...body,
+    },
+  };
 }
-
-export default async function kolaborasiInovasiCreate(context: Context){
-    const body = context.body as FormCreateKolaborasiInovasi;
-
-    await prisma.kolaborasiInovasi.create({
-        data: {
-            name: body.name,
-            tahun: body.tahun,
-            slug: body.slug,
-            deskripsi: body.deskripsi,
-            kolaborator: body.kolaborator,
-            imageId: body.imageId,
-        }
-    })
-
-    return {
-        success: true,
-        message: "Success create kolaborasi inovasi",
-        data: {
-            ...body,
-        }
-    }
-}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -5,18 +6,42 @@ import { Context } from "elysia";
 export default async function kolaborasiInovasiFindMany(context: Context) {
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const year = (context.query.year as string) || '';
   const skip = (page - 1) * limit;
 
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan filter tahun (jika ada)
+  if (year) {
+    const startDate = new Date(parseInt(year), 0, 1); // 1 Januari tahun tersebut
+    const endDate = new Date(parseInt(year) + 1, 0, 1); // 1 Januari tahun berikutnya
+    where.createdAt = {
+      gte: startDate,
+      lt: endDate,
+    };
+  }
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { slug: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+
   try {
     const [data, total] = await Promise.all([
       prisma.kolaborasiInovasi.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.kolaborasiInovasi.count({
-        where: { isActive: true }
+        where
       })
     ]);
 

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/findUnique.ts

@@ -15,9 +15,6 @@ export default async function kolaborasiInovasiFindUnique(context: Context) {
     try {
         const kolaborasiInovasi = await prisma.kolaborasiInovasi.findUnique({
             where: { id },
-            include: {
-                image: true,
-            }
         });
 
         if (!kolaborasiInovasi) {

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/index.ts

@@ -21,7 +21,6 @@ const KolaborasiInovasi = new Elysia({
       slug: t.String(),
       deskripsi: t.String(),
       kolaborator: t.String(),
-      imageId: t.String(),
     }),
   })
   .put(
@@ -37,7 +36,7 @@ const KolaborasiInovasi = new Elysia({
         slug: t.String(),
         deskripsi: t.String(),
         kolaborator: t.String(),
-        imageId: t.String(),
+
       }),
     }
   )

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/create.ts

@@ -0,0 +1,26 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+type FormCreate = {
+  name: string;
+  imageId: string;
+};
+
+export default async function mitraKolaborasiCreate(context: Context) {
+    const body = context.body as FormCreate;
+
+    await prisma.mitraKolaborasi.create({
+        data: {
+            name: body.name,
+            imageId: body.imageId,
+        },
+    });
+
+    return {
+        success: true,
+        message: "Berhasil membuat mitra kolaborasi",
+        data: {
+            ...body,
+        },
+    };
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/del.ts

@@ -0,0 +1,54 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+export default async function mitraKolaborasiDelete(context: Context) {
+  const id = context.params?.id as string;
+
+  if (!id) {
+    return {
+      status: 400,
+      body: "ID tidak diberikan",
+    };
+  }
+
+  const mitraKolaborasi = await prisma.mitraKolaborasi.findUnique({
+    where: { id },
+    include: {
+      image: true,
+    },
+  });
+
+  if (!mitraKolaborasi) {
+    return {
+      status: 404,
+      body: "Mitra kolaborasi tidak ditemukan",
+    };
+  }
+
+  if (mitraKolaborasi.image) {
+    try {
+      const filePath = path.join(
+        mitraKolaborasi.image.path,
+        mitraKolaborasi.image.name
+      );
+      await fs.unlink(filePath);
+      await prisma.fileStorage.delete({
+        where: { id: mitraKolaborasi.image.id },
+      });
+    } catch (error) {
+      console.error("Gagal hapus file image:", error);
+    }
+  }
+
+  await prisma.mitraKolaborasi.delete({
+    where: { id },
+  });
+
+  return {
+    success: true,
+    message: "Mitra kolaborasi berhasil dihapus",
+    status: 200,
+  };
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/findMany.ts

@@ -0,0 +1,53 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+
+export default async function mitraKolaborasiFindMany(context: Context) {
+  // Ambil parameter dari query
+  const page = Number(context.query.page) || 1;
+  const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
+  const skip = (page - 1) * limit;
+
+  // Buat where clause
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
+  try {
+    // Ambil data dan total count secara paralel
+    const [data, total] = await Promise.all([
+      prisma.mitraKolaborasi.findMany({
+        where,
+        include: {
+          image: true,
+        },
+        skip,
+        take: limit,
+        orderBy: { createdAt: 'desc' },
+      }),
+      prisma.mitraKolaborasi.count({ where }),
+    ]);
+
+    return {
+      success: true,
+      message: "Berhasil ambil mitra kolaborasi dengan pagination",
+      data,
+      page,
+      limit,
+      total,
+      totalPages: Math.ceil(total / limit),
+    };
+  } catch (e) {
+    console.error("Error di findMany paginated:", e);
+    return {
+      success: false,
+      message: "Gagal mengambil data mitra kolaborasi",
+    };
+  }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/findUnique.ts

@@ -0,0 +1,49 @@
+import prisma from "@/lib/prisma";
+
+export default async function mitraKolaborasiFindUnique(request: Request) {
+    const url = new URL(request.url);
+    const pathSegments = url.pathname.split("/");
+    const id = pathSegments[pathSegments.length - 1];
+
+    if (!id) {
+        return Response.json({
+            success: false,
+            message: "ID tidak ditemukan",
+        }, {status: 400});
+    }
+
+    try {
+        if (typeof id !== 'string') {
+            return Response.json({
+                success: false,
+                message: "ID tidak valid",
+            }, {status: 400});
+        }
+
+        const data = await prisma.mitraKolaborasi.findUnique({
+            where: { id },
+            include: {
+                image: true,
+            },
+        });
+
+        if (!data) {
+            return Response.json({
+                success: false,
+                message: "Mitra kolaborasi tidak ditemukan",
+            }, {status: 404});
+        }
+
+        return Response.json({
+            success: true,
+            message: "Success fetch mitra kolaborasi by ID",
+            data,
+        }, {status: 200});
+    } catch (error) {
+        console.error("Find by ID error:", error);
+        return Response.json({
+            success: false,
+            message: "Gagal mengambil mitra kolaborasi: " + (error instanceof Error ? error.message : 'Unknown error'),
+        }, {status: 500});
+    }
+}

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/index.ts

@@ -0,0 +1,37 @@
+import Elysia, { t } from "elysia";
+import mitraKolaborasiCreate from "./create";
+import mitraKolaborasiDelete from "./del";
+import mitraKolaborasiUpdate from "./updt";
+import mitraKolaborasiFindUnique from "./findUnique";
+import mitraKolaborasiFindMany from "./findMany";
+
+const MitraKolaborasi = new Elysia({
+  prefix: "/mitrakolaborasi",
+  tags: ["Inovasi/Mitra Kolaborasi"],
+})
+  .post("/create", mitraKolaborasiCreate, {
+    body: t.Object({
+      name: t.String(),
+      imageId: t.String(),
+    }),
+  })
+  .get("/find-many", mitraKolaborasiFindMany)
+  .get("/:id", async (context) => {
+    const response = await mitraKolaborasiFindUnique(context.request);
+    return response;
+  })
+  .delete("/del/:id", mitraKolaborasiDelete)
+  .put(
+    "/:id",
+    async (context) => {
+      const response = await mitraKolaborasiUpdate(context);
+      return response;
+    },
+    {
+      body: t.Object({
+        name: t.String(),
+        imageId: t.String(),
+      }),
+    }
+  );
+export default MitraKolaborasi;

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/mitra-kolaborasi/updt.ts

@@ -0,0 +1,97 @@
+import prisma from "@/lib/prisma";
+import { Context } from "elysia";
+import fs from "fs/promises";
+import path from "path";
+
+type FormUpdate = {
+    id: string;
+    name: string;
+    imageId: string;
+}
+export default async function mitraKolaborasiUpdate(context: Context) {
+    try {
+        const id = context.params?.id as string;
+        const body = (await context.body) as Omit<FormUpdate, "id">;
+    
+        const {
+            name,
+            imageId
+        } = body;
+    
+        if (!id) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "ID tidak ditemukan",
+            }), {
+                status: 400,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        const existing = await prisma.mitraKolaborasi.findUnique({
+            where: {id},
+            include: {
+                image: true,
+            }
+        })
+    
+        if (!existing) {
+            return new Response(JSON.stringify({
+                success: false,
+                message: "mitra kolaborasi tidak ditemukan",
+            }), {
+                status: 404,
+                headers: {
+                    'Content-Type': 'application/json'
+                }
+            })
+        }
+    
+        if (existing.imageId && existing.imageId !== imageId) {
+        const oldImage = existing.image;
+        if (oldImage) {
+            try {
+                const filePath = path.join(oldImage.path, oldImage.name);
+                await fs.unlink(filePath);
+                await prisma.fileStorage.delete({
+                    where: { id: oldImage.id },
+                });
+            } catch (error) {
+                console.error("Gagal hapus gambar lama:", error);
+            }
+        }
+        }
+    
+        const updated = await prisma.mitraKolaborasi.update({
+            where: { id },
+            data: {
+                name,
+                imageId,
+            }
+        })
+    
+        return new Response(JSON.stringify({
+            success: true,
+            message: "Mitra kolaborasi berhasil diupdate",
+            data: updated,
+        }), {
+            status: 200,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    } catch (error) {
+        console.error("Error updating mitra kolaborasi:", error); 
+        return new Response(JSON.stringify({
+            success: false,
+            message: "Terjadi kesalahan saat mengupdate mitra kolaborasi",
+        }), {
+            status: 500,
+            headers: {
+                'Content-Type': 'application/json'
+            }
+        })
+    }
+    }

src/app/api/[[...slugs]]/_lib/inovasi/kolaborasi-inovasi/updt.ts

@@ -9,7 +9,7 @@ type FormUpdateKolaborasiInovasi = {
     slug?: string;
     deskripsi?: string;
     kolaborator?: string;
-    imageId?: string;
+
 };
 export default async function kolaborasiInovasiUpdate(context: Context) {
     const body = context.body as FormUpdateKolaborasiInovasi;
@@ -31,7 +31,6 @@ export default async function kolaborasiInovasiUpdate(context: Context) {
           slug: body.slug,
           deskripsi: body.deskripsi,
           kolaborator: body.kolaborator,
-          imageId: body.imageId,
         },
       });
   

src/app/api/[[...slugs]]/_lib/landing_page/prestasi-desa/findMany.ts

@@ -10,7 +10,7 @@ async function prestasiDesaFindMany(context: Context) {
   const skip = (page - 1) * limit;
 
   // Buat where clause
-  const where: any = { isActive: true };
+  const where: any = {};
 
   // Tambahkan pencarian (jika ada)
   if (search) {
@@ -19,6 +19,11 @@ async function prestasiDesaFindMany(context: Context) {
       { deskripsi: { contains: search, mode: 'insensitive' } },
       { kategori: { name: { contains: search, mode: 'insensitive' } } },
     ];
+    // Tetap filter hanya yang aktif saat melakukan pencarian
+    where.isActive = true;
+  } else {
+    // Jika tidak ada pencarian, tampilkan hanya data yang aktif
+    where.isActive = true;
   }
 
   try {
@@ -27,11 +32,16 @@ async function prestasiDesaFindMany(context: Context) {
         where,
         include: {
           image: true,
-          kategori: true,
+          kategori: {
+            select: {
+              id: true,
+              name: true
+            }
+          },
         },
         skip,
         take: limit,
-        orderBy: { createdAt: "desc" }, // opsional, kalau mau urut berdasarkan waktu
+        orderBy: { createdAt: "desc" },
       }),
       prisma.prestasiDesa.count({
         where,

src/app/api/[[...slugs]]/_lib/lingkungan/data-lingkungan-desa/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -6,17 +7,28 @@ export default async function dataLingkunganDesaFindMany(context: Context) {
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
   const skip = (page - 1) * limit;
+  const search = (context.query.search as string) || '';
+
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { deskripsi: { contains: search, mode: 'insensitive' } },
+    ];
+  }
 
   try {
     const [data, total] = await Promise.all([
       prisma.dataLingkunganDesa.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.dataLingkunganDesa.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

src/app/api/[[...slugs]]/_lib/lingkungan/pengelolaan-sampah/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -5,18 +6,28 @@ import { Context } from "elysia";
 export default async function pengelolaanSampahFindMany(context: Context) {
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
+  const search = (context.query.search as string) || '';
   const skip = (page - 1) * limit;
 
+  const where: any = { isActive: true };
+
+  // Tambahkan pencarian (jika ada)
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+    ];
+  }
+
   try {
     const [data, total] = await Promise.all([
       prisma.pengelolaanSampah.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.pengelolaanSampah.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

src/app/api/[[...slugs]]/_lib/lingkungan/program-penghijauan/findMany.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import prisma from "@/lib/prisma";
 import { Context } from "elysia";
 
@@ -6,17 +7,26 @@ export default async function programPenghijauanFindMany(context: Context) {
   const page = Number(context.query.page) || 1;
   const limit = Number(context.query.limit) || 10;
   const skip = (page - 1) * limit;
+  const search = (context.query.search as string) || '';
 
+  const where: any = { isActive: true };
+
+  if (search) {
+    where.OR = [
+      { name: { contains: search, mode: 'insensitive' } },
+      { judul: { contains: search, mode: 'insensitive' } },
+    ];
+  }
   try {
     const [data, total] = await Promise.all([
       prisma.programPenghijauan.findMany({
-        where: { isActive: true },
+        where,
         skip,
         take: limit,
         orderBy: { createdAt: 'desc' },
       }),
       prisma.programPenghijauan.count({
-        where: { isActive: true }
+        where,
       })
     ]);
 

src/app/darmasaba/(pages)/desa/layanan/[id]/page.tsx

@@ -1,9 +1,9 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import { useParams } from 'next/navigation';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import { Box, Button, Center, Container, Group, Image, Skeleton, Stack, Text } from '@mantine/core';
+import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../_com/BackButto';
@@ -34,46 +34,44 @@ function Page() {
   useEffect(() => {
     const loadData = async () => {
       if (!id) return;
-
       try {
         setLoading(true);
         await state.suratKeterangan.findUnique.load(id);
         const result = state.suratKeterangan.findUnique.data as unknown as LayananData;
         setData(result);
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Terjadi kesalahan saat memuat data:', error);
       } finally {
         setLoading(false);
       }
     };
-
     loadData();
   }, [id]);
 
   if (loading) {
     return (
-      <Center>
-        <Skeleton height={500} />
+      <Center h="100vh" bg={colors.Bg}>
+        <Skeleton height={500} radius="md" animate />
       </Center>
     );
   }
 
   if (!data) {
     return (
-      <Center>
-        <Text>Data tidak ditemukan</Text>
+      <Center h="100vh" bg={colors.Bg}>
+        <Text fz="xl" c="dimmed">Maaf, data layanan tidak ditemukan</Text>
       </Center>
     );
   }
 
   return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: "md", md: 100 }}>
         <BackButton />
       </Box>
-      <Container w={{ base: "100%", md: "50%" }}>
+      <Container w={{ base: "100%", md: "60%" }}>
         <Text
-          fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }}
+          fz={{ base: "2rem", md: "2.5rem", lg: "3rem" }}
           ta="center"
           fw="bold"
         >
@@ -81,19 +79,32 @@ function Page() {
         </Text>
       </Container>
       <Box px={{ base: "md", md: 100 }}>
-        <Stack gap={0}>
+        <Stack gap="md">
           <Text
             dangerouslySetInnerHTML={{ __html: data.deskripsi }}
-            fz={{ base: "h4", md: "h2" }}
-            pb={20}
+            fz={{ base: "md", md: "lg" }}
+            c="dark.7"
+            ta="justify"
           />
           {data.image2?.link && (
             <Center>
-              <Image src={data.image2.link} alt={data.name} />
+              <Image
+                src={data.image2.link}
+                alt={data.name}
+                radius="md"
+                maw={500}
+                mx="auto"
+                style={{ boxShadow: '0 0 20px rgba(28,110,164,0.2)' }}
+              />
             </Center>
           )}
-          <Group justify='center' mt="md">
-            <Button radius="lg" fz="h4" bg={colors['blue-button']}>
+          <Group justify="center" mt="md">
+            <Button
+              radius="xl"
+              size="lg"
+              variant="gradient"
+              gradient={{ from: '#1C6EA4', to: '#63B3ED' }}
+            >
               Ajukan Permohonan
             </Button>
           </Group>

src/app/darmasaba/(pages)/ekonomi/jumlah-pengangguran/page.tsx

@@ -68,7 +68,7 @@ function Page() {
                     {state.findMany.data?.[0]?.totalUnemployment || 0} Orang
                   </Text>
                   <Text fz="sm" c="dimmed">
-                    Data tahun {state.findMany.data?.[0]?.year || ''}
+                    Data tahun {state.findMany.data?.[0]?.year ? new Date(state.findMany.data[0].year).getFullYear() : ''}
                   </Text>
                 </Flex>
               </Paper>

src/app/darmasaba/(pages)/ekonomi/pasar-desa/page.tsx

@@ -2,7 +2,7 @@
 import pasarDesaState from '@/app/admin/(dashboard)/_state/ekonomi/pasar-desa/pasar-desa';
 import colors from '@/con/colors';
 import { Box, Center, Flex, Grid, GridCol, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconMapPinFilled, IconSearch, IconShoppingCartFilled, IconStarFilled } from '@tabler/icons-react';
 import { motion } from 'motion/react';
 import { useRouter } from 'next/navigation';
@@ -14,6 +14,7 @@ function Page() {
   const router = useRouter()
   const state = useProxy(pasarDesaState.pasarDesa)
   const [search, setSearch] = useState('');
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
   const {
     data,
@@ -35,8 +36,8 @@ function Page() {
     : data;
 
   useShallowEffect(() => {
-    load(page, 4, search, selectedCategory || undefined)
-  }, [page, search, selectedCategory])
+    load(page, 4, debouncedSearch, selectedCategory || undefined)
+  }, [page, debouncedSearch, selectedCategory])
 
 
   if (loading || !data) {

src/app/darmasaba/(pages)/ekonomi/program-kemiskinan/page.tsx

@@ -1,12 +1,13 @@
 'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, SimpleGrid, Paper, Skeleton, Center } from '@mantine/core';
-import React from 'react';
+import { Stack, Box, Text, SimpleGrid, Paper, Skeleton, Center, Pagination, Grid, GridCol, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { CartesianGrid, Legend, Line, LineChart as RechartsLineChart, Tooltip, XAxis, YAxis } from 'recharts';
 import { useProxy } from 'valtio/utils';
 import programKemiskinanState from '@/app/admin/(dashboard)/_state/ekonomi/program-kemiskinan';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
 
 interface StatistikData {
   id: string;
@@ -29,15 +30,23 @@ interface ProgramKemiskinanData {
 }
 
 function Page() {
+  const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const state = useProxy(programKemiskinanState)
 
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load
+  } = state.findMany
+
   useShallowEffect(() => {
-    state.findMany.load()
-  }, [])
+    load(page, 2, debouncedSearch)
+  }, [page, debouncedSearch])
 
-  const data = programKemiskinanState.findMany.data
-
-  if (!data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
         <Skeleton h={500} />
@@ -51,10 +60,24 @@ function Page() {
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Program Kemiskinan
-        </Text>
-        <Text ta={'center'} fz={'h4'}>Berbagai program bantuan untuk mengurangi kemiskinan dan meningkatkan kesejahteraan masyarakat</Text>
+        <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Program Kemiskinan
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Program'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text fz={'h4'}>Berbagai program bantuan untuk mengurangi kemiskinan dan meningkatkan kesejahteraan masyarakat</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>
@@ -74,10 +97,18 @@ function Page() {
               )
             })}
           </SimpleGrid>
+          <Center my={10}>
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              my={"md"}
+            />
+          </Center>
           <Paper p={'xl'}>
             <Text fz={'h3'} fw={'bold'} c={colors['blue-button']} mb="md">Statistik Kemiskinan Masyarakat</Text>
             <Box style={{ width: '100%', height: 'auto' }}>
-              {state.findMany.data.length > 0 && state.findMany.data[0]?.statistik ? (
+              {data.length > 0 && data[0]?.statistik ? (
                 <Box w="100%" style={{ overflowX: 'auto' }}>
                   <Center>
                     <RechartsLineChart

src/app/darmasaba/(pages)/inovasi/desa-digital-smart-village/page.tsx

@@ -1,79 +1,62 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
-import React from 'react';
+import { Stack, Box, Text, Paper, SimpleGrid, Image, Skeleton, Center, Pagination, Grid, GridCol, TextInput } from '@mantine/core';
+import React, { useState } from 'react';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
+import desaDigitalState from '@/app/admin/(dashboard)/_state/inovasi/desa-digital';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
 
-const data = [
-  {
-    id: 1,
-    image: '/api/img/administrasi-digital.png',
-    judul: 'Layanan Administrasi Digital',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pengurusan dokumen kependudukan online.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembuatan KTP, KK, Surat Keterangan secara daring.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Antrian dan pembayaran pajak berbasis aplikasi mobile.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi kependudukan terintegrasi.</ListItem>
-    </List>
-  },
-  {
-    id: 2,
-    image: '/api/img/edukasi-digital.png',
-    judul: 'Edukasi Digital',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Ruang Belajar Digital dengan akses internet gratis.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan komputer dan literasi digital untuk semua usia.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kursus online keterampilan digital (desain, pemrograman, marketing).</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Beasiswa pendidikan teknologi untuk pemuda desa.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Perpustakaan digital dengan koleksi buku elektronik.</ListItem>
-    </List>
-  },
-  {
-    id: 3,
-    image: '/api/img/ekonomi-digital.png',
-    judul: 'Ekonomi Digital',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Marketplace produk UMKM Darmasaba.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Platform pemasaran hasil pertanian dan kerajinan lokal.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem pembayaran digital untuk pelaku usaha desa.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Inkubator bisnis digital untuk wirausaha muda.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan e-commerce dan digital marketing.</ListItem>
-    </List>
-  },
-  {
-    id: 4,
-    image: '/api/img/kesehatan-daring.png',
-    judul: 'Kesehatan Daring',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Telemedicine dengan dokter dan puskesmas.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Monitoring kesehatan berbasis aplikasi.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pendaftaran antrian puskesmas online.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Edukasi kesehatan melalui platform digital.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Rekam medis elektronik.</ListItem>
-    </List>
-  },
-  {
-    id: 5,
-    image: '/api/img/pertanian-cerdas.png',
-    judul: 'Pertanian Cerdas',
-    deskripsi: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem informasi cuaca dan prediksi pertanian.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi pertanian online dengan ahli.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penjualan hasil pertanian melalui platform digital.</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pelatihan pertanian modern berbasis teknologi.</ListItem>
-    </List>
-  },
-]
 function Page() {
+  const [search, setSearch] = useState("")
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const state = useProxy(desaDigitalState)
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Desa Digital / Smart Village
-        </Text>
-        <Text ta={'center'} fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
+      <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+            Desa Digital / Smart Village
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Produk'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text fz={'h4'}>Mewujudkan Desa Darmasaba sebagai pusat inovasi digital yang memberdayakan masyarakat, meningkatkan kesejahteraan, dan menciptakan peluang ekonomi berbasis teknologi.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} justify='center'>
@@ -84,13 +67,13 @@ function Page() {
               md: 3
             }}
           >
-            {data.map((v, k) => {
+            {filteredData.map((v, k) => {
               return (
                 <Paper p={'xl'} key={k}>
-                  <Image src={v.image} pb={10} radius={10} alt='' />
-                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
-                  <Box pr={'lg'}>
-                  {v.deskripsi}
+                  <Image src={v.image.link? v.image.link : ''} pb={10} radius={10} alt='' />
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
+                  <Box>
+                    <Text fz={"md"} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                   </Box>
                 </Paper>
               )
@@ -98,6 +81,15 @@ function Page() {
           </SimpleGrid>
         </Stack>
       </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          mt="md"
+          mb="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/inovasi/info-teknologi-tepat-guna/page.tsx

@@ -1,108 +1,63 @@
+'use client'
 import colors from '@/con/colors';
-import { Stack, Box, Text, List, ListItem, Paper, SimpleGrid, Image } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import { useProxy } from 'valtio/utils';
 
-const data = [
-  {
-    id: 1,
-    image: '/api/img/pertanian-cerdas.png',
-    judul: 'Pertanian Cerdas',
-    subjudul1: 'Sistem Irigasi Hemat Air',
-    subjudul2: 'Pengolahan Limbah Pertanian',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Penggunaan sensor kelembaban tanah</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kontrol penyiraman otomatis </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pengurangan konsumsi air hingga 40%</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pencacah jerami otomatis</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konversi limbah menjadi pupuk organik</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi pembakaran sampah pertanian</ListItem>
-    </List>,
-  },
-  {
-    id: 2,
-    image: '/api/img/energi-terbarukan.png',
-    judul: 'Energi Terbarukan',
-    subjudul1: 'Pembangkit Listrik Mikrohidro',
-    subjudul2: 'Solar Home System',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Memanfaatkan aliran sungai sekitar</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Kapasitas 10-50 kW</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Elektrifikasi mandiri desa</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Panel surya untuk rumah tangga </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Akses listrik 24 jam</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Hemat biaya energi</ListItem>
-    </List>,
-  },
-  {
-    id: 3,
-    image: '/api/img/pengolahan-pangan.png',
-    judul: 'Pengolahan Pangan',
-    subjudul1: 'Mesin Pengering Hasil Pertanian',
-    subjudul2: 'Alat Pengolah Hasil Pertanian',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengering tenaga surya</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menjaga kualitas hasil panen</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mencegah kerusakan pasca panen</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mesin pengupas dan pengemas produk</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Meningkatkan nilai jual komoditas</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Standarisasi kualitas produk</ListItem>
-    </List>,
-  },
-  {
-    id: 4,
-    image: '/api/img/pengelolaan-sampah.png',
-    judul: 'Pengelolaan Sampah',
-    subjudul1: 'Sistem Pengolahan Sampah Terpadu',
-    subjudul2: 'Komposter Komunal',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemilahan otomatis</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Daur ulang sampah organik dan anorganik</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pembangkit listrik dari sampah</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Teknologi pengomposan cepat</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghasilkan pupuk organik</ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Mengurangi sampah ke TPA</ListItem>
-    </List>,
-  },
-  {
-    id: 5,
-    image: '/api/img/kesehatan-daring.png',
-    judul: 'Kesehatan Masyarakat',
-    subjudul1: 'Alat Deteksi Dini Penyakit',
-    subjudul2: 'Air Bersih Mandiri',
-    deskripsi1: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Skrining kesehatan portable </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Pemeriksaan tekanan darah dan gula </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Konsultasi medis jarak jauh</ListItem>
-    </List>,
-    deskripsi2: <List>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Sistem filter air canggih </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Menghilangkan kontaminan </ListItem>
-      <ListItem ta={'justify'} fz={{ base: 'h4', md: 'lg' }}>Jaminan kualitas air minum
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import infoTeknoState from '@/app/admin/(dashboard)/_state/inovasi/info-tekno';
+import { IconSearch } from '@tabler/icons-react';
 
-</ListItem>
-    </List>,
-  },
-]
 function Page() {
+  const [search, setSearch] = useState("")
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+  const state = useProxy(infoTeknoState)
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
+
+  const filteredData = data || []
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Info Teknologi Tepat Guna
-        </Text>
-        <Text ta={'center'} fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
+        <Grid align='center'>
+          <GridCol span={{ base: 12, md: 9 }}>
+            <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+              Info Teknologi Tepat Guna
+            </Text>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 3 }}>
+            <TextInput
+              radius={"lg"}
+              placeholder='Cari Info Teknologi'
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              leftSection={<IconSearch size={20} />}
+              w={{ base: "50%", md: "100%" }}
+            />
+          </GridCol>
+        </Grid>
+        <Text fz={'h4'}>Desa Darmasaba berkomitmen mengembangkan teknologi tepat guna yang sesuai dengan kebutuhan masyarakat, mendukung pembangunan berkelanjutan, dan meningkatkan kualitas hidup warga.</Text>
       </Box>
       <Box px={{ base: "md", md: 100 }}>
         <Stack gap={'lg'} p={'lg'}>
@@ -113,18 +68,13 @@ function Page() {
               md: 3
             }}
           >
-            {data.map((v, k) => {
+            {filteredData.map((v, k) => {
               return (
                 <Paper p={'xl'} key={k}>
-                  <Image src={v.image} pb={10} radius={10} alt='' />
-                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                  <Image src={v.image.link || ''} pb={10} radius={10} alt='' />
+                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
                   <Box pr={'lg'} pb={10}>
-                  <Text fz={'h4'} fw={'bold'} >{v.subjudul1}</Text>
-                    {v.deskripsi1}
-                  </Box>
-                  <Box pr={'lg'}>
-                  <Text fz={'h4'} fw={'bold'} >{v.subjudul2}</Text>
-                    {v.deskripsi2}
+                    <Text fz={'h4'} fw={'bold'} dangerouslySetInnerHTML={{ __html: v.deskripsi }} />
                   </Box>
                 </Paper>
               )
@@ -132,6 +82,14 @@ function Page() {
           </SimpleGrid>
         </Stack>
       </Box>
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage)} // ini penting!
+          total={totalPages}
+          my="md"
+        />
+      </Center>
     </Stack>
   );
 }

src/app/darmasaba/(pages)/inovasi/kolaborasi-inovasi/page.tsx

@@ -1,26 +1,51 @@
+'use client'
+import kolaborasiInovasiState from '@/app/admin/(dashboard)/_state/inovasi/kolaborasi-inovasi';
 import colors from '@/con/colors';
-import { Stack, Box, Text, Paper, Flex, Group, SimpleGrid, Button, Image, Center } from '@mantine/core';
-import React from 'react';
+import { Box, Center, Grid, GridCol, Group, Image, Pagination, Paper, Select, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { IconSearch } from '@tabler/icons-react';
+import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
-import { IconChevronDown } from '@tabler/icons-react';
-
-const data = [
-  {
-    id: 1,
-    bulan: 'JANUARI 2025',
-    judul: 'Darmasaba Smart Waste',
-    deskripsi: 'Sistem manajemen sampah terpadu yang memudahkan warga untuk memilah dan mendaur ulang sampah.',
-    kolaborator: 'Kolaborator: DLH Kabupaten Badung, Komunitas Peduli Lingkungan, TPS3R Pudak Mesari'
-  },
-  {
-    id: 2,
-    bulan: 'FEBRUARI 2025',
-    judul: 'Darmasaba Digital Market',
-    deskripsi: 'Platform e-commerce untuk produk UMKM desa yang menghubungkan produsen lokal dengan pasar global.',
-    kolaborator: 'Kolaborator: Kementerian Desa PDTT, UMKM Darmasaba'
-  }
-]
 function Page() {
+  const state = useProxy(kolaborasiInovasiState)
+  const [search, setSearch] = useState('');
+  const [selectedYear, setSelectedYear] = useState<string | null>(null);
+
+  // Get unique years from the data
+  const years = Array.from(
+    new Set(
+      state.findMany.data?.map(item => 
+        new Date(item.createdAt).getFullYear().toString()
+      ) || []
+    )
+  )
+  .sort((a, b) => b.localeCompare(a)) // Sort descending (newest first)
+  .map(year => ({
+    value: year,
+    label: year,
+  }));
+
+  const {
+    data,
+    page,
+    totalPages,
+    loading,
+    load,
+  } = state.findMany
+
+  useShallowEffect(() => {
+    load(page, 10, search, selectedYear || '')
+  }, [page, search, selectedYear])
+
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={650} />
+      </Stack>
+    );
+  }
+
   return (
     <>
       <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
@@ -28,27 +53,46 @@ function Page() {
           <BackButton />
         </Box>
         <Box px={{ base: 'md', md: 100 }} >
-          <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Kolaborasi Inovasi
-          </Text>
+          <Grid align='center'>
+            <GridCol span={{ base: 12, md: 9 }}>
+              <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+                Kolaborasi Inovasi
+              </Text>
+            </GridCol>
+            <GridCol span={{ base: 12, md: 3 }}>
+              <TextInput
+                radius={"lg"}
+                placeholder='Cari Kolaborasi Inovasi'
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                leftSection={<IconSearch size={20} />}
+                w={{ base: "50%", md: "100%" }}
+              />
+            </GridCol>
+          </Grid>
         </Box>
         <Box px={{ base: "md", md: 100 }}>
           <Stack gap={'lg'} justify='center'>
             <Group justify='flex-end'>
-              <Paper bg={colors['blue-button']} p={5} w={{ base: 150, md: 300 }}>
-                <Flex px={20} align={'center'} justify={'space-between'}>
-                  <Text fz={'h4'} fw={'bold'} c={colors['white-1']}>Tahun</Text>
-                  <IconChevronDown size={20} color={colors['white-1']} />
-                </Flex>
-              </Paper>
+              <Select
+                value={selectedYear}
+                onChange={setSelectedYear}
+                label={<Text fw={"bold"} fz={"sm"}>Tahun</Text>}
+                placeholder='Semua Tahun'
+                clearable
+                data={[
+                  { value: '', label: 'Semua Tahun' },
+                  ...years
+                ]}
+              />
             </Group>
             <SimpleGrid cols={{ base: 1, md: 2 }} spacing={'lg'}>
               {data.map((v, k) => {
                 return (
                   <Paper p={'xl'} key={k}>
-                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.judul}</Text>
+                    <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.name}</Text>
                     <Box pr={'lg'} pb={20}>
-                      {v.deskripsi}
+                      {v.slug}
                     </Box>
                     <Box pr={'lg'}>
                       {v.kolaborator}
@@ -57,9 +101,15 @@ function Page() {
                 );
               })}
             </SimpleGrid>
-            <Group py={40} justify='center'>
-              <Button px={80} rightSection={<IconChevronDown />} radius={6} bg={colors["blue-button"]} c={colors["white-1"]}>Lihat Laporan Lainnya</Button>
-            </Group>
+            <Center>
+              <Pagination
+                value={page}
+                onChange={(newPage) => load(newPage)} // ini penting!
+                total={totalPages}
+                mt="md"
+                mb="md"
+              />
+            </Center>
           </Stack>
         </Box>
       </Stack>
@@ -72,7 +122,7 @@ function Page() {
             <Text ta={'center'} fz={'h4'}>Kami berkolaborasi dengan berbagai mitra dari berbagai sektor untuk mewujudkan visi Smart Village Darmasaba.</Text>
           </Box>
           <Center>
-            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{base: 500, md: 650}}/>
+            <Image src={'/api/img/logoukm-kolaborasiinvoasi.png'} alt='' w={{ base: 500, md: 650 }} />
           </Center>
         </Stack>
       </Box>

src/app/darmasaba/(pages)/keamanan/keamanan-lingkungan-pecalang-patwal/page.tsx

@@ -2,7 +2,7 @@
 import keamananLingkunganState from '@/app/admin/(dashboard)/_state/keamanan/keamanan-lingkungan';
 import colors from '@/con/colors';
 import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { IconSearch } from '@tabler/icons-react';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
@@ -12,6 +12,7 @@ import BackButton from '../../desa/layanan/_com/BackButto';
 function Page() {
   const state = useProxy(keamananLingkunganState)
   const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const {
     data,
     page,
@@ -21,8 +22,8 @@ function Page() {
   } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 3, search)
-  }, [page, search])
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (

src/app/darmasaba/(pages)/keamanan/pencegahan-kriminalitas/page.tsx

@@ -5,112 +5,130 @@ import { IconArrowRight } from '@tabler/icons-react';
 
 function Page() {
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <SimpleGrid
         px={{ base: 20, md: 100 }}
-        cols={{
-          base: 1,
-          md: 2
-        }}
+        cols={{ base: 1, md: 2 }}
+        spacing="xl"
       >
-        {/* Content 1 */}
-        <Box pt={{base: 0, md: 35}}>
-          <Text c={colors["blue-button"]} fz={{ base: "h4", md: "h3" }} >
-            Info Keamanan dan Pencegahan Kriminalitas
+        <Box pt={{ base: 0, md: 35 }}>
+          <Text c={colors['blue-button']} fz={{ base: 'h4', md: 'h3' }}>
+            Community Safety & Crime Prevention
           </Text>
-          <Text fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-            Kontak Darurat
+          <Text fz={{ base: 'h1', md: '2.5rem' }} c={colors['blue-button']} fw="bold">
+            Emergency Contacts
           </Text>
           <Group>
-            <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
-              Lihat Detail
+            <Button
+              rightSection={<IconArrowRight />}
+              mt={20}
+              radius="xl"
+              size="md"
+              bg={colors['blue-button']}
+              c={colors['white-1']}
+            >
+              View Details
             </Button>
           </Group>
         </Box>
-        {/* Content 2 */}
-        <SimpleGrid cols={{ base: 1, md: 2 }}>
-          <Paper p={"lg"}>
-            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
-              Tips menjaga keamanan lingkungan
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+          <Paper p="lg" radius="xl" shadow="md">
+            <Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
+              How to Keep Your Neighborhood Safe
             </Text>
-            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
+              Practical safety habits everyone can apply daily to reduce risks.
             </Text>
             <Group>
-              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
-                Lihat Detail
+              <Button
+                rightSection={<IconArrowRight />}
+                mt={20}
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                c={colors['white-1']}
+              >
+                Learn More
               </Button>
             </Group>
           </Paper>
-          <Paper p={"lg"}>
-            <Text c={colors["blue-button"]} fw={'bold'} fz={{ base: "h4", md: "h3" }} >
-              Mengenali tanda-tanda kegiatan kriminal
+          <Paper p="lg" radius="xl" shadow="md">
+            <Text c={colors['blue-button']} fw="bold" fz={{ base: 'h4', md: 'h3' }}>
+              Recognizing Criminal Activities
             </Text>
-            <Text fz={{ base: "h5", md: "h4" }} c={colors["blue-button"]} >
-              the printing and typesetting industry. the printing and typesetting industry.
+            <Text fz={{ base: 'h5', md: 'h4' }} c={colors['blue-button']} mt="sm">
+              Key warning signs and behavior patterns you should stay aware of.
             </Text>
             <Group>
-              <Button rightSection={<IconArrowRight />} mt={20} radius={10} bg={colors["blue-button"]} c={colors["white-1"]}>
-                Lihat Detail
+              <Button
+                rightSection={<IconArrowRight />}
+                mt={20}
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                c={colors['white-1']}
+              >
+                Learn More
               </Button>
             </Group>
           </Paper>
         </SimpleGrid>
-        {/* Content 3 */}
-        <Paper p={'xl'}>
-          <Text fz={{ base: "h3", md: "h2" }} c={colors["blue-button"]} fw={"bold"}>
-            Program Keamanan Rutin
+        <Paper p="xl" radius="xl" shadow="lg">
+          <Text fz={{ base: 'h3', md: 'h2' }} c={colors['blue-button']} fw="bold">
+            Ongoing Security Programs
           </Text>
-          <Stack pt={30} gap={'lg'}>
-            <Box>
-              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
-                <Flex align={'center'} justify={'space-between'}>
-                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
-                  <IconArrowRight size={30} color={colors['white-1']} />
+          <Stack pt={30} gap="lg">
+            {['Night Patrol', 'Neighborhood Watch', 'Emergency Preparedness'].map((program, i) => (
+              <Paper key={i} p="md" bg={colors['blue-button']} radius="md" shadow="sm">
+                <Flex align="center" justify="space-between">
+                  <Text fz="h3" c={colors['white-1']}>
+                    {program}
+                  </Text>
+                  <IconArrowRight size={28} color={colors['white-1']} />
                 </Flex>
               </Paper>
-            </Box>
-            <Box>
-              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
-                <Flex align={'center'} justify={'space-between'}>
-                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
-                  <IconArrowRight size={30} color={colors['white-1']} />
-                </Flex>
-              </Paper>
-            </Box>
-            <Box>
-              <Paper p={"md"} bg={colors['blue-button']} w={{ base: "100%", md: "100%" }}>
-                <Flex align={'center'} justify={'space-between'}>
-                  <Text fz={'h3'} c={colors['white-1']}>Ronda Malam</Text>
-                  <IconArrowRight size={30} color={colors['white-1']} />
-                </Flex>
-              </Paper>
-            </Box>
+            ))}
             <Box pt={25}>
-              <Button fullWidth rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>Lihat program lainnya</Button>
+              <Button
+                fullWidth
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
+              >
+                Explore More Programs
+              </Button>
             </Box>
           </Stack>
         </Paper>
-        {/* Content 4 */}
         <Box>
-          <Paper p={'xl'} >
-            <Box style={{ maxWidth: "560px", width: "100%", aspectRatio: "16/9" }}>
-              <iframe width="100%"
+          <Paper p="xl" radius="xl" shadow="lg">
+            <Box style={{ maxWidth: 560, width: '100%', aspectRatio: '16/9' }}>
+              <iframe
+                width="100%"
                 height="100%"
-                src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  ></iframe>
+                src="https://www.youtube.com/embed/p5OkdBgasWA?si=6lFKXeE9LN5zcJQq"
+                title="Community Safety Patrol"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+              />
             </Box>
-            <Text py={10} fz={{ base: "h3", md: "h2" }} fw={'bold'} c={colors['blue-button']}>
-              Patroli Malam Darmasaba
+            <Text py={10} fz={{ base: 'h3', md: 'h2' }} fw="bold" c={colors['blue-button']}>
+              Darmasaba Night Patrol
             </Text>
-            <Text fz={'h4'} >
-              Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <Text fz="h4" c={colors['blue-button']}>
+              A closer look at how the community works together to maintain safety.
             </Text>
             <Box pt={10}>
-              <Button bg={colors['blue-button']} rightSection={<IconArrowRight size={20} color={colors['white-1']} />}>
-                Lihat Video Lainnya
+              <Button
+                radius="xl"
+                size="md"
+                bg={colors['blue-button']}
+                rightSection={<IconArrowRight size={20} color={colors['white-1']} />}
+              >
+                Watch More Videos
               </Button>
             </Box>
           </Paper>

src/app/darmasaba/(pages)/keamanan/tips-keamanan/page.tsx

@@ -4,7 +4,7 @@ import { Box, Center, Grid, GridCol, Image, Pagination, Paper, SimpleGrid, Skele
 import BackButton from '../../desa/layanan/_com/BackButto';
 import { useProxy } from 'valtio/utils';
 import tipsKeamananState from '@/app/admin/(dashboard)/_state/keamanan/tips-keamanan';
-import { useShallowEffect } from '@mantine/hooks';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
 import { useState } from 'react';
 import { IconSearch } from '@tabler/icons-react';
 
@@ -12,6 +12,7 @@ import { IconSearch } from '@tabler/icons-react';
 function Page() {
   const state = useProxy(tipsKeamananState)
   const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
   const {
     data,
     page,
@@ -21,8 +22,8 @@ function Page() {
   } = state.findMany;
 
   useShallowEffect(() => {
-    load(page, 3, search)
-  }, [page, search])
+    load(page, 3, debouncedSearch)
+  }, [page, debouncedSearch])
 
   if (loading || !data) {
     return (

src/app/darmasaba/(pages)/lingkungan/data-lingkungan-desa/page.tsx

@@ -1,85 +1,126 @@
+'use client'
+import dataLingkunganDesaState from '@/app/admin/(dashboard)/_state/lingkungan/data-lingkungan-desa';
 import colors from '@/con/colors';
-import { Box, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconChristmasTree, IconDroplet, IconHome, IconLeaf, IconTrash } from '@tabler/icons-react';
+import { Badge, Box, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Tooltip } from '@mantine/core';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { Icon, IconChartLine, IconChristmasTreeFilled, IconClipboardTextFilled, IconDroplet, IconHome, IconHomeEco, IconLeaf, IconRecycle, IconScale, IconSearch, IconShieldFilled, IconTent, IconTrashFilled, IconTree, IconTrendingUp, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import React, { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
-const data = [
-  {
-    id: 1,
-    icon: <IconLeaf size={100} color={colors['blue-button']} />,
-    title: 'Luas Lahan Hijau',
-    jumlah: '± 25 hektar',
-    deskripsi: 'tersebar di area persawahan, kebun, dan taman desa.'
-  },
-  {
-    id: 2,
-    icon: <IconHome size={100} color={colors['blue-button']} />,
-    title: 'Jumlah Rumah Tangga',
-    jumlah: '± 1.500 rumah tangga',
-    deskripsi: 'yang mayoritas sudah memiliki fasilitas pengelolaan sampah mandiri.'
-  },
-  {
-    id: 3,
-    icon: <IconDroplet size={100} color={colors['blue-button']} />,
-    title: 'Jumlah Sungai dan Saluran Air',
-    jumlah: '± 3 Sungai Besar',
-    deskripsi: 'dan beberapa saluran irigasi tradisional (subak) yang masih aktif digunakan.'
-  },
-  {
-    id: 4,
-    icon: <IconChristmasTree size={100} color={colors['blue-button']} />,
-    title: 'Program Penghijauan',
-    jumlah: '± 1000 Pohon',
-    deskripsi: 'Dilaksanakan secara berkala melalui kegiatan menanam pohon di area umum dan perbukitan.'
-  },
-  {
-    id: 5,
-    icon: <IconTrash size={100} color={colors['blue-button']} />,
-    title: 'Pengelolaan Sampah',
-    jumlah: '± 5 Bank Sampah',
-    deskripsi: 'Didukung oleh Bank Sampah dan sistem pemilahan sampah rumah tangga.'
-  },
-]
 function Page() {
+  const state = useProxy(dataLingkunganDesaState.findMany)
+  const [search, setSearch] = useState('')
+  const [debouncedSearch] = useDebouncedValue(search, 500); // 500ms delay
+
+  const {
+    data,
+    load,
+    page,
+    totalPages,
+  } = state
+
+  const iconMap: Record<string, Icon> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+    rumah: IconHome,
+    pohon: IconTree,
+    air: IconDroplet
+
+  };
+
+  useShallowEffect(() => {
+    load(page, 6, debouncedSearch)
+  }, [page, debouncedSearch])
+
+  if (state.loading || !data) {
+    return (
+      <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="28px">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Data Lingkungan Desa
+      <Box px={{ base: 'md', md: 100 }}>
+        <Group justify="space-between" align='center' mt="md">
+          <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
+            Data Lingkungan Desa
+          </Text>
+          <TextInput
+            radius="xl"
+            w={'30%'}
+            placeholder="Cari Data Lingkungan Desa"
+            leftSection={<IconSearch size={20} />}
+            value={search}
+            onChange={(e) => setSearch(e.currentTarget.value)}
+          />
+        </Group>
+        <Text fz="lg" c={'black'}>
+          Desa Darmasaba menjaga dan mengembangkan lingkungan demi kesejahteraan warganya. Fokus utama meliputi penghijauan, pengelolaan sampah, dan perlindungan kawasan hijau.
         </Text>
-        <Text px={20} ta={'center'} fz={'h4'}>Desa Darmasaba memiliki lingkungan yang terus dijaga dan dikembangkan demi kesejahteraan warganya. Upaya pelestarian lingkungan difokuskan pada penghijauan, pengelolaan sampah, serta perlindungan kawasan hijau.</Text>
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2,
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper p={20} bg={colors['white-trans-1']}>
-                  <Text fw={'bold'} c={colors['blue-button']} fz={{ base: "lg", md: "xl" }} >
-                    {v.title}
-                  </Text>
-                  <Box>
-                    {v.icon}
-                    <Text c={colors['blue-button']} fz={'h4'} fw={'bold'}>
-                      {v.jumlah}
-                    </Text>
-                  </Box>
-                  <Text fz={{ base: "lg", md: "xl" }} >
-                    {v.deskripsi}
-                  </Text>
-
-                </Paper>
-              </Box>
-            )
-          })}
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+          {data.map((item) => (
+            <Paper
+              key={item.id}
+              p="lg"
+              bg={colors['white-trans-2']}
+              radius="md"
+              shadow="xl"
+              style={{ transition: 'all 0.3s', '&:hover': { transform: 'translateY(-5px)', boxShadow: `0 0 20px ${colors['blue-button']}` } }}
+            >
+              <Stack align="center" gap="md">
+                <Tooltip label={item.name} position="top" withArrow>
+                  <Center>
+                    {iconMap[item.icon] ? (
+                      React.createElement(iconMap[item.icon], { 
+                        size: 55, 
+                        color: colors['blue-button'],
+                        style: { 
+                          transition: 'all 0.3s',
+                          filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.1))'
+                        }
+                      })
+                    ) : null}
+                  </Center>
+                </Tooltip>
+                <Text fw="bold" fz="xl" c={colors['blue-button']}>
+                ± {item.jumlah}
+                </Text>
+                <Text ta="center" fz="md" c={"black"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                <Badge variant="gradient" gradient={{ from: '#1C6EA4', to: '#69C0FF' }} size="sm">
+                  {item.name}
+                </Badge>
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
+        <Center mt="xl">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            color="blue"
+            radius="xl"
+          />
+        </Center>
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/lingkungan/konservasi-adat-bali/page.tsx

@@ -1,93 +1,79 @@
 import colors from '@/con/colors';
-import { Box, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
+import { Box, Center, List, ListItem, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 const data = [
   {
     id: 1,
     title: 'Filosofi Tri Hita Karana',
-    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
-      <ListItem>
-        Parahyangan: Hubungan manusia dengan Tuhan
-      </ListItem>
-      <ListItem>
-        Pawongan: Hubungan antar manusia
-      </ListItem>
-      <ListItem>
-        Palemahan: Hubungan manusia dengan alam
-      </ListItem>
-    </List>
+    listDeskripsi: (
+      <List fz={'lg'} spacing="sm" ta={'justify'}>
+        <ListItem>Parahyangan: Hubungan manusia dengan Tuhan yang dijaga penuh kesadaran spiritual</ListItem>
+        <ListItem>Pawongan: Harmoni dan kerja sama antar manusia dalam masyarakat</ListItem>
+        <ListItem>Palemahan: Pelestarian lingkungan dan hubungan manusia dengan alam</ListItem>
+      </List>
+    ),
   },
   {
     id: 2,
     title: 'Bentuk Konservasi Berdasarkan Adat',
-    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
-      <ListItem>
-        Pelestarian Hutan Adat seperti Alas Pala Sangeh atau Wana Kerthi
-      </ListItem>
-      <ListItem>
-        Subak: Sistem pengelolaan irigasi tradisional yang menjunjung kebersamaan dan keberlanjutan
-      </ListItem>
-      <ListItem>
-        Hari Raya Tumpek Uduh: Perayaan khusus untuk menghormati pohon dan tumbuhan
-      </ListItem>
-      <ListItem>
-        Perarem dan Awig-Awig: Aturan adat desa yang mengatur larangan menebang pohon sembarangan, membuang limbah ke sungai, dll.
-      </ListItem>
-      <ListItem>
-        Ritual penyucian alam seperti Melasti, Piodalan Segara, dan lainnya
-      </ListItem>
-    </List>
+    listDeskripsi: (
+      <List fz={'lg'} spacing="sm" ta={'justify'}>
+        <ListItem>Pelestarian Hutan Adat seperti Alas Pala Sangeh dan Wana Kerthi</ListItem>
+        <ListItem>Subak: Sistem irigasi tradisional yang menekankan kebersamaan dan keberlanjutan</ListItem>
+        <ListItem>Hari Raya Tumpek Uduh: Perayaan untuk menghormati pohon dan tumbuhan</ListItem>
+        <ListItem>Perarem & Awig-Awig: Aturan adat untuk menjaga lingkungan dari kerusakan</ListItem>
+        <ListItem>Ritual penyucian alam seperti Melasti dan Piodalan Segara</ListItem>
+      </List>
+    ),
   },
   {
     id: 3,
     title: 'Nilai Konservasi Adat',
-    listDeskripsi: <List fz={'h4'} pr={20} ta={'justify'}>
-      <ListItem>
-        Menjaga keseimbangan ekosistem
-      </ListItem>
-      <ListItem>
-        Melestarikan spiritualitas lokal dan kesucian alam
-      </ListItem>
-      <ListItem>
-        Menumbuhkan kesadaran kolektif untuk hidup selaras dengan lingkungan
-      </ListItem>
-      <ListItem>
-        Menjaga keberlangsungan sumber daya alam untuk generasi mendatang
-      </ListItem>
-    </List>
+    listDeskripsi: (
+      <List fz={'lg'} spacing="sm" ta={'justify'}>
+        <ListItem>Menjaga keseimbangan ekosistem dan lingkungan hidup</ListItem>
+        <ListItem>Melestarikan spiritualitas lokal dan kesucian alam</ListItem>
+        <ListItem>Meningkatkan kesadaran kolektif untuk hidup selaras dengan alam</ListItem>
+        <ListItem>Menjamin keberlanjutan sumber daya alam untuk generasi mendatang</ListItem>
+      </List>
+    ),
   },
-]
+];
+
 function Page() {
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="24">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} pb={20}>
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
+      <Box px={{ base: 'md', md: 100 }} pb={30}>
+        <Text ta="center" fz={{ base: '2xl', md: '3rem' }} c={colors['blue-button']} fw="bold">
           Konservasi Adat Bali
         </Text>
-        <Text px={20} ta={'center'} fz={'h4'}>
-          Konservasi Adat Bali adalah upaya pelestarian lingkungan yang berpijak pada kearifan lokal masyarakat Bali, di mana alam dan budaya dianggap sebagai satu kesatuan yang harus dijaga secara harmonis.
+        <Text px={20} ta="center" fz="lg" c="dimmed">
+          Pelestarian lingkungan di Bali yang berpijak pada kearifan lokal, menjaga harmoni antara alam, budaya, dan manusia.
         </Text>
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 3,
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper h={{ base: 0, md: 450 }} p={20} bg={colors['white-trans-1']}>
-                  <Text fz={'h3'} fw={'bold'} c={colors['blue-button']}>{v.title}</Text>
-                  {v.listDeskripsi}
-                </Paper>
-              </Box>
-            )
-          })}
+      <Box px={{ base: 'md', md: 100 }}>
+        <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+          {data.map((item) => (
+            <Paper
+              key={item.id}
+              p="lg"
+              bg="linear-gradient(145deg, #DFE3E8FF 0%, #EFF1F4FF 100%)"
+              style={{ borderRadius: 16, boxShadow: '0 0 20px rgba(28, 110, 164, 0.5)' }}
+            >
+              <Stack gap="md" px={20}>
+                <Center>
+                  <Text fz="xl" fw="bold" c="black">
+                    {item.title}
+                  </Text>
+                </Center>
+                {item.listDeskripsi}
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
       </Box>
     </Stack>

src/app/darmasaba/(pages)/lingkungan/pengelolaan-sampah-bank-sampah/page.tsx

@@ -1,63 +1,60 @@
+'use client'
+import pengelolaanSampahState from '@/app/admin/(dashboard)/_state/lingkungan/pengelolaan-sampah';
 import colors from '@/con/colors';
-import { Box, Flex, Paper, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
-import { IconClipboardTextFilled, IconMapPin, IconRecycle, IconScale, IconSearch, IconTrashFilled, IconTruckFilled } from '@tabler/icons-react';
+import { Box, Flex, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { useShallowEffect } from '@mantine/hooks';
+import { Icon, IconChartLine, IconClipboardTextFilled, IconLeaf, IconRecycle, IconScale, IconSearch, IconTent, IconTrashFilled, IconTrophy, IconTruckFilled } from '@tabler/icons-react';
+import React from 'react';
+import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import dynamic from 'next/dynamic';
+
+// Dynamically import the map component to avoid SSR issues with Leaflet
+const LeafletMultiMarkerMap = dynamic(
+  () => import('@/app/admin/(dashboard)/_com/LeafletMultiMarkerMap'),
+  { ssr: false }
+);
 
-const data = [
-  {
-    id: 1,
-    icon: <IconRecycle size={50} color={colors['blue-button']} />,
-    deskripsi: '1. Pilah sampah sesuai jenisnya'
-  },
-  {
-    id: 2,
-    icon: <IconTruckFilled size={50} color={colors["blue-button"]} />,
-    deskripsi: '2. Bawa sampah ke Bank Sampah'
-  },
-  {
-    id: 3,
-    icon: <IconScale size={50} color={colors["blue-button"]} />,
-    deskripsi: '3. Timbang sampah di Bank Sampah'
-  },
-  {
-    id: 4,
-    icon: <IconClipboardTextFilled size={50} color={colors["blue-button"]} />,
-    deskripsi: '4. Catat hasil timbangan di buku tabungan'
-  },
-  {
-    id: 5,
-    icon: <IconTrashFilled size={50} color={colors["blue-button"]} />,
-    deskripsi: '5. Sampah didaur ulang oleh petugas Bank Sampah'
-  },
-]
 
-const bankSampah = [
-  {
-    id: 1,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah Sarana Gathi',
-    alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
-  },
-  {
-    id: 2,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah BALI WASTU LESTARI',
-    alamat: 'Jl. Ahmad Yani Utara Gg. Garuda No.1, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
-  },
-  {
-    id: 3,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah Jempiring Sari',
-    alamat: 'Jl. Gn. Lebah I No.9, Tegal Harum, Kec. Denpasar Bar., Kota Denpasar, Bali 80119'
-  },
-  {
-    id: 4,
-    icon: <IconMapPin size={50} color={colors['blue-button']} />,
-    deskripsi: 'Bank Sampah Sarana Gathi',
-    alamat: 'Jl. Ahmad Yani Utara No.453, Peguyangan, Kec. Denpasar Utara, Kota Denpasar, Bali 80115'
-  },
-]
 function Page() {
+  const state = useProxy(pengelolaanSampahState.pengelolaanSampah)
+  const state2 = useProxy(pengelolaanSampahState.keteranganSampah)
+
+  const {
+    data,
+    load
+  } = state.findMany
+
+  const {
+    data: data2,
+    load: load2
+  } = state2.findMany
+
+  useShallowEffect(() => {
+    load()
+    load2()
+  }, [])
+
+  const iconMap: Record<string, Icon> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+  };
+
+  if (state.findMany.loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton h={500} />
+      </Stack>
+    )
+  }
+
   return (
     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
       <Box px={{ base: 'md', md: 100 }}>
@@ -84,10 +81,10 @@ function Page() {
               <Box key={k} px={28}>
                 <Paper p={20} bg={colors['white-trans-1']}>
                   <Flex gap={20} align={'center'}>
-                    <Box>
-                      {v.icon}
+                    <Box style={{ alignContent: 'center', alignItems: 'center' }}>
+                      {k + 1} {iconMap[v.icon] ? React.createElement(iconMap[v.icon]) : null}
                     </Box>
-                    <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.deskripsi}</Text>
+                    <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>{v.name}</Text>
                   </Flex>
                 </Paper>
               </Box>
@@ -96,7 +93,7 @@ function Page() {
         </SimpleGrid>
       </Box>
 
-      <Box px={{ base: 'md', md: 100 }} >
+      <Box px={{ base: 'md', md: 100 }}>
         <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
           Keterangan Bank Sampah Terdekat
         </Text>
@@ -107,66 +104,64 @@ function Page() {
           leftSection={<IconSearch size={20} />}
           placeholder='Cari Bank Sampah Terdekat'
         />
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 2,
-          }}>
+        
+        <SimpleGrid cols={{ base: 1, md: 2 }} spacing="lg">
+          {/* Left side - List of bank locations */}
           <Box>
-            <SimpleGrid
-              cols={{
-                base: 1,
-                md: 1,
-              }}
-            >
-              {bankSampah.map((v, k) => {
-                return (
-                  <Box key={k} px={20}>
-                    <Paper p={20} bg={colors['white-trans-1']} radius={'lg'}>
-                      <Flex gap={20} align={'center'}>
-                        <Box>
-                          {v.icon}
-                        </Box>
-                        <Box>
-                          <Text fw={'bold'} fz={{ base: "lg", md: "xl" }} c={'black'}>
-                            {v.deskripsi}
-                          </Text>
-                          <Text fz={{ base: "md", md: "lg" }} c={'black'}>
-                            {v.alamat}
-                          </Text>
-                        </Box>
-                      </Flex>
-                    </Paper>
-                  </Box>
-                )
-              })}
-            </SimpleGrid>
+            <Paper p="md" bg={colors['white-trans-1']} radius="lg">
+              <Text fz="xl" fw="bold" mb="md">Daftar Bank Sampah</Text>
+              <Stack gap="md">
+                {data2?.map((v, k) => (
+                  <Paper key={k} p="md" withBorder radius="md">
+                    <Text fw="bold" fz="lg">{v.namaTempatMaps}</Text>
+                    <Text c="dimmed" fz="sm" mb="sm">{v.alamat}</Text>
+                    {v.lat && v.lng ? (
+                      <a
+                        href={`https://www.google.com/maps/dir/?api=1&destination=${v.lat},${v.lng}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{ color: colors['blue-button'], textDecoration: 'none' }}
+                      >
+                        <Text fz="sm">📌 Buka di Google Maps</Text>
+                      </a>
+                    ) : (
+                      <Text c="dimmed" fz="sm">Koordinat belum tersedia</Text>
+                    )}
+                  </Paper>
+                ))}
+              </Stack>
+            </Paper>
           </Box>
-          <Box style={{
-            position: 'relative',
-            width: '100%',
-            paddingBottom: '90.5%', // Aspek rasio 16:9 (atau gunakan '100%' untuk aspek rasio 1:1)
-            height: 0,
-            overflow: 'hidden'
-          }}>
-            <iframe
-              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d31558.578355337635!2d115.18413781150647!3d-8.613053599999985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2dd23ff3a9d0f0ab%3A0xb6bb54a820adbae6!2sBank%20Sampah%20Sarana%20Gathi!5e0!3m2!1sid!2sid!4v1743994947623!5m2!1sid!2sid"
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                width: '100%',
-                height: '100%',
-                border: 0
-              }}
-              loading="lazy"
-              allowFullScreen
-            ></iframe>
+          
+          {/* Right side - Single map showing all locations */}
+          <Box style={{ position: 'sticky', top: '20px' }}>
+            <Paper p="md" bg={colors['white-trans-1']} radius="lg" h="100%">
+              <Text fz="xl" fw="bold" mb="md">Peta Lokasi</Text>
+              {data2?.some(v => v.lat && v.lng) ? (
+                <Box style={{ height: '600px', width: '100%', borderRadius: '8px', overflow: 'hidden' }}>
+                  <LeafletMultiMarkerMap
+                    center={[
+                      data2[0]?.lat || -8.3405,
+                      data2[0]?.lng || 115.0920
+                    ]}
+                    markers={data2
+                      .filter(v => v.lat && v.lng)
+                      .map(v => ({
+                        position: [v.lat, v.lng],
+                        popup: v.namaTempatMaps
+                      }))}
+                  />
+                </Box>
+              ) : (
+                <Text c="dimmed" fz="sm">Tidak ada koordinat yang tersedia</Text>
+              )}
+            </Paper>
           </Box>
         </SimpleGrid>
       </Box>
-    </Stack>
+    </Stack >
   );
 }
 
 export default Page;
+

src/app/darmasaba/(pages)/lingkungan/program-penghijauan/page.tsx

@@ -1,71 +1,131 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconChristmasTreeFilled, IconHomeEco, IconShieldFilled, IconTrendingUp } from '@tabler/icons-react';
+import { Box, Button, Center, Group, Pagination, Paper, SimpleGrid, Skeleton, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { IconSearch, IconLeaf, IconTrophy, IconTent, IconChartLine, IconRecycle, IconTruckFilled, IconScale, IconClipboardTextFilled, IconTrashFilled, IconHomeEco, IconChristmasTreeFilled, IconTrendingUp, IconShieldFilled } from '@tabler/icons-react';
 import BackButton from '../../desa/layanan/_com/BackButto';
+import programPenghijauanState from '@/app/admin/(dashboard)/_state/lingkungan/program-penghijauan';
+import { useProxy } from 'valtio/utils';
+import { useDebouncedValue, useShallowEffect } from '@mantine/hooks';
+import { useState } from 'react';
+import React from 'react';
 
-const data = [
-  {
-    id: 1,
-    deskripsi: 'Lingkungan Sehat',
-    icon: <IconHomeEco size={80} color={colors['blue-button']} />,
-  },
-  {
-    id: 2,
-    deskripsi: 'Sumber Oksigen',
-    icon: <IconChristmasTreeFilled size={80} color={colors['blue-button']} />,
-  },
-  {
-    id: 3,
-    deskripsi: 'Ekonomi Berkelanjutan',
-    icon: <IconTrendingUp size={80} color={colors['blue-button']} />,
-  },
-  {
-    id: 4,
-    deskripsi: 'Mencegah Bencana',
-    icon: <IconShieldFilled size={80} color={colors['blue-button']} />,
-  },
-]
 function Page() {
+  const state = useProxy(programPenghijauanState);
+  const [search, setSearch] = useState("");
+  const [debouncedSearch] = useDebouncedValue(search, 500);
+  const { data, load, page, totalPages, loading } = state.findMany;
+
+  useShallowEffect(() => {
+    load(page, 10, debouncedSearch);
+  }, [page, debouncedSearch]);
+
+  const iconMap: Record<string, any> = {
+    ekowisata: IconLeaf,
+    kompetisi: IconTrophy,
+    wisata: IconTent,
+    ekonomi: IconChartLine,
+    sampah: IconRecycle,
+    truck: IconTruckFilled,
+    scale: IconScale,
+    clipboard: IconClipboardTextFilled,
+    trash: IconTrashFilled,
+    lingkunganSehat: IconHomeEco,
+    sumberOksigen: IconChristmasTreeFilled,
+    ekonomiBerkelanjutan: IconTrendingUp,
+    mencegahBencana: IconShieldFilled,
+  };
+
+  if (loading || !data) {
+    return (
+      <Stack py={20}>
+        <Skeleton h={500} radius="xl" />
+      </Stack>
+    );
+  }
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="xl">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Box px={{ base: 'md', md: 100 }} >
-        <Text ta={"center"} fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Program Penghijauan Desa
+      <Box px={{ base: 'md', md: 100 }}>
+        <Box>
+          <Group justify="space-between" align='center' mt="md">
+            <Text ta="center" fz={{ base: "h1", md: "2.5rem" }} c={colors["blue-button"]} fw="bold">
+              Program Penghijauan Desa
+            </Text>
+            <TextInput
+              radius="xl"
+              w={'30%'}
+              placeholder="Cari program atau kegiatan"
+              leftSection={<IconSearch size={20} />}
+              value={search}
+              onChange={(e) => setSearch(e.currentTarget.value)}
+            />
+          </Group>
+        </Box>
+        <Text c="dimmed" fz={{ base: 'sm', md: 'lg' }} mt="sm">
+          Mari berpartisipasi menanam dan merawat pohon untuk menciptakan lingkungan hijau, sehat, dan seimbang bagi seluruh warga desa.
         </Text>
-        <Text px={20} ta={'center'} fz={'h4'}>Program Penghijauan Desa bertujuan untuk meningkatkan kesadaran masyarakat akan pentingnya lingkungan hijau melalui penanaman pohon dan perawatan tanaman.</Text>
       </Box>
       <Box px={{ base: 'md', md: 100 }} pb={60}>
-        <Text c={colors['blue-button']} fw={'bold'} py={10} px={28} fz={{ base: "lg", md: "xl" }} ta={"justify"}>
-          Manfaat Program Penghijauan
-        </Text>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            md: 4
-          }}>
-          {data.map((v, k) => {
-            return (
-              <Box key={k}>
-                <Paper p={20} bg={colors['white-trans-1']}>
-                  <Stack flex={5}>
-                    <Center>
-                      {v.icon}
-                    </Center>
-                    <Box>
-                      <Text fz={{ base: "lg", md: "xl" }} ta={'center'} c={colors['blue-button']} fw={'bold'}>{v.deskripsi}</Text>
-                    </Box>
-                    <Group justify='center'>
-                    <Button bg={colors['blue-button']}>Detail</Button>
-                    </Group>
-                  </Stack>
-                </Paper>
-              </Box>
-            )
-          })}
+        <Title order={2} c={colors['blue-button']} fw="bold" py={10} px={28} fz={{ base: 'lg', md: 'xl' }}>
+          Manfaat Program
+        </Title>
+        <SimpleGrid cols={{ base: 1, md: 4 }} spacing="lg" mt="md">
+          {data.map((v) => (
+            <Paper
+              key={v.id}
+              p="xl"
+              radius="xl"
+              bg={colors['white-trans-1']}
+              withBorder
+              style={{
+                backdropFilter: 'blur(10px)',
+                border: `1px solid rgba(255,255,255,0.2)`,
+                transition: 'transform 0.3s, box-shadow 0.3s',
+                cursor: 'pointer',
+              }}
+              onMouseEnter={(e) => {
+                const el = e.currentTarget;
+                el.style.transform = 'translateY(-8px)';
+                el.style.boxShadow = '0 15px 30px rgba(28,110,164,0.5)';
+              }}
+              onMouseLeave={(e) => {
+                const el = e.currentTarget;
+                el.style.transform = 'translateY(0)';
+                el.style.boxShadow = '0 4px 10px rgba(0,0,0,0.1)';
+              }}
+            >
+              <Stack align="center" gap="sm">
+                <Center>
+                  {iconMap[v.icon] && React.createElement(iconMap[v.icon], { size: 50, stroke: 1.5, color: colors['blue-button'] })}
+                </Center>
+                <Tooltip label={v.judul} withArrow position="bottom">
+                  <Text fz={{ base: 'md', md: 'lg' }} ta="center" c={colors['blue-button']} fw="bold">
+                    {v.name}
+                  </Text>
+                </Tooltip>
+                <Text fz="sm" ta="center" c="dimmed">
+                  {v.judul}
+                </Text>
+                <Button variant="gradient" gradient={{ from: colors['blue-button'], to: 'cyan' }} size="sm" radius="xl" mt="sm">
+                  Pelajari Lebih Lanjut
+                </Button>
+              </Stack>
+            </Paper>
+          ))}
         </SimpleGrid>
+        <Center mt="xl">
+          <Pagination
+            value={page}
+            onChange={(newPage) => load(newPage)}
+            total={totalPages}
+            color="blue"
+            radius="xl"
+          />
+        </Center>
       </Box>
     </Stack>
   );

src/app/darmasaba/(pages)/ppid/profile-ppid/page.tsx

@@ -3,119 +3,132 @@ import stateProfilePPID from '@/app/admin/(dashboard)/_state/ppid/profile_ppid/p
 import colors from '@/con/colors';
 import { Box, Center, Divider, Flex, Image, List, Paper, SimpleGrid, Skeleton, Stack, Text } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
+import { IconBuildingCommunity, IconTargetArrow, IconTimeline, IconUser } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
 import BackButton from '../../desa/layanan/_com/BackButto';
 
 function Page() {
   const allList = useProxy(stateProfilePPID)
   useShallowEffect(() => {
-    allList.profile.load("edit") // Assuming "1" is your default ID, adjust as needed
+    allList.profile.load("edit")
   }, [])
 
-  if (!allList.profile.data) return <Stack bg={colors.Bg} py={"xl"} gap={"22"}>
-    <Box px={{ base: 'md', md: 100 }}>
-      <Skeleton style={{backgroundColor: colors.Bg}} h={40} />
-    </Box>
-    <Box px={{ base: 'md', md: 100 }}>
-      <Skeleton h={80} />
-    </Box>
-    <Box px={{ base: "md", md: 100 }}>
-      <Paper p={"xl"} bg={colors['white-trans-1']}>
-        {Array.from({ length: 10 }).map((v, k) =>
-          <Skeleton key={k} h={40} />
-        )}
-      </Paper>
-    </Box>
-  </Stack>
+  if (!allList.profile.data) return (
+    <Stack bg={colors.Bg} py="xl" gap="22">
+      <Box px={{ base: 'md', md: 100 }}>
+        <Skeleton h={40} />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Skeleton h={80} />
+      </Box>
+      <Box px={{ base: 'md', md: 100 }}>
+        <Paper p="xl" bg={colors['white-trans-1']}>
+          {Array.from({ length: 8 }).map((_, i) => (
+            <Skeleton key={i} h={40} mb="sm" />
+          ))}
+        </Paper>
+      </Box>
+    </Stack>
+  )
 
   const dataArray = Array.isArray(allList.profile.data)
     ? allList.profile.data
-    : [allList.profile.data];
+    : [allList.profile.data]
 
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap="22">
       <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
       <Box px={{ base: 'md', md: 100 }}>
-        <Text ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw={"bold"}>
-          Profil Singkat PPID Desa Darmasaba
+        <Text ta="center" fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.4rem" }} c={colors["blue-button"]} fw="bold">
+          PPID Desa Darmasaba Profile
         </Text>
       </Box>
       {dataArray.map((item) => (
         <Box key={item.id} px={{ base: "md", md: 100 }}>
-          <Paper p={"xl"} bg={colors['white-trans-1']}>
+          <Paper p="xl" bg={colors['white-trans-1']} radius="lg" shadow="xl">
             <Box px={{ base: "md", md: 100 }}>
-              <Flex align={"center"} gap={50}>
-                <Image src={"/darmasaba-icon.png"} h={{ base: 80, md: 150 }} alt='' />
-                <Text fz={{ base: "1.4rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
+              <Flex align="center" gap={40} justify="center">
+                <Image src="/darmasaba-icon.png" h={{ base: 70, md: 120 }} alt="Village logo" />
+                <Text fz={{ base: "1.5rem", md: "2rem", lg: "2.5rem", xl: "3rem" }} fw="bold">
+                  Public Information Officer
+                </Text>
               </Flex>
             </Box>
-            <Divider my={"md"} />
-            {/* biodata perbekel */}
-            <Box px={{ base: 0, md: 50 }} pb={30}>
-              <SimpleGrid
-                cols={{
-                  base: 1,
-                  md: 1,
-                  lg: 1,
-                  xl: 2,
-                }}
-              >
-                <Box px={{ base: 0, md: 50 }}>
-                  <Paper bg={colors['white-trans-1']} w={{ base: "100%", md: "100%" }}>
-                    <Stack gap={0}>
-                      <Center>
-                        <Image pt={{ base: 0, md: 90 }} src={item.imageUrl ? `${item.imageUrl}?t=${Date.now()}` : "/api/img/perbekel.png"} w={{ base: 250, md: 355 }} alt='' />
-                      </Center>
-                      <Paper
-                        bg={colors['blue-button']}
-                        py={30}
-                        className="glass3"
-                        px={{ base: 20, md: 20 }}
+            <Divider my="lg" />
 
-                      >
-                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.5rem", md: "2.125rem", lg: "2.25rem", xl: "1.5rem" }}>
+            <Box px={{ base: 0, md: 50 }} pb={40}>
+              <SimpleGrid cols={{ base: 1, xl: 2 }} spacing="xl">
+                <Box px={{ base: 0, md: 50 }}>
+                  <Paper bg={colors['white-trans-1']} radius="lg" shadow="sm">
+                    <Stack gap="md">
+                      <Center>
+                        <Image
+                          src={item.imageUrl ? `${item.imageUrl}?t=${Date.now()}` : "/api/img/perbekel.png"}
+                          w={{ base: 220, md: 330 }}
+                          alt="Leader photo"
+                          radius="md"
+                        />
+                      </Center>
+                      <Paper bg={colors['blue-button']} py={25} radius="lg" className="glass3">
+                        <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.5rem", md: "2rem" }}>
                           {item.name}
                         </Text>
                       </Paper>
                     </Stack>
                   </Paper>
                 </Box>
+
                 <Box>
-                  <Box>
-                    <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Biodata</Text>
-                    <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.biodata }} />
-                  </Box>
-                  <Box>
-                    <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Riwayat Karir</Text>
-                    <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
-                  </Box>
+                  <Stack gap="xl">
+                    <Box>
+                      <Flex align="center" gap="sm" mb="sm">
+                        <IconUser size={28} />
+                        <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Biography</Text>
+                      </Flex>
+                      <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.biodata }} />
+                    </Box>
+                    <Box>
+                      <Flex align="center" gap="sm" mb="sm">
+                        <IconTimeline size={28} />
+                        <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Career History</Text>
+                      </Flex>
+                      <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem" }} dangerouslySetInnerHTML={{ __html: item.riwayat }} />
+                    </Box>
+                  </Stack>
                 </Box>
               </SimpleGrid>
             </Box>
-            <Box pb={30}>
-              <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
-              <List>
+
+            <Box pb={40}>
+              <Flex align="center" gap="sm" mb="sm">
+                <IconBuildingCommunity size={28} />
+                <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Organizational Experience</Text>
+              </Flex>
+              <List spacing="xs" size="sm">
                 <Box px={20}>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
+                  <Text fz={{ base: "1rem", md: "1.125rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.pengalaman }} />
                 </Box>
               </List>
             </Box>
-            <Box pb={20}>
-              <Text fz={{ base: "1.125rem", md: "1.375rem", lg: "1.75rem", xl: "2rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
-              <List>
+
+            <Box>
+              <Flex align="center" gap="sm" mb="sm">
+                <IconTargetArrow size={28} />
+                <Text fz={{ base: "1.25rem", md: "1.5rem" }} fw="bold">Flagship Programs</Text>
+              </Flex>
+              <List spacing="xs" size="sm">
                 <Box px={20}>
-                  <Text fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: item.unggulan }} />
+                  <Text fz={{ base: "1rem", md: "1.125rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: item.unggulan }} />
                 </Box>
               </List>
             </Box>
           </Paper>
         </Box>
-
       ))}
     </Stack>
-  );
+  )
 }
 
-export default Page;
+export default Page

src/app/darmasaba/(pages)/ppid/struktur-ppid/page.tsx

@@ -1,121 +1,395 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 /* eslint-disable @typescript-eslint/no-explicit-any */
-'use client'
-import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
-import colors from '@/con/colors';
-import { Box, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
-import { OrganizationChart } from 'primereact/organizationchart';
-import { useEffect } from 'react';
-import { useProxy } from 'valtio/utils';
-import BackButton from '../../desa/layanan/_com/BackButto';
+// /* eslint-disable react-hooks/exhaustive-deps */
+// /* eslint-disable @typescript-eslint/no-explicit-any */
+// 'use client'
+// import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID';
+// import colors from '@/con/colors';
+// import { Box, Image, Paper, Skeleton, Stack, Text, Title } from '@mantine/core';
+// import { OrganizationChart } from 'primereact/organizationchart';
+// import { useEffect } from 'react';
+// import { useProxy } from 'valtio/utils';
+// import BackButton from '../../desa/layanan/_com/BackButto';
 
-function Page() {
-  return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
-      <Box px={{ base: 'md', md: 100 }}>
-        <BackButton />
-      </Box>
-      <Title ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>Struktur PPID</Title>
-        <StrukturOrganisasiPPID />
+// function Page() {
+//   return (
+//     <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={"22"}>
+//       <Box px={{ base: 'md', md: 100 }}>
+//         <BackButton />
+//       </Box>
+//       <Title ta={"center"} fz={{ base: "2rem", md: "2.5rem", lg: "3rem", xl: "3.5rem" }} c={colors["blue-button"]} fw={"bold"}>Struktur PPID</Title>
+//         <StrukturOrganisasiPPID />
       
-    </Stack>
-  );
+//     </Stack>
+//   );
+// }
+
+// function StrukturOrganisasiPPID() {
+//   const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
+
+//   useEffect(() => {
+//     stateOrganisasi.findMany.load()
+//   }, [])
+
+//   if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
+//     return (
+//       <Stack py={10}>
+//         <Skeleton h={500} />
+//       </Stack>
+//     );
+//   }
+
+//   // Step 1: Group pegawai berdasarkan posisiId
+//   const posisiMap = new Map<string, any>();
+
+//   for (const pegawai of stateOrganisasi.findMany.data) {
+//     const posisiId = pegawai.posisi.id;
+//     if (!posisiMap.has(posisiId)) {
+//       posisiMap.set(posisiId, {
+//         ...pegawai.posisi,
+//         pegawaiList: [],
+//         children: []
+//       });
+//     }
+//     posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
+//   }
+
+
+//   // Step 2: Buat struktur pohon berdasarkan parentId
+//   const root: any[] = [];
+
+//   posisiMap.forEach((posisi) => {
+//     if (posisi.parentId) {
+//       const parent = posisiMap.get(posisi.parentId);
+//       if (parent) {
+//         parent.children.push(posisi);
+//       }
+//     } else {
+//       root.push(posisi);
+//     }
+//   });
+
+//   // Step 3: Ubah struktur ke format OrganizationChart
+//   function toOrgChartFormat(node: any): any {
+//     return {
+//       expanded: true,
+//       type: 'person',
+//       styleClass: 'p-person',
+//       data: {
+//         name: node.pegawaiList?.[0]?.namaLengkap || 'Tidak ada pegawai',
+//         status: node.nama,
+//         image: node.pegawaiList?.[0]?.image?.link || '/img/default.png'
+//       },
+//       children: node.children.map(toOrgChartFormat)
+//     };
+//   }
+
+
+//   const chartData = root.map(toOrgChartFormat);
+
+//   return (
+//     <Box py={10}>
+//       <Paper bg={colors.grey} p="md" style={{ overflowX: 'auto' }}>
+//         <OrganizationChart style={{ color: colors['blue-button'] }} value={chartData} nodeTemplate={nodeTemplate} />
+//       </Paper>
+//     </Box>
+//   );
+// }
+
+
+// function nodeTemplate(node: any) {
+//   const imageSrc = node?.data?.image || '/img/default.png';
+//   const name = node?.data?.name || 'Tanpa Nama';
+//   const status = node?.data?.status || 'Tidak ada deskripsi';
+
+//   return (
+//     <Stack pos={"relative"} py={"xl"} gap={"22"}>
+//       <Stack align="center" gap={4}>
+//         <Image
+//           src={imageSrc}
+//           alt={name}
+//           radius="xl"
+//           w={120}
+//           h={120}
+//           fit="cover"
+//         />
+//         <Text fw={600} ta="center">{name}</Text>
+//         <Text size="sm" c="dimmed" ta="center">{status}</Text>
+//       </Stack>
+//     </Stack>
+//   );
+// }
+
+// export default Page;
+
+'use client'
+import stateStrukturPPID from '@/app/admin/(dashboard)/_state/ppid/struktur_ppid/struktur_PPID'
+import {
+  Box,
+  Button,
+  Card,
+  Center,
+  Container,
+  Group,
+  Image,
+  Loader,
+  Paper,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+  Transition,
+} from '@mantine/core'
+import { IconRefresh, IconSearch, IconUsers } from '@tabler/icons-react'
+import { OrganizationChart } from 'primereact/organizationchart'
+import { useEffect } from 'react'
+import { useProxy } from 'valtio/utils'
+import BackButton from '../../desa/layanan/_com/BackButto'
+import colors from '@/con/colors'
+
+export default function Page() {
+  return (
+    <Box
+      style={{
+        minHeight: '100vh',
+        background: colors['Bg'],
+        color: '#E6F0FF',
+        paddingBottom: 48,
+      }}
+    >
+      <Container size="xl" py="xl">
+        <Box px={{ base: 'md', md: 100 }}>
+          <BackButton />
+        </Box>
+        <Stack align="center" gap="xl" mt="xl">
+          <Title
+            order={1}
+            ta="center"
+            c={colors['blue-button']}
+            fz={{ base: 28, md: 36, lg: 44 }}
+
+          >
+            Struktur Organisasi PPID
+          </Title>
+          <Text ta="center" c="black" maw={800}>
+            Gambaran visual peran dan pegawai yang ditugaskan. Arahkan kursor
+            untuk melihat detail atau klik node untuk fokus tampilan.
+          </Text>
+        </Stack>
+        <Box mt="lg">
+          <StrukturOrganisasiPPID />
+        </Box>
+      </Container>
+    </Box>
+  )
 }
 
 function StrukturOrganisasiPPID() {
-  const stateOrganisasi = useProxy(stateStrukturPPID.pegawai)
+  const stateOrganisasi: any = useProxy(stateStrukturPPID.pegawai)
 
   useEffect(() => {
-    stateOrganisasi.findMany.load()
+    void stateOrganisasi.findMany.load()
   }, [])
 
-  if (!stateOrganisasi.findMany.data || stateOrganisasi.findMany.data.length === 0) {
+  const isLoading =
+    !stateOrganisasi.findMany.data &&
+    stateOrganisasi.findMany.loading !== false
+
+  if (isLoading) {
     return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    );
+      <Center py={48}>
+        <Stack align="center" gap="sm">
+          <Loader size="lg" />
+          <Text fw={600}>Memuat struktur organisasi…</Text>
+          <Text c="dimmed" size="sm">
+            Mengambil data pegawai dan posisi. Mohon tunggu sebentar.
+          </Text>
+        </Stack>
+      </Center>
+    )
   }
 
-  // Step 1: Group pegawai berdasarkan posisiId
-  const posisiMap = new Map<string, any>();
+  if (
+    !stateOrganisasi.findMany.data ||
+    stateOrganisasi.findMany.data.length === 0
+  ) {
+    return (
+      <Center py={40}>
+        <Stack align="center" gap="md">
+          <Paper
+            radius="md"
+            p="xl"
+            style={{
+              width: 560,
+              background: 'rgba(28,110,164,0.2)',
+              border: `1px solid rgba(255,255,255,0.1)`,
+              textAlign: 'center',
+            }}
+          >
+            <Center>
+              <IconUsers size={56} />
+            </Center>
+            <Title order={3} mt="md">
+              Data pegawai belum tersedia
+            </Title>
+            <Text c="dimmed" mt="xs">
+              Belum ada data pegawai yang tercatat untuk PPID. Silakan coba
+              muat ulang atau periksa sumber data.
+            </Text>
+            <Group justify="center" mt="lg">
+              <Button
+                leftSection={<IconRefresh size={16} />}
+                variant="gradient"
+                gradient={{ from: 'indigo', to: 'cyan' }}
+                onClick={() => stateOrganisasi.findMany.load()}
+              >
+                Muat Ulang
+              </Button>
+              <Button
+                leftSection={<IconSearch size={16} />}
+                variant="subtle"
+                onClick={() =>
+                  stateOrganisasi.findMany.load({ query: { q: '' } })
+                }
+              >
+                Cari Pegawai
+              </Button>
+            </Group>
+          </Paper>
+        </Stack>
+      </Center>
+    )
+  }
 
+  const posisiMap = new Map<string, any>()
   for (const pegawai of stateOrganisasi.findMany.data) {
-    const posisiId = pegawai.posisi.id;
+    const posisiId = pegawai.posisi.id
     if (!posisiMap.has(posisiId)) {
       posisiMap.set(posisiId, {
         ...pegawai.posisi,
         pegawaiList: [],
-        children: []
-      });
+        children: [],
+      })
     }
-    posisiMap.get(posisiId)!.pegawaiList.push(pegawai);
+    posisiMap.get(posisiId)!.pegawaiList.push(pegawai)
   }
 
-
-  // Step 2: Buat struktur pohon berdasarkan parentId
-  const root: any[] = [];
-
+  const root: any[] = []
   posisiMap.forEach((posisi) => {
     if (posisi.parentId) {
-      const parent = posisiMap.get(posisi.parentId);
+      const parent = posisiMap.get(posisi.parentId)
       if (parent) {
-        parent.children.push(posisi);
+        parent.children.push(posisi)
+      } else {
+        root.push(posisi)
       }
     } else {
-      root.push(posisi);
+      root.push(posisi)
     }
-  });
+  })
 
-  // Step 3: Ubah struktur ke format OrganizationChart
   function toOrgChartFormat(node: any): any {
     return {
       expanded: true,
       type: 'person',
       styleClass: 'p-person',
       data: {
-        name: node.pegawaiList?.[0]?.namaLengkap || 'Tidak ada pegawai',
-        status: node.nama,
-        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png'
+        name: node.pegawaiList?.[0]?.namaLengkap || 'Belum ditugaskan',
+        title: node.nama || 'Tanpa jabatan',
+        image: node.pegawaiList?.[0]?.image?.link || '/img/default.png',
+        description: node.deskripsi || '',
+        positionId: node.id || null,
       },
-      children: node.children.map(toOrgChartFormat)
-    };
+      children: node.children?.map(toOrgChartFormat) || [],
+    }
   }
 
-
-  const chartData = root.map(toOrgChartFormat);
+  const chartData = root.map(toOrgChartFormat)
 
   return (
-    <Box py={10}>
-      <Paper bg={colors.grey} p="md" style={{ overflowX: 'auto' }}>
-        <OrganizationChart style={{ color: colors['blue-button'] }} value={chartData} nodeTemplate={nodeTemplate} />
+    <Box py={16} >
+      <Paper
+        radius="md"
+        p="md"
+        style={{
+          background: 'rgba(28,110,164,0.2)',
+          border: `1px solid rgba(255,255,255,0.1)`,
+          overflowX: 'auto',
+        }}
+      >
+        <OrganizationChart
+          value={chartData}
+          nodeTemplate={nodeTemplate}
+        />
       </Paper>
     </Box>
-  );
+  )
 }
 
-
 function nodeTemplate(node: any) {
-  const imageSrc = node?.data?.image || '/img/default.png';
-  const name = node?.data?.name || 'Tanpa Nama';
-  const status = node?.data?.status || 'Tidak ada deskripsi';
+  const imageSrc = node?.data?.image || '/img/default.png'
+  const name = node?.data?.name || 'Tanpa Nama'
+  const title = node?.data?.title || 'Tanpa Jabatan'
+  const description = node?.data?.description || ''
 
   return (
-    <Stack pos={"relative"} py={"xl"} gap={"22"}>
-      <Stack align="center" gap={4}>
-        <Image
-          src={imageSrc}
-          alt={name}
-          radius="xl"
-          w={120}
-          h={120}
-          fit="cover"
-        />
-        <Text fw={600} ta="center">{name}</Text>
-        <Text size="sm" c="dimmed" ta="center">{status}</Text>
-      </Stack>
-    </Stack>
-  );
+    <Transition  mounted transition="pop" duration={240}>
+      {(styles) => (
+        <Card
+          radius="lg"
+          withBorder
+          style={{
+            ...styles,
+            width: 260,
+            padding: 16,
+            background: 'rgba(28,110,164,0.3)',
+            borderColor: 'rgba(255,255,255,0.15)',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            textAlign: 'center',
+          }}
+        >
+          <Image
+            src={imageSrc}
+            alt={name}
+            radius="md"
+            width={120}
+            height={120}
+            fit="cover"
+            style={{
+              objectFit: 'cover',
+              border: '2px solid rgba(255,255,255,0.2)',
+              marginBottom: 12,
+            }}
+          />
+          <Text fw={700}>{name}</Text>
+          <Text size="sm" c="dimmed" mt={4}>
+            {title}
+          </Text>
+          <Text size="xs" c="dimmed" mt={8} lineClamp={3}>
+            {description || 'Belum ada deskripsi.'}
+          </Text>
+          <Tooltip label="Lihat detail" withArrow position="bottom">
+            <Button
+              variant="light"
+              size="xs"
+              mt="md"
+              onClick={() => {
+                const id = node?.data?.positionId
+                if (id && (window as any).scrollTo) {
+                  ;(window as any).scrollTo({ top: 0, behavior: 'smooth' })
+                }
+              }}
+            >
+              Detail
+            </Button>
+          </Tooltip>
+        </Card>
+      )}
+    </Transition>
+  )
 }
 
-export default Page;
+
+

src/app/darmasaba/(tambahan)/apbdes/page.tsx

@@ -1,112 +1,97 @@
 /* eslint-disable react-hooks/exhaustive-deps */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client'
-import colors from '@/con/colors';
-import { ActionIcon, BackgroundImage, Box, Center, Container, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconDownload } from '@tabler/icons-react';
-import BackButton from '../../(pages)/desa/layanan/_com/BackButto';
-import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
-import { useProxy } from 'valtio/utils';
-import { useEffect, useState } from 'react';
-import { Link } from 'next-view-transitions';
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
+import colors from '@/con/colors'
+import { ActionIcon, BackgroundImage, Box, Center, Container, Group, Loader, SimpleGrid, Stack, Text, Title } from '@mantine/core'
+import { IconDownload } from '@tabler/icons-react'
+import { Link } from 'next-view-transitions'
+import { useEffect, useState } from 'react'
+import { useProxy } from 'valtio/utils'
+import BackButton from '../../(pages)/desa/layanan/_com/BackButto'
 
 function Page() {
-  const state = useProxy(apbdes);
-  const [loading, setLoading] = useState(false);
+  const state = useProxy(apbdes)
+  const [loading, setLoading] = useState(false)
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true);
-        await state.findMany.load();
+        setLoading(true)
+        await state.findMany.load()
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error(error)
       } finally {
-        setLoading(false);
+        setLoading(false)
       }
     }
-    loadData();
+    loadData()
   }, [])
 
-  const data = state.findMany.data || [];
+  const data = state.findMany.data || []
+
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
-      <Box px={{ base: "md", md: 100 }}><BackButton /></Box>
-      <Container w={{ base: "100%", md: "50%" }}>
-        <Stack align="center" gap={0}>
-          <Text fz={"3.4rem"} fw={"bold"}>
-            APBDes
-          </Text>
-          <Text
-            py={10}
-            ta={"justify"}
-          >
-            Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab. Adapun APBDes sebagai berikut:
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap={32}>
+      <Box px={{ base: 'md', md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container w={{ base: '100%', md: '60%' }}>
+        <Stack align="center" gap="sm">
+          <Title order={1} fz={{ base: '2.4rem', md: '3.2rem' }} fw="bold" ta="center">
+            Anggaran Pendapatan & Belanja Desa (APBDes)
+          </Title>
+          <Text fz="md" c="dimmed" ta="center">
+            Laporan transparansi APBDes Desa Darmasaba sebagai bentuk keterbukaan dan akuntabilitas pengelolaan anggaran desa.
           </Text>
         </Stack>
       </Container>
-      <SimpleGrid
-        px={{ base: "md", md: 100 }}
-        cols={{
-          base: 1,
-          sm: 3,
-        }}
-      >
-        {loading ? (
-          <Center>
-            <Text fz={"2.4rem"}>Memuat Data...</Text>
-          </Center>
-        ) : (
-          data.map((v, k) => {
-            return (
-              <BackgroundImage
-                key={k}
-                src={v.image?.link || ''}
-                h={350}
-                radius={16}
-                pos={"relative"}
-              >
-                <Box
-                  style={{
-                    borderRadius: 16,
-                    zIndex: 0
-                  }}
-                  pos={"absolute"}
-                  w={"100%"}
-                  h={"100%"}
-                  bg={colors.trans.dark[2]}
-                />
-                <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                  <Box p={"lg"}>
-                    <Text
-                      c={"white"}
-                      size={"1.5rem"}
-                      style={{
-                        textAlign: "center",
-                      }}>{v.name}</Text>
-                  </Box>
-                  <Text
-                    fw={"bold"}
-                    c={"white"}
-                    size={"3.5rem"}
-                    style={{
-                      textAlign: "center",
-                    }}>{v.jumlah}</Text>
-                  <Group justify="center">
-                    <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
-                      <Flex gap={"md"}>
-                        <IconDownload size={20} />
-                        <Text fz={"sm"} c={"white"}>Download</Text>
-                      </Flex>
-                    </ActionIcon>
-                  </Group>
-                </Stack>
-              </BackgroundImage>
-            )
-          })
-        )}
-      </SimpleGrid>
+      {loading ? (
+        <Center mih={200}>
+          <Stack align="center" gap="sm">
+            <Loader size="lg" color="blue" />
+            <Text fz="lg" c="dimmed">Sedang memuat data APBDes...</Text>
+          </Stack>
+        </Center>
+      ) : data.length === 0 ? (
+        <Center mih={200}>
+          <Stack align="center" gap="xs">
+            <Text fz="xl" fw={600} c="dimmed">Belum ada data APBDes tersedia</Text>
+            <Text fz="sm" c="dimmed">Data akan ditampilkan jika sudah diunggah oleh admin desa</Text>
+          </Stack>
+        </Center>
+      ) : (
+        <SimpleGrid px={{ base: 'md', md: 100 }} cols={{ base: 1, sm: 2, md: 3 }} spacing="xl">
+          {data.map((v: any, k: number) => (
+            <BackgroundImage key={k} src={v.image?.link || ''} h={360} radius="xl" pos="relative">
+              <Box pos="absolute" inset={0} bg="rgba(0,0,0,0.45)" style={{ borderRadius: 16 }} />
+              <Stack justify="space-between" h="100%" p="lg" pos="relative">
+                <Box>
+                  <Text fz="lg" fw={600} c="white" ta="center">
+                    {v.name}
+                  </Text>
+                </Box>
+                <Text fz="2.6rem" fw="bold" c="white" ta="center">
+                  {v.jumlah}
+                </Text>
+                <Group justify="center">
+                  <ActionIcon
+                    component={Link}
+                    href={v.file?.link || '#'}
+                    radius="xl"
+                    size="lg"
+                    bg={colors['blue-button']}
+                    variant="filled"
+                  >
+                      <IconDownload size={20} color="white" />
+                  </ActionIcon>
+                </Group>
+              </Stack>
+            </BackgroundImage>
+          ))}
+        </SimpleGrid>
+      )}
     </Stack>
-  );
+  )
 }
 
-export default Page;
+export default Page

src/app/darmasaba/(tambahan)/desa-anti-korupsi/detail/page.tsx

@@ -1,137 +1,136 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
+import React, { useEffect, useState } from 'react';
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import React, { useEffect, useState } from 'react';
-import { Box, Button, Container, Flex, Paper, SimpleGrid, Stack, Text, ActionIcon } from '@mantine/core';
-import { IconFile } from '@tabler/icons-react';
 import { useProxy } from 'valtio/utils';
-
+import {
+  Box,
+  Button,
+  Container,
+  Flex,
+  Paper,
+  SimpleGrid,
+  Stack,
+  Text,
+  ActionIcon,
+  Loader,
+  Tooltip,
+} from '@mantine/core';
+import { IconFile, IconInbox } from '@tabler/icons-react';
 
 function Lokal() {
   const [selectedKategori, setSelectedKategori] = useState<string>('PENGUATAN TATA LAKSANA');
   const [loading, setLoading] = useState(true);
   const state = useProxy(korupsiState);
-  
-  // Load data on component mount
+
   useEffect(() => {
     const loadData = async () => {
       try {
         setLoading(true);
-        await state.desaAntikorupsi.findMany.load(1, 100); // Load first 100 items
-      } catch (error) {
-        console.error('Error loading data:', error);
+        await state.desaAntikorupsi.findMany.load(1, 100);
       } finally {
         setLoading(false);
       }
     };
-    
     loadData();
   }, []);
-  
-  // Get data from state
+
   const data = state.desaAntikorupsi.findMany.data || [];
-  
-  // Debug: Log the complete data structure
-  console.log('Complete data:', JSON.parse(JSON.stringify(data)));
-  
-  // Get unique categories
-  const categories = [...new Set(
-    data
-      .filter(item => item.kategori?.name) // Only include items with a category name
-      .map(item => item.kategori.name)
-  )];
-  
-  // Filter data based on selected category
-  const filteredData = selectedKategori === 'PENGUATAN TATA LAKSANA' 
-    ? data 
-    : data.filter(item => item.kategori?.name === selectedKategori);
-    
-  // Debug: Log filtered data
-  console.log('Filtered data:', JSON.parse(JSON.stringify(filteredData)));
+  const categories = [...new Set(data.filter(i => i.kategori?.name).map(i => i.kategori.name))];
+  const filteredData =
+    selectedKategori === 'PENGUATAN TATA LAKSANA'
+      ? data
+      : data.filter(i => i.kategori?.name === selectedKategori);
+
   return (
-    <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
-      <Box px={{ base: "md", md: 100 }}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap={32}>
+      <Box px={{ base: 'md', md: 100 }}>
         <BackButton />
       </Box>
-      <Container w={{ base: "100%", md: "80%" }}>
-      <Stack align="center" gap={0}>
-          <Text fz={"3.4rem"} fw={"bold"}>
+
+      <Container w={{ base: '100%', md: '80%' }}>
+        <Stack align="center" gap={4}>
+          <Text fz={{ base: 32, md: 44 }} fw={700} ta="center" c={colors['blue-button']}>
             Desa Anti Korupsi
           </Text>
-          <Text
-            py={10}
-            ta={"justify"}
-          >
-            Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola terbuka dengan melibatkan warga mengawasi anggaran, sehingga digunakan tepat sasaran sesuai kebutuhan. Adapun beberapa jenis tata penguatan :
+          <Text ta="center" fz="md" c="dimmed" maw={700}>
+            Desa antikorupsi mendorong pemerintahan jujur dan transparan. Keuangan desa dikelola
+            terbuka dengan melibatkan warga untuk mengawasi anggaran sehingga tepat sasaran sesuai
+            kebutuhan.
           </Text>
         </Stack>
       </Container>
-      <Container size="lg" px={{ base: "md", md: "xl" }}>
-        {/* Category Filter Buttons */}
-        <Flex gap="md" justify="center" mb="xl" wrap="wrap">
-          {categories.map((kategori) => (
+
+      <Container size="lg" px={{ base: 'md', md: 'xl' }}>
+        <Flex gap="sm" justify="center" mb="xl" wrap="wrap">
+          {categories.map(kategori => (
             <Button
-            color={selectedKategori === kategori ? colors['blue-button'] : 'gray'}
               key={kategori}
-              variant={selectedKategori === kategori ? 'filled' : 'outline'}
               onClick={() => setSelectedKategori(kategori)}
               size="sm"
+              radius="xl"
+              variant={selectedKategori === kategori ? 'filled' : 'outline'}
+              color={selectedKategori === kategori ? colors['blue-button'] : 'gray'}
             >
               {kategori}
             </Button>
           ))}
         </Flex>
-        
-        {/* Loading State */}
+
         {loading ? (
-          <Text ta="center">Memuat data...</Text>
+          <Flex justify="center" align="center" h={200}>
+            <Loader color={colors['blue-button']} size="lg" />
+          </Flex>
+        ) : filteredData.length === 0 ? (
+          <Flex direction="column" align="center" justify="center" gap="sm" py="xl">
+            <IconInbox size={48} stroke={1.5} color={colors['blue-button']} />
+            <Text fz="lg" fw={500} c="dimmed">
+              Belum ada data untuk kategori ini
+            </Text>
+          </Flex>
         ) : (
-          <SimpleGrid
-            cols={{ base: 1, sm: 2, lg: 3 }}
-            spacing="xl"
-            verticalSpacing="xl"
-          >
-            {filteredData.map((item) => {
-              console.log('Item data:', item);
-              console.log('All item properties:', Object.keys(item).map(key => `${key}: ${item[key]}`).join(', '));
-              
-              const handleDownload = async (e: React.MouseEvent) => {
+          <SimpleGrid cols={{ base: 1, sm: 2, lg: 3 }} spacing="xl">
+            {filteredData.map(item => {
+              const handleDownload = (e: React.MouseEvent) => {
                 e.stopPropagation();
                 if (!item?.file?.link) return;
-                
-                try {
-                  const fileUrl = item.file.link.startsWith('http')
-                    ? item.file.link
-                    : `${window.location.origin}${item.file.link.startsWith('/') ? '' : '/'}${item.file.link}`;
-                  
-                  window.open(fileUrl, '_blank');
-                } catch (error) {
-                  console.error('Error opening file:', error);
-                }
+                const url = item.file.link.startsWith('http')
+                  ? item.file.link
+                  : `${window.location.origin}${item.file.link.startsWith('/') ? '' : '/'}${
+                      item.file.link
+                    }`;
+                window.open(url, '_blank');
               };
-              
+
               return (
-                <Paper key={item.id} p="lg" shadow="sm" radius="md" withBorder>
+                <Paper
+                  key={item.id}
+                  p="lg"
+                  shadow="md"
+                  radius="xl"
+                  withBorder
+                  style={{
+                    background: 'linear-gradient(135deg, #ffffff, #f8fbff)',
+                  }}
+                >
                   <Stack h="100%" justify="space-between">
-                    <div>
-                      <Text fz="lg" fw={600} mb="sm" c={colors["blue-button"]}>
-                        {item.name}
-                      </Text>
-                    </div>
-                    
+                    <Text fz="lg" fw={600} c={colors['blue-button']} lineClamp={2}>
+                      {item.name}
+                    </Text>
                     {item?.file && (
-                      <ActionIcon
-                        variant="filled"
-                        color={colors["blue-button"]}
-                        size="lg"
-                        onClick={handleDownload}
-                        style={{ marginTop: 10 }}
-                        title="Unduh File"
-                      >
-                        <IconFile size={20} />
-                      </ActionIcon>
+                      <Tooltip label="Unduh file" withArrow>
+                        <ActionIcon
+                          variant="filled"
+                          color={colors['blue-button']}
+                          size="lg"
+                          radius="xl"
+                          onClick={handleDownload}
+                        >
+                          <IconFile size={20} />
+                        </ActionIcon>
+                      </Tooltip>
                     )}
                   </Stack>
                 </Paper>
@@ -141,9 +140,7 @@ function Lokal() {
         )}
       </Container>
     </Stack>
-  )
+  );
 }
 
 export default Lokal;
-
-

src/app/darmasaba/(tambahan)/penghargaan/[id]/page.tsx

@@ -2,13 +2,12 @@
 'use client'
 import BackButton from '@/app/darmasaba/(pages)/desa/layanan/_com/BackButto';
 import colors from '@/con/colors';
-import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex, Center, Skeleton } from '@mantine/core';
+import { Stack, Container, Text, Image, ActionIcon, Box, Divider, Flex, Center, Skeleton, Paper, Tooltip } from '@mantine/core';
 import { IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
-import { useState } from 'react';
 
 function Page() {
   const params = useParams<{ id: string }>();
@@ -23,77 +22,99 @@ function Page() {
         setLoading(true);
         await state.findUnique.load(id);
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Gagal memuat data:', error);
       } finally {
         setLoading(false);
       }
-    }
-    loadData()
-  }, [id])
+    };
+    loadData();
+  }, [id]);
 
   if (loading) {
     return (
-      <Center>
-        <Skeleton height={500} />
+      <Center h={"70vh"}>
+        <Stack align="center" gap="sm">
+          <Skeleton height={40} width={200} radius="xl" />
+          <Skeleton height={300} width={300} radius="md" />
+          <Skeleton height={20} width="80%" radius="xl" />
+        </Stack>
       </Center>
     );
   }
 
   if (!state.findUnique.data) {
     return (
-      <Center>
-        <Text>Data tidak ditemukan</Text>
+      <Center h={"70vh"}>
+        <Paper withBorder shadow="md" p="xl" radius="lg">
+          <Text ta="center" fz="lg" fw="bold" c="dimmed">
+            Data penghargaan tidak tersedia
+          </Text>
+          <Text ta="center" fz="sm" c="dimmed" mt="sm">
+            Silakan kembali dan pilih penghargaan lainnya
+          </Text>
+        </Paper>
       </Center>
     );
   }
 
-
   return (
-    <Stack pos={"relative"} bg={colors.Bg} py={"xl"} gap={22}>
+    <Stack pos="relative" bg={colors.Bg} py="xl" gap={22}>
       <Box px={{ base: "md", md: 100 }}>
         <BackButton />
       </Box>
-      <Container w={{ base: "100%", md: "50%" }}>
-        <Stack align="center" gap={0}>
-          <Text
-            ta={"center"}
-            fw={"bold"}
-            fz={"2.3rem"}
-          >
+      <Container w={{ base: "100%", md: "60%" }}>
+        <Stack align="center" gap="md">
+          <Text ta="center" fw="bold" fz={{ base: "1.8rem", md: "2.3rem" }} lh={1.3}>
             {state.findUnique.data?.name}
           </Text>
-          <Image py={20} src={state.findUnique.data?.image?.link || ''} alt='' />
+          <Image
+            src={state.findUnique.data?.image?.link || ''}
+            alt="Gambar penghargaan"
+            radius="lg"
+            fit="contain"
+            mah={400}
+            fallbackSrc="https://placehold.co/600x400?text=Tidak+Ada+Gambar"
+          />
         </Stack>
       </Container>
       <Box px={{ base: "md", md: 100 }}>
         <Text
           pb={20}
-          ta={"justify"}
-          fw={"bold"}
+          ta="justify"
+          fz="md"
+          lh={1.6}
           dangerouslySetInnerHTML={{ __html: state.findUnique.data?.deskripsi || '' }}
         />
         <Box py={20}>
           <Divider color={colors['blue-button']} />
-          <Flex justify={"space-between"} py={20}>
-            <Text fz={"sm"}>{new Date(state.findUnique.data?.createdAt).toLocaleDateString()}</Text>
-            <Box>
-              <Flex gap={"lg"}>
-                <ActionIcon variant='transparent'>
-                  <IconBrandFacebook color={colors['blue-button']} size={"30"} />
+          <Flex direction={{ base: "column", sm: "row" }} justify="space-between" align={{ base: "start", sm: "center" }} gap="sm" py={20}>
+            <Text fz="sm" c="dimmed">
+              Diterbitkan: {new Date(state.findUnique.data?.createdAt).toLocaleDateString('id-ID')}
+            </Text>
+            <Flex gap="md">
+              <Tooltip label="Bagikan ke Facebook" withArrow>
+                <ActionIcon variant="light" radius="xl" size="lg" color="blue">
+                  <IconBrandFacebook size={22} />
                 </ActionIcon>
-                <ActionIcon variant='transparent'>
-                  <IconBrandInstagram color={colors['blue-button']} size={"30"} />
+              </Tooltip>
+              <Tooltip label="Bagikan ke Instagram" withArrow>
+                <ActionIcon variant="light" radius="xl" size="lg" color="pink">
+                  <IconBrandInstagram size={22} />
                 </ActionIcon>
-                <ActionIcon variant='transparent'>
-                  <IconBrandTwitter color={colors['blue-button']} size={"30"} />
+              </Tooltip>
+              <Tooltip label="Bagikan ke Twitter" withArrow>
+                <ActionIcon variant="light" radius="xl" size="lg" color="cyan">
+                  <IconBrandTwitter size={22} />
                 </ActionIcon>
-                <ActionIcon variant='transparent'>
-                  <IconBrandWhatsapp color={colors['blue-button']} size={"30"} />
+              </Tooltip>
+              <Tooltip label="Bagikan ke WhatsApp" withArrow>
+                <ActionIcon variant="light" radius="xl" size="lg" color="green">
+                  <IconBrandWhatsapp size={22} />
                 </ActionIcon>
-              </Flex>
-            </Box>
+              </Tooltip>
+            </Flex>
           </Flex>
-          <Divider color={colors['blue-button']} pb={50} />
+          <Divider color={colors['blue-button']} />
         </Box>
       </Box>
     </Stack>

src/app/darmasaba/(tambahan)/penghargaan/page.tsx

@@ -3,109 +3,131 @@
 import penghargaanState from "@/app/admin/(dashboard)/_state/desa/penghargaan";
 import colors from "@/con/colors";
 import { Carousel, CarouselSlide } from "@mantine/carousel";
-import { Box, Button, Container, Group, Paper, Stack, Text, useMantineTheme } from "@mantine/core";
+import { Box, Button, Container, Group, Paper, Stack, Text, useMantineTheme, Skeleton } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 import Autoplay from "embla-carousel-autoplay";
+import { IconAward, IconArrowRight } from "@tabler/icons-react";
 import { useTransitionRouter } from "next-view-transitions";
 import { useEffect, useRef } from "react";
 import { useProxy } from "valtio/utils";
 import BackButton from "../../(pages)/desa/layanan/_com/BackButto";
 
 export default function Page() {
-    return (
-        <Stack pos={"relative"} bg={colors.grey[1]} py={"xl"} gap={22}>
-            <Box px={{ base: "md", md: 100 }}>
-                <BackButton />
-            </Box>
-            <Container w={{ base: "100%", md: "50%" }}>
-                <Stack align="center" gap={0}>
-                    <Text fz={"3.4rem"} fw={"bold"}>
-                        Penghargaan
-                    </Text>
-                    <Text
-                        py={10}
-                        ta={"justify"}
-                    >
-                        Desa Darmasaba telah berhasil meraih berbagai penghargaan bergengsi yang membuktikan dedikasi dan kerja keras seluruh elemen masyarakat dalam membangun desa yang maju dan berkelanjutan. Berikut ini adalah macam-macam penghargaan yang telah diraih oleh Desa Darmasaba:
-                    </Text>
-                    <Slider />
-                </Stack>
-            </Container>
+  return (
+    <Stack pos="relative" bg={colors.grey[1]} py="xl" gap={32}>
+      <Box px={{ base: "md", md: 100 }}>
+        <BackButton />
+      </Box>
+      <Container w={{ base: "100%", md: "60%" }}>
+        <Stack align="center" gap="sm">
+          <Group gap="xs">
+            <IconAward size={40} color={colors["blue-button"]} />
+            <Text fz={{ base: "2rem", md: "3.2rem" }} fw={800} variant="gradient" gradient={{ from: "#1C6EA4", to: "#69BFF8" }}>
+              Penghargaan Desa
+            </Text>
+          </Group>
+          <Text fz="lg" c="dimmed" ta="center">
+            Desa Darmasaba berhasil meraih beragam penghargaan bergengsi yang mencerminkan dedikasi dan kerja keras masyarakat dalam membangun desa yang maju dan berkelanjutan.
+          </Text>
+          <Slider />
         </Stack>
-    )
+      </Container>
+    </Stack>
+  );
 }
+
 function Slider() {
-    const height = 720;
-    const width = 1200;
-    const theme = useMantineTheme();
-    const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
-    const autoplay = useRef(Autoplay({ delay: 2000 }));
-    const state = useProxy(penghargaanState);
-    const roter = useTransitionRouter()
+  const height = 500;
+  const width = 1200;
+  const theme = useMantineTheme();
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
+  const autoplay = useRef(Autoplay({ delay: 3000 }));
+  const state = useProxy(penghargaanState);
+  const router = useTransitionRouter();
 
-    useEffect(() => {
-        const loadData = async () => {
-            try {
-                await state.findMany.load();
-            } catch (error) {
-                console.error('Error loading data:', error);
-            }
-        }
-        loadData();
-    }, [])
+  useEffect(() => {
+    state.findMany.load();
+  }, []);
 
-    const data = state.findMany.data || [];
-
-    const slides = data.map((item) => (
-
-        <CarouselSlide key={item.id}>
-            <Paper h={"100%"} pos={"relative"} style={{
-                backgroundImage: `url(${item.image?.link}) `,
-                backgroundSize: "cover",
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-            }}>
-                <Box
-                    style={{
-                        borderRadius: 16,
-                        zIndex: 0,
-                    }}
-                    pos={"absolute"}
-                    w={"100%"}
-                    h={"100%"}
-                    bg={colors.trans.dark[2]}
-                />
-                <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"} >
-                    <Box p={"lg"}>
-                        <Text fz={"1.5rem"} ta={"center"} c={"white"}>{item.name}</Text>
-                    </Box>
-                    <Group justify="center" >
-                        <Button onClick={() => roter.push(`/darmasaba/penghargaan/${item.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
-                            Detail
-                        </Button>
-                    </Group>
-                </Stack>
-            </Paper>
-        </CarouselSlide>
-
-    ));
+  const data = state.findMany.data || [];
+  const loading = state.findMany.loading;
 
+  if (loading) {
     return (
-        <Carousel
-            c={"white"}
-            py={50}
-            plugins={[autoplay.current]}
-            onMouseEnter={autoplay.current.stop}
-            onMouseLeave={autoplay.current.reset}
-            w={{ base: 500, md: 800, lg: 900, xl: width }}
-            height={height}
-            slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
-            slideGap={{ base: "xl", sm: "md" }}
-            loop
-            align="start"
-            slidesToScroll={mobile ? 1 : 2}
-        >
-            {slides}
-        </Carousel>
+      <Group justify="center" py="xl">
+        <Skeleton w={300} h={200} radius="lg" />
+        <Skeleton w={300} h={200} radius="lg" visibleFrom="sm" />
+        <Skeleton w={300} h={200} radius="lg" visibleFrom="md" />
+      </Group>
     );
-}
+  }
+
+  if (!loading && data.length === 0) {
+    return (
+      <Stack align="center" py="xl">
+        <IconAward size={56} color={colors["blue-button"]} />
+        <Text fz="lg" fw={600} c="dimmed">
+          Belum ada penghargaan yang ditambahkan
+        </Text>
+      </Stack>
+    );
+  }
+
+  const slides = data.map((item) => (
+    <CarouselSlide key={item.id}>
+      <Paper
+        h="100%"
+        radius="lg"
+        shadow="md"
+        pos="relative"
+        style={{
+          backgroundImage: `url(${item.image?.link})`,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      >
+        <Box
+          pos="absolute"
+          inset={0}
+          bg="linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0.3))"
+          style={{ borderRadius: 16 }}
+        />
+        <Stack justify="flex-end" h="100%" gap="sm" p="lg" pos="relative">
+          <Text fz="xl" fw={700} ta="center" c="white">
+            {item.name}
+          </Text>
+          <Group justify="center">
+            <Button
+              onClick={() => router.push(`/darmasaba/penghargaan/${item.id}`)}
+              size="md"
+              radius="xl"
+              rightSection={<IconArrowRight size={18} />}
+              variant="gradient"
+              gradient={{ from: "#1C6EA4", to: "#69BFF8" }}
+            >
+              Lihat Detail
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </CarouselSlide>
+  ));
+
+  return (
+    <Carousel
+      py="xl"
+      plugins={[autoplay.current]}
+      onMouseEnter={autoplay.current.stop}
+      onMouseLeave={autoplay.current.reset}
+      w={{ base: "100%", sm: "90%", md: "80%", lg: width }}
+      h={height}
+      slideSize={{ base: "100%", sm: "50%", md: "33.333333%" }}
+      slideGap="md"
+      loop
+      align="start"
+      slidesToScroll={mobile ? 1 : 2}
+    >
+      {slides}
+    </Carousel>
+  );
+}

src/app/darmasaba/_com/Footer.tsx

@@ -1,207 +1,118 @@
 'use client'
-import colors from '@/con/colors';
-import { ActionIcon, Anchor, Box, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, useMantineTheme } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
+import { ActionIcon, Anchor, Box, Button, Center, Container, Divider, Flex, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
 import { IconAt, IconBrandFacebook, IconBrandInstagram, IconBrandTwitter, IconBrandWhatsapp } from '@tabler/icons-react';
 
 function Footer() {
-  const theme = useMantineTheme();
-  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
   return (
-    <>
-      <Stack bg={colors["blue-button"]}>
-        <Box w={mobile ? "100%" : "100%"} p={"xl"} h={{ base: 2500, md: 1100 }} >
-          <Center>
-            <Paper w={"100%"}>
-              <Box component="footer" py="xl">
-                <Container size="lg">
-                  <Stack gap="xl">
-                    <Box>
-                      <Title fz={"md"} order={2} fw={700} mb="md">Komitmen Dalam Pelayanan</Title>
-                      <Stack gap="sm">
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>1. Transparansi:</Text>
-                          <Text fz={"sm"}>
-                            Kami berkomitmen untuk mengelola dana desa secara terbuka, sehingga masyarakat dapat
-                            mengetahui penggunaan anggaran secara jelas dan bertanggung jawab.
-                          </Text>
-                        </Group>
-
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>2. Profesionalisme:</Text>
-
-                          <Text fz={"sm"}>
-                            Setiap layanan desa akan dilakukan dengan profesional, cepat, dan tanpa diskriminasi,
-                            demi memastikan kepuasan masyarakat.
-                          </Text>
-                        </Group>
-
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>3. Partisipatif:</Text>
-                          <Text fz={"sm"}>
-                            Kami percaya bahwa partisipasi aktif masyarakat adalah kunci keberhasilan pembangunan desa.
-                            Oleh karena itu, kami akan terus melibatkan warga dalam setiap proses pengambilan keputusan.
-                          </Text>
-                        </Group>
-
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>4. Inovasi:</Text>
-                          <Text fz={"sm"}>
-                            Kami berkomitmen untuk terus berinovasi dalam memberikan solusi bagi permasalahan desa,
-                            termasuk melalui pemanfaatan teknologi untuk mempermudah akses layanan.
-                          </Text>
-                        </Group>
-
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>5. Berkeadilan:</Text>
-                          <Text fz={"sm"}>
-                            Setiap kebijakan dan program desa akan dirancang untuk memberikan manfaat yang merata
-                            bagi seluruh lapisan masyarakat, tanpa memandang status sosial atau ekonomi.
-                          </Text>
-                        </Group>
-
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>6. Pemberdayaan:</Text>
-                          <Text fz={"sm"}>
-                            Kami berkomitmen untuk memberdayakan masyarakat melalui pelatihan, pendampingan,
-                            dan dukungan terhadap usaha-usaha lokal agar desa semakin mandiri.
-                          </Text>
-                        </Group>
-
-                        <Group align="flex-start" gap="xs">
-                          <Text fz={"sm"} fw={700}>7. Ramah Lingkungan:</Text>
-                          <Text fz={"sm"}>
-                            Seluruh kegiatan pembangunan dan pelayanan desa akan memperhatikan keberlanjutan lingkungan,
-                            demi menjaga keseimbangan alam dan kenyamanan hidup warga.
-                          </Text>
-                        </Group>
-                      </Stack>
-                    </Box>
-
-                    <Divider />
-
-                    <Box>
-                      <Title fz={"md"} order={2} fw={700} mb="md">Tujuan Akhir</Title>
-                      <Text fz={"sm"} mb="sm">
-                        Dengan visi, misi dan komitmen ini, kami bertekad untuk menjadikan desa sebagai tempat tinggal
-                        yang nyaman, aman dan sejahtera bagi seluruh warganya.
-                      </Text>
-                      <Text fz={"sm"} mb="sm">
-                        Kami percaya bahwa kemajuan desa dimulai dari kerjasama antara pemerintah desa dan masyarakat,
-                        serta didukung oleh tata kelola yang baik dan berorientasi pada kepentingan bersama. Jika ada
-                        masukan untuk lembaga desa, silahkan hubungi pada nomor pengaduan di bawah, terima kasih.
-                      </Text>
-                    </Box>
-
-                    <Group justify='apart' align="center">
-                      <Text ta={"center"} fz={"sm"} fw={700} size="lg" style={{ fontStyle: 'italic' }}>{"Desa Kuat, Masyarakat Sejahtera!"}</Text>
-                      <Box
-                        style={{
-                          width: 80,
-                          height: 80,
-                          position: 'relative'
-                        }}
-                      >
-                        <ActionIcon size={80} radius={"xl"} variant='transparent'>
-                          <Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
-                        </ActionIcon>
-                      </Box>
-                    </Group>
-                  </Stack>
-                </Container>
-              </Box>
-            </Paper>
-          </Center>
-          <Box py={20} >
-            <SimpleGrid
-              p={20}
-              cols={{
-                base: 2,
-                sm: 4,
-              }}
-              style={{
-                color: "white"
-              }}
-            >
-              <Box p={mobile ? 30 : 30} style={{color: "white"}}>
-                <Stack justify='space-between'>
-                  <Text fz={"md"} fw={"bold"} c={"white"}>Tentang Darmasaba</Text>
-                  <Text fz={"xs"} c={"white"}>Desa Darmasaba adalah desa
-                    budaya yang kaya akan tradisi dan
-                    nilai-nilai luhur masyarakat Bali.</Text>
+    <Stack bg="linear-gradient(180deg, #1C6EA4, #124170)" c="white">
+      <Box w="100%" p="xl" h={{ base: 1800, md: 1100 }}>
+        <Center>
+          <Paper w="100%" bg="transparent" shadow="md" radius="lg" p="xl">
+            <Box component="footer">
+              <Container size="lg">
+                <Stack gap="xl">
                   <Box>
-                    <Flex gap={"md"}>
-                      <ActionIcon variant='transparent'>
-                        <IconBrandFacebook color='white' size={"30"} />
-                      </ActionIcon>
-                      <ActionIcon variant='transparent'>
-                        <IconBrandInstagram color='white' size={"30"} />
-                      </ActionIcon>
-                      <ActionIcon variant='transparent'>
-                        <IconBrandTwitter color='white' size={"30"} />
-                      </ActionIcon>
-                      <ActionIcon variant='transparent'>
-                        <IconBrandWhatsapp color='white' size={"30"} />
-                      </ActionIcon>
-                    </Flex>
+                    <Title fz="lg" order={2} fw={700} mb="md" c="white">Komitmen Layanan Kami</Title>
+                    <Stack gap="sm">
+                      {[
+                        { title: "Transparansi", text: "Pengelolaan dana desa dilakukan secara terbuka agar masyarakat dapat memahami dan memantau penggunaan anggaran." },
+                        { title: "Profesionalisme", text: "Layanan desa diberikan secara cepat, adil, dan profesional demi kepuasan masyarakat." },
+                        { title: "Partisipasi", text: "Masyarakat dilibatkan aktif dalam pengambilan keputusan demi pembangunan desa yang berhasil." },
+                        { title: "Inovasi", text: "Kami terus berinovasi, termasuk melalui teknologi, agar layanan semakin mudah diakses." },
+                        { title: "Keadilan", text: "Kebijakan dan program disusun untuk memberi manfaat yang merata bagi seluruh warga." },
+                        { title: "Pemberdayaan", text: "Masyarakat didukung melalui pelatihan, pendampingan, dan pengembangan usaha lokal." },
+                        { title: "Ramah Lingkungan", text: "Seluruh kegiatan pembangunan memperhatikan keberlanjutan demi menjaga alam dan kesehatan warga." }
+                      ].map((item, i) => (
+                        <Group key={i} align="flex-start" gap="xs">
+                          <Text fz="sm" c="#F3F2EC" fw={700}>{i + 1}. {item.title}:</Text>
+                          <Text fz="sm" c="#F3F2EC">{item.text}</Text>
+                        </Group>
+                      ))}
+                    </Stack>
                   </Box>
+
+                  <Divider color="white" opacity={0.2} />
+
+                  <Box>
+                    <Title fz="lg" order={2} fw={700} mb="md" c="white">Visi Kami</Title>
+                    <Text fz="sm" mb="sm" c="#F3F2EC">
+                      Dengan visi ini, kami berkomitmen menjadikan desa sebagai tempat yang aman, sejahtera, dan nyaman bagi seluruh warga.
+                    </Text>
+                    <Text fz="sm" mb="sm" c="#F3F2EC">
+                      Kami percaya kemajuan dimulai dari kerja sama antara pemerintah desa dan masyarakat, didukung tata kelola yang baik demi kepentingan bersama. Saran maupun keluhan dapat disampaikan melalui kontak di bawah ini.
+                    </Text>
+                  </Box>
+
+                  <Group justify="apart" align="center" mt="lg">
+                    <Text c="#F3F2EC" ta="center" fz="md" fw={700} style={{ fontStyle: 'italic' }}>&quot;Desa Kuat, Warga Sejahtera!&quot;</Text>
+                    <ActionIcon size={80} radius="xl" variant="transparent">
+                      <Image src="/api/img/chatbot-removebg-preview.png" alt="Logo Desa" width={80} height={80} />
+                    </ActionIcon>
+                  </Group>
                 </Stack>
-              </Box>
-              <Box p={mobile ? 30 : 30}>
-                <Stack justify='space-between' gap={"xs"}>
-                  <Text fz={"md"} fw={"bold"} c={"white"}>Layanan</Text>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Administrasi Kependudukan</Text>
-                  </Anchor>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Pelayanan Sosial</Text>
-                  </Anchor>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Pengaduan Masyarakat</Text>
-                  </Anchor>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Informasi Publik</Text>
-                  </Anchor>
-                </Stack>
-              </Box>
-              <Box p={mobile ? 30 : 30}>
-                <Stack justify='space-between' gap={"xs"}>
-                  <Text fz={"md"} fw={"bold"} c={"white"}>Tautan Penting</Text>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Portal Badung</Text>
-                  </Anchor>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>E-Government</Text>
-                  </Anchor>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Transparansi</Text>
-                  </Anchor>
-                  <Anchor c={"white"} variant='transparent'>
-                    <Text fz={"xs"} c={"white"}>Unduhan</Text>
-                  </Anchor>
-                </Stack>
-              </Box>
-              <Box p={mobile ? 30 : 30}>
-                <Stack justify='space-between'>
-                  <Text fz={"md"} fw={"bold"} c={"white"}>Newsletter</Text>
-                  <Text fz={"xs"} c={"white"}>Dapatkan informasi terbaru
-                    tentang kegiatan dan program
-                    desa</Text>
+              </Container>
+            </Box>
+          </Paper>
+        </Center>
+
+        <Box py={40}>
+          <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="xl">
+            <Box>
+              <Stack gap="sm">
+                <Text c="white" fz="md" fw={700}>Tentang Darmasaba</Text>
+                <Text fz="xs" c="#F3F2EC">
+                  Darmasaba adalah desa budaya yang kaya akan tradisi dan nilai-nilai warisan Bali.
+                </Text>
+                <Flex gap="md" mt="sm" c="#F3F2EC">
+                  <ActionIcon variant="subtle" color="white"><IconBrandFacebook size={22} /></ActionIcon>
+                  <ActionIcon variant="subtle" color="white"><IconBrandInstagram size={22} /></ActionIcon>
+                  <ActionIcon variant="subtle" color="white"><IconBrandTwitter size={22} /></ActionIcon>
+                  <ActionIcon variant="subtle" color="white"><IconBrandWhatsapp size={22} /></ActionIcon>
+                </Flex>
+              </Stack>
+            </Box>
+
+            <Box>
+              <Stack gap="xs">
+                <Text c="white" fz="md" fw={700}>Layanan Desa</Text>
+                <Anchor c="#F3F2EC" fz="xs">Administrasi Kependudukan</Anchor>
+                <Anchor c="#F3F2EC" fz="xs">Layanan Sosial</Anchor>
+                <Anchor c="#F3F2EC" fz="xs">Pengaduan Masyarakat</Anchor>
+                <Anchor c="#F3F2EC" fz="xs">Informasi Publik</Anchor>
+              </Stack>
+            </Box>
+
+            <Box>
+              <Stack gap="xs">
+                <Text c="white" fz="md" fw={700}>Tautan Penting</Text>
+                <Anchor c="#F3F2EC" fz="xs">Portal Badung</Anchor>
+                <Anchor c="#F3F2EC" fz="xs">E-Government</Anchor>
+                <Anchor c="#F3F2EC" fz="xs">Transparansi</Anchor>
+                <Anchor c="#F3F2EC" fz="xs">Unduhan</Anchor>
+              </Stack>
+            </Box>
+
+            <Box>
+              <Stack gap="sm">
+                <Text c="white" fz="md" fw={700}>Berlangganan Info</Text>
+                <Text c="#F3F2EC" fz="xs">Dapatkan kabar terbaru tentang program dan kegiatan desa langsung ke email Anda.</Text>
+                <Group wrap="nowrap">
                   <TextInput
-                    placeholder='Alamat email anda'
-                    rightSection={<IconAt color={colors["blue-button"]} />}
+                    w="70%"
+                    placeholder="Masukkan email Anda"
+                    rightSection={<IconAt size={16} />}
                   />
-                </Stack>
-              </Box>
-            </SimpleGrid>
-          </Box>
-          <Divider py={15} />
-          <Text ta={"center"} c={"white"} p={20}>
-            © 2024 Desa Darmasaba. Hak Cipta Dilindungi.
-          </Text>
+                  <Button variant="gradient" gradient={{ from: 'blue', to: 'cyan' }} radius="md">Daftar</Button>
+                </Group>
+              </Stack>
+            </Box>
+          </SimpleGrid>
         </Box>
-      </Stack>
-    </>
+
+        <Divider opacity={0.2} my="md" />
+        <Text ta="center" fz="xs" c="white">© 2025 Desa Darmasaba. Hak cipta dilindungi.</Text>
+      </Box>
+    </Stack>
   );
 }
 

src/app/darmasaba/_com/NavBarSearch.tsx

@@ -1,23 +1,27 @@
 import stateNav from "@/state/state-nav";
-import { Container, Stack, TextInput } from "@mantine/core";
+import { Container, Stack, TextInput, Tooltip } from "@mantine/core";
+import { IconSearch } from "@tabler/icons-react";
 
 export function NavbarSearch() {
-    return <Container w={{
-        base: '100%',
-        md: '80%',
-    }} fluid py={"xl"}
-        onMouseLeave={stateNav.clear}
+  return (
+    <Container
+      w={{ base: "100%", md: "80%" }}
+      fluid
+      py="xl"
+      onMouseLeave={stateNav.clear}
     >
-        <Stack pt={"xl"}>
-            <TextInput
-                autoFocus
-                styles={{
-                    input: {
-                        borderRadius: "xl",
-                        color: "black",
-                        // backgroundColor: "rgba(255, 255, 255, 0.3)"
-                    }
-                }} size="lg" variant="transparent" placeholder="Cari" />
-        </Stack>
+      <Stack pt="xl">
+        <Tooltip label="Type to search across the site" position="bottom-start" withArrow>
+          <TextInput
+            autoFocus
+            size="lg"
+            variant="filled"
+            radius="xl"
+            placeholder="Search anything..."
+            leftSection={<IconSearch size={20} />}
+          />
+        </Tooltip>
+      </Stack>
     </Container>
-}
+  );
+}

src/app/darmasaba/_com/Navbar.tsx

@@ -2,78 +2,96 @@
 import colors from "@/con/colors";
 import navbarListMenu from "@/con/navbar-list-menu";
 import stateNav from "@/state/state-nav";
-import { ActionIcon, Box, Burger, Group, Image, Stack, Text } from "@mantine/core";
+import { ActionIcon, Box, Burger, Group, Image, Paper, ScrollArea, Stack, Text, Tooltip } from "@mantine/core";
 import { IconSquareArrowRight } from "@tabler/icons-react";
-import { motion } from 'framer-motion';
-import { useRouter } from 'next/navigation';
+import { motion } from "framer-motion";
+import { useRouter } from "next/navigation";
 import { useSnapshot } from "valtio";
 import { MenuItem } from "../../../../types/menu-item";
 import { NavbarMainMenu } from "./NavbarMainMenu";
 
 export function Navbar() {
   const { item, isSearch, mobileOpen } = useSnapshot(stateNav);
-  const router = useRouter()
+  const router = useRouter();
+
   return (
     <Box>
-      <Box
+      <Paper
+        radius="0"
         className="glass2"
-        w={"100%"}
-        pos={"fixed"}
+        w="100%"
+        pos="fixed"
         top={0}
-        style={{
-          zIndex: 100,
-          overflow: "scroll"
-        }}
+        style={{ zIndex: 100 }}
       >
         <NavbarMainMenu listNavbar={navbarListMenu} />
-    
-        <Stack hiddenFrom="sm" bg={colors.grey[2]}>
-          <Group justify="space-between">
-            <ActionIcon variant="transparent" onClick={() => {
-              router.push("/darmasaba")
-              stateNav.mobileOpen = false
-            }}
-              size={80} radius={"xl"}
-            >
-              <Image src="/darmasaba-icon.png" alt="Logo Desa" width={50} height={50} />
-            </ActionIcon>
-            <Burger onClick={() => stateNav.mobileOpen = !stateNav.mobileOpen} color={colors["blue-button"]} opened={mobileOpen} />
-          </Group>
-          {mobileOpen && <motion.div
-            initial={{ x: 300 }}
-            animate={{ x: 0 }}
-            transition={{ duration: 0.1 }}
-            style={{
-              height: "100vh",
-              overflow: "scroll"
-            }}
-          >
-            <NavbarMobile listNavbar={navbarListMenu} />
-          </motion.div>}
-        </Stack>
 
-      </Box>
+        <Stack hiddenFrom="sm" bg={colors.grey[2]} px="md" py="sm">
+          <Group justify="space-between">
+            <ActionIcon
+              variant="transparent"
+              size="xl"
+              radius="xl"
+              onClick={() => {
+                router.push("/darmasaba");
+                stateNav.mobileOpen = false;
+              }}
+            >
+              <Tooltip label="Go to homepage" position="bottom" withArrow>
+                <Image src="/darmasaba-icon.png" alt="Village Logo" width={48} height={48} />
+              </Tooltip>
+            </ActionIcon>
+            <Tooltip label={mobileOpen ? "Close menu" : "Open menu"} position="bottom" withArrow>
+              <Burger
+                opened={mobileOpen}
+                color={colors["blue-button"]}
+                onClick={() => (stateNav.mobileOpen = !stateNav.mobileOpen)}
+                size="sm"
+              />
+            </Tooltip>
+          </Group>
+          {mobileOpen && (
+            <motion.div
+              initial={{ x: 300 }}
+              animate={{ x: 0 }}
+              transition={{ duration: 0.2 }}
+              style={{ height: "100vh" }}
+            >
+              <NavbarMobile listNavbar={navbarListMenu} />
+            </motion.div>
+          )}
+        </Stack>
+      </Paper>
       {(item || isSearch) && <Box className="glass" />}
     </Box>
   );
 }
 
 function NavbarMobile({ listNavbar }: { listNavbar: MenuItem[] }) {
-  const router = useRouter()
-  return <Stack p={"md"} style={{ backgroundColor: "rgba(255, 255, 255, 0.3)" }}>
-    {listNavbar.map((item, k) => {
-      return <Stack key={k}>
-        <Group justify="space-between" onClick={() => {
-          router.push(item.href)
-          stateNav.mobileOpen = false
-        }}>
-          <Text c="dark.9"
-            style={{ fontWeight: "bold" }}
-          >{item.name}</Text>
-          <IconSquareArrowRight />
-        </Group>
-        {item.children && <NavbarMobile listNavbar={item.children} />}
+  const router = useRouter();
+  return (
+    <ScrollArea h="100vh" offsetScrollbars>
+      <Stack p="lg" gap="md" style={{ backgroundColor: "rgba(255, 255, 255, 0.25)" }}>
+        {listNavbar.map((item, k) => (
+          <Stack key={k} gap={4}>
+            <Group
+              justify="space-between"
+              align="center"
+              onClick={() => {
+                router.push(item.href);
+                stateNav.mobileOpen = false;
+              }}
+              style={{ cursor: "pointer" }}
+            >
+              <Text c="dark.9" fw={600} fz="lg">
+                {item.name}
+              </Text>
+              <IconSquareArrowRight size={20} />
+            </Group>
+            {item.children && <NavbarMobile listNavbar={item.children} />}
+          </Stack>
+        ))}
       </Stack>
-    })}
-  </Stack>
+    </ScrollArea>
+  );
 }

src/app/darmasaba/_com/NavbarMainMenu.tsx

@@ -2,7 +2,7 @@
 
 import colors from "@/con/colors"
 import stateNav from "@/state/state-nav"
-import { ActionIcon, Button, Container, Flex, Image, Stack } from "@mantine/core"
+import { ActionIcon, Button, Container, Flex, Image, Stack, Tooltip } from "@mantine/core"
 import { useHover } from "@mantine/hooks"
 import { IconSearch, IconUser } from "@tabler/icons-react"
 import { useTransitionRouter } from 'next-view-transitions'
@@ -12,68 +12,91 @@ import { NavbarSearch } from "./NavBarSearch"
 import { NavbarSubMenu } from "./NavbarSubMenu"
 import { useRouter } from "next/navigation"
 
-export function NavbarMainMenu({ listNavbar }: {
-    listNavbar: MenuItem[]
-}) {
-    const { item, isSearch } = useSnapshot(stateNav)
-    const router = useTransitionRouter()
-    const next = useRouter()
-    return <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
-        <Container pos={"relative"} w={{
-            base: '100%',
-            md: '80%',
-        }} fluid>
-            <Flex align={"center"} justify={"space-between"} wrap={{
-                base: "wrap",
-                md: "nowrap"
-            }}>
-                <ActionIcon radius={"100"} variant="transparent" onClick={() => {
-                    router.push("/darmasaba")
-                    stateNav.clear()
+export function NavbarMainMenu({ listNavbar }: { listNavbar: MenuItem[] }) {
+  const { item, isSearch } = useSnapshot(stateNav)
+  const router = useTransitionRouter()
+  const next = useRouter()
 
-                }} >
-                    <Image radius={"100"} src={"/assets/images/darmasaba-icon.png"} alt="icon" w={24} h={24} loading="lazy" />
-                </ActionIcon>
-                {listNavbar.map((item, k) => {
-                    return <MenuItemCom key={k} item={item} />
-                })}
-                <ActionIcon variant="transparent" c={isSearch ? 'grey' : colors["blue-button"]}
-                    onClick={() => {
-                        stateNav.item = null
-                        stateNav.isSearch = !stateNav.isSearch
-                    }}
-                >
-                    {/* TODO: add icon search */}
-                    <IconSearch size={"1.5rem"} />
-                </ActionIcon>
-                <ActionIcon onClick={() => {
-                    next.push("/admin/landing-page/profile/program-inovasi")
-                }} color={colors["blue-button"]} radius={'xl'}>
-                    <IconUser size={24} />
-                </ActionIcon>
-            </Flex>
-        </Container>
-        {item && <NavbarSubMenu item={item as MenuItem[]} />}
-        {isSearch && <NavbarSearch />}
+  return (
+    <Stack gap={0} visibleFrom="sm" bg={colors["white-trans-1"]}>
+      <Container pos="relative" w={{ base: '100%', md: '80%' }} fluid>
+        <Flex align="center" justify="space-between" wrap={{ base: "wrap", md: "nowrap" }}>
+          <Tooltip label="Go to Homepage" position="bottom" withArrow>
+            <ActionIcon
+              radius="xl"
+              variant="transparent"
+              onClick={() => {
+                router.push("/darmasaba")
+                stateNav.clear()
+              }}
+            >
+              <Image
+                radius="xl"
+                src="/assets/images/darmasaba-icon.png"
+                alt="Darmasaba Logo"
+                w={28}
+                h={28}
+                loading="lazy"
+              />
+            </ActionIcon>
+          </Tooltip>
+          {listNavbar.map((item, k) => (
+            <MenuItemCom key={k} item={item} />
+          ))}
+          <Tooltip label="Search content" position="bottom" withArrow>
+            <ActionIcon
+              variant="transparent"
+              c={isSearch ? 'gray' : colors["blue-button"]}
+              onClick={() => {
+                stateNav.item = null
+                stateNav.isSearch = !stateNav.isSearch
+              }}
+              radius="xl"
+            >
+              <IconSearch size="1.5rem" />
+            </ActionIcon>
+          </Tooltip>
+          <Tooltip label="My Profile" position="bottom" withArrow>
+            <ActionIcon
+              onClick={() => {
+                next.push("/admin/landing-page/profile/program-inovasi")
+              }}
+              color={colors["blue-button"]}
+              radius="xl"
+              variant="light"
+            >
+              <IconUser size={22} />
+            </ActionIcon>
+          </Tooltip>
+        </Flex>
+      </Container>
+      {item && <NavbarSubMenu item={item as MenuItem[]} />}
+      {isSearch && <NavbarSearch />}
     </Stack>
-
+  )
 }
 
-function MenuItemCom({ item, }: { item: MenuItem }) {
-    const { ref, hovered } = useHover()
-    const router = useTransitionRouter()
+function MenuItemCom({ item }: { item: MenuItem }) {
+  const { ref, hovered } = useHover()
+  const router = useTransitionRouter()
 
-    return <Button
-        ref={ref}
-        color={hovered ? "grey" : colors["blue-button"]}
-        onMouseEnter={() => {
-            stateNav.item = item.children || null
-            stateNav.isSearch = false
-        }}
-        variant="transparent"
-        onClick={() => {
-            router.push(item.href)
-            stateNav.clear()
-        }}
-    >{item.name}</Button>
-}
+  return (
+    <Button
+      ref={ref}
+      color={hovered ? "gray" : colors["blue-button"]}
+      onMouseEnter={() => {
+        stateNav.item = item.children || null
+        stateNav.isSearch = false
+      }}
+      variant="subtle"
+      radius="xl"
+      onClick={() => {
+        router.push(item.href)
+        stateNav.clear()
+      }}
+      fw={500}
+    >
+      {item.name}
+    </Button>
+  )
+}

src/app/darmasaba/_com/NavbarSubMenu.tsx

@@ -1,20 +1,22 @@
 "use client";
 
 import stateNav from "@/state/state-nav";
-import { Button, Container, Stack } from "@mantine/core";
-import _ from "lodash";
+import { Button, Container, Stack, Text } from "@mantine/core";
 import { motion } from "motion/react";
+import { IconArrowRight } from "@tabler/icons-react";
 import { MenuItem } from "../../../../types/menu-item";
-import { useTransitionRouter } from 'next-view-transitions'
+import { useTransitionRouter } from "next-view-transitions";
+import colors from "@/con/colors";
 
 export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
-  const router = useTransitionRouter()
+  const router = useTransitionRouter();
+
   return (
     <motion.div
-      key={_.uniqueId()}
-      initial={{ opacity: 0.5 }}
-      animate={{ opacity: 1 }}
-      transition={{ duration: 1 }}
+      key={Math.random().toString(36).slice(2)}
+      initial={{ opacity: 0, y: 10 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4, ease: "easeOut" }}
     >
       <Container
         key={stateNav.item?.[0]?.id}
@@ -22,32 +24,50 @@ export function NavbarSubMenu({ item }: { item: MenuItem[] | null }) {
           stateNav.item = null;
           stateNav.isSearch = false;
         }}
-        w={{
-          base: "100%",
-          md: "80%",
-        }}
+        w={{ base: "100%", md: "80%" }}
         fluid
+        py="xl"
       >
-        <Stack gap={0} align="start" py={"xl"}>
-          {item &&
-            item.map((item, k) => {
-              return (
-                <Button
-                  key={k}
-                  fz={"lg"}
-                  color="dark.9"
-                  variant="transparent"
-                  onClick={() => {
-                    router.push(item.href)
-                    stateNav.item = null
-                    stateNav.isSearch = false
-                  }}
-                >
-                  {item.name}
-                </Button>
-              );
-            })}
-        </Stack>
+        {item && item.length > 0 ? (
+          <Stack gap="xs" align="stretch">
+            {item.map((link, index) => (
+              <Button
+                key={index}
+                variant="subtle"
+                justify="space-between"
+                size="lg"
+                radius="md"
+                color="gray.0"
+                onClick={() => {
+                  router.push(link.href);
+                  stateNav.item = null;
+                  stateNav.isSearch = false;
+                }}
+                rightSection={<IconArrowRight size={18} />}
+                styles={(theme) => ({
+                  root: {
+                    background: "transparent",
+                    color: colors['blue-button'],
+                    fontWeight: 500,
+                    transition: "all 0.2s ease",
+                    "&:hover": {
+                      background: theme.colors.gray[8],
+                      boxShadow: `0 0 12px ${theme.colors.blue[6]}55`,
+                    },
+                  },
+                })}
+              >
+                {link.name}
+              </Button>
+            ))}
+          </Stack>
+        ) : (
+          <Stack align="center" py="xl">
+            <Text c="dimmed" size="sm">
+              No submenu available
+            </Text>
+          </Stack>
+        )}
       </Container>
     </motion.div>
   );

src/app/darmasaba/_com/main-page/apbdes/index.tsx

@@ -1,121 +1,136 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
-import colors from '@/con/colors';
-import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, SimpleGrid, Stack, Text } from '@mantine/core';
-import { IconDownload } from '@tabler/icons-react';
-import Link from 'next/link';
-import { useEffect, useState } from 'react';
-import { useProxy } from 'valtio/utils';
-
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes'
+import colors from '@/con/colors'
+import { ActionIcon, BackgroundImage, Box, Button, Center, Flex, Group, Loader, SimpleGrid, Stack, Text } from '@mantine/core'
+import { IconDownload } from '@tabler/icons-react'
+import Link from 'next/link'
+import { useEffect, useState } from 'react'
+import { useProxy } from 'valtio/utils'
 
 function Apbdes() {
-  const state = useProxy(apbdes);
-  const [loading, setLoading] = useState(false);
+  const state = useProxy(apbdes)
+  const [loading, setLoading] = useState(false)
+
   const textHeading = {
-    title: "APBDes",
-    des: "Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola pemerintahan desa yang bersih dan bertanggung jawab"
+    title: 'APBDes',
+    des: 'Transparansi APBDes Darmasaba adalah langkah nyata menuju tata kelola desa yang bersih, terbuka, dan bertanggung jawab.'
   }
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true);
-        await state.findMany.load();
+        setLoading(true)
+        await state.findMany.load()
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error('Error loading data:', error)
       } finally {
-        setLoading(false);
+        setLoading(false)
       }
     }
-    loadData();
+    loadData()
   }, [])
 
-  const data = (state.findMany.data || []).slice(0, 3);
+  const data = (state.findMany.data || []).slice(0, 3)
+
   return (
-    <>
-      <Stack p={"sm"} gap={"4rem"} bg={colors.Bg}>
-        <Box
-          w={{
-            base: '100%',
-            sm: '60%',
-          }}
-        >
-          <Stack gap={0}>
-            <Text fz={"4.4rem"} fw={"bold"}>
-              {textHeading.title}
-            </Text>
-            <Text fz={"1.4rem"}>
-              {textHeading.des}
-            </Text>
-          </Stack>
-        </Box>
-        <SimpleGrid
-          cols={{
-            base: 1,
-            sm: 3,
-          }}
-        >
-          {loading ? (
-            <Center>
-              <Text fz={"2.4rem"}>Memuat Data...</Text>
-            </Center>
-          ) : (
-            data.map((v, k) => {
-              return (
-                <BackgroundImage
-                  key={k}
-                  src={v.image?.link || ''}
-                  h={350}
-                  radius={16}
-                  pos={"relative"}
+    <Stack p="lg" gap="4rem" bg={colors.Bg}>
+      <Box w={{ base: '100%', sm: '70%' }}>
+        <Stack gap="sm">
+          <Text fz={{ base: '2.4rem', sm: '4rem' }} fw="bold" lh={1.2}>
+            {textHeading.title}
+          </Text>
+          <Text fz={{ base: '1rem', sm: '1.3rem' }} c="dimmed">
+            {textHeading.des}
+          </Text>
+        </Stack>
+      </Box>
+
+      <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="lg">
+        {loading ? (
+          <Center mih={200}>
+            <Loader size="lg" color="blue" />
+          </Center>
+        ) : data.length === 0 ? (
+          <Center mih={200}>
+            <Stack align="center" gap="xs">
+              <Text fz="lg" c="dimmed">
+                Belum ada data APBDes yang tersedia
+              </Text>
+              <Text fz="sm" c="dimmed">
+                Data akan ditampilkan di sini setelah diunggah
+              </Text>
+            </Stack>
+          </Center>
+        ) : (
+          data.map((v, k) => (
+            <BackgroundImage
+              key={k}
+              src={v.image?.link || ''}
+              h={360}
+              radius="xl"
+              pos="relative"
+              style={{ overflow: 'hidden' }}
+            >
+              <Box
+                pos="absolute"
+                inset={0}
+                bg="rgba(0,0,0,0.55)"
+                style={{ backdropFilter: 'blur(4px)' }}
+              />
+              <Stack justify="space-between" h="100%" p="xl" pos="relative">
+                <Text
+                  c="white"
+                  fw={600}
+                  fz="lg"
+                  ta="center"
+                  lineClamp={2}
                 >
-                  <Box
-                    style={{
-                      borderRadius: 16,
-                      zIndex: 0
-                    }}
-                    pos={"absolute"}
-                    w={"100%"}
-                    h={"100%"}
-                    bg={colors.trans.dark[2]}
-                  />
-                  <Stack justify='space-between' h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                    <Box p={"lg"}>
-                      <Text
-                        c={"white"}
-                        size={"1.5rem"}
-                        style={{
-                          textAlign: "center",
-                        }}>{v.name}</Text>
-                    </Box>
-                    <Text
-                      fw={"bold"}
-                      c={"white"}
-                      size={"3.5rem"}
-                      style={{
-                        textAlign: "center",
-                      }}>{v.jumlah}</Text>
-                    <Group justify="center">
-                      <ActionIcon px={70} py={20} radius={"xl"} size="md" bg={colors["blue-button"]} component={Link} href={v.file?.link || ''}>
-                        <Flex gap={"md"}>
-                          <IconDownload size={20} />
-                          <Text fz={"sm"} c={"white"}>Download</Text>
-                        </Flex>
-                      </ActionIcon>
-                    </Group>
-                  </Stack>
-                </BackgroundImage>
-              )
-            })
-          )}
-        </SimpleGrid>
-        <Group pb={80} justify='center'>
-          <Button component={Link} href="/darmasaba/apbdes" radius={"lg"} bg={colors["blue-button"]} fz={"h4"}>Lihat Semua</Button>
-        </Group>
-      </Stack>
-    </>
-  );
+                  {v.name}
+                </Text>
+                <Text
+                  fw="bold"
+                  c="white"
+                  fz="3rem"
+                  ta="center"
+                  style={{ textShadow: '0 2px 8px rgba(0,0,0,0.6)' }}
+                >
+                  {v.jumlah}
+                </Text>
+                <Group justify="center">
+                  <ActionIcon
+                    component={Link}
+                    href={v.file?.link || ''}
+                    radius="xl"
+                    size="lg"
+                    variant="gradient"
+                    gradient={{ from: '#1C6EA4', to: '#1C6EA4' }}
+                  >
+                    <Flex align="center" gap="xs" px="md" py={6}>
+                      <IconDownload size={18} color="white" />
+                    </Flex>
+                  </ActionIcon>
+                </Group>
+              </Stack>
+            </BackgroundImage>
+          ))
+        )}
+      </SimpleGrid>
+
+      <Group pb={80} justify="center">
+        <Button
+          component={Link}
+          href="/darmasaba/apbdes"
+          radius="xl"
+          size="lg"
+          variant="gradient"
+          gradient={{ from: "#26667F", to: "#124170" }}
+        >
+          Lihat Semua Data
+        </Button>
+      </Group>
+    </Stack>
+  )
 }
 
-export default Apbdes;
+export default Apbdes

src/app/darmasaba/_com/main-page/kepuasan/index.tsx

@@ -160,7 +160,12 @@ function Kepuasan() {
           </Center>
           <Text fz={{ base: "1.2rem", md: "1.4rem" }} ta={"center"}>Ukur kebahagiaan warga, tingkatkan layanan desa! Dengan partisipasi aktif masyarakat, kami berkomitmen untuk terus memperbaiki layanan agar lebih transparan, efektif, dan sesuai dengan kebutuhan warga. Kepuasan Anda adalah prioritas utama kami dalam membangun desa yang lebih baik!</Text>
           <Center mt={10}>
-            <Button radius={"lg"} bg={colors["blue-button"]} onClick={open}>Ajukan Responden</Button>
+            <Button 
+            radius={"lg"} 
+            onClick={open}
+            variant="gradient"
+            gradient={{ from: "#26667F", to: "#124170" }}
+            >Ajukan Responden</Button>
           </Center>
         </Container>
         <Box px={"xl"}>

src/app/darmasaba/_com/main-page/landing-page/ModuleView.tsx

@@ -1,64 +1,81 @@
 import profileLandingPageState from "@/app/admin/(dashboard)/_state/landing-page/profile";
-import { Center, Image, Paper, SimpleGrid, Text } from "@mantine/core";
+import { Box, Center, Image, Paper, SimpleGrid, Stack, Text, Tooltip } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
-import { motion } from 'framer-motion';
-import { useTransitionRouter } from 'next-view-transitions';
+import { motion } from "framer-motion";
+import { useTransitionRouter } from "next-view-transitions";
 import { useProxy } from "valtio/utils";
 import { Prisma } from "@prisma/client";
-
+import { IconPhotoOff } from "@tabler/icons-react";
 
 type ProgramInovasiItem = Prisma.ProgramInovasiGetPayload<{ include: { image: true } }>;
 
 function ModuleItem({ data }: { data: ProgramInovasiItem }) {
   const router = useTransitionRouter();
   return (
-    <Paper
-      onClick={() => {
-        router.push(`/${data.name}`);
-      }}
-      p={"md"}
-      bg={"white"}
-      radius={"32"}
-      pos={"relative"}
-    >
-      <Center h={"100%"}>
-        <motion.div
-          whileHover={{ scale: 1.05 }}
+    <motion.div whileHover={{ scale: 1.04 }}>
+      <Tooltip label={`Lihat ${data.name}`} withArrow>
+        <Paper
+          onClick={() => router.push(`/${data.name}`)}
+          p="xl"
+          radius="2xl"
+          bg="white"
+          className="cursor-pointer transition-all shadow-md hover:shadow-xl"
         >
-          {data.image?.link ? (
-            <Image src={data.image.link} alt="icon"
-              fit="contain"
-              sizes="100%"
-              loading="lazy"
-            style={{
-              objectFit: "contain",
-              objectPosition: "center"
-            }}
-          />
-        ) : (
-          <Text>
-            -
-          </Text>
-        )}
-        </motion.div>
-      </Center>
-    </Paper>
+          <Center h={180}>
+            {data.image?.link ? (
+              <Image
+                src={data.image.link}
+                alt={data.name}
+                fit="contain"
+                radius="lg"
+                loading="lazy"
+                style={{ objectFit: "contain", objectPosition: "center" }}
+              />
+            ) : (
+              <Stack align="center" gap="xs">
+                <IconPhotoOff size={40} stroke={1.5} />
+                <Text size="sm" c="dimmed">
+                  Belum ada gambar
+                </Text>
+              </Stack>
+            )}
+          </Center>
+          <Box mt="md">
+            <Text fw={600} ta="center" size="lg" c="black">
+              {data.name}
+            </Text>
+          </Box>
+        </Paper>
+      </Tooltip>
+    </motion.div>
   );
 }
 
 function ModuleView() {
-  const listImageState = useProxy(profileLandingPageState.programInovasi)
+  const listImageState = useProxy(profileLandingPageState.programInovasi);
 
   useShallowEffect(() => {
-    listImageState.findMany.load()
-  }, [])
+    listImageState.findMany.load();
+  }, []);
+
+  if (!listImageState.findMany.loading && !listImageState.findMany.data?.length) {
+    return (
+      <Center h={320}>
+        <Stack align="center" gap="sm">
+          <IconPhotoOff size={54} stroke={1.5} />
+          <Text size="lg" fw={600} c="white">
+            Belum ada program inovasi
+          </Text>
+          <Text size="sm" c="dimmed">
+            Tambahkan program inovasi untuk ditampilkan di sini
+          </Text>
+        </Stack>
+      </Center>
+    );
+  }
+
   return (
-    <SimpleGrid
-      cols={{
-        base: 2,
-        md: 3,
-      }}
-    >
+    <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="xl" mt="lg">
       {listImageState.findMany.data?.map((item) => (
         <ModuleItem key={item.id} data={item} />
       ))}

src/app/darmasaba/_com/main-page/landing-page/ProfileView.tsx

@@ -1,15 +1,28 @@
-import colors from '@/con/colors';
-import { Box, Card, Image, Stack, Text } from '@mantine/core';
+import { Box, Card, Image, Stack, Text, Tooltip } from '@mantine/core';
+import { IconUserCircle } from '@tabler/icons-react';
 import React from 'react';
 import { Prisma } from '@prisma/client';
+import colors from '@/con/colors';
 
 interface ProfileViewProps {
   data: Prisma.PejabatDesaGetPayload<{ include: { image: true } }> | null;
 }
 
-function ProfileView({ data }: ProfileViewProps) {
+export default function ProfileView({ data }: ProfileViewProps) {
   if (!data) {
-    return <div>No profile data available</div>;
+    return (
+      <Card radius="2xl" className="glass3" py="xl" px="lg" withBorder>
+        <Stack align="center" gap="sm">
+          <IconUserCircle size={72} stroke={1.4} />
+          <Text fw={500} c="dimmed">
+            Profil belum tersedia
+          </Text>
+          <Text fz="sm" c="dimmed">
+            Data pejabat desa akan muncul di sini
+          </Text>
+        </Stack>
+      </Card>
+    );
   }
 
   return (
@@ -17,42 +30,38 @@ function ProfileView({ data }: ProfileViewProps) {
       justify="end"
       align="end"
       pos="relative"
-      w={{
-        base: "100%",
-        md: "40%",
-      }}
+      w={{ base: '100%', md: '40%' }}
       px="xl"
     >
       {data.image?.link ? (
         <Image
           src={data.image.link}
-          alt={data.name || "Profile image"}
-          sizes="100%"
-          fit="contain"
+          alt={data.name || 'Foto profil'}
+          fit="cover"
+          radius="lg"
         />
-      ): (
-        <Text>
-          -
-        </Text>
+      ) : (
+        <Stack align="center" gap="xs" w="100%" py="xl">
+          <IconUserCircle size={96} stroke={1.5} />
+          <Text c="dimmed" fz="sm">
+            Belum ada foto
+          </Text>
+        </Stack>
       )}
-      <Box
-        pos="absolute"
-        bottom={0}
-        p={{
-          base: "xs",
-          md: "md",
-        }}
-      >
+      <Box pos="absolute" bottom={0} w="100%" p={{ base: 'xs', md: 'md' }}>
         <Card
           px="lg"
-          radius="32"
+          radius="2xl"
+          withBorder
           className="glass3"
-          style={{
-            border: `1px solid white`,
-          }}
+          style={{ border: '1px solid rgba(255,255,255,0.15)' }}
         >
-          <Text>{data.position}</Text>
-          <Text c={colors["blue-button"]} fw="bolder" fz="1rem">
+          <Tooltip label="Jabatan Resmi" withArrow>
+            <Text fz="sm" c="dimmed">
+              {data.position || 'Tidak ada jabatan'}
+            </Text>
+          </Tooltip>
+          <Text c={colors['blue-button']} fw={700} fz="xl" mt={4}>
             {data.name}
           </Text>
         </Card>
@@ -60,5 +69,3 @@ function ProfileView({ data }: ProfileViewProps) {
     </Stack>
   );
 }
-
-export default ProfileView;

src/app/darmasaba/_com/main-page/landing-page/SosmedView.tsx

@@ -1,35 +1,79 @@
-import { ActionIcon, Flex, Image, Text } from "@mantine/core";
+import { ActionIcon, Card, Flex, Image, Text, Tooltip } from "@mantine/core";
 import { Prisma } from "@prisma/client";
 import { useTransitionRouter } from "next-view-transitions";
+import { IconBrandInstagram, IconBrandFacebook, IconBrandTwitter, IconWorld } from "@tabler/icons-react";
 
-
-
-function SosmedView({data} : {data : Prisma.MediaSosialGetPayload<{ include: { image: true } }>[]}) {
+function SosmedView({
+  data,
+}: {
+  data: Prisma.MediaSosialGetPayload<{ include: { image: true } }>[];
+}) {
   const router = useTransitionRouter();
+
+  const fallbackIcon = (platform?: string) => {
+    switch (platform?.toLowerCase()) {
+      case "instagram":
+        return <IconBrandInstagram size={22} />;
+      case "facebook":
+        return <IconBrandFacebook size={22} />;
+      case "twitter":
+        return <IconBrandTwitter size={22} />;
+      default:
+        return <IconWorld size={22} />;
+    }
+  };
+
   return (
-    <Flex gap={"md"} justify={"center"} align={"center"}>
-        {data?.map((item, k) => {
-          return (
+    <Flex gap="lg" justify="center" align="center" wrap="wrap">
+      {data && data.length > 0 ? (
+        data.map((item, k) => (
+          <Tooltip
+            key={k}
+            label={item.name || "Tautan Sosial"}
+            withArrow
+            position="top"
+            transitionProps={{ transition: "pop", duration: 150 }}
+          >
             <ActionIcon
-              variant="transparent"
-              key={k}
-              w={32}
-              h={32}
-              pos={"relative"}
-              onClick={() => {
-                router.push(item.iconUrl || "");
+              variant="light"
+              radius="xl"
+              size="xl"
+              onClick={() => item.iconUrl && router.push(item.iconUrl)}
+              style={{
+                transition: "all 0.3s ease",
+                boxShadow: "0 0 12px rgba(28, 110, 164, 0.6)",
               }}
             >
               {item.image?.link ? (
-                <Image src={item.image.link} alt="icon" loading="lazy" />
+                <Image
+                  src={item.image.link}
+                  alt={item.name || "ikon"}
+                  w={24}
+                  h={24}
+                  fit="contain"
+                  loading="lazy"
+                />
               ) : (
-                <Text>
-                  none
-                </Text>
+                fallbackIcon(item.name)
               )}
             </ActionIcon>
-          );
-        })}
+          </Tooltip>
+        ))
+      ) : (
+        <Card
+          shadow="md"
+          radius="xl"
+          p="lg"
+          withBorder
+          style={{
+            background: "linear-gradient(135deg, #1C6EA4 0%, #000 100%)",
+          }}
+        >
+          <Text ta="center" c="dimmed" size="sm">
+            Belum ada media sosial yang terhubung
+          </Text>
+        </Card>
+      )}
     </Flex>
   );
 }

src/app/darmasaba/_com/main-page/landing-page/index.tsx

@@ -11,79 +11,77 @@ import {
   Image,
   Paper,
   Stack,
-  Text
+  Text,
+  Center,
+  Tooltip,
+  Badge,
 } from "@mantine/core";
+import { IconCalendarTime, IconInfoCircle } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import ModuleView from "./ModuleView";
 import SosmedView from "./SosmedView";
 import ProfileView from "./ProfileView";
 
 const getDayOfWeek = () => {
-  const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
+  const days = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
   const today = new Date();
   return days[today.getDay()];
-}
+};
 
 const getCurrentTime = () => {
   const now = new Date();
-  const hours = String(now.getHours()).padStart(2, '0');
-  const minutes = String(now.getMinutes()).padStart(2, '0');
+  const hours = String(now.getHours()).padStart(2, "0");
+  const minutes = String(now.getMinutes()).padStart(2, "0");
   return `${hours}:${minutes}`;
-}
+};
 
 const isWorkingHours = (currentTime: string): boolean => {
-  const [openTime, closeTime] = ['08:00', '16:00'];
-
+  const [openTime, closeTime] = ["08:00", "16:00"];
   const compareTimes = (time1: string, time2: string) => {
-    const [hour1, minute1] = time1.split(':').map(Number);
-    const [hour2, minute2] = time2.split(':').map(Number);
-
+    const [hour1, minute1] = time1.split(":").map(Number);
+    const [hour2, minute2] = time2.split(":").map(Number);
     if (hour1 < hour2) return true;
     if (hour1 > hour2) return false;
     return minute1 <= minute2;
   };
   return compareTimes(currentTime, closeTime) && !compareTimes(currentTime, openTime);
-}
+};
+
 const getWorkStatus = (day: string, currentTime: string): { status: string; message: string } => {
-  const workingDays = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
-
+  const workingDays = ["Senin", "Selasa", "Rabu", "Kamis", "Jumat"];
   if (!workingDays.includes(day)) {
-    return {
-      status: 'Tutup',
-      message: 'Sabtu - Minggu'
-    }
+    return { status: "Tutup", message: "Libur Akhir Pekan" };
   }
-  const isOpen = isWorkingHours(currentTime)
-  return isOpen ? { status: 'Buka', message: '08:00 - 16:00' } : { status: 'Tutup', message: '08:00 - 16:00' };
-}
-
+  const isOpen = isWorkingHours(currentTime);
+  return isOpen
+    ? { status: "Buka", message: "08:00 - 16:00" }
+    : { status: "Tutup", message: "08:00 - 16:00" };
+};
 
 function LandingPage() {
-  const [socialMedia, setSocialMedia] = useState<Prisma.MediaSosialGetPayload<{ include: { image: true } }>[]>([]);
-  const [profile, setProfile] = useState<Prisma.PejabatDesaGetPayload<{ include: { image: true } }> | null>(null);
+  const [socialMedia, setSocialMedia] = useState<
+    Prisma.MediaSosialGetPayload<{ include: { image: true } }>[]
+  >([]);
+  const [profile, setProfile] = useState<
+    Prisma.PejabatDesaGetPayload<{ include: { image: true } }> | null
+  >(null);
   const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const fetchSocialMedia = async () => {
       try {
-        const response = await fetch('/api/landingpage/mediasosial/findMany');
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        const response = await fetch("/api/landingpage/mediasosial/findMany");
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
         const result = await response.json();
-        // Ensure the data is an array before setting it
         if (Array.isArray(result.data)) {
           setSocialMedia(result.data);
         } else if (Array.isArray(result)) {
-          // In case the API returns the array directly
           setSocialMedia(result);
         } else {
-          console.error('Unexpected API response format:', result);
           setSocialMedia([]);
         }
-      } catch (error) {
-        console.error('Error fetching social media:', error);
-        setSocialMedia([]); // Ensure we always have an array
+      } catch {
+        setSocialMedia([]);
       } finally {
         setIsLoading(false);
       }
@@ -92,22 +90,22 @@ function LandingPage() {
     const fetchProfile = async () => {
       try {
         const response = await fetch(`/api/landingpage/pejabatdesa/edit`);
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
-        }
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
         const result = await response.json();
-        setProfile(result.data || null); // Handle single object response
-      } catch (error) {
-        console.error('Error fetching profile:', error);
+        setProfile(result.data || null);
+      } catch {
         setProfile(null);
       }
     };
+
     fetchSocialMedia();
     fetchProfile();
   }, []);
 
-  const [workStatus, setWorkStatus] = useState<{ status: string; message: string }>
-    ({ status: '', message: '' });
+  const [workStatus, setWorkStatus] = useState<{ status: string; message: string }>({
+    status: "",
+    message: "",
+  });
 
   useEffect(() => {
     const updateWorkStatus = () => {
@@ -115,212 +113,110 @@ function LandingPage() {
       const time = getCurrentTime();
       const status = getWorkStatus(day, time);
       setWorkStatus(status);
-    }
+    };
     updateWorkStatus();
     const intervalId = setInterval(updateWorkStatus, 60 * 1000);
     return () => clearInterval(intervalId);
   }, []);
+
   return (
-    <Stack bg={colors["Bg"]}>
-      <Flex
-        gap={"md"}
-        wrap={{
-          base: "wrap",
-          md: "nowrap",
-        }}
-      >
-        <Stack
-          gap={"xl"}
-          w={{
-            base: "100%",
-            md: "60%",
-          }}
-          py={{
-            base: "xs",
-            md: "40",
-          }}
-          px={{
-            base: "xs",
-            md: "100",
-          }}
-        >
-          <Card
-            radius={"32"}
-            bg={colors.grey[1]}
-            p={{
-              base: "xs",
-              md: "32",
-            }}
-          >
-            <Stack gap={42}>
-              <Flex
-                gap={"md"}
-                wrap={{
-                  base: "wrap",
-                  md: "nowrap",
-                }}
-              >
-                <Grid
-                >
-                  <Grid.Col span={{
-                    base: 3,
-                    lg: 2,
-                    md: 3,
-                  }}>
-                    <Box
-                      pos={"relative"}
-                      bg={"white"}
-                      w={{
-                        base: 64,
-                        md: 72,
-                      }}
-                      h={{
-                        base: 64,
-                        md: 72,
-                      }}
-                      style={{
-                        borderRadius: 24,
-                      }}
-                      p={"sm"}
-                    >
-                      <Image
-                        src={"/darmasaba-icon.png"}
-                        alt="icon"
-                        sizes="100%"
-                      />
+    <Stack bg={colors.Bg} p="md" gap="xl">
+      <Flex gap="lg" wrap={{ base: "wrap", md: "nowrap" }}>
+        <Stack w={{ base: "100%", md: "65%" }} gap="lg">
+          <Card radius="xl" bg={colors.grey[1]} p="lg" shadow="xl">
+            <Stack gap="xl">
+              <Flex gap="md" wrap="wrap">
+                <Grid w="100%">
+                  <Grid.Col span={{ base: 3, sm: 2 }}>
+                    <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
+                      <Image src="/darmasaba-icon.png" alt="Logo Darmasaba" fit="contain" />
                     </Box>
                   </Grid.Col>
-
-                  <Grid.Col span={{
-                    base: 3,
-                    lg: 2,
-                    md: 3,
-                  }}>
-                    <Box
-                      pos={"relative"}
-                      w={{
-                        base: 64,
-                        md: 72,
-                      }}
-                      h={{
-                        base: 64,
-                        md: 72,
-                      }}
-                      style={{
-                        borderRadius: 24,
-                      }}
-                      p={"sm"}
-                      bg={"white"}
-                    >
-                      <Image
-                        src={"/pudak-icon.png"}
-                        alt="icon"
-                        sizes={"100%"}
-                        fit="contain"
-                      />
+                  <Grid.Col span={{ base: 9, sm: 10 }}>
+                    <Box bg="white" w={72} h={72} p="sm" style={{ borderRadius: 24 }}>
+                      <Image src="/pudak-icon.png" alt="Logo Pudak" fit="contain" />
                     </Box>
                   </Grid.Col>
-                  <Grid.Col span={{
-                    base: 12,
-                    lg: 12,
-                    md: 12,
-                  }}>
+                  <Grid.Col span={12}>
                     <Paper
-                      pos={"relative"}
                       bg={colors["blue-button"]}
-                      p={10}
-                      w={{ base: "100%", sm: "auto", md: "auto" }}
-                      flex={{ base: "1", sm: "1", md: "1" }}
+                      p="md"
+                      radius="lg"
+                      shadow="md"
+                      style={{ position: "relative", overflow: "hidden" }}
                     >
-                      <Grid
-                      >
-                        <GridCol span={{
-                          base: 12,
-                          lg: 6,
-                          md: 6,
-                        }}>
-                          <Box>
-                            <Text c={colors["white-1"]} fz={"sm"}>
-                              Jadwal Kerja
-                            </Text>
-                            <Paper
-                              w={{ base: "100%", sm: "100%", md: "auto" }}
-                              p={5}
-                              bg={colors["white-1"]}
-                            >
-                              <Flex justify={"space-between"} align={"center"}>
-                                <Paper
-                                  w={{ base: "100%", sm: "100%", md: "auto" }}
-                                  p={5}
-                                  bg={colors["white-1"]}
+                      <Grid gutter="md">
+                        <GridCol span={{ base: 12, md: 6 }}>
+                          <Stack gap="xs">
+                            <Flex align="center" gap="xs">
+                              <IconCalendarTime size={16} color="white" />
+                              <Text c="white" fz="sm">Jam Operasional</Text>
+                            </Flex>
+                            <Paper p="sm" radius="md" bg="white">
+                              <Tooltip label="Status saat ini berdasarkan jam operasional kantor">
+                                <Badge
+                                  color={workStatus.status === "Buka" ? "green" : "red"}
+                                  radius="sm"
+                                  variant="filled"
                                 >
-
-                                  <Box>
-                                    <Text fw="bold" fz="sm" c={workStatus.status === 'Buka' ? "black" : "red"}>
-                                      {workStatus.status}
-                                    </Text>
-                                    <Text fw="bold" fz="lg" >
-                                      {workStatus.message}
-                                    </Text>
-                                  </Box>
-                                </Paper>
-                              </Flex>
+                                  {workStatus.status}
+                                </Badge>
+                              </Tooltip>
+                              <Text fw="bold" fz="lg">{workStatus.message}</Text>
                             </Paper>
-                          </Box>
+                          </Stack>
                         </GridCol>
-                        {/* Edit yang ini */}
-                        <GridCol span={{ base: 12, lg: 6, md: 6 }}>
-                          <Box>
-                            <Text c={colors["white-1"]} fz={"sm"}>
-                              {new Intl.DateTimeFormat('id-ID', {
-                                weekday: 'long',
-                                year: 'numeric',
-                                month: 'long',
-                                day: 'numeric'
-                              }).format(new Date())}
-                            </Text>
-                            <Paper bg={colors["white-1"]} p={10}>
-                              <Text fz="sm" >
-                                Status
-                              </Text>
-                              <Text fw="bold" fz="lg" >
-                                {workStatus.status === 'Buka' ? 'Operasional' : 'Tutup'}
+                        <GridCol span={{ base: 12, md: 6 }}>
+                          <Stack gap="xs">
+                            <Flex align="center" gap="xs">
+                              <IconInfoCircle size={16} color="white" />
+                              <Text c="white" fz="sm">Hari Ini</Text>
+                            </Flex>
+                            <Paper p="sm" radius="md" bg="white">
+                              <Text fz="sm">Status Kantor</Text>
+                              <Text fw="bold" fz="lg">
+                                {workStatus.status === "Buka" ? "Sedang Beroperasi" : "Tidak Beroperasi"}
                               </Text>
                             </Paper>
-
-                          </Box>
+                          </Stack>
                         </GridCol>
                       </Grid>
                     </Paper>
                   </Grid.Col>
-
                 </Grid>
-
               </Flex>
+
               <ModuleView />
+
               {isLoading ? (
                 <Skeleton height={32} width="100%" />
               ) : socialMedia.length > 0 ? (
                 <SosmedView data={socialMedia} />
               ) : (
-                <div>No social media links available</div>
+                <Center>
+                  <Text c="dimmed">Belum ada tautan media sosial yang tersedia</Text>
+                </Center>
               )}
-              <Text c={colors.trans.dark[2]} style={{
-                textAlign: "center"
-              }} >Sampaikan saran dan masukan guna kemajuan dalam pembangunan. Semua lebih mudah melalui fitur interaktif</Text>
+
+              <Text ta="center" c={colors.trans.dark[2]}>
+                Bagikan ide, kritik, atau saran Anda untuk mendukung pembangunan desa. 
+                Semua lebih mudah dengan fitur interaktif yang kami sediakan.
+              </Text>
             </Stack>
           </Card>
-
         </Stack>
+
         {isLoading ? (
-          <Skeleton height={32} width="100%" />
+          <Skeleton height={300} width="100%" radius="lg" />
         ) : profile ? (
           <ProfileView data={profile} />
         ) : (
-          <div>No profile available</div>
+          <Center w="100%">
+            <Text c="dimmed">Informasi profil belum tersedia</Text>
+          </Center>
         )}
       </Flex>
-    </Stack >
+    </Stack>
   );
 }
 

src/app/darmasaba/_com/main-page/penghargaan/index.tsx

@@ -1,34 +1,33 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client';
 import penghargaanState from "@/app/admin/(dashboard)/_state/desa/penghargaan";
-import colors from "@/con/colors";
-import { Stack, Box, Container, Button, Text } from "@mantine/core";
-import { useTransitionRouter } from 'next-view-transitions'
+import { Stack, Box, Container, Button, Text, Loader, Paper } from "@mantine/core";
+import { IconAward, IconArrowRight } from "@tabler/icons-react";
+import { useTransitionRouter } from 'next-view-transitions';
 import { useEffect, useState } from "react";
 import { useProxy } from "valtio/utils";
 
 function Penghargaan() {
-  const router = useTransitionRouter()
-  const state = useProxy(penghargaanState)
-  const [loading, setLoading] = useState(false)
+  const router = useTransitionRouter();
+  const state = useProxy(penghargaanState);
+  const [loading, setLoading] = useState(false);
 
   useEffect(() => {
     const loadData = async () => {
       try {
-        setLoading(true)
-        await state.findMany.load()
-      } catch (error) {
-        console.error('Error loading data:', error)
+        setLoading(true);
+        await state.findMany.load();
       } finally {
-        setLoading(false)
+        setLoading(false);
       }
-    }
-    loadData()
-  }, [])
+    };
+    loadData();
+  }, []);
+
+  const data = state.findMany.data?.slice(0, 3);
 
-  const data = state.findMany.data?.slice(0, 3)
   return (
-    <Stack pos={"relative"} h={720}>
+    <Stack pos="relative" h={720}>
       <video
         width="320"
         height="240"
@@ -51,47 +50,68 @@ function Penghargaan() {
           position: "absolute",
           top: 0,
           left: 0,
-          background: "rgba(0,0,0,0.6)",
+          background: "linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0.85))",
         }}
       >
-        <Container w={{ base: "100%", md: "80%" }} p={"xl"} h={720}>
-          <Stack justify="center" align="center">
+        <Container w={{ base: "100%", md: "80%" }} h={720} p="xl">
+          <Stack justify="center" align="center" gap="xl" h="100%">
             <Text
-              style={{
-                textAlign: "center",
-              }}
-              fw={"bold"}
-              fz={"2.4rem"}
-              c={"white"}
+              fw={900}
+              fz={{ base: "2rem", md: "2.8rem" }}
+              ta="center"
+              variant="gradient"
+              gradient={{ from: "cyan", to: "blue", deg: 60 }}
             >
-              Penghargaan
+              Penghargaan & Prestasi Desa
             </Text>
+
             {loading ? (
-              <Text
-                style={{
-                  textAlign: "center",
-                }}
-                fw={"bold"}
-                fz={"2.4rem"}
-                c={"white"}
-              >
-                Memuat Data...
-              </Text>
-            ) : (
-              data?.map((v, k) => {
-                return (
-                  <Box key={k}>
-                    <Stack align="center" gap={0}>
-                      <Text fz={"1.4rem"} c={"white"}>
+              <Stack align="center" gap="sm">
+                <Loader color="blue" size="lg" />
+                <Text c="gray.3" fz="lg">Sedang memuat data penghargaan...</Text>
+              </Stack>
+            ) : data && data.length > 0 ? (
+              <Stack gap="md" w="100%" maw={600}>
+                {data.map((v, k) => (
+                  <Paper
+                    key={k}
+                    withBorder
+                    radius="xl"
+                    p="lg"
+                    shadow="xl"
+                    style={{
+                      background: "rgba(255,255,255,0.07)",
+                      backdropFilter: "blur(12px)",
+                      transition: "all 0.3s ease",
+                    }}
+                  >
+                    <Stack align="center" gap="xs">
+                      <IconAward size={40} color="var(--mantine-color-blue-4)" />
+                      <Text fz="lg" fw={700} c="white" ta="center">
                         {v.name}
                       </Text>
                     </Stack>
-                  </Box>
-                );
-              })
+                  </Paper>
+                ))}
+              </Stack>
+            ) : (
+              <Stack align="center" gap="xs">
+                <IconAward size={48} color="var(--mantine-color-gray-5)" />
+                <Text c="gray.4" fz="lg" ta="center">
+                  Belum ada penghargaan yang tercatat
+                </Text>
+              </Stack>
             )}
-            <Button color={colors["blue-button"]} onClick={() => router.push("/darmasaba/penghargaan")} variant="white" radius={100}>
-              Selanjutnya
+
+            <Button
+              size="lg"
+              radius="xl"
+              variant="gradient"
+              gradient={{ from: "#26667F", to: "#124170", deg: 45 }}
+              rightSection={<IconArrowRight size={20} />}
+              onClick={() => router.push("/darmasaba/penghargaan")}
+            >
+              Lihat Semua Penghargaan
             </Button>
           </Stack>
         </Container>
@@ -100,4 +120,4 @@ function Penghargaan() {
   );
 }
 
-export default Penghargaan;
+export default Penghargaan;

src/app/darmasaba/_com/main-page/potensi/index.tsx

@@ -1,5 +1,4 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-/* eslint-disable @typescript-eslint/no-unused-vars */
 "use client";
 import potensiDesaState from "@/app/admin/(dashboard)/_state/desa/potensi";
 import colors from "@/con/colors";
@@ -9,118 +8,128 @@ import {
   Button,
   Divider,
   Group,
+  Loader,
   SimpleGrid,
   Stack,
-  Text
+  Text,
+  Tooltip,
 } from "@mantine/core";
+import { IconArrowRight, IconInfoCircle } from "@tabler/icons-react";
 import _ from "lodash";
 import { motion } from "motion/react";
 import { useTransitionRouter } from "next-view-transitions";
 import { useEffect, useState } from "react";
 import { useProxy } from "valtio/utils";
 
-
-
 const textHeading = {
-  title: "Potensi",
-  des: "Tidak hanya untuk warga desa, fitur ini juga dapat digunakan oleh pemerintah desa untuk merencanakan program pengembangan berbasis potensi lokal",
+  title: "Potensi Desa",
+  des: "Jelajahi berbagai potensi dan peluang yang dimiliki desa. Fitur ini membantu warga maupun pemerintah desa dalam merencanakan dan mengembangkan program berbasis kekuatan lokal.",
 };
 
 function Potensi() {
-  const router = useTransitionRouter()
-  const [loading, setLoading] = useState(false)
-  const state = useProxy(potensiDesaState.potensiDesa)
+  const router = useTransitionRouter();
+  const [loading, setLoading] = useState(false);
+  const state = useProxy(potensiDesaState.potensiDesa);
 
-  useEffect(()=> {
+  useEffect(() => {
     const loadData = async () => {
       try {
         setLoading(true);
-        await state.findMany.load()
+        await state.findMany.load();
       } catch (error) {
-        console.error('Error loading data:', error);
+        console.error("Gagal memuat data:", error);
       } finally {
         setLoading(false);
       }
-    }
-    loadData()
-  }, [])
+    };
+    loadData();
+  }, []);
 
   const data = (state.findMany.data || []).slice(0, 4);
+
   return (
-    <Stack p={"sm"} gap={"4rem"}>
-      <Box
-        w={{
-          base: "100%",
-          sm: "60%",
-        }}
-      >
-        <Text fz={"4.4rem"}>{textHeading.title}</Text>
-        <Text size={"1.4rem"}>{textHeading.des}</Text>
+    <Stack p="sm" gap="4rem">
+      <Box w={{ base: "100%", sm: "60%" }}>
+        <Text fz="4.4rem" fw={700} c={colors["blue-button"]}>
+          {textHeading.title}
+        </Text>
+        <Text size="1.4rem" c="black">
+          {textHeading.des}
+        </Text>
       </Box>
-      <SimpleGrid
-        cols={{
-          base: 1,
-          sm: 2,
-        }}
-      >
-        {_.take(data, 4).map((v, k) => (
-          <motion.div
-            key={k}
-            whileHover={{ scale: 1.01 }}
-            whileTap={{ scale: 0.8 }}
-            onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}
-          >
-            <BackgroundImage
-              src={v.image?.link}
-              h={320}
+
+      {loading ? (
+        <Stack align="center" justify="center" h={300}>
+          <Loader size="lg" color={colors["blue-button"]} />
+          <Text c="gray.4">Sedang memuat potensi desa...</Text>
+        </Stack>
+      ) : data.length === 0 ? (
+        <Stack align="center" justify="center" h={300} gap="xs">
+          <IconInfoCircle size={48} color={colors["blue-button"]} />
+          <Text fw={600} c="gray.3">
+            Belum ada potensi tersedia
+          </Text>
+          <Text size="sm" c="gray.5">
+            Silakan cek kembali nanti untuk pembaruan terbaru.
+          </Text>
+        </Stack>
+      ) : (
+        <SimpleGrid cols={{ base: 1, sm: 2 }}>
+          {_.take(data, 4).map((v, k) => (
+            <motion.div
               key={k}
-              radius={16}
-              pos={"relative"}
+              whileHover={{ scale: 1.02 }}
+              whileTap={{ scale: 0.95 }}
+              onClick={() => router.push(`/darmasaba/desa/potensi/${v.id}`)}
+              style={{ cursor: "pointer" }}
             >
-              <Box
-                style={{
-                  borderRadius: 16,
-                  zIndex: 0,
-                }}
-                pos={"absolute"}
-                w={"100%"}
-                h={"100%"}
-                bg={colors.trans.dark[2]}
-              />
-              <Stack
-                justify="end"
-                h={"100%"}
-                p={"md"}
-                align="start"
-                pos={"absolute"}
-                style={{
-                  zIndex: 1,
-                }}
-              >
-                <Text fw={"bold"} c={"gray.1"} size={"2.4rem"}>
-                  {v.name}
-                </Text>
-                <Text
-                  lineClamp={2}
-                  style={{
-                    textAlign: "justify",
-                  }}
-                  c={colors["white-1"]}
+              <BackgroundImage src={v.image?.link} h={320} radius={20} pos="relative">
+                <Box
+                  pos="absolute"
+                  w="100%"
+                  h="100%"
+                  bg={colors.trans.dark[2]}
+                  style={{ borderRadius: 20, zIndex: 0 }}
+                />
+                <Stack
+                  justify="end"
+                  h="100%"
+                  p="md"
+                  align="start"
+                  pos="absolute"
+                  style={{ zIndex: 1 }}
                 >
-                  {v.deskripsi}
-                </Text>
-              </Stack>
-            </BackgroundImage>
-          </motion.div>
-        ))}
-      </SimpleGrid>
+                  <Tooltip label={v.name} position="top-start">
+                    <Text fw={700} c="white" size="2.2rem" truncate>
+                      {v.name}
+                    </Text>
+                  </Tooltip>
+                  <Text lineClamp={2} c="gray.2" size="sm">
+                    {v.deskripsi}
+                  </Text>
+                </Stack>
+              </BackgroundImage>
+            </motion.div>
+          ))}
+        </SimpleGrid>
+      )}
+
       <Stack align="center">
         <Group>
-          <Button onClick={()=> router.push("/darmasaba/desa/potensi")} color={colors["blue-button"]} variant="outline" radius={100} size="md">
-            Selengkapnya
+          <Button
+            onClick={() => router.push("/darmasaba/desa/potensi")}
+            color={colors["blue-button"]}
+            variant="gradient"
+            gradient={{ from: "#26667F", to: "#124170", }}
+            radius="xl"
+            size="md"
+            rightSection={<IconArrowRight size={18} />}
+          >
+            Lihat Semua Potensi
           </Button>
         </Group>
       </Stack>
+
       <Divider />
     </Stack>
   );

src/app/darmasaba/_com/main-page/prestasi/index.tsx

@@ -2,104 +2,124 @@
 'use client'
 import prestasiState from "@/app/admin/(dashboard)/_state/landing-page/prestasi-desa";
 import colors from "@/con/colors";
-import { BackgroundImage, Box, Button, Center, Container, Group, SimpleGrid, Stack, Text } from "@mantine/core";
+import { BackgroundImage, Box, Button, Center, Container, Group, Loader, SimpleGrid, Stack, Text } from "@mantine/core";
 import { useProxy } from "valtio/utils";
 import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import Link from "next/link";
+import { IconTrophy } from "@tabler/icons-react";
 
 function Prestasi() {
-    const state = useProxy(prestasiState.prestasiDesa);
-    const [loading, setLoading] = useState(false);
-    const router = useRouter()
+  const state = useProxy(prestasiState.prestasiDesa);
+  const [loading, setLoading] = useState(false);
+  const router = useRouter();
 
-    useEffect(() => {
-        prestasiState.kategoriPrestasi.findMany.load()
-        const loadData = async () => {
-            try {
-                setLoading(true);
-                await state.findMany.load();
-            } catch (error) {
-                console.error('Error loading data:', error);
-            } finally {
-                setLoading(false);
-            }
-        }
-        loadData();
-    }, [])
+  useEffect(() => {
+    prestasiState.kategoriPrestasi.findMany.load();
+    const loadData = async () => {
+      try {
+        setLoading(true);
+        await state.findMany.load();
+      } finally {
+        setLoading(false);
+      }
+    };
+    loadData();
+  }, []);
 
-    const data = (state.findMany.data || []).slice(0, 3);
-    return (
-        <>
-            <Stack p={"sm"}>
-                <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
-                    <Text ta={"center"} fz={"3.4rem"}>Prestasi Desa</Text>
-                    <Text fz={"1.4rem"} ta={"center"}>Kami bangga dengan apa yang telah dicapai desa kita hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.</Text>
-                    <Center pt={20}>
-                        <Button radius={"lg"} fz={"h4"} color={colors["blue-button"]} component={Link} href="/darmasaba/prestasi-desa">Selengkapnya</Button>
-                    </Center>
-                </Container>
-                <Box py={50}>
-                    <SimpleGrid
-                        cols={{
-                            base: 1,
-                            sm: 3
-                        }}
-                    >
-                        {loading ? (
-                            <Center>
-                                <Text fz={"2.4rem"}>Memuat Data...</Text>
-                            </Center>
-                        ) : (
-                            data.map((v, k) => {
-                                return (
-                                    <BackgroundImage
-                                        key={k}
-                                        src={v.image?.link || ''}
-                                        radius={16}
-                                        pos={"relative"}
-                                    >
-                                        <Box
-                                            style={{
-                                                borderRadius: 16,
-                                                zIndex: 0
-                                            }}
-                                            pos={"absolute"}
-                                            w={"100%"}
-                                            h={"100%"}
-                                            bg={colors.trans.dark[2]}
-                                        />
-                                        <Stack justify="space-between" h={"100%"} gap={0} p={"lg"} pos={"relative"}>
-                                            <Box p={"lg"}>
-                                                <Text
-                                                    c={"white"}
-                                                    fz={{ base: "1rem", md: "1.125rem", lg: "1.25rem", xl: "1.5rem" }}
-                                                    ta={"center"}
-                                                >
-                                                    {v.kategori.name}
-                                                </Text>
-                                            </Box>
-                                            <Text
-                                                fw={"bold"}
-                                                c={"white"}
-                                                fz={{ base: "2rem", md: "2.5rem", lg: "2.7rem", xl: "3rem" }}
-                                                ta={"center"}
-                                                dangerouslySetInnerHTML={{ __html: v.deskripsi }}
-                                            />
-                                            <Group justify="center">
-                                                <Button onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)} px={46} radius={"100"} size="md" bg={colors["blue-button"]}>
-                                                    Lihat Detail
-                                                </Button>
-                                            </Group>
-                                        </Stack>
-                                    </BackgroundImage>
-                                )
-                            })
-                        )}
-                    </SimpleGrid>
-                </Box>
+  const data = (state.findMany.data || []).slice(0, 3);
+
+  return (
+    <Stack p="sm" bg="linear-gradient(180deg, #ffffff 0%, #f8fbff 100%)">
+      <Container w={{ base: "100%", md: "80%" }} p="xl">
+        <Stack align="center" gap="sm">
+          <Group gap="xs">
+            <IconTrophy size={36} color={colors["blue-button"]} />
+            <Text ta="center" fz={{ base: "2rem", md: "3.4rem" }} fw={700}>
+              Prestasi Desa
+            </Text>
+          </Group>
+          <Text fz={{ base: "1rem", md: "1.3rem" }} ta="center" c="dimmed" maw={700}>
+            Kami bangga dengan pencapaian desa hingga saat ini. Semoga prestasi ini menjadi inspirasi untuk terus berkarya dan berinovasi demi kemajuan bersama.
+          </Text>
+          <Button
+            radius="xl"
+            size="lg"
+            variant="gradient"
+            gradient={{ from: "#26667F", to: "#124170" }}
+            component={Link}
+            href="/darmasaba/prestasi-desa"
+          >
+            Lihat Semua Prestasi
+          </Button>
+        </Stack>
+      </Container>
+
+      <Box py={50}>
+        {loading ? (
+          <Center mih={200}>
+            <Loader color={colors["blue-button"]} size="xl" />
+          </Center>
+        ) : data.length === 0 ? (
+          <Center mih={200}>
+            <Stack align="center" gap="xs">
+              <IconTrophy size={48} color="gray" />
+              <Text fz="1.2rem" fw={500} c="dimmed">
+                Belum ada prestasi yang ditampilkan
+              </Text>
             </Stack>
-        </>
-    )
+          </Center>
+        ) : (
+          <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
+            {data.map((v, k) => (
+              <BackgroundImage
+                key={k}
+                src={v.image?.link || ""}
+                radius="xl"
+                pos="relative"
+              >
+                <Box
+                  pos="absolute"
+                  inset={0}
+                  bg="linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.7) 100%)"
+                  style={{ borderRadius: "1rem" }}
+                />
+                <Stack justify="space-between" h="100%" pos="relative" p="lg">
+                  <Box>
+                    <Text
+                      c="white"
+                      fz={{ base: "1rem", md: "1.25rem" }}
+                      ta="center"
+                      fw={500}
+                    >
+                      {v.kategori.name}
+                    </Text>
+                  </Box>
+                  <Text
+                    fw={700}
+                    c="white"
+                    fz={{ base: "1.5rem", md: "2rem", lg: "2.5rem" }}
+                    ta="center"
+                    dangerouslySetInnerHTML={{ __html: v.deskripsi }}
+                  />
+                  <Group justify="center">
+                    <Button
+                      onClick={() => router.push(`/darmasaba/prestasi-desa/${v.id}`)}
+                      radius="xl"
+                      size="md"
+                      color={colors["blue-button"]}
+                    >
+                      Detail Prestasi
+                    </Button>
+                  </Group>
+                </Stack>
+              </BackgroundImage>
+            ))}
+          </SimpleGrid>
+        )}
+      </Box>
+    </Stack>
+  );
 }
-export default Prestasi;
+
+export default Prestasi;

src/app/darmasaba/_com/main-page/sdgs/index.tsx

@@ -1,143 +1,142 @@
 'use client'
-import colors from "@/con/colors";
-import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, Title, useMantineTheme } from "@mantine/core";
-import { useMediaQuery } from "@mantine/hooks";
-import { Prisma } from "@prisma/client";
-import Link from "next/link";
-import { useEffect, useState } from "react";
+import { useEffect, useState } from "react"
+import { Box, Button, Center, Container, Image, Paper, SimpleGrid, Stack, Text, Title, useMantineTheme } from "@mantine/core"
+import { useMediaQuery } from "@mantine/hooks"
+import { Prisma } from "@prisma/client"
+import Link from "next/link"
+import { IconMoodSad } from "@tabler/icons-react"
 
 export default function SDGS() {
-    const theme = useMantineTheme();
-    const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`);
-    const [sdgsDesa, setSdgsDesa] = useState<Prisma.SDGSDesaGetPayload<{ include: { image: true } }>[] | null>(null);
+  const theme = useMantineTheme()
+  const mobile = useMediaQuery(`(max-width: ${theme.breakpoints.sm})`)
+  const [sdgsDesa, setSdgsDesa] = useState<Prisma.SDGSDesaGetPayload<{ include: { image: true } }>[] | null>(null)
 
-    useEffect(() => {
-        const fetchSdgsDesa = async () => {
-            try {
-                const response = await fetch('/api/landingpage/sdgsdesa/findMany');
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                const result = await response.json();
-                // Ensure the data is an array before setting it
-                let data = [];
-                if (Array.isArray(result.data)) {
-                    data = result.data;
-                } else if (Array.isArray(result)) {
-                    // In case the API returns the array directly
-                    data = result;
-                } else {
-                    console.error('Unexpected API response format:', result);
-                    setSdgsDesa([]);
-                    return;
-                }
+  useEffect(() => {
+    const fetchSdgsDesa = async () => {
+      try {
+        const response = await fetch("/api/landingpage/sdgsdesa/findMany")
+        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`)
+        const result = await response.json()
+        let data = []
+        if (Array.isArray(result.data)) data = result.data
+        else if (Array.isArray(result)) data = result
+        else {
+          setSdgsDesa([])
+          return
+        }
+        const top3Sdgs = [...data].sort((a, b) => parseInt(b.jumlah) - parseInt(a.jumlah)).slice(0, 3)
+        setSdgsDesa(top3Sdgs)
+      } catch {
+        setSdgsDesa([])
+      }
+    }
+    fetchSdgsDesa()
+  }, [])
 
-                // Sort by jumlah in descending order and take top 3
-                const top3Sdgs = [...data]
-                    .sort((a, b) => parseInt(b.jumlah) - parseInt(a.jumlah))
-                    .slice(0, 3);
+  return (
+    <Stack p="sm">
+      <Container w={{ base: "100%", md: "80%" }} p="xl">
+        <Center>
+          <Title order={1} fz={{ base: "2.2rem", md: "3.4rem" }} fw={900}>
+            SDGs Desa
+          </Title>
+        </Center>
+        <Text fz={{ base: "1rem", md: "1.3rem" }} ta="center" c="dimmed" mt="md" maw={800} mx="auto">
+          SDGs Desa adalah penerapan 17 Tujuan Pembangunan Berkelanjutan di tingkat desa. Fokus pada pengentasan kemiskinan,
+          pendidikan, kesehatan, kesetaraan gender, dan pelestarian lingkungan untuk menciptakan desa yang maju, inklusif, dan berkelanjutan.
+        </Text>
 
-                setSdgsDesa(top3Sdgs);
-            } catch (error) {
-                console.error('Error fetching sdgs desa:', error);
-                setSdgsDesa([]);
-            }
-        };
-
-        fetchSdgsDesa();
-    }, []);
-    return (
-        <Stack p={"sm"}>
-            <Container w={{ base: "100%", md: "80%" }} p={"xl"}>
-                <Center>
-                    <Text fz={"3.4rem"}>SDGs Desa</Text>
-                </Center>
-                <Text fz={"1.4rem"} ta={"center"}>SDGs Desa adalah upaya menerapkan 17 Tujuan Pembangunan Berkelanjutan di tingkat desa.
-                    Dengan fokus pada pengentasan kemiskinan, pendidikan, kesehatan, kesetaraan gender, dan pelestarian lingkungan, kami berkomitmen untuk menciptakan desa yang lebih baik bagi semua</Text>
-                <Box py={50}>
-                    <Paper p={{ base: 'md', md: 'xl' }} bg={colors.Bg} radius="lg" shadow="sm">
-                        {sdgsDesa && sdgsDesa.length > 0 ? (
-                            <SimpleGrid
-                                cols={{ base: 1, sm: 3 }}
-                                spacing="xl"
-                                verticalSpacing="xl"
-                            >
-                                {sdgsDesa.map((item) => (
-                                    <Box 
-                                        key={item.id} 
-                                        p="md" 
-                                        style={{
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            height: '100%',
-                                            transition: 'transform 0.2s',
-                                            '&:hover': {
-                                                transform: 'translateY(-5px)'
-                                            }
-                                        }}
-                                    >
-                                        <Box 
-                                            p="md" 
-                                            style={{
-                                                backgroundColor: 'white',
-                                                width: mobile ? 150 : 180,
-                                                height: mobile ? 150 : 180,
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                                marginBottom: '1.5rem',
-                                                boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)'
-                                            }}
-                                        >
-                                            <Image
-                                                src={item.image?.link ? item.image.link : '/placeholder-sdgs.png'}
-                                                alt={item.name}
-                                                width={mobile ? 100 : 120}
-                                                height={mobile ? 100 : 120}
-                                                style={{
-                                                    objectFit: 'contain',
-                                                    maxWidth: '100%',
-                                                    maxHeight: '100%'
-                                                }}
-                                            />
-                                        </Box>
-                                        <Text 
-                                            ta="center" 
-                                            fz={{ base: 'lg', md: 'xl' }} 
-                                            fw={700} 
-                                            mb="xs"
-                                            style={{ lineHeight: 1.2 }}
-                                        >
-                                            {item.name}
-                                        </Text>
-                                        <Title 
-                                            order={2} 
-                                            ta="center" 
-                                            c={colors['blue-button']}
-                                            style={{
-                                                fontSize: mobile ? '2.5rem' : '3rem',
-                                                lineHeight: 1,
-                                                margin: '0.5rem 0',
-                                                fontWeight: 800
-                                            }}
-                                        >
-                                            {item.jumlah}
-                                        </Title>
-                                    </Box>
-                                ))}
-                            </SimpleGrid>
-                        ) : (
-                            <Text>Tidak ada data SDGs Desa</Text>
-                        )}
-                    </Paper>
-                    <Center>
-                        <Button component={Link} href={"/darmasaba/sdgs-desa"} radius={"lg"} fz={"1.2rem"} mt={20} bg={colors["blue-button"]}>Selengkapnya</Button>
+        <Box py={50}>
+          <Paper
+            p={{ base: "md", md: "xl" }}
+            radius="xl"
+            withBorder
+            shadow="lg"
+            style={{
+              background: "linear-gradient(145deg, #FAF6E9, #FFFDF6)",
+              border: "1px solid rgba(255,255,255,0.05)",
+            }}
+          >
+            {sdgsDesa && sdgsDesa.length > 0 ? (
+              <SimpleGrid cols={{ base: 1, sm: 3 }} spacing="xl" verticalSpacing="xl">
+                {sdgsDesa.map((item) => (
+                  <Paper
+                    key={item.id}
+                    p="lg"
+                    radius="lg"
+                    shadow="sm"
+                    style={{
+                      background: "linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02))",
+                      border: "1px solid rgba(255,255,255,0.08)",
+                      transition: "all 0.3s ease",
+                    }}
+                    withBorder
+                  >
+                    <Center mb="lg">
+                      <Box
+                        p="md"
+                        style={{
+                          background: "rgba(255,255,255,0.06)",
+                          backdropFilter: "blur(6px)",
+                          width: mobile ? 140 : 160,
+                          height: mobile ? 140 : 160,
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          borderRadius: "1rem",
+                        }}
+                      >
+                        <Image
+                          src={item.image?.link ? item.image.link : "/placeholder-sdgs.png"}
+                          alt={item.name}
+                          w={mobile ? 90 : 110}
+                          h={mobile ? 90 : 110}
+                          fit="contain"
+                        />
+                      </Box>
                     </Center>
-                </Box>
-            </Container>
+                    <Text ta="center" fz={{ base: "lg", md: "xl" }} fw={700} mb="xs">
+                      {item.name}
+                    </Text>
+                    <Title
+                      order={2}
+                      ta="center"
+                      style={{
+                        fontSize: mobile ? "2.3rem" : "3rem",
+                        fontWeight: 900,
+                        letterSpacing: "-1px",
+                      }}
+                    >
+                      {item.jumlah}
+                    </Title>
+                  </Paper>
+                ))}
+              </SimpleGrid>
+            ) : (
+              <Center mih={200} style={{ flexDirection: "column" }}>
+                <IconMoodSad size={48} stroke={1.5} style={{ marginBottom: "1rem" }} />
+                <Text fz="lg" c="dimmed">
+                  Belum ada data SDGs Desa
+                </Text>
+              </Center>
+            )}
+          </Paper>
 
-        </Stack>
-    );
-}
+          <Center>
+            <Button
+              component={Link}
+              href="/darmasaba/sdgs-desa"
+              radius="xl"
+              size="lg"
+              mt={30}
+              variant="gradient"
+              gradient={{ from: "#26667F", to: "#124170" }}
+            >
+              Lihat Semua SDGs Desa
+            </Button>
+          </Center>
+        </Box>
+      </Container>
+    </Stack>
+  )
+}