API Auth

package.json

@@ -57,6 +57,8 @@
     "form-data": "^4.0.2",
     "framer-motion": "^12.23.5",
     "get-port": "^7.1.0",
+    "iron-session": "^8.0.4",
+    "jose": "^6.1.0",
     "jotai": "^2.12.3",
     "jsonwebtoken": "^9.0.2",
     "leaflet": "^1.9.4",
@@ -64,7 +66,7 @@
     "lodash": "^4.17.21",
     "motion": "^12.4.1",
     "nanoid": "^5.1.5",
-    "next": "15.1.6",
+    "next": "^15.5.2",
     "next-view-transitions": "^0.3.4",
     "node-fetch": "^3.3.2",
     "p-limit": "^6.2.0",

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

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

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

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

prisma/data/user/role.json

@@ -1,6 +0,0 @@
-[
-    {
-        "id": "cmdpm429r0000vnndkcwslt0h",
-        "name": "warga"
-    }
-]

prisma/data/user/roles.json

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

prisma/data/user/users.json

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

prisma/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])
@@ -292,6 +293,9 @@ model PosisiOrganisasiPPID {
   pegawai            PegawaiPPID[]
   strukturOrganisasi StrukturPPID[] // Relasi balik
   parentId           String?
+  isActive           Boolean                @default(true)
+  createdAt          DateTime               @default(now())
+  updatedAt          DateTime               @updatedAt
   parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
   children           PosisiOrganisasiPPID[] @relation("Parent")
 }
@@ -1547,7 +1551,7 @@ model DataDemografiPekerjaan {
 model DetailDataPengangguran {
   id                     String   @id @default(uuid()) @db.Uuid
   month                  String   @db.VarChar(20)
-  year                   Int
+  year                   DateTime
   totalUnemployment      Int
   educatedUnemployment   Int
   uneducatedUnemployment Int
@@ -1635,18 +1639,27 @@ model ProgramKreatif {
 
 // ========================================= KOLABORASI INOVASI ========================================= //
 model KolaborasiInovasi {
-  id          String      @id @default(cuid())
+  id          String   @id @default(cuid())
   name        String
   tahun       Int
-  slug        String      @db.Text //deskripsi singkat
-  deskripsi   String      @db.Text //deskripsi panjang
+  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)
+  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 ========================================= //
@@ -2090,26 +2103,66 @@ model KategoriBuku {
   DataPerpustakaan DataPerpustakaan[]
 }
 
+// ========================================= USER ========================================= //
+
 model User {
-  id        String   @id @default(cuid())
-  nama      String
-  email     String   @unique
-  password  String
-  role      Role     @relation(fields: [roleId], references: [id])
-  roleId    String
-  isActive  Boolean  @default(true)
-  createdAt DateTime @default(now())
-  updatedAt DateTime @updatedAt
+  id        String    @id @default(cuid())
+  username  String
+  nomor     String    @unique
+  role      Role      @relation(fields: [roleId], references: [id])
+  roleId    String    @default("1")
+  instansi  String?
+  UserSession UserSession? // Nama instansi (Puskesmas, Sekolah, dll)
+  isActive  Boolean   @default(true)
+  lastLogin DateTime?
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @updatedAt
+  deletedAt DateTime?
 }
 
 model Role {
+  id          String    @id @default(cuid())
+  name        String    @unique // ADMIN_DESA, ADMIN_KESEHATAN, ADMIN_SEKOLAH
+  description String?
+  permissions Json // Menyimpan permission dalam format JSON
+  isActive    Boolean   @default(true)
+  createdAt   DateTime  @default(now())
+  updatedAt   DateTime  @updatedAt
+  deletedAt   DateTime?
+  users       User[]
+
+  @@map("roles")
+}
+
+model KodeOtp {
   id        String   @id @default(cuid())
-  name      String
+  isActive  Boolean  @default(true)
   createdAt DateTime @default(now())
   updatedAt DateTime @updatedAt
-  deletedAt DateTime @default(now())
-  isActive  Boolean  @default(true)
-  User      User[]
+  nomor     String
+  otp       Int
+}
+
+// Tabel untuk menyimpan permission
+model Permission {
+  id          String   @id @default(cuid())
+  name        String   @unique
+  description String?
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  @@map("permissions")
+}
+
+model UserSession {
+  id        String    @id @default(cuid())
+  token     String
+  expires   DateTime?
+  active    Boolean   @default(true)
+  createdAt DateTime  @default(now())
+  updatedAt DateTime  @default(now()) @updatedAt
+  User      User      @relation(fields: [userId], references: [id])
+  userId    String    @unique
 }
 
 // ========================================= DATA PENDIDIKAN ========================================= //

prisma/seed.ts

@@ -1,57 +1,119 @@
 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";
+import roles from "./data/user/roles.json";
+import users from "./data/user/users.json";
 
 (async () => {
+  // =========== USER & ROLE ===========
+  // In your seed.ts
+// =========== ROLES ===========
+console.log("🔄 Seeding roles...");
+for (const r of roles) {
+  await prisma.role.upsert({
+    where: { id: r.id },
+    update: {
+      name: r.name,
+      description: r.description,
+      permissions: r.permissions,
+      isActive: r.isActive,
+    },
+    create: {
+      id: r.id,
+      name: r.name,
+      description: r.description,
+      permissions: r.permissions,
+      isActive: r.isActive,
+    },
+  });
+}
+console.log("✅ Roles seeded");
+
+// =========== USERS ===========
+console.log("🔄 Seeding users...");
+for (const u of users) {
+  // First verify the role exists
+  const roleExists = await prisma.role.findUnique({
+    where: { id: u.roleId }
+  });
+  
+  if (!roleExists) {
+    console.error(`❌ Role with id ${u.roleId} not found for user ${u.nama}`);
+    continue;
+  }
+
+  await prisma.user.upsert({
+    where: { id: u.id },
+    update: {
+      username: u.nama,
+      nomor: u.nomor,
+      roleId: u.roleId,
+      isActive: u.isActive,
+    },
+    create: {
+      id: u.id,
+      username: u.nama,
+      nomor: u.nomor,
+      roleId: u.roleId,
+      isActive: u.isActive,
+    },
+  });
+}
+console.log("✅ Users seeded");
   // =========== LANDING PAGE ===========
-  // =========== PROFILE ===========
+  // =========== SUBMENU PROFILE ===========
+  // =========== PROFILE PEJABAT DESA ===========
   for (const p of profilePejabatDesa) {
     await prisma.pejabatDesa.upsert({
       where: { id: p.id },
@@ -106,6 +168,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 +306,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 +346,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 +368,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 +388,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 +408,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 +433,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 +453,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 +506,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 +517,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 +714,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 +762,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 +849,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 +864,7 @@ import pelayananTelunjukSaktiDesa from "./data/desa/layanan/pelayananTelunjukSak
       },
       create: {
         month: d.month,
-        year: d.year,
+        year: yearAsDate,
         totalUnemployment: d.totalUnemployment,
         educatedUnemployment: d.educatedUnemployment,
         uneducatedUnemployment: d.uneducatedUnemployment,

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

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

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

@@ -74,18 +74,18 @@ const berita = proxy({
     totalPages: 1,
     loading: false,
     search: "",
-   load: async (page = 1, limit = 10, search = "", kategori = "") => {
+    load: async (page = 1, limit = 10, search = "", kategori = "") => {
       berita.findMany.loading = true; // ✅ Akses langsung via nama path
       berita.findMany.page = page;
       berita.findMany.search = search;
-  
+
       try {
         const query: any = { page, limit };
         if (search) query.search = search;
         if (kategori) query.kategori = kategori;
-    
+
         const res = await ApiFetch.api.desa.berita["find-many"].get({ query });
-    
+
         if (res.status === 200 && res.data?.success) {
           berita.findMany.data = res.data.data ?? [];
           berita.findMany.totalPages = res.data.totalPages ?? 1;
@@ -368,11 +368,37 @@ const kategoriBerita = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.desa.kategoriberita["findMany"].get();
-      if (res.status === 200) {
-        kategoriBerita.findMany.data = res.data?.data ?? [];
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      kategoriBerita.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriBerita.findMany.page = page;
+      kategoriBerita.findMany.search = search;
+
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.desa.kategoriberita[
+          "findMany"
+        ].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          kategoriBerita.findMany.data = res.data.data ?? [];
+          kategoriBerita.findMany.totalPages =
+            res.data.totalPages ?? 1;
+        } else {
+          kategoriBerita.findMany.data = [];
+          kategoriBerita.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kategori berita paginated:", err);
+        kategoriBerita.findMany.data = [];
+        kategoriBerita.findMany.totalPages = 1;
+      } finally {
+        kategoriBerita.findMany.loading = false;
       }
     },
   },

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

@@ -30,7 +30,6 @@ const templateTelunjukSaktiDesaForm = z.object({
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
 });
 
-
 const templatePelayananPerizinanBerusaha = z.object({
   name: z.string().min(3, "Nama minimal 3 karakter"),
   deskripsi: z.string().min(3, "Deskripsi minimal 3 karakter"),
@@ -72,7 +71,6 @@ const pelayananPendudukNonPermanenForm = {
   deskripsi: "",
 };
 
-
 const suratKeterangan = proxy({
   create: {
     form: { ...suratKeteranganForm },
@@ -113,16 +111,21 @@ const suratKeterangan = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      suratKeterangan.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      suratKeterangan.findMany.loading = true; // Use the full path to access the property
       suratKeterangan.findMany.page = page;
+      suratKeterangan.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.desa.layanan.pelayanansuratketerangan[
           "find-many"
         ].get({
-          query: { page, limit },
+          query,
         });
-  
+
         if (res.status === 200 && res.data?.success) {
           suratKeterangan.findMany.data = res.data.data || [];
           suratKeterangan.findMany.total = res.data.total || 0;
@@ -341,28 +344,34 @@ const pelayananTelunjukSaktiDesa = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
-      pelayananTelunjukSaktiDesa.findMany.loading = true;  // Use the full path to access the property
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      pelayananTelunjukSaktiDesa.findMany.loading = true; // Use the full path to access the property
       pelayananTelunjukSaktiDesa.findMany.page = page;
+      pelayananTelunjukSaktiDesa.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.desa.layanan.pelayanantelunjuksaktidesa[
           "find-many"
         ].get({
-          query: { page, limit },
+          query,
         });
-  
+
         if (res.status === 200 && res.data?.success) {
           pelayananTelunjukSaktiDesa.findMany.data = res.data.data || [];
           pelayananTelunjukSaktiDesa.findMany.total = res.data.total || 0;
-          pelayananTelunjukSaktiDesa.findMany.totalPages = res.data.totalPages || 1;
+          pelayananTelunjukSaktiDesa.findMany.totalPages =
+            res.data.totalPages || 1;
         } else {
-          console.error("Failed to load telunjuk sakti desa:", res.data?.message);
+          console.error("Failed to load surat keterangan:", res.data?.message);
           pelayananTelunjukSaktiDesa.findMany.data = [];
-          pelayananTelunjukSaktiDesa.findMany.total = 0;
-          pelayananTelunjukSaktiDesa.findMany.totalPages = 1;
+          suratKeterangan.findMany.total = 0;
+          suratKeterangan.findMany.totalPages = 1;
         }
       } catch (error) {
-        console.error("Error loading telunjuk sakti desa:", error);
+        console.error("Error loading surat keterangan:", error);
         pelayananTelunjukSaktiDesa.findMany.data = [];
         pelayananTelunjukSaktiDesa.findMany.total = 0;
         pelayananTelunjukSaktiDesa.findMany.totalPages = 1;
@@ -410,7 +419,9 @@ const pelayananTelunjukSaktiDesa = proxy({
         );
         const result = await response.json();
         if (response.ok) {
-          toast.success(result.message || "Telunjuk Sakti Desa berhasil dihapus");
+          toast.success(
+            result.message || "Telunjuk Sakti Desa berhasil dihapus"
+          );
           await pelayananTelunjukSaktiDesa.findMany.load(); // refresh list
         } else {
           toast.error(result.message || "Gagal menghapus telunjuk sakti desa");
@@ -501,7 +512,9 @@ const pelayananTelunjukSaktiDesa = proxy({
         }
         const result = await response.json();
         if (result.success) {
-          toast.success(result.message || "Telunjuk Sakti Desa berhasil diupdate");
+          toast.success(
+            result.message || "Telunjuk Sakti Desa berhasil diupdate"
+          );
           await pelayananTelunjukSaktiDesa.findMany.load(); // refresh list
           return true;
         } else {
@@ -522,7 +535,7 @@ const pelayananTelunjukSaktiDesa = proxy({
       }
     },
   },
-})
+});
 
 const pelayananPerizinanBerusaha = proxy({
   findById: {
@@ -596,9 +609,7 @@ const pelayananPerizinanBerusaha = proxy({
       } catch (error) {
         console.error("Error fetching pelayanan perizinan berusaha:", error);
         toast.error(
-          error instanceof Error
-            ? error.message
-            : "Gagal memuat data"
+          error instanceof Error ? error.message : "Gagal memuat data"
         );
         return null;
       }
@@ -713,9 +724,7 @@ const pelayananPendudukNonPermanen = proxy({
       } catch (error) {
         console.error("Error fetching pelayanan penduduk non permanen:", error);
         toast.error(
-          error instanceof Error
-            ? error.message
-            : "Gagal memuat data"
+          error instanceof Error ? error.message : "Gagal memuat data"
         );
         return null;
       }

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

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

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

@@ -55,11 +55,39 @@ const category = proxy({
         pengumumans: number;
       };
     })[],
+    page: 1,
+    totalPages: 1,
+    total: 0,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.desa.kategoripengumuman["findMany"].get();
-      if (res.status === 200) {
-        category.findMany.data = res.data?.data ?? [];
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
+      category.findMany.loading = true;  // Use the full path to access the property
+      category.findMany.page = page;
+      category.findMany.search = search;
+      try {
+        const res = await ApiFetch.api.desa.kategoripengumuman[
+          "findMany"
+        ].get({
+          query: { page, limit },
+        });
+  
+        if (res.status === 200 && res.data?.success) {
+          category.findMany.data = res.data.data || [];
+          category.findMany.total = res.data.total || 0;
+          category.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error("Failed to load potensi desa:", res.data?.message);
+          category.findMany.data = [];
+          category.findMany.total = 0;
+          category.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading potensi desa:", error);
+        category.findMany.data = [];
+        category.findMany.total = 0;
+        category.findMany.totalPages = 1;
+      } finally {
+        category.findMany.loading = false;
       }
     },
   },

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

@@ -56,9 +56,11 @@ const potensiDesa = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {  // Change to arrow function
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {  // Change to arrow function
       potensiDesa.findMany.loading = true;  // Use the full path to access the property
       potensiDesa.findMany.page = page;
+      potensiDesa.findMany.search = search;
       try {
         const res = await ApiFetch.api.desa.potensi[
           "find-many"
@@ -298,11 +300,34 @@ const kategoriPotensi = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.desa.kategoripotensi["findMany"].get();
-      if (res.status === 200) {
-        kategoriPotensi.findMany.data = res.data?.data ?? [];
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      kategoriPotensi.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriPotensi.findMany.page = page;
+      kategoriPotensi.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.desa.kategoripotensi["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          kategoriPotensi.findMany.data = res.data.data ?? [];
+          kategoriPotensi.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kategoriPotensi.findMany.data = [];
+          kategoriPotensi.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch kategori potensi paginated:", err);
+        kategoriPotensi.findMany.data = [];
+        kategoriPotensi.findMany.totalPages = 1;
+      } finally {
+        kategoriPotensi.findMany.loading = false;
       }
     },
   },

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -52,15 +52,19 @@ const pengelolaanSampah = proxy({
     totalPages: 1,
     total: 0,
     loading: false,
-    load: async (page = 1, limit = 10) => {
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
       // Change to arrow function
       pengelolaanSampah.findMany.loading = true; // Use the full path to access the property
       pengelolaanSampah.findMany.page = page;
+      pengelolaanSampah.findMany.search = search;
       try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
         const res = await ApiFetch.api.lingkungan.pengelolaansampah[
           "find-many"
         ].get({
-          query: { page, limit },
+          query,
         });
 
         if (res.status === 200 && res.data?.success) {
@@ -265,7 +269,7 @@ const keteranganSampah = proxy({
       try {
         keteranganSampah.create.loading = true;
         const res =
-          await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
+          await ApiFetch.api.lingkungan.keteranganbankterdekat[
             "create"
           ].post(keteranganSampah.create.form);
         if (res.status === 200) {
@@ -287,14 +291,47 @@ const keteranganSampah = proxy({
           omit: { isActive: true };
         }>[]
       | null,
-    async load() {
-      const res = await ApiFetch.api.lingkungan.pengelolaansampah.keteranganbankterdekat[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        keteranganSampah.findMany.data = res.data?.data ?? [];
-      }
-    },
+      page: 1,
+      totalPages: 1,
+      total: 0,
+      loading: false,
+      search: "",
+      load: async (page = 1, limit = 10, search = "") => {
+        // Change to arrow function
+        keteranganSampah.findMany.loading = true; // Use the full path to access the property
+        keteranganSampah.findMany.page = page;
+        keteranganSampah.findMany.search = search;
+        try {
+          const query: any = { page, limit };
+          if (search) query.search = search;
+          const res = await ApiFetch.api.lingkungan.keteranganbankterdekat[
+            "find-many"
+          ].get({
+            query,
+          });
+  
+          if (res.status === 200 && res.data?.success) {
+            keteranganSampah.findMany.data = res.data.data || [];
+            keteranganSampah.findMany.total = res.data.total || 0;
+            keteranganSampah.findMany.totalPages = res.data.totalPages || 1;
+          } else {
+            console.error(
+              "Failed to load keterangan bank sampah terdekat:",
+              res.data?.message
+            );
+            keteranganSampah.findMany.data = [];
+            keteranganSampah.findMany.total = 0;
+            keteranganSampah.findMany.totalPages = 1;
+          }
+        } catch (error) {
+          console.error("Error loading keterangan bank sampah terdekat:", error);
+          keteranganSampah.findMany.data = [];
+          keteranganSampah.findMany.total = 0;
+          keteranganSampah.findMany.totalPages = 1;
+        } finally {
+          keteranganSampah.findMany.loading = false;
+        }
+      },
   },
   findUnique: {
       data: null as Prisma.KeteranganBankSampahTerdekatGetPayload<{
@@ -302,7 +339,7 @@ const keteranganSampah = proxy({
       }> | null,
       async load(id: string) {
         try {
-          const res = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`);
+          const res = await fetch(`/api/lingkungan/keteranganbankterdekat/${id}`);
           if (res.ok) {
             const data = await res.json();
             keteranganSampah.findUnique.data = data.data ?? null;
@@ -324,7 +361,7 @@ const keteranganSampah = proxy({
           try {
             keteranganSampah.delete.loading = true;
     
-            const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/del/${id}`, {
+            const response = await fetch(`/api/lingkungan/keteranganbankterdekat/del/${id}`, {
               method: "DELETE",
               headers: {
                 "Content-Type": "application/json",
@@ -359,7 +396,7 @@ const keteranganSampah = proxy({
             }
       
             try {
-              const response = await fetch(`/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${id}`, {
+              const response = await fetch(`/api/lingkungan/keteranganbankterdekat/${id}`, {
                 method: "GET",
                 headers: {
                   "Content-Type": "application/json",
@@ -404,7 +441,7 @@ const keteranganSampah = proxy({
             try {
               keteranganSampah.edit.loading = true;
               const response = await fetch(
-                `/api/lingkungan/pengelolaansampah/keteranganbankterdekat/${this.id}`,
+                `/api/lingkungan/keteranganbankterdekat/${this.id}`,
                 {
                   method: "PUT",
                   headers: {

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

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

src/app/admin/(dashboard)/_state/pendidikan/beasiswa-desa.ts

@@ -1,9 +1,12 @@
+/* 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";
 
+// ========================================= BEASISWA PENDAFTAR ========================================= //
+
 const templateBeasiswaPendaftar = z.object({
   namaLengkap: z.string().min(1, "Nama harus diisi"),
   nik: z.string().min(1, "NIK harus diisi"),
@@ -76,13 +79,34 @@ const beasiswaPendaftar = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar[
-        "findMany"
-      ].get();
-      if (res.status === 200) {
-        beasiswaPendaftar.findMany.data = res.data?.data ?? [];
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      beasiswaPendaftar.findMany.loading = true; // ✅ Akses langsung via nama path
+      beasiswaPendaftar.findMany.page = page;
+      beasiswaPendaftar.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.beasiswa.beasiswapendaftar["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          beasiswaPendaftar.findMany.data = res.data.data ?? [];
+          beasiswaPendaftar.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          beasiswaPendaftar.findMany.data = [];
+          beasiswaPendaftar.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch beasiswa pendaftar paginated:", err);
+        beasiswaPendaftar.findMany.data = [];
+        beasiswaPendaftar.findMany.totalPages = 1;
+      } finally {
+        beasiswaPendaftar.findMany.loading = false;
       }
     },
   },
@@ -275,8 +299,260 @@ const beasiswaPendaftar = proxy({
   },
 });
 
+// ========================================= KEUNGGULAN PROGRAM ========================================= //
+const templateKeunggulanProgram = z.object({
+judul: z.string().min(1, "Judul harus diisi"),
+deskripsi: z.string().min(1, "Deskripsi harus diisi"),
+});
+
+const defaultKeunggulanProgram = {
+judul: "",
+deskripsi: "",
+};
+
+const keunggulanProgram = proxy({
+  create: {
+    form: { ...defaultKeunggulanProgram },
+    loading: false,
+    async create() {
+      const cek = templateKeunggulanProgram.safeParse(
+        keunggulanProgram.create.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        return toast.error(err);
+      }
+
+      try {
+        keunggulanProgram.create.loading = true;
+        const res = await ApiFetch.api.pendidikan.beasiswa.keunggulanprogram[
+          "create"
+        ].post(keunggulanProgram.create.form);
+        if (res.status === 200) {
+          keunggulanProgram.findMany.load();
+          return toast.success("Data Berhasil Dibuat, Silahkan Menunggu Konfirmasi dari Admin di WhatsApp");
+        }
+        console.log(res);
+        return toast.error("failed create");
+      } catch (error) {
+        console.log(error);
+        return toast.error("failed create");
+      } finally {
+        keunggulanProgram.create.loading = false;
+      }
+    },
+  },
+  findMany: {
+    data: [] as Prisma.KeunggulanProgramGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }>[],
+    page: 1,
+    totalPages: 1,
+    loading: false,
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      keunggulanProgram.findMany.loading = true; // ✅ Akses langsung via nama path
+      keunggulanProgram.findMany.page = page;
+      keunggulanProgram.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.beasiswa.keunggulanprogram["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          keunggulanProgram.findMany.data = res.data.data ?? [];
+          keunggulanProgram.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          keunggulanProgram.findMany.data = [];
+          keunggulanProgram.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch keunggulan program paginated:", err);
+        keunggulanProgram.findMany.data = [];
+        keunggulanProgram.findMany.totalPages = 1;
+      } finally {
+        keunggulanProgram.findMany.loading = false;
+      }
+    },
+  },
+  findUnique: {
+    data: null as Prisma.KeunggulanProgramGetPayload<{
+      omit: {
+        isActive: true;
+      };
+    }> | null,
+    loading: false,
+    async load(id: string) {
+      try {
+        const res = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/${id}`
+        );
+        if (res.ok) {
+          const data = await res.json();
+          keunggulanProgram.findUnique.data = data.data ?? null;
+        } else {
+          console.error("Failed to fetch data", res.status, res.statusText);
+          keunggulanProgram.findUnique.data = null;
+        }
+      } catch (error) {
+        console.error("Error fetching data:", error);
+        keunggulanProgram.findUnique.data = null;
+      }
+    },
+  },
+  delete: {
+    loading: false,
+    async delete(id: string) {
+      if (!id) return toast.warn("ID tidak valid");
+
+      try {
+        keunggulanProgram.delete.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/del/${id}`,
+          {
+            method: "DELETE",
+            headers: {
+              "Content-Type": "application/json",
+            },
+          }
+        );
+
+        const result = await response.json();
+
+        if (response.ok && result?.success) {
+          toast.success(result.message || "Keunggulan Program berhasil dihapus");
+          await keunggulanProgram.findMany.load(); // refresh list
+        } else {
+          toast.error(result?.message || "Gagal menghapus keunggulan program");
+        }
+      } catch (error) {
+        console.error("Gagal delete:", error);
+        toast.error("Terjadi kesalahan saat menghapus keunggulan program");
+      } finally {
+        keunggulanProgram.delete.loading = false;
+      }
+    },
+  },
+  update: {
+    id: "",
+    form: { ...defaultKeunggulanProgram },
+    loading: false,
+    async load(id: string) {
+      if (!id) {
+        toast.warn("ID tidak valid");
+        return null;
+      }
+
+      try {
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/${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 = {
+            judul: data.judul,
+            deskripsi: data.deskripsi,
+          };
+          return data; // Return the loaded data
+        } else {
+          throw new Error(result?.message || "Gagal memuat data");
+        }
+      } catch (error) {
+        console.error("Error loading keunggulan program:", error);
+        toast.error(
+          error instanceof Error ? error.message : "Gagal memuat data"
+        );
+        return null;
+      }
+    },
+    async update() {
+      const cek = templateKeunggulanProgram.safeParse(
+        keunggulanProgram.update.form
+      );
+      if (!cek.success) {
+        const err = `[${cek.error.issues
+          .map((v) => `${v.path.join(".")}`)
+          .join("\n")}] required`;
+        toast.error(err);
+        return false;
+      }
+
+      try {
+        keunggulanProgram.update.loading = true;
+
+        const response = await fetch(
+          `/api/pendidikan/beasiswa/keunggulanprogram/${this.id}`,
+          {
+            method: "PUT",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              judul: this.form.judul,
+              deskripsi: this.form.deskripsi,
+            }),
+          }
+        );
+
+        if (!response.ok) {
+          const errorData = await response.json().catch(() => ({}));
+          throw new Error(
+            errorData.message || `HTTP error! status: ${response.status}`
+          );
+        }
+
+        const result = await response.json();
+
+        if (result.success) {
+          toast.success("Berhasil update keunggulan program");
+          await keunggulanProgram.findMany.load(); // refresh list
+          return true;
+        } else {
+          throw new Error(result.message || "Gagal update keunggulan program");
+        }
+      } catch (error) {
+        console.error("Error updating keunggulan program:", error);
+        toast.error(
+          error instanceof Error
+            ? error.message
+            : "Terjadi kesalahan saat update keunggulan program"
+        );
+        return false;
+      } finally {
+        keunggulanProgram.update.loading = false;
+      }
+    },
+    reset() {
+      keunggulanProgram.update.id = "";
+      keunggulanProgram.update.form = { ...defaultKeunggulanProgram };
+    },
+  },
+});
+
+
 const beasiswaDesaState = proxy({
   beasiswaPendaftar,
+  keunggulanProgram
 });
 
 export default beasiswaDesaState;

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import ApiFetch from "@/lib/api-fetch";
 import { Prisma } from "@prisma/client";
 import { toast } from "react-toastify";
@@ -51,13 +52,46 @@ const jenjangPendidikan = proxy({
       id: string;
       nama: string;
     }> | null,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
-          "find-many"
-        ].get();
-      if (res.status === 200) {
-        jenjangPendidikan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      // Change to arrow function
+      jenjangPendidikan.findMany.loading = true; // Use the full path to access the property
+      jenjangPendidikan.findMany.page = page;
+      jenjangPendidikan.findMany.search = search;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        const res =
+          await ApiFetch.api.pendidikan.infosekolahpaud.jenjangpendidikan[
+            "find-many"
+          ].get({
+            query,
+          });
+
+        if (res.status === 200 && res.data?.success) {
+          jenjangPendidikan.findMany.data = res.data.data || [];
+          jenjangPendidikan.findMany.total = res.data.total || 0;
+          jenjangPendidikan.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load jenjang pendidikan:",
+            res.data?.message
+          );
+          jenjangPendidikan.findMany.data = [];
+          jenjangPendidikan.findMany.total = 0;
+          jenjangPendidikan.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading jenjang pendidikan:", error);
+        jenjangPendidikan.findMany.data = [];
+        jenjangPendidikan.findMany.total = 0;
+        jenjangPendidikan.findMany.totalPages = 1;
+      } finally {
+        jenjangPendidikan.findMany.loading = false;
       }
     },
   },
@@ -299,18 +333,64 @@ const lembagaPendidikan = proxy({
       Prisma.LembagaGetPayload<{
         include: {
           jenjangPendidikan: true;
-          siswa: true;
-          pengajar: true;
         };
-      }>
+      }> & {
+        siswa?: [];
+        pengajar?: [];
+      }
     > | null,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
-          "find-many"
-        ].get();
-      if (res.status === 200) {
-        lembagaPendidikan.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
+      lembagaPendidikan.findMany.loading = true;
+      lembagaPendidikan.findMany.page = page;
+      lembagaPendidikan.findMany.search = search;
+      
+      try {
+        const query: any = { 
+          page, 
+          limit, 
+          ...(search && { search }),
+          ...(jenjangPendidikan && { jenjangPendidikanId: jenjangPendidikan })
+        };
+        
+        console.log('Fetching lembaga with query:', query);
+        
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan["find-many"].get({ query });
+        
+        console.log('API Response:', res);
+
+        if (res.status === 200 && res.data?.success) {
+          const data = Array.isArray(res.data.data) ? res.data.data : [];
+          const total = typeof res.data.total === 'number' ? res.data.total : 0;
+          const totalPages = typeof res.data.totalPages === 'number' ? res.data.totalPages : 1;
+          
+          lembagaPendidikan.findMany.data = data;
+          lembagaPendidikan.findMany.total = total;
+          lembagaPendidikan.findMany.totalPages = totalPages;
+          
+          console.log('Successfully loaded lembaga data:', {
+            count: data.length,
+            total,
+            totalPages
+          });
+        } else {
+          console.error(
+            "Failed to load lembaga pendidikan:",
+            res.data?.message || 'No error message provided'
+          );
+          throw new Error(res.data?.message || 'Failed to load lembaga pendidikan');
+        }
+      } catch (error) {
+        console.error("Error loading lembaga pendidikan:", error);
+        lembagaPendidikan.findMany.data = [];
+        lembagaPendidikan.findMany.total = 0;
+        lembagaPendidikan.findMany.totalPages = 1;
+      } finally {
+        lembagaPendidikan.findMany.loading = false;
       }
     },
   },
@@ -554,16 +634,55 @@ const siswa = proxy({
     data: null as Array<
       Prisma.SiswaGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true;
+            };
+          };
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        siswa.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    jenjangPendidikan: "",
+    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
+      siswa.findMany.loading = true;
+      siswa.findMany.page = page;
+      siswa.findMany.search = search;
+      siswa.findMany.jenjangPendidikan = jenjangPendidikan;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (jenjangPendidikan) query.jenjangPendidikanName = jenjangPendidikan;
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.siswa[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          siswa.findMany.data = res.data.data || [];
+          siswa.findMany.total = res.data.total || 0;
+          siswa.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load siswa:",
+            res.data?.message
+          );
+          siswa.findMany.data = [];
+          siswa.findMany.total = 0;
+          siswa.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading siswa:", error);
+        siswa.findMany.data = [];
+        siswa.findMany.total = 0;
+        siswa.findMany.totalPages = 1;
+      } finally {
+        siswa.findMany.loading = false;
       }
     },
   },
@@ -794,16 +913,56 @@ const pengajar = proxy({
     data: null as Array<
       Prisma.PengajarGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true
+            }
+          }
         };
       }>
     > | null,
-    async load() {
-      const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
-        "find-many"
-      ].get();
-      if (res.status === 200) {
-        pengajar.findMany.data = res.data?.data ?? [];
+    page: 1,
+    totalPages: 1,
+    total: 0,
+    loading: false,
+    search: "",
+    jenjangPendidikan: "",
+    load: async (page = 1, limit = 10, search = "", jenjangPendidikan = "") => {
+      // Change to arrow function
+      pengajar.findMany.loading = true; // Use the full path to access the property
+      pengajar.findMany.page = page;
+      pengajar.findMany.search = search;
+      pengajar.findMany.jenjangPendidikan = jenjangPendidikan;
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+        if (jenjangPendidikan) query.jenjangPendidikanId = jenjangPendidikan;
+        const res = await ApiFetch.api.pendidikan.infosekolahpaud.pengajar[
+          "find-many"
+        ].get({
+          query,
+        });
+
+        if (res.status === 200 && res.data?.success) {
+          pengajar.findMany.data = res.data.data || [];
+          pengajar.findMany.total = res.data.total || 0;
+          pengajar.findMany.totalPages = res.data.totalPages || 1;
+        } else {
+          console.error(
+            "Failed to load pengajar:",
+            res.data?.message
+          );
+          pengajar.findMany.data = [];
+          pengajar.findMany.total = 0;
+          pengajar.findMany.totalPages = 1;
+        }
+      } catch (error) {
+        console.error("Error loading pengajar:", error);
+        pengajar.findMany.data = [];
+        pengajar.findMany.total = 0;
+        pengajar.findMany.totalPages = 1;
+      } finally {
+        pengajar.findMany.loading = false;
       }
     },
   },
@@ -815,7 +974,9 @@ const pengajar = proxy({
     }> | null,
     async load(id: string) {
       try {
-        const res = await fetch(`/api/pendidikan/infosekolahpaud/pengajar/${id}`);
+        const res = await fetch(
+          `/api/pendidikan/infosekolahpaud/pengajar/${id}`
+        );
         if (res.ok) {
           const data = await res.json();
           pengajar.findUnique.data = data.data ?? null;
@@ -948,7 +1109,8 @@ const pengajar = proxy({
               result
             );
             throw new Error(
-              result?.message || `Gagal mengupdate pengajar (${response.status})`
+              result?.message ||
+                `Gagal mengupdate pengajar (${response.status})`
             );
           }
 

src/app/admin/(dashboard)/_state/pendidikan/perpustakaan-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";
@@ -54,23 +55,46 @@ const dataPerpustakaan = proxy({
     },
   },
   findMany: {
-    data: [] as Prisma.DataPerpustakaanGetPayload<{
-      include: {
-        kategori: true;
-        image: true;
-      };
-    }>[],
-    loading: false,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan[
-          "findMany"
-        ].get();
-      if (res.status === 200) {
-        dataPerpustakaan.findMany.data = res.data?.data ?? [];
-      }
+      data: null as
+        | Prisma.DataPerpustakaanGetPayload<{
+            include: {
+              image: true;
+              kategori: true;
+            };
+          }>[]
+        | null,
+      page: 1,
+      totalPages: 1,
+      loading: false,
+      search: "",
+     load: async (page = 1, limit = 10, search = "", kategori = "") => {
+        dataPerpustakaan.findMany.loading = true; // ✅ Akses langsung via nama path
+        dataPerpustakaan.findMany.page = page;
+        dataPerpustakaan.findMany.search = search;
+    
+        try {
+          const query: any = { page, limit };
+          if (search) query.search = search;
+          if (kategori) query.kategori = kategori;
+      
+          const res = await ApiFetch.api.pendidikan.perpustakaandigital.dataperpustakaan["findMany"].get({ query });
+      
+          if (res.status === 200 && res.data?.success) {
+            dataPerpustakaan.findMany.data = res.data.data ?? [];
+            dataPerpustakaan.findMany.totalPages = res.data.totalPages ?? 1;
+          } else {
+            dataPerpustakaan.findMany.data = [];
+            dataPerpustakaan.findMany.totalPages = 1;
+          }
+        } catch (err) {
+          console.error("Gagal fetch data perpustakaan paginated:", err);
+          dataPerpustakaan.findMany.data = [];
+          dataPerpustakaan.findMany.totalPages = 1;
+        } finally {
+          dataPerpustakaan.findMany.loading = false;
+        }
+      },
     },
-  },
   findUnique: {
     data: null as Prisma.DataPerpustakaanGetPayload<{
       include: {
@@ -293,14 +317,34 @@ const kategoriBuku = proxy({
         isActive: true;
       };
     }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      const res =
-        await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku[
-          "findMany"
-        ].get();
-      if (res.status === 200) {
-        kategoriBuku.findMany.data = res.data?.data ?? [];
+    search: "",
+   load: async (page = 1, limit = 10, search = "") => {
+      kategoriBuku.findMany.loading = true; // ✅ Akses langsung via nama path
+      kategoriBuku.findMany.page = page;
+      kategoriBuku.findMany.search = search;
+  
+      try {
+        const query: any = { page, limit };
+        if (search) query.search = search;
+    
+        const res = await ApiFetch.api.pendidikan.perpustakaandigital.kategoribuku["findMany"].get({ query });
+    
+        if (res.status === 200 && res.data?.success) {
+          kategoriBuku.findMany.data = res.data.data ?? [];
+          kategoriBuku.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          kategoriBuku.findMany.data = [];
+          kategoriBuku.findMany.totalPages = 1;
+        }
+      } catch (err) {
+        console.error("Gagal fetch data kategori buku paginated:", err);
+        kategoriBuku.findMany.data = [];
+        kategoriBuku.findMany.totalPages = 1;
+      } finally {
+        kategoriBuku.findMany.loading = false;
       }
     },
   },

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

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

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

@@ -1,124 +1,43 @@
-import { proxy } from 'valtio'
-import { toast } from 'react-toastify'
-import ApiFetch from '@/lib/api-fetch'
-import { Prisma } from '@prisma/client'
-import { z } from 'zod'
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { proxy } from "valtio";
+import { toast } from "react-toastify";
+import ApiFetch from "@/lib/api-fetch";
+import { Prisma } from "@prisma/client";
+import { z } from "zod";
 
-// 1. Validasi Zod
-const userSchema = z.object({
-  nama: z.string().min(1, 'Nama harus diisi'),
-  email: z.string().email('Email tidak valid'),
-  password: z.string().min(6, 'Password minimal 6 karakter'),
-  roleId: z.string().optional(),
-})
-
-const defaultForm = { nama: '', email: '', password: '', roleId: '' }
-
-// 2. State Valtio
+// State Valtio
 const userState = proxy({
-  // Register
-  register: {
-    form: { ...defaultForm },
-    loading: false,
-    async submit() {
-      const valid = userSchema.omit({ roleId: true }).safeParse(userState.register.form)
-      if (!valid.success) {
-        const err = valid.error.issues.map(i => i.message).join(', ')
-        return toast.error(err)
-      }
-      try {
-        userState.register.loading = true
-        const res = await ApiFetch.api.user.register.post(userState.register.form)
-        if (res.status === 200) {
-          toast.success('Registrasi berhasil, silakan login')
-          userState.register.form = { ...defaultForm } // reset
-        } else {
-          toast.error(res.data?.message || 'Gagal registrasi')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Terjadi kesalahan saat registrasi')
-      } finally {
-        userState.register.loading = false
-      }
-    },
-  },
-
-  // Login
-  login: {
-    form: { email: '', password: '' },
-    loading: false,
-    async submit() {
-      try {
-        userState.login.loading = true
-        const res = await ApiFetch.api.user.login.post(userState.login.form)
-        if (res.status === 200) {
-          toast.success('Login berhasil')
-          const token = res.data?.data?.token
-          if (typeof token === 'string') {
-            localStorage.setItem('token', token)
-            // Optional: simpan user role untuk otorisasi
-            const user = res.data?.data?.user
-            localStorage.setItem('user', JSON.stringify(user))
-          }
-        } else {
-          toast.error(res.data?.message || 'Login gagal')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Terjadi kesalahan saat login')
-      } finally {
-        userState.login.loading = false
-      }
-    },
-  },
-
-  // CRUD User (untuk admin)
-  create: {
-    form: { ...defaultForm },
-    loading: false,
-    async create(isAdmin = false) {
-      const valid = userSchema.safeParse(userState.create.form)
-      if (!valid.success) {
-        const err = valid.error.issues.map(i => i.message).join(', ')
-        return toast.error(err)
-      }
-      try {
-        userState.create.loading = true
-        const endpoint = isAdmin ? 'create' : 'register'
-        const res = await ApiFetch.api.user[endpoint].post(userState.create.form)
-        if (res.status === 200) {
-          toast.success('User berhasil dibuat')
-          userState.findMany.load() // refresh list
-          userState.create.form = { ...defaultForm } // reset form
-        } else {
-          toast.error(res.data?.message || 'Gagal membuat user')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal membuat user')
-      } finally {
-        userState.create.loading = false
-      }
-    },
-  },
-
   // Find Many
   findMany: {
     data: [] as Prisma.UserGetPayload<{ include: { role: true } }>[],
+    page: 1,
+    totalPages: 1,
     loading: false,
-    async load() {
-      this.loading = true
+    search: "",
+    load: async (page = 1, limit = 10, search = "") => {
+      userState.findMany.loading = true; // ✅ Akses langsung via nama path
+      userState.findMany.page = page;
+      userState.findMany.search = search;
+
       try {
-        const res = await ApiFetch.api.user.findMany.get()
-        if (res.status === 200) {
-          this.data = res.data?.data || []
+        const query: any = { page, limit };
+        if (search) query.search = search;
+
+        const res = await ApiFetch.api.user["findMany"].get({ query });
+
+        if (res.status === 200 && res.data?.success) {
+          userState.findMany.data = res.data.data ?? [];
+          userState.findMany.totalPages = res.data.totalPages ?? 1;
+        } else {
+          userState.findMany.data = [];
+          userState.findMany.totalPages = 1;
         }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal muat data user')
+      } catch (err) {
+        console.error("Gagal fetch user paginated:", err);
+        userState.findMany.data = [];
+        userState.findMany.totalPages = 1;
       } finally {
-        this.loading = false
+        userState.findMany.loading = false;
       }
     },
   },
@@ -128,71 +47,20 @@ const userState = proxy({
     data: null as Prisma.UserGetPayload<{ include: { role: true } }> | null,
     loading: false,
     async load(id: string) {
-      this.loading = true
+      this.loading = true;
       try {
-        const res = await fetch(`/api/user/findUnique/${id}`)
-        const data = await res.json()
+        const res = await fetch(`/api/user/findUnique/${id}`);
+        const data = await res.json();
         if (res.status === 200) {
-          this.data = data.data
+          this.data = data.data;
         } else {
-          toast.error(data.message)
+          toast.error(data.message);
         }
       } catch (e) {
-        console.error(e)
-        toast.error('Gagal ambil data user')
+        console.error(e);
+        toast.error("Gagal ambil data user");
       } finally {
-        this.loading = false
-      }
-    },
-  },
-
-  // Update
-  update: {
-    id: '',
-    form: { ...defaultForm },
-    loading: false,
-    async load(id: string) {
-      this.loading = true
-      try {
-        const res = await fetch(`/api/user/findUnique/${id}`)
-        const data = await res.json()
-        if (res.status === 200) {
-          const user = data.data
-          this.id = user.id
-          this.form = {
-            nama: user.nama,
-            email: user.email,
-            password: '', // jangan kirim password lama
-            roleId: user.roleId,
-          }
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal muat data')
-      } finally {
-        this.loading = false
-      }
-    },
-    async submit() {
-      this.loading = true
-      try {
-        const res = await fetch(`/api/user/update/${this.id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify(this.form),
-        })
-        const data = await res.json()
-        if (res.status === 200) {
-          toast.success('Update berhasil')
-          userState.findMany.load()
-        } else {
-          toast.error(data.message || 'Gagal update')
-        }
-      } catch (e) {
-        console.error(e)
-        toast.error('Gagal update user')
-      } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
   },
@@ -201,35 +69,37 @@ const userState = proxy({
   delete: {
     loading: false,
     async submit(id: string) {
-      this.loading = true
+      this.loading = true;
       try {
         const res = await fetch(`/api/user/del/${id}`, {
-          method: 'PUT',
-          headers: { 'Content-Type': 'application/json' },
-        })
-        const data = await res.json()
+          method: "PUT",
+          headers: { "Content-Type": "application/json" },
+        });
+        const data = await res.json();
         if (res.status === 200) {
-          toast.success('User dinonaktifkan')
-          userState.findMany.load()
+          toast.success("User dinonaktifkan");
+          userState.findMany.load();
         } else {
-          toast.error(data.message || 'Gagal hapus')
+          toast.error(data.message || "Gagal hapus");
         }
       } catch (e) {
-        console.error(e)
-        toast.error('Gagal hapus user')
+        console.error(e);
+        toast.error("Gagal hapus user");
       } finally {
-        this.loading = false
+        this.loading = false;
       }
     },
   },
-})
+});
 
 const templateRole = z.object({
   name: z.string().min(1, "Nama harus diisi"),
+  permissions: z.array(z.string()).min(1, "Permission harus diisi"),
 });
 
 const defaultRole = {
   name: "",
+  permissions: [] as string[],
 };
 
 const roleState = proxy({
@@ -247,10 +117,9 @@ const roleState = proxy({
 
       try {
         roleState.create.loading = true;
-        const res =
-          await ApiFetch.api.role[
-            "create"
-          ].post(roleState.create.form);
+        const res = await ApiFetch.api.role["create"].post(
+          roleState.create.form
+        );
         if (res.status === 200) {
           roleState.findMany.load();
           return toast.success("Data role Berhasil Dibuat");
@@ -273,10 +142,7 @@ const roleState = proxy({
     }>[],
     loading: false,
     async load() {
-      const res =
-        await ApiFetch.api.role[
-          "findMany"
-        ].get();
+      const res = await ApiFetch.api.role["findMany"].get();
       if (res.status === 200) {
         roleState.findMany.data = res.data?.data ?? [];
       }
@@ -291,9 +157,7 @@ const roleState = proxy({
     loading: false,
     async load(id: string) {
       try {
-        const res = await fetch(
-          `/api/role/${id}`
-        );
+        const res = await fetch(`/api/role/${id}`);
         if (res.ok) {
           const data = await res.json();
           roleState.findUnique.data = data.data ?? null;
@@ -315,22 +179,17 @@ const roleState = proxy({
       try {
         roleState.delete.loading = true;
 
-        const response = await fetch(
-          `/api/role/del/${id}`,
-          {
-            method: "DELETE",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/role/del/${id}`, {
+          method: "DELETE",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
 
         const result = await response.json();
 
         if (response.ok && result?.success) {
-          toast.success(
-            result.message || "Data role berhasil dihapus"
-          );
+          toast.success(result.message || "Data role berhasil dihapus");
           await roleState.findMany.load(); // refresh list
         } else {
           toast.error(result?.message || "Gagal menghapus Data role");
@@ -354,15 +213,12 @@ const roleState = proxy({
       }
 
       try {
-        const response = await fetch(
-          `/api/role/${id}`,
-          {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          }
-        );
+        const response = await fetch(`/api/role/${id}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
         if (!response.ok) {
           throw new Error(`HTTP error! status: ${response.status}`);
         }
@@ -374,6 +230,7 @@ const roleState = proxy({
           this.id = data.id;
           this.form = {
             name: data.name,
+            permissions: data.permissions,
           };
           return data; // Return the loaded data
         } else {
@@ -400,18 +257,16 @@ const roleState = proxy({
       try {
         roleState.update.loading = true;
 
-        const response = await fetch(
-          `/api/role/${this.id}`,
-          {
-            method: "PUT",
-            headers: {
-              "Content-Type": "application/json",
-            },
-            body: JSON.stringify({
-              name: this.form.name,
-            }),
-          }
-        );
+        const response = await fetch(`/api/role/${this.id}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            name: this.form.name,
+            permissions: this.form.permissions,
+          }),
+        });
 
         if (!response.ok) {
           const errorData = await response.json().catch(() => ({}));
@@ -451,6 +306,6 @@ const roleState = proxy({
 const user = proxy({
   userState,
   roleState,
-})
+});
 
-export default user
+export default user;

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

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconFileText, IconBuildingStore, IconSparkles, IconUsers } from '@tabler/icons-react';
 
 function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
     const router = useRouter()
@@ -12,26 +13,35 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
         {
             label: "Pelayanan Surat Keterangan",
             value: "pelayanansuratketerangan",
-            href: "/admin/desa/layanan/pelayanan_surat_keterangan"
+            href: "/admin/desa/layanan/pelayanan_surat_keterangan",
+            icon: <IconFileText size={18} stroke={1.8} />,
+            tooltip: "Layanan terkait surat keterangan resmi desa"
         },
         {
             label: "Pelayanan Perizinan Berusaha",
             value: "pelayananperizinanusaha",
-            href: "/admin/desa/layanan/pelayanan_perizinan_berusaha"
+            href: "/admin/desa/layanan/pelayanan_perizinan_berusaha",
+            icon: <IconBuildingStore size={18} stroke={1.8} />,
+            tooltip: "Layanan untuk izin usaha masyarakat"
         },
         {
             label: "Pelayanan Telunjuk Sakti Desa",
             value: "pelayanantelunjuksaktidesa",
-            href: "/admin/desa/layanan/pelayanan_telunjuk_sakti_desa"
+            href: "/admin/desa/layanan/pelayanan_telunjuk_sakti_desa",
+            icon: <IconSparkles size={18} stroke={1.8} />,
+            tooltip: "Layanan inovasi khusus desa"
         },
         {
             label: "Pelayanan Penduduk Non-Permanent",
-            value: "pelayanantelunjuknonpermanent",
-            href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent"
+            value: "pelayanannonpermanent",
+            href: "/admin/desa/layanan/pelayanan_penduduk_non_permanent",
+            icon: <IconUsers size={18} stroke={1.8} />,
+            tooltip: "Pendataan penduduk non-permanent"
         }
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
         const tab = tabs.find(t => t.value === value)
@@ -49,24 +59,65 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
     }, [pathname])
 
     return (
-        <Stack>
-            <Title order={3}>Layanan</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>
+        <Stack gap="lg">
+            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Layanan</Title>
+            <Tabs
+                color={colors['blue-button']}
+                variant='pills'
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip 
+                            key={i} 
+                            label={tab.tooltip} 
+                            position="bottom" 
+                            withArrow 
+                            transitionProps={{ transition: 'pop', duration: 200 }}
+                        >
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        {/* Konten dummy, bisa diganti sesuai routing */}
+                        <>{children}</>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }
 
-export default LayoutTabsLayanan;
+export default LayoutTabsLayanan;

src/app/admin/(dashboard)/desa/berita/_com/layoutTabs.tsx

@@ -1,63 +1,110 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconNews, IconCategory } from '@tabler/icons-react';
 
 function LayoutTabsBerita({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
+    const router = useRouter();
+    const pathname = usePathname();
+
     const tabs = [
         {
             label: "List Berita",
             value: "list_berita",
-            href: "/admin/desa/berita/list-berita"
+            href: "/admin/desa/berita/list-berita",
+            icon: <IconNews size={18} stroke={1.8} />,
+            tooltip: "Lihat dan kelola semua berita desa"
         },
         {
             label: "Kategori Berita",
             value: "kategori_berita",
-            href: "/admin/desa/berita/kategori-berita"
+            href: "/admin/desa/berita/kategori-berita",
+            icon: <IconCategory size={18} stroke={1.8} />,
+            tooltip: "Kelola kategori berita desa"
         },
-        
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname);
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
+        const tab = tabs.find(t => t.value === value);
         if (tab) {
-            router.push(tab.href)
+            router.push(tab.href);
         }
-        setActiveTab(value)
-    }
+        setActiveTab(value);
+    };
 
     useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
+        const match = tabs.find(tab => tab.href === pathname);
         if (match) {
-            setActiveTab(match.value)
+            setActiveTab(match.value);
         }
-    }, [pathname])
+    }, [pathname]);
 
     return (
-        <Stack>
-            <Title order={3}>Gallery</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+        <Stack gap="lg">
+            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Berita Desa</Title>
+            <Tabs
+                color={colors['blue-button']}
+                variant="pills"
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip
+                            key={i}
+                            label={tab.tooltip}
+                            position="bottom"
+                            withArrow
+                            transitionProps={{ transition: 'pop', duration: 200 }}
+                        >
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        {/* Konten dummy, bisa diganti sesuai routing */}
+                        <>{children}</>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }
 
-export default LayoutTabsBerita;
+export default LayoutTabsBerita;

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

@@ -2,7 +2,16 @@
 'use client'
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -10,67 +19,102 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditKategoriBerita() {
-  const editState = useProxy(stateDashboardBerita.kategoriBerita)
+  const editState = useProxy(stateDashboardBerita.kategoriBerita);
   const router = useRouter();
   const params = useParams();
+
   const [formData, setFormData] = useState({
-      name: editState.update.form.name || '',
-    });
+    name: editState.update.form.name || '',
+  });
 
   useEffect(() => {
-      const loadKategori = async () => {
-        const id = params?.id as string;
-        if (!id) return;
-  
-        try {
-          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
-          if (data) {
-            setFormData({
-              name: data.name || '',
-            });
-          }
-        } catch (error) {
-          console.error("Error loading kategori Berita:", error);
-          toast.error("Gagal memuat data kategori Berita");
-        }
-      };
-  
-      loadKategori();
-    }, [params?.id]);
+    const loadKategori = async () => {
+      const id = params?.id as string;
+      if (!id) return;
 
-    const handleSubmit = async () => {
       try {
-        editState.update.form = {
-          ...editState.update.form,
-          name: formData.name,
-        };
-        await editState.update.update();
-        toast.success('Kategori Berita berhasil diperbarui!');
-        router.push('/admin/desa/berita/kategori-berita');
+        const data = await editState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+          });
+        }
       } catch (error) {
-        console.error('Error updating kategori Berita:', error);
-        toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
+        console.error('Error loading kategori Berita:', error);
+        toast.error('Gagal memuat data kategori Berita');
       }
     };
 
+    loadKategori();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.update.form = {
+        ...editState.update.form,
+        name: formData.name,
+      };
+
+      await editState.update.update();
+      toast.success('Kategori Berita berhasil diperbarui!');
+      router.push('/admin/desa/berita/kategori-berita');
+    } catch (error) {
+      console.error('Error updating kategori Berita:', error);
+      toast.error('Terjadi kesalahan saat memperbarui kategori Berita');
+    }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Kategori Berita</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Back Button + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kategori Berita
+        </Title>
+      </Group>
+
+      {/* Form Wrapper */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Kategori Berita"
+            placeholder="Masukkan nama kategori berita"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Berita</Text>}
-            placeholder="masukkan nama kategori Berita"
+            required
           />
 
-          <Button onClick={handleSubmit}>Simpan</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,50 +1,87 @@
-'use client'
+'use client';
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
-
-
 function CreateKategoriBerita() {
-  const createState = useProxy(stateDashboardBerita.kategoriBerita)
+  const createState = useProxy(stateDashboardBerita.kategoriBerita);
   const router = useRouter();
 
   const resetForm = () => {
     createState.create.form = {
-      name: "",
+      name: '',
     };
   };
 
   const handleSubmit = async () => {
     await createState.create.create();
     resetForm();
-    router.push("/admin/desa/berita/kategori-berita")
+    router.push('/admin/desa/berita/kategori-berita');
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan back button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Berita
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kategori Berita</Title>
+      {/* Form utama */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Berita</Text>}
-            placeholder='Masukkan nama kategori Berita'
-            value={createState.create.form.name}
-            onChange={(val) => {
-              createState.create.form.name = val.target.value;
-            }}
+            label={<Text fw="bold" fz="sm">Nama Kategori Berita</Text>}
+            placeholder="Masukkan nama kategori berita"
+            value={createState.create.form.name || ''}
+            onChange={(e) => (createState.create.form.name = e.target.value)}
+            required
           />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,25 +1,40 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { IconEdit, IconPlus, IconSearch, IconTrash } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateDashboardBerita from '../../../_state/desa/berita';
 
-
-
 function KategoriBerita() {
   const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
-        title='Kategori Berita'
-        placeholder='pencarian'
+        title="Kategori Berita"
+        placeholder="Cari nama kategori berita..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -30,99 +45,155 @@ function KategoriBerita() {
 }
 
 function ListKategoriBerita({ search }: { search: string }) {
-  const listDataState = useProxy(stateDashboardBerita.kategoriBerita)
+  const listDataState = useProxy(stateDashboardBerita.kategoriBerita);
   const router = useRouter();
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+
+  const {
+    data,
+    loading,
+    load,
+    page,
+    totalPages,
+  } = listDataState.findMany;
 
   useEffect(() => {
-    listDataState.findMany.load()
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
   const handleDelete = () => {
     if (selectedId) {
-      listDataState.delete.delete(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-
-      listDataState.findMany.load()
+      listDataState.delete.delete(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      load(page, 10, search);
     }
-  }
+  };
 
-  const filteredData = (listDataState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || [];
 
-  if (!listDataState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
-        <Stack>
-        <JudulList
-          title='List Kategori Berita'
-          href='/admin/desa/berita/kategori-berita/create'
-        />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Hapus</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item, index) => (
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Kategori Berita</Title>
+          <Tooltip label="Tambah Kategori Berita" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/desa/berita/kategori-berita/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '10%' }}>No</TableTh>
+                <TableTh style={{ width: '50%' }}>Nama</TableTh>
+                <TableTh style={{ width: '20%' }}>Edit</TableTh>
+                <TableTh style={{ width: '20%' }}>Hapus</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item, index) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>{item.name}</TableTd>
-                    <TableTd>
-                      <Button color='green' onClick={() => router.push(`/admin/pendidikan/perpustakaan-digital/kategori-Berita/${item.id}`)}>
-                        <IconEdit size={20} />
-                      </Button>
+                      <Text fz="sm">{index + 1}</Text>
                     </TableTd>
                     <TableTd>
-                      <Button
-                        color='red'
-                        disabled={listDataState.delete.loading}
-                        onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
-                        }}>
-                        <IconTrash size={20} />
-                      </Button>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Edit Kategori Berita" withArrow>
+                        <Button
+                          variant="light"
+                          color="green"
+                          onClick={() =>
+                            router.push(
+                              `/admin/desa/berita/kategori-berita/${item.id}`
+                            )
+                          }
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Hapus Kategori Berita" withArrow>
+                        <Button
+                          variant="light"
+                          color="red"
+                          disabled={listDataState.delete.loading}
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrash size={18} />
+                        </Button>
+                      </Tooltip>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data kategori berita yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
 
+      <Center>
+        <Pagination
+          value={page}
+          onChange={(newPage) => {
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
+          total={totalPages}
+          mt="md"
+          mb="md"
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleDelete}
-        text='Apakah anda yakin ingin menghapus kategori Berita ini?'
+        text="Apakah anda yakin ingin menghapus kategori berita ini?"
       />
     </Box>
-  )
+  );
 }
 
 export default KategoriBerita;

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

@@ -15,7 +15,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
@@ -24,7 +25,6 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
 
-
 function EditBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const router = useRouter();
@@ -33,29 +33,29 @@ function EditBerita() {
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
   const [formData, setFormData] = useState({
-    judul: beritaState.berita.edit.form.judul || '',
-    deskripsi: beritaState.berita.edit.form.deskripsi || '',
-    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || '',
-    content: beritaState.berita.edit.form.content || '',
-    imageId: beritaState.berita.edit.form.imageId || ''
+    judul: beritaState.berita.edit.form.judul || "",
+    deskripsi: beritaState.berita.edit.form.deskripsi || "",
+    kategoriBeritaId: beritaState.berita.edit.form.kategoriBeritaId || "",
+    content: beritaState.berita.edit.form.content || "",
+    imageId: beritaState.berita.edit.form.imageId || "",
   });
 
   // Load berita by id saat pertama kali
   useEffect(() => {
-    beritaState.kategoriBerita.findMany.load()
+    beritaState.kategoriBerita.findMany.load();
     const loadBerita = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await stateDashboardBerita.berita.edit.load(id); // akses langsung, bukan dari proxy
+        const data = await stateDashboardBerita.berita.edit.load(id);
         if (data) {
           setFormData({
-            judul: data.judul || '',
-            deskripsi: data.deskripsi || '',
-            kategoriBeritaId: data.kategoriBeritaId || '',
-            content: data.content || '',
-            imageId: data.imageId || '',
+            judul: data.judul || "",
+            deskripsi: data.deskripsi || "",
+            kategoriBeritaId: data.kategoriBeritaId || "",
+            content: data.content || "",
+            imageId: data.imageId || "",
           });
 
           if (data?.image?.link) {
@@ -69,31 +69,26 @@ function EditBerita() {
     };
 
     loadBerita();
-  }, [params?.id]); // ✅ hapus beritaState dari dependency
+  }, [params?.id]);
 
   const handleSubmit = async () => {
-
     try {
-      // Update global state with form data
       beritaState.berita.edit.form = {
         ...beritaState.berita.edit.form,
-        judul: formData.judul,
-        deskripsi: formData.deskripsi,
-        content: formData.content,
-        kategoriBeritaId: formData.kategoriBeritaId || '',
-        imageId: formData.imageId // Keep existing imageId if not changed
+        ...formData,
       };
 
-      // Jika ada file baru, upload
       if (file) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
+        const res = await ApiFetch.api.fileStorage.create.post({
+          file,
+          name: file.name,
+        });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
           return toast.error("Gagal upload gambar");
         }
 
-        // Update imageId in global state
         beritaState.berita.edit.form.imageId = uploaded.id;
       }
 
@@ -107,87 +102,111 @@ function EditBerita() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Berita</Title>
+    <Box px={{ base: "sm", md: "lg" }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors["blue-button"]} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Berita
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors["white-1"]}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: "1px solid #e0e0e0" }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Judul"
+            placeholder="Masukkan judul"
             value={formData.judul}
-            onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
+            onChange={(e) =>
+              setFormData({ ...formData, judul: e.target.value })
+            }
+            required
           />
 
           <TextInput
+            label="Deskripsi"
+            placeholder="Masukkan deskripsi"
             value={formData.deskripsi}
-            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            onChange={(e) =>
+              setFormData({ ...formData, deskripsi: e.target.value })
+            }
+            required
           />
 
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Berita
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              maxSize={5 * 1024 ** 2}
+              accept={{ "image/*": [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: "contain",
+                    border: `1px solid ${colors["blue-button"]}`,
+                  }}
+                />
+              </Box>
+            )}
           </Box>
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <Text fz="sm" fw="bold">
+              Konten
+            </Text>
             <EditEditor
               value={formData.content}
               onChange={(htmlContent) => {
@@ -199,13 +218,15 @@ function EditBerita() {
 
           <Select
             value={formData.kategoriBeritaId}
-            onChange={(val) => setFormData({ ...formData, kategoriBeritaId: val || "" })}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-            placeholder='Pilih kategori'
+            onChange={(val) =>
+              setFormData({ ...formData, kategoriBeritaId: val || "" })
+            }
+            label="Kategori"
+            placeholder="Pilih kategori"
             data={
               beritaState.kategoriBerita.findMany.data?.map((v) => ({
                 value: v.id,
-                label: v.name
+                label: v.name,
               })) || []
             }
             clearable
@@ -214,7 +235,20 @@ function EditBerita() {
             error={!formData.kategoriBeritaId ? "Pilih kategori" : undefined}
           />
 
-          <Button onClick={handleSubmit}>Edit Berita</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
+                color: "#fff",
+                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,9 +1,8 @@
 'use client'
 import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -12,107 +11,146 @@ import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirma
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 
 function DetailBerita() {
-  const beritaState = useProxy(stateDashboardBerita)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const beritaState = useProxy(stateDashboardBerita);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    beritaState.berita.findUnique.load(params?.id as string)
-  }, [])
-
+    beritaState.berita.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      beritaState.berita.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/berita/list-berita")
+      beritaState.berita.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/desa/berita/list-berita");
     }
-  }
+  };
 
   if (!beritaState.berita.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = beritaState.berita.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Berita</Text>
-          {beritaState.berita.findUnique.data ? (
-            <Paper key={beritaState.berita.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
-                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.kategoriBerita?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{beritaState.berita.findUnique.data?.judul}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} >{beritaState.berita.findUnique.data?.deskripsi}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={beritaState.berita.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: beritaState.berita.findUnique.data?.content }} />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Back */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Detail Berita */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "70%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Berita
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Kategori</Text>
+                <Text fz="md" c="dimmed">{data.kategoriBerita?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.judul || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed">{data.deskripsi || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.judul || 'Gambar Berita'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Konten</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
+                />
+              </Box>
+
+              {/* Action Button */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Berita" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (beritaState.berita.findUnique.data) {
-                        setSelectedId(beritaState.berita.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={beritaState.berita.delete.loading || !beritaState.berita.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Berita" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (beritaState.berita.findUnique.data) {
-                        router.push(`/admin/desa/berita/list-berita/${beritaState.berita.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!beritaState.berita.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() => router.push(`/admin/desa/berita/list-berita/${data.id}/edit`)}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
+      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
+        text="Apakah Anda yakin ingin menghapus berita ini?"
       />
     </Box>
   );
 }
 
-export default DetailBerita;
+export default DetailBerita;

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

@@ -3,7 +3,19 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateDashboardBerita from '@/app/admin/(dashboard)/_state/desa/berita';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
@@ -12,38 +24,33 @@ import { useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 export default function CreateBerita() {
   const beritaState = useProxy(stateDashboardBerita);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const router = useRouter()
+  const router = useRouter();
 
   useShallowEffect(() => {
-    beritaState.kategoriBerita.findMany.load()
+    beritaState.kategoriBerita.findMany.load();
   }, []);
 
   const resetForm = () => {
-    // Reset state di valtio
     beritaState.berita.create.form = {
-      judul: "",
-      deskripsi: "",
-      kategoriBeritaId: "",
-      imageId: "",
-      content: "",
+      judul: '',
+      deskripsi: '',
+      kategoriBeritaId: '',
+      imageId: '',
+      content: '',
     };
-
-    // Reset state lokal
     setPreviewImage(null);
     setFile(null);
   };
 
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file gambar terlebih dahulu");
+      return toast.warn('Silakan pilih file gambar terlebih dahulu');
     }
 
-    // Upload gambar dulu
     const res = await ApiFetch.api.fileStorage.create.post({
       file,
       name: file.name,
@@ -51,40 +58,55 @@ export default function CreateBerita() {
 
     const uploaded = res.data?.data;
     if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar");
+      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
     }
 
-    // Simpan ID gambar ke form
     beritaState.berita.create.form.imageId = uploaded.id;
 
-    // Submit data berita
     await beritaState.berita.create.create();
 
-    // Reset form setelah submit
     resetForm();
-    router.push("/admin/desa/berita/list-berita")
+    router.push('/admin/desa/berita/list-berita');
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Berita</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan tombol kembali */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Berita
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Judul"
+            placeholder="Masukkan judul berita"
             value={beritaState.berita.create.form.judul}
-            onChange={(val) => {
-              beritaState.berita.create.form.judul = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
+            onChange={(e) => (beritaState.berita.create.form.judul = e.target.value)}
+            required
           />
+
           <Select
-            label={<Text fz={"sm"} fw={"bold"}>Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
             data={beritaState.kategoriBerita.findMany.data.map((item) => ({
               label: item.name,
@@ -93,85 +115,83 @@ export default function CreateBerita() {
             value={beritaState.berita.create.form.kategoriBeritaId || null}
             onChange={(val: string | null) => {
               if (val) {
-                const selected = beritaState.kategoriBerita.findMany.data?.find((item) => item.id === val);
+                const selected = beritaState.kategoriBerita.findMany.data?.find(
+                  (item) => item.id === val
+                );
                 if (selected) {
                   beritaState.berita.create.form.kategoriBeritaId = selected.id;
                 }
               } else {
-                beritaState.berita.create.form.kategoriBeritaId = "";
+                beritaState.berita.create.form.kategoriBeritaId = '';
               }
             }}
             searchable
             clearable
             nothingFoundMessage="Tidak ditemukan"
+            required
           />
+
           <TextInput
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi berita"
             value={beritaState.berita.create.form.deskripsi}
-            onChange={(val) => {
-              beritaState.berita.create.form.deskripsi = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            onChange={(e) => (beritaState.berita.create.form.deskripsi = e.target.value)}
           />
 
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Berita
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{
+                    maxHeight: 200,
+                    objectFit: 'contain',
+                    border: '1px solid #ddd',
+                  }}
+                />
+              </Box>
+            )}
           </Box>
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten
+            </Text>
             <CreateEditor
               value={beritaState.berita.create.form.content}
               onChange={(htmlContent) => {
@@ -179,7 +199,21 @@ export default function CreateBerita() {
               }}
             />
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan Berita</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,6 +1,25 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Grid, GridCol, Image, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Image,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -9,15 +28,13 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import stateDashboardBerita from '../../../_state/desa/berita';
 
-
-
 function Berita() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Berita'
-        placeholder='pencarian'
+        title="Berita"
+        placeholder="Cari judul atau kategori berita..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -28,103 +45,125 @@ function Berita() {
 }
 
 function ListBerita({ search }: { search: string }) {
-  const beritaState = useProxy(stateDashboardBerita)
-  const router = useRouter()
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = beritaState.berita.findMany;
+  const beritaState = useProxy(stateDashboardBerita);
+  const router = useRouter();
 
+  const { data, page, totalPages, loading, load } = beritaState.berita.findMany;
 
-  // Fetch data when page or search changes
   useShallowEffect(() => {
     load(page, 10, search);
   }, [page, search]);
 
   if (loading || !data) {
-    return <Skeleton h={500} />;
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
   }
 
   const filteredData = data || [];
 
   return (
     <Box py={10}>
-      <Paper bg={colors["white-1"]} p={"md"}>
-        <Stack>
-          <Grid>
-            <GridCol span={{ base: 12, md: 11 }}>
-              <Text fz={"xl"} fw={"bold"}>
-                List Berita
-              </Text>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 1 }}>
-              <Button
-                onClick={() => router.push("/admin/desa/berita/list-berita/create")}
-                bg={colors["blue-button"]}
-              >
-                <IconCircleDashedPlus size={25} />
-              </Button>
-            </GridCol>
-          </Grid>
-          <Box style={{ overflowX: "auto" }}>
-            <Table
-              striped
-              withRowBorders
-              withTableBorder
-              style={{ minWidth: "700px" }}
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Berita</Title>
+          <Tooltip label="Tambah Berita" withArrow>
+            <Button
+              leftSection={<IconCircleDashedPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/desa/berita/list-berita/create')}
             >
-              <TableThead>
-                <TableTr>
-                  <TableTh w={250}>Judul</TableTh>
-                  <TableTh w={250}>Kategori</TableTh>
-                  <TableTh w={250}>Image</TableTh>
-                  <TableTh w={200}>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Judul</TableTh>
+                <TableTh style={{ width: '20%' }}>Kategori</TableTh>
+                <TableTh style={{ width: '25%' }}>Gambar</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>
-                          {item.judul}
-                        </Text>
+                    <TableTd style={{ width: '30%' }}>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.judul}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ width: '20%' }}>
+                      <Text fz="sm" c="dimmed">
+                        {item.kategoriBerita?.name || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd style={{ width: '25%' }}>
+                      <Box
+                        w={80}
+                        h={80}
+                        style={{ borderRadius: 8, overflow: 'hidden' }}
+                      >
+                        {item.image?.link ? (
+                          <Image src={item.image.link} alt="gambar" fit="cover" />
+                        ) : (
+                          <Box bg={colors['blue-button']} w="100%" h="100%" />
+                        )}
                       </Box>
                     </TableTd>
-                    <TableTd>{item.kategoriBerita?.name}</TableTd>
-                    <TableTd>
-                      <Image w={100} src={item.image?.link} alt="gambar" />
-                    </TableTd>
-                    <TableTd>
+                    <TableTd style={{ width: '15%' }}>
                       <Button
-                        bg={"green"}
+                        variant="light"
+                        color="blue"
                         onClick={() =>
                           router.push(`/admin/desa/berita/list-berita/${item.id}`)
                         }
                       >
-                        <IconDeviceImacCog size={25} />
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data berita yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
   );
 }
+
 export default Berita;

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

@@ -1,112 +0,0 @@
-'use client'
-import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
-import React from 'react';
-import { useProxy } from 'valtio/utils';
-import { useState } from 'react';
-import { useParams, useRouter } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import colors from '@/con/colors';
-import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
-
-function DetailFoto() {
-  const fotoState = useProxy(stateGallery.foto)
-  const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
-
-  useShallowEffect(() => {
-    fotoState.findUnique.load(params?.id as string)
-  }, [])
-
-  const handleHapus = () => {
-    if (selectedId) {
-      fotoState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/gallery/foto")
-    }
-  }
-
-  if (!fotoState.findUnique.data) {
-    return (
-      <Stack py={10}>
-        <Skeleton h={500} />
-      </Stack>
-    )
-  }
-
-  return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Foto</Text>
-          {fotoState.findUnique.data ? (
-            <Paper key={fotoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{fotoState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal Foto</Text>
-                  <Text fz={"lg"}>{new Date(fotoState.findUnique.data?.createdAt).toDateString()}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: fotoState.findUnique.data?.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 300, md: 350}} src={fotoState.findUnique.data?.imageGalleryFoto?.link} alt="gambar" />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (fotoState.findUnique.data) {
-                        setSelectedId(fotoState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={fotoState.delete.loading || !fotoState.findUnique.data}
-                    color={"red"}
-                  >
-                    <IconX size={20} />
-                  </Button>
-                  <Button
-                    onClick={() => {
-                      if (fotoState.findUnique.data) {
-                        router.push(`/admin/desa/gallery/foto/${fotoState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!fotoState.findUnique.data}
-                    color={"green"}
-                  >
-                    <IconEdit size={20} />
-                  </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
-        </Stack>
-      </Paper>
-
-      {/* Modal Konfirmasi Hapus */}
-      <ModalKonfirmasiHapus
-        opened={modalHapus}
-        onClose={() => setModalHapus(false)}
-        onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
-      />
-    </Box>
-  );
-}
-
-export default DetailFoto;

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

@@ -1,9 +1,9 @@
 "use client";
-import colors from "@/con/colors";
 import stateFileStorage from "@/state/state-list-image";
 import {
   ActionIcon,
   Box,
+  Card,
   Flex,
   Group,
   Image,
@@ -13,7 +13,8 @@ import {
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import { IconSearch, IconTrash, IconX } from "@tabler/icons-react";
@@ -29,95 +30,128 @@ export default function ListImage() {
   }, []);
 
   let timeOut: NodeJS.Timer;
+
   return (
-    <Stack p={"lg"}>
-      <Flex justify="space-between">
-        <Title order={3}>List Foto</Title>
+    <Stack p="lg" gap="lg">
+      <Flex justify="space-between" align="center" wrap="wrap" gap="md">
+        <Title order={2} fw={700}>
+          Galeri Foto
+        </Title>
         <TextInput
-          radius={"lg"}
-          leftSection={<IconSearch />}
+          radius="xl"
+          size="md"
+          placeholder="Cari foto berdasarkan nama..."
+          leftSection={<IconSearch size={18} />}
           rightSection={
             <ActionIcon
-              variant="transparent"
-              onClick={() => {
-                stateFileStorage.load();
-              }}
+              variant="light"
+              color="gray"
+              radius="xl"
+              onClick={() => stateFileStorage.load()}
             >
-              <IconX />
+              <IconX size={18} />
             </ActionIcon>
           }
-          placeholder="Pencarian"
           onChange={(e) => {
             if (timeOut) clearTimeout(timeOut);
             timeOut = setTimeout(() => {
               stateFileStorage.load({ search: e.target.value });
-            }, 200);
+            }, 300);
           }}
         />
       </Flex>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <SimpleGrid
-          cols={{
-            base: 3,
-            md: 5,
-            lg: 10,
-          }}
-        >
-          {list &&
-            list.map((v, k) => {
-              return (
-                <Paper key={k} shadow="sm">
-                  <Stack pos={"relative"} gap={0} justify="space-between">
-                    <motion.div
-                      onClick={() => {
-                        // copy to clipboard
-                        navigator.clipboard.writeText(v.url);
-                        toast("Berhasil disalin");
-                      }}
-                      whileHover={{ scale: 1.05 }}
-                      whileTap={{ scale: 0.8 }}
-                    >
-                      <Image
-                        h={100}
-                        src={v.url + "?size=100"}
-                        alt={v.name}
-                        fit="cover"
-                        loading="lazy"
-                        style={{
-                          objectFit: "cover",
-                          objectPosition: "center",
-                        }}
-                      />
-                    </motion.div>
-                    <Box p={"md"} h={54}>
-                      <Text lineClamp={2} fz={"xs"}>
-                        {v.name}
-                      </Text>
-                    </Box>
-                    <Group justify="end">
-                        <IconTrash
+
+      <Paper withBorder radius="lg" p="md" shadow="sm">
+        {list && list.length > 0 ? (
+          <SimpleGrid
+            cols={{ base: 2, sm: 3, md: 5, lg: 8 }}
+            spacing="md"
+            verticalSpacing="md"
+          >
+            {list.map((v, k) => (
+              <Card
+                key={k}
+                withBorder
+                radius="md"
+                shadow="sm"
+                className="hover:shadow-md transition-all duration-200"
+              >
+                <Stack gap="xs">
+                  <motion.div
+                    onClick={() => {
+                      navigator.clipboard.writeText(v.url);
+                      toast("Tautan foto berhasil disalin");
+                    }}
+                    whileHover={{ scale: 1.05 }}
+                    whileTap={{ scale: 0.95 }}
+                    style={{ cursor: "pointer" }}
+                  >
+                    <Image
+                      src={`${v.url}?size=200`}
+                      alt={v.name}
+                      radius="md"
+                      h={120}
+                      fit="cover"
+                      loading="lazy"
+                    />
+                  </motion.div>
+
+                  <Box>
+                    <Text size="sm" fw={500} lineClamp={2}>
+                      {v.name}
+                    </Text>
+                  </Box>
+
+                  <Group justify="space-between" align="center" pt="xs">
+                    <Tooltip label="Hapus foto" withArrow>
+                      <ActionIcon
+                        variant="subtle"
                         color="red"
-                          onClick={() => {
-                            stateFileStorage.del({ name: v.name }).finally(() => {
-                              toast("Berhasil dihapus");
-                            });
-                          }}
-                        />
-                    </Group>
-                  </Stack>
-                </Paper>
-              );
-            })}
-        </SimpleGrid>
+                        radius="md"
+                        onClick={() => {
+                          stateFileStorage
+                            .del({ name: v.name })
+                            .finally(() => toast("Foto berhasil dihapus"));
+                        }}
+                      >
+                        <IconTrash size={18} />
+                      </ActionIcon>
+                    </Tooltip>
+                  </Group>
+                </Stack>
+              </Card>
+            ))}
+          </SimpleGrid>
+        ) : (
+          <Stack align="center" justify="center" py="xl" gap="sm">
+            <Image
+              src="https://cdn-icons-png.flaticon.com/512/4076/4076549.png"
+              alt="Kosong"
+              w={120}
+              h={120}
+              fit="contain"
+              opacity={0.7}
+            />
+            <Text c="dimmed" ta="center">
+              Belum ada foto yang tersedia
+            </Text>
+          </Stack>
+        )}
       </Paper>
-      {total && (
-        <Pagination
-          total={total}
-          onChange={(e) => {
-            stateFileStorage.page = e;
-            stateFileStorage.load();
-          }}
-        />
+
+      {total && total > 1 && (
+        <Flex justify="center">
+          <Pagination
+            total={total}
+            size="md"
+            radius="md"
+            withEdges
+            onChange={(page) => {
+              stateFileStorage.page = page;
+              stateFileStorage.load();
+            }}
+          />
+        </Flex>
       )}
     </Stack>
   );

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

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconPhoto, IconVideo } from '@tabler/icons-react';
 
 function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
     const router = useRouter()
@@ -12,16 +13,21 @@ function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
         {
             label: "Foto",
             value: "foto",
-            href: "/admin/desa/gallery/foto"
+            href: "/admin/desa/gallery/foto",
+            icon: <IconPhoto size={18} stroke={1.8} />,
+            tooltip: "Kelola foto-foto galeri desa"
         },
         {
             label: "Video",
             value: "video",
-            href: "/admin/desa/gallery/video"
+            href: "/admin/desa/gallery/video",
+            icon: <IconVideo size={18} stroke={1.8} />,
+            tooltip: "Kelola video galeri desa"
         },
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
         const tab = tabs.find(t => t.value === value)
@@ -39,24 +45,64 @@ function LayoutTabsGallery({ children }: { children: React.ReactNode }) {
     }, [pathname])
 
     return (
-        <Stack>
-            <Title order={3}>Gallery</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
+        <Stack gap="lg">
+            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Gallery</Title>
+            <Tabs
+                color={colors['blue-button']}
+                variant='pills'
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip
+                            key={i}
+                            label={tab.tooltip}
+                            position="bottom"
+                            withArrow
+                            transitionProps={{ transition: 'pop', duration: 200 }}
+                        >
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        <>{children}</>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }
 
-export default LayoutTabsGallery;
+export default LayoutTabsGallery;

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

@@ -3,7 +3,16 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -12,9 +21,9 @@ import { useProxy } from 'valtio/utils';
 import { convertYoutubeUrlToEmbed } from '../../../lib/youtube-utils';
 
 function EditVideo() {
-  const router = useRouter(); 
-  const videoState = useProxy(stateGallery.video)
-  const params = useParams()
+  const router = useRouter();
+  const videoState = useProxy(stateGallery.video);
+  const params = useParams();
 
   const [formData, setFormData] = useState({
     name: '',
@@ -30,7 +39,7 @@ function EditVideo() {
         const data = await videoState.update.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',    
+            name: data.name || '',
             deskripsi: data.deskripsi || '',
             linkVideo: data.linkVideo || '',
           });
@@ -66,27 +75,36 @@ function EditVideo() {
       console.error('Error updating video:', error);
       toast.error('Terjadi kesalahan saat memperbarui video');
     }
-  }
+  };
 
   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 Video</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Video
+        </Title>
+      </Group>
 
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
-            placeholder='Masukkan judul video'
+            label="Judul Video"
+            placeholder="Masukkan judul video"
             value={formData.name}
-            onChange={(val) => {
-              setFormData({ ...formData, name: val.target.value });
-            }}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
           />
 
           <Box>
@@ -94,36 +112,46 @@ function EditVideo() {
               label="Link Video YouTube"
               placeholder="https://www.youtube.com/watch?v=abc123"
               value={formData.linkVideo}
-              onChange={(e) => {
-                setFormData({ ...formData, linkVideo: e.currentTarget.value });
-              }}
+              onChange={(e) => setFormData({ ...formData, linkVideo: e.currentTarget.value })}
               required
             />
-
             {embedLink && (
-              <iframe
-                className="rounded"
-                width="100%"
-                height="200"
-                src={embedLink}
-                title="Preview Video"
-                allowFullScreen
-              ></iframe>
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <iframe
+                  className="rounded"
+                  width="100%"
+                  height="220"
+                  src={embedLink}
+                  title="Preview Video"
+                  allowFullScreen
+                ></iframe>
+              </Box>
             )}
           </Box>
 
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <Title order={6} fw="bold" fz="sm" mb={6}>
+              Deskripsi Video
+            </Title>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(val) => {
-                setFormData({ ...formData, deskripsi: val });
-              }}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
             />
           </Box>
 
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -2,107 +2,145 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import { Box, Button, Group, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
-
 function DetailVideo() {
-  const videoState = useProxy(stateGallery.video)
+  const videoState = useProxy(stateGallery.video);
   const [modalHapus, setModalHapus] = useState(false);
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    videoState.findUnique.load(params?.id as string)
-  }, [])
+    videoState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      videoState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/gallery/video")
+      videoState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/desa/gallery/video");
     }
-  }
+  };
 
   if (!videoState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = videoState.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Video</Text>
-          {videoState.findUnique.data ? (
-            <Paper key={videoState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{videoState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Video</Text>
-                  <Box component="iframe"
-                    src={convertToEmbedUrl(videoState.findUnique.data?.linkVideo)}
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      {/* Detail Video */}
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Video
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Video</Text>
+                {data?.linkVideo ? (
+                  <Box
+                    component="iframe"
+                    src={convertToEmbedUrl(data.linkVideo)}
                     width="100%"
                     height={300}
                     allowFullScreen
                     style={{ borderRadius: 8 }}
                   />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada video</Text>
+                )}
+              </Box>
 
-                </Box>
+              <Box>
+                <Text fz="lg" fw="bold">Tanggal Video</Text>
+                <Text fz="md" c="dimmed">
+                  {data?.createdAt ? new Date(data.createdAt).toDateString() : '-'}
+                </Text>
+              </Box>
 
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Tanggal Video</Text>
-                  <Text fz={"lg"}>{new Date(videoState.findUnique.data?.createdAt).toDateString()}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: videoState.findUnique.data?.deskripsi }} />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                {data?.deskripsi ? (
+                  <Text
+                    fz="md"
+                    c="dimmed"
+                    dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada deskripsi</Text>
+                )}
+              </Box>
+
+              {/* Tombol Aksi */}
+              <Group gap="sm">
+                <Tooltip label="Hapus Video" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (videoState.findUnique.data) {
-                        setSelectedId(videoState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={videoState.delete.loading || !videoState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Video" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (videoState.findUnique.data) {
-                        router.push(`/admin/desa/gallery/video/${videoState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!videoState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/desa/gallery/video/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -111,17 +149,16 @@ function DetailVideo() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
+        text="Apakah Anda yakin ingin menghapus video ini?"
       />
     </Box>
-
   );
+
   function convertToEmbedUrl(youtubeUrl: string): string {
     try {
       const url = new URL(youtubeUrl);
       const videoId = url.searchParams.get("v");
       if (!videoId) return youtubeUrl;
-
       return `https://www.youtube.com/embed/${videoId}`;
     } catch (err) {
       console.error("Error converting YouTube URL to embed:", err);

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

@@ -1,8 +1,18 @@
-'use client'
+'use client';
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateGallery from '@/app/admin/(dashboard)/_state/desa/gallery';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -10,77 +20,104 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 import { convertYoutubeUrlToEmbed } from '../../lib/youtube-utils';
 
-
-
 function CreateVideo() {
-  const videoState = useProxy(stateGallery.video)
+  const videoState = useProxy(stateGallery.video);
   const router = useRouter();
-  const [link, setLink] = useState("");
+  const [link, setLink] = useState('');
   const embedLink = convertYoutubeUrlToEmbed(link);
 
   const resetForm = () => {
     videoState.create.form = {
-      name: "",
-      deskripsi: "",
-      linkVideo: "",
+      name: '',
+      deskripsi: '',
+      linkVideo: '',
     };
+    setLink('');
   };
+
   const handleSubmit = async () => {
     if (!embedLink) {
-      toast.error("Link YouTube tidak valid. Pastikan formatnya benar.");
+      toast.error('Link YouTube tidak valid. Pastikan formatnya benar.');
       return;
     }
-  
-    videoState.create.form.linkVideo = embedLink; // pastikan diset di sini juga (jaga-jaga)
+
+    videoState.create.form.linkVideo = embedLink;
     await videoState.create.create();
     resetForm();
-    router.push("/admin/desa/gallery/video");
+    router.push('/admin/desa/gallery/video');
   };
-  
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header Back Button + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Video
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Video</Title>
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Judul */}
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Judul Video</Text>}
-            placeholder='Masukkan judul video'
+            label="Judul Video"
+            placeholder="Masukkan judul video"
             value={videoState.create.form.name}
-            onChange={(val) => {
-              videoState.create.form.name = val.target.value;
+            onChange={(e) => {
+              videoState.create.form.name = e.currentTarget.value;
             }}
+            required
           />
-          <Box>
-            <Stack gap={"xs"}>
-              <TextInput
-                label="Link Video YouTube"
-                placeholder="https://www.youtube.com/watch?v=abc123"
-                value={link}
-                onChange={(e) => {
-                  setLink(e.currentTarget.value);
-                }}
-                required
-              />
 
-              {embedLink && (
-                <iframe
-                  style={{ borderRadius: 10, width: "100%", height: 400 }}
-                  src={embedLink}
-                  title="Preview Video"
-                  allowFullScreen
-                ></iframe>
-              )}
-            </Stack>
-          </Box>
+          {/* Link YouTube */}
+          <TextInput
+            label="Link Video YouTube"
+            placeholder="https://www.youtube.com/watch?v=abc123"
+            value={link}
+            onChange={(e) => setLink(e.currentTarget.value)}
+            required
+          />
+
+          {/* Preview Video */}
+          {embedLink && (
+            <Box mt="sm">
+              <iframe
+                style={{
+                  borderRadius: 10,
+                  width: '100%',
+                  height: 400,
+                  border: '1px solid #ddd',
+                }}
+                src={embedLink}
+                title="Preview Video"
+                allowFullScreen
+              ></iframe>
+            </Box>
+          )}
+
+          {/* Deskripsi */}
           <Box>
-            <Text fw={"bold"} fz={"sm"}>Deskripsi Video</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi Video
+            </Text>
             <CreateEditor
               value={videoState.create.form.deskripsi}
               onChange={(val) => {
@@ -88,8 +125,21 @@ function CreateVideo() {
               }}
             />
           </Box>
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          {/* Button Submit */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,13 +1,30 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import stateGallery from '../../../_state/desa/gallery';
 
 function Video() {
@@ -15,8 +32,8 @@ function Video() {
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
-        placeholder='pencarian'
+        title='Video'
+        placeholder='Cari judul atau deskripsi video...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -29,6 +46,7 @@ function Video() {
 function ListVideo({ search }: { search: string }) {
   const videoState = useProxy(stateGallery.video)
   const router = useRouter();
+
   const {
     data,
     page,
@@ -41,72 +59,104 @@ function ListVideo({ search }: { search: string }) {
     load(page, 10, search)
   }, [page, search])
 
-  const filteredData = (data || [])
+  const filteredData = data || []
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
     )
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Video'
-          href='/admin/desa/gallery/video/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Judul Video</TableTh>
-              <TableTh>Tanggal Video</TableTh>
-              <TableTh>Deskripsi Video</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={200}>
-                    <Text lineClamp={1}>{item.name}</Text>
-                  </Box>
-                </TableTd>
-                
-                <TableTd>
-                  <Box w={200}>
-                  {new Date(item.createdAt).toLocaleDateString('id-ID', {
-                    day: 'numeric',
-                    month: 'long',
-                    year: 'numeric',
-                  })}
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Box w={200}>
-                    <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Video</Title>
+          <Tooltip label="Tambah Video Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/desa/gallery/video/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '25%' }}>Judul Video</TableTh>
+                <TableTh style={{ width: '20%' }}>Tanggal</TableTh>
+                <TableTh style={{ width: '30%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '25%' }}>
+                      <Box w={200}> 
+                        <Text fw={500} truncate="end" lineClamp={1}>{item.name}</Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '20%' }}>
+                     <Box w={200}>
+                     <Text fz="sm" c="dimmed">
+                        {new Date(item.createdAt).toLocaleDateString('id-ID', {
+                          day: 'numeric',
+                          month: 'long',
+                          year: 'numeric',
+                        })}
+                      </Text>
+                     </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '30%' }}>
+                     <Box w={200}>
+                      <Text fz="sm" truncate="end" lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                     </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '15%' }}>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/desa/gallery/video/${item.id}`)}
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada video yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10)
+            window.scrollTo({ top: 0, behavior: 'smooth' })
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

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

@@ -3,7 +3,7 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -49,52 +49,74 @@ function EditPelayananPendudukNonPermanent() {
   }
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Pelayanan Penduduk Non Permanent</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <TextInput
-                value={formData.name}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    name: val.target.value,
-                  })
-                }}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Pelayanan Penduduk Non Permanent
+          </Title>
+        </Group>
+
+        <Paper
+          w={{ base: "100%", md: "50%" }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Edit Pelayanan Penduduk Non Permanent</Title>
+
+            {/* Nama Field */}
+            <TextInput
+              label="Judul"
+              placeholder="Masukkan judul"
+              value={formData.name}
+              onChange={(e) =>
+                setFormData({ ...formData, name: e.target.value })
+              }
+              required
+            />
+
+            {/* Posisi Field */}
+            <Box>
+              <Text fz="sm" fw="bold">
+                Deskripsi
+              </Text>
               <EditEditor
                 value={formData.deskripsi}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    deskripsi: val,
-                  })
+                onChange={(htmlContent) => {
+                  setFormData((prev) => ({ ...prev, deskripsi: htmlContent }));
                 }}
               />
-              
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={handleSubmit}
-                  loading={statePendudukNonPermanent.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            {/* Submit Button */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={statePendudukNonPermanent.update.loading}
+                disabled={!formData.name}
+              >
+                {statePendudukNonPermanent.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={() => router.back()}
+                disabled={statePendudukNonPermanent.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

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

@@ -1,51 +1,103 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Grid,
+  GridCol,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import stateLayananDesa from '../../../_state/desa/layananDesa';
 
-function SuratKeterangan() {
-  const router = useRouter()
-  const pelayananPendudukNonPermanen = useProxy(stateLayananDesa.pelayananPendudukNonPermanen)
+function PelayananPendudukNonPermanent() {
+  const router = useRouter();
+  const pelayananPendudukNonPermanen = useProxy(
+    stateLayananDesa.pelayananPendudukNonPermanen
+  );
 
   useShallowEffect(() => {
-    pelayananPendudukNonPermanen.findById.load('1')
-  }, [])
+    pelayananPendudukNonPermanen.findById.load('1');
+  }, []);
 
   if (!pelayananPendudukNonPermanen.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={800} />
       </Stack>
-    )
+    );
   }
+
+  const data = pelayananPendudukNonPermanen.findById.data;
+
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Paper bg={colors['BG-trans']} p={'md'}>
-          <Box py={15}>
-            <Stack gap={"xs"}>
-              <Grid>
-                <GridCol span={{ base: 12, md: 11 }}>
-                  <Text fz={"h4"} fw={"bold"}>Preview Pelayanan Perizinan Berusaha</Text>
-                </GridCol>
-                <GridCol span={{ base: 12, md: 1 }}>
-                  <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit')}>
-                    <IconEdit size={16} />
-                  </Button>
-                </GridCol>
-              </Grid>
-            </Stack>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3} c={colors['blue-button']}>
+              Preview Pelayanan Penduduk Non Permanen
+            </Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Tooltip label="Edit Data Pelayanan" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/desa/layanan/pelayanan_penduduk_non_permanent/edit'
+                  )
+                }
+              >
+                Edit
+              </Button>
+            </Tooltip>
+          </GridCol>
+        </Grid>
+
+        {/* Content */}
+        <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
+          <Box px={{ base: 0, md: 50 }} pb="xl">
+            <Center>
+              <Text
+                ta="center"
+                fz={{ base: '1.2rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+              >
+                {data.name}
+              </Text>
+            </Center>
+
+            <Divider my="md" color={colors['blue-button']} />
+
+            <Box mt="lg">
+              <Text
+                py={10}
+                ta="justify"
+                fz={{ base: '1rem', md: '1.2rem' }}
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+            </Box>
           </Box>
-          <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>{pelayananPendudukNonPermanen.findById.data.name}</Text>
-          <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }} dangerouslySetInnerHTML={{ __html: pelayananPendudukNonPermanen.findById.data.deskripsi }} />
         </Paper>
-      </Paper>
-    </Box>
+      </Stack>
+    </Paper>
   );
 }
 
-export default SuratKeterangan;
+export default PelayananPendudukNonPermanent;

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

@@ -3,7 +3,7 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Paper, Stack, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -14,6 +14,7 @@ function EditPelayananPerizinanBerusaha() {
   const router = useRouter();
   const params = useParams()
   const statePerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
+
   const [formData, setFormData] = useState({
     name: statePerizinanBerusaha.findById.data?.name || '',
     deskripsi: statePerizinanBerusaha.findById.data?.deskripsi || '',
@@ -50,64 +51,81 @@ function EditPelayananPerizinanBerusaha() {
     }
     router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha')
   }
+
   return (
     <Box>
-      <Stack gap={'xs'}>
-        <Box>
-          <Button
-            variant={'subtle'}
-            onClick={() => router.back()}
-          >
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Box>
-        <Box>
-          <Paper bg={colors['white-1']} p={'md'} radius={10} w={{ base: '100%', md: '50%' }}>
-            <Stack gap={'xs'}>
-              <Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
-              <Text fw={"bold"}>Judul</Text>
-              <TextInput
-                value={formData.name}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    name: val.target.value,
-                  })
-                }}
-              />
-              <Text fw={"bold"}>Link</Text>
-              <TextInput
-                value={formData.link}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    link: val.target.value,
-                  })
-                }}
-              />
-              <Text fw={"bold"}>Deskripsi</Text>
+      <Stack gap="xs">
+        {/* Header Section */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Pelayanan Perizinan Berusaha
+          </Title>
+        </Group>
+
+        {/* Form Section */}
+        <Paper
+          w={{ base: "100%", md: "50%" }}
+          bg={colors['white-1']}
+          p="md"
+          radius="md"
+          shadow="sm"
+          style={{ border: '1px solid #e0e0e0' }}
+        >
+          <Stack gap="xs">
+            <Title order={3}>Edit Pelayanan Perizinan Berusaha</Title>
+
+            {/* Nama Field */}
+            <TextInput
+              label="Judul"
+              placeholder="Masukkan judul"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+            />
+
+            {/* Link Field */}
+            <TextInput
+              label="Link"
+              placeholder="Masukkan link terkait"
+              value={formData.link}
+              onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+            />
+
+            {/* Deskripsi Field */}
+            <Box>
+              <Title order={6}>Deskripsi</Title>
               <EditEditor
                 value={formData.deskripsi}
-                onChange={(val) => {
-                  setFormData({
-                    ...formData,
-                    deskripsi: val,
-                  })
-                }}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
               />
-              
-              <Group>
-                <Button
-                  bg={colors['blue-button']}
-                  onClick={handleSubmit}
-                  loading={statePerizinanBerusaha.update.loading}
-                >
-                  Submit
-                </Button>
-              </Group>
-            </Stack>
-          </Paper>
-        </Box>
+            </Box>
+
+            {/* Action Buttons */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={statePerizinanBerusaha.update.loading}
+                disabled={!formData.name}
+              >
+                {statePerizinanBerusaha.update.loading ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button
+                variant="outline"
+                onClick={() => router.back()}
+                disabled={statePerizinanBerusaha.update.loading}
+              >
+                Batal
+              </Button>
+            </Group>
+          </Stack>
+        </Paper>
       </Stack>
     </Box>
   );

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

@@ -1,6 +1,23 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Grid, GridCol, Group, Paper, Skeleton, Stack, Stepper, StepperCompleted, StepperStep, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Divider,
+  Grid,
+  GridCol,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Stepper,
+  StepperCompleted,
+  StepperStep,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
@@ -9,88 +26,158 @@ import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
 
 function PerizinanBerusaha() {
-  const router = useRouter()
-  const pelayananPerizinanBerusaha = useProxy(stateLayananDesa.pelayananPerizinanBerusaha)
+  const router = useRouter();
+  const pelayananPerizinanBerusaha = useProxy(
+    stateLayananDesa.pelayananPerizinanBerusaha
+  );
   const [active, setActive] = useState(1);
-  const nextStep = () => setActive((current) => (current < 6 ? current + 1 : current));
-  const prevStep = () => setActive((current) => (current > 0 ? current - 1 : current));
+  const nextStep = () =>
+    setActive((current) => (current < 6 ? current + 1 : current));
+  const prevStep = () =>
+    setActive((current) => (current > 0 ? current - 1 : current));
+
   useShallowEffect(() => {
-    pelayananPerizinanBerusaha.findById.load('1')
-  }, [])
+    pelayananPerizinanBerusaha.findById.load('1');
+  }, []);
 
-  if(!pelayananPerizinanBerusaha.findById.data) {
+  if (!pelayananPerizinanBerusaha.findById.data) {
     return (
-      <Stack>
-        <Skeleton radius={10} h={800} />
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={800} />
       </Stack>
-    )
+    );
   }
+
+  const data = pelayananPerizinanBerusaha.findById.data;
+
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Paper bg={colors['BG-trans']} p={'md'}>
-          <Box py={15}>
-            <Stack gap={"xs"}>
-              <Grid>
-                <GridCol span={{ base: 12, md: 11 }}>
-                  <Text fz={"h4"} fw={"bold"}>Preview Pelayanan Perizinan Berusaha</Text>
-                </GridCol>
-                <GridCol span={{ base: 12, md: 1 }}>
-                  <Button bg={colors['blue-button']} onClick={() => router.push('/admin/desa/layanan/pelayanan_perizinan_berusaha/edit')}>
-                    <IconEdit size={16} />
-                  </Button>
-                </GridCol>
-              </Grid>
-            </Stack>
-          </Box>
-            <Text fz={{ base: "h4", md: 'h2' }} fw={"bold"}>{pelayananPerizinanBerusaha.findById.data.name}</Text>
-          <Text py={10} ta={"justify"} fz={{ base: "sm", md: 'h3' }} dangerouslySetInnerHTML={{__html: pelayananPerizinanBerusaha.findById.data.deskripsi}} />
-          <Text py={10} fz={{ base: "sm", md: 'h3' }}>Proses pendaftaran NIB melalui OSS mencakup beberapa langkah umum, seperti:</Text>
-          <Box p={"xl"} w={{ base: "100%", md: "100%" }} >
-            <Stepper active={active} onStepClick={setActive} orientation="vertical"
-              styles={{
-                separator: {
-                  marginLeft: 25
-                },
-
-                step: {
-                  padding: '12px 0'
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header */}
+        <Grid align="center">
+          <GridCol span={{ base: 12, md: 11 }}>
+            <Title order={3} c={colors['blue-button']}>
+              Preview Pelayanan Perizinan Berusaha
+            </Title>
+          </GridCol>
+          <GridCol span={{ base: 12, md: 1 }}>
+            <Tooltip label="Edit Data Perizinan" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() =>
+                  router.push(
+                    '/admin/desa/layanan/pelayanan_perizinan_berusaha/edit'
+                  )
                 }
-              }}>
-              <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
-                Pendaftaran akun pada portal OSS
-              </StepperStep>
-              <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
-                Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
-              </StepperStep>
-              <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI ">
-                Memilih KBLI dengan jenis usaha yang akan didaftarkan
-              </StepperStep>
-              <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
-                Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
-              </StepperStep>
-              <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
-                Proses verifikasi dan persetujuan oleh instansi terkait
-              </StepperStep>
-              <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
-                Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
-              </StepperStep>
-              <StepperCompleted >
-                Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
-              </StepperCompleted>
-            </Stepper>
+              >
+                Edit
+              </Button>
+            </Tooltip>
+          </GridCol>
+        </Grid>
 
-            <Group justify="center" mt="xl">
-              <Button variant="default" onClick={prevStep}>Back</Button>
-              <Button onClick={nextStep}>Next step</Button>
-            </Group>
-            <Text py={35} ta={"justify"} fz={{ base: "sm", md: 'h3' }}>Penting untuk diingat bahwa prosedur dan persyaratan dapat berubah
-              seiring waktu. Untuk informasi yang lebih akurat dan terkini, saya sarankan untuk mengunjungi situs
-              resmi OSS <a href={pelayananPerizinanBerusaha.findById.data.link}>{pelayananPerizinanBerusaha.findById.data.link}</a> atau menghubungi instansi terkait di pemerintah Indonesia yang bertanggung jawab atas urusan perizinan usaha.</Text>
+        {/* Content */}
+        <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
+          <Box px={{ base: 0, md: 50 }} pb="xl">
+            <Center>
+              <Text
+                ta="center"
+                fz={{ base: '1.2rem', md: '1.8rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+              >
+                {data.name}
+              </Text>
+            </Center>
+
+            <Divider my="md" color={colors['blue-button']} />
+
+            <Box mt="lg">
+              <Text
+                py={10}
+                ta="justify"
+                fz={{ base: '1rem', md: '1.2rem' }}
+                dangerouslySetInnerHTML={{ __html: data.deskripsi }}
+              />
+
+              <Text
+                py={10}
+                fz={{ base: '1rem', md: '1.2rem' }}
+                fw="bold"
+                c={colors['blue-button']}
+              >
+                Proses pendaftaran NIB melalui OSS mencakup beberapa langkah
+                umum:
+              </Text>
+
+              <Box p="xl" w="100%">
+                <Stepper
+                  active={active}
+                  onStepClick={setActive}
+                  orientation="vertical"
+                  styles={{
+                    separator: { marginLeft: 25 },
+                    step: { padding: '12px 0' },
+                  }}
+                >
+                  <StepperStep label="Langkah Pertama" description="Pendaftaran Akun">
+                    Pendaftaran akun pada portal OSS
+                  </StepperStep>
+                  <StepperStep label="Langkah Kedua" description="Pengisian Data Perusahaan">
+                    Mengisi informasi perusahaan, termasuk data pemegang saham, alamat perusahaan, dan lainnya
+                  </StepperStep>
+                  <StepperStep label="Langkah Ketiga" description="Pemilihan KBLI">
+                    Memilih KBLI dengan jenis usaha yang akan didaftarkan
+                  </StepperStep>
+                  <StepperStep label="Langkah Keempat" description="Pengunggahan Dokumen">
+                    Mengunggah dokumen-dokumen yang diperlukan, seperti akta pendirian perusahaan, surat izin usaha, dan dokumen lainnya sesuai dengan ketentuan yang berlaku
+                  </StepperStep>
+                  <StepperStep label="Langkah Kelima" description="Verifikasi dan Persetujuan">
+                    Proses verifikasi dan persetujuan oleh instansi terkait
+                  </StepperStep>
+                  <StepperStep label="Langkah Keenam" description="Penerimaan NIB">
+                    Jika proses sebelumnya berhasil, perusahaan akan menerima NIB sebagai identitas resmi usaha anda
+                  </StepperStep>
+                  <StepperCompleted>
+                    Selesai, anda telah mengikuti proses pendaftaran NIB melalui OSS
+                  </StepperCompleted>
+                </Stepper>
+
+                <Group justify="center" mt="xl">
+                  <Button variant="default" onClick={prevStep}>
+                    Back
+                  </Button>
+                  <Button onClick={nextStep}>Next step</Button>
+                </Group>
+              </Box>
+
+              <Text
+                py={35}
+                ta="justify"
+                fz={{ base: '1rem', md: '1.2rem' }}
+              >
+                Penting untuk diingat bahwa prosedur dan persyaratan dapat
+                berubah seiring waktu. Untuk informasi yang lebih akurat dan
+                terkini, silakan kunjungi situs resmi OSS{' '}
+                <a
+                  href={data.link}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  style={{ color: colors['blue-button'] }}
+                >
+                  {data.link}
+                </a>{' '}
+                atau hubungi instansi terkait di pemerintah Indonesia yang
+                bertanggung jawab atas urusan perizinan usaha.
+              </Text>
+            </Box>
           </Box>
         </Paper>
-      </Paper>
-    </Box>
+      </Stack>
+    </Paper>
   );
 }
 

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

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -13,9 +24,10 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditSuratKeterangan() {
-  const router = useRouter()
-  const params = useParams()
-  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
+  const router = useRouter();
+  const params = useParams();
+  const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
+
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [previewImage2, setPreviewImage2] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
@@ -25,39 +37,32 @@ function EditSuratKeterangan() {
     deskripsi: stateSurat.edit.form.deskripsi,
     imageId: stateSurat.edit.form.imageId,
     image2Id: stateSurat.edit.form.image2Id,
-  })
+  });
 
   useEffect(() => {
     const loadSurat = async () => {
       const id = params?.id as string;
       if (!id) return;
+
       try {
         const data = await stateSurat.edit.load(id);
         if (data) {
           setFormData({
-            name: data.name || "",
-            deskripsi: data.deskripsi || "",
-            imageId: data.imageId || "",
-            image2Id: data.image2Id || "",
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            imageId: data.imageId || '',
+            image2Id: data.image2Id || '',
           });
 
-          if (data.image?.link) {
-            setPreviewImage(data.image.link);
-          } else {
-            setPreviewImage(null);
-          }
-
-          if (data.image2?.link) {
-            setPreviewImage2(data.image2.link);
-          } else {
-            setPreviewImage2(null);
-          }
+          setPreviewImage(data.image?.link || null);
+          setPreviewImage2(data.image2?.link || null);
         }
       } catch (error) {
-        console.error("Error loading surat:", error);
-        toast.error("Gagal memuat data surat");
+        console.error('Error loading surat:', error);
+        toast.error('Gagal memuat data surat');
       }
     };
+
     loadSurat();
   }, [params?.id]);
 
@@ -65,171 +70,199 @@ function EditSuratKeterangan() {
     try {
       stateSurat.edit.form = {
         ...stateSurat.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        imageId: formData.imageId,
-        image2Id: formData.image2Id,
-      }
+        ...formData,
+      };
+
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({ file, name: file.name });
         const uploaded = res.data?.data;
-
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
-
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
         stateSurat.edit.form.imageId = uploaded.id;
       }
 
       if (file2) {
         const res = await ApiFetch.api.fileStorage.create.post({ file: file2, name: file2.name });
         const uploaded = res.data?.data;
-
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
-
+        if (!uploaded?.id) return toast.error('Gagal upload gambar');
         stateSurat.edit.form.image2Id = uploaded.id;
       }
 
-      await stateSurat.edit.update()
-      toast.success("Surat berhasil diperbarui!")
-      router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
+      await stateSurat.edit.update();
+      toast.success('Surat berhasil diperbarui!');
+      router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
     } catch (error) {
-      console.error("Error updating surat:", error);
-      toast.error("Terjadi kesalahan saat memperbarui surat");
+      console.error('Error updating surat:', error);
+      toast.error('Terjadi kesalahan saat memperbarui surat');
     }
-  }
-
+  };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Surat Keterangan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Back Button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Surat Keterangan
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Surat Keterangan"
+            placeholder="Masukkan nama surat keterangan"
             value={formData.name}
-            onChange={(val) => {
-              setFormData({ ...formData, name: val.target.value });
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
-            placeholder="masukkan nama surat keterangan"
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten
+            </Text>
             <EditEditor
               value={formData.deskripsi}
-              onChange={(htmlContent) => {
-                setFormData({ ...formData, deskripsi: htmlContent });
-              }}
+              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
             />
           </Box>
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box >
-              <Dropzone
-                onDrop={(files) => {
-                  const file = files[0]; // Hanya ambil file pertama
-                  if (file) {
-                    setFile(file);
-                    setPreviewImage(URL.createObjectURL(file)); // Buat preview
-                  }
-                }}
-                maxSize={5 * 1024 ** 2} // 5MB
-                accept={{
-                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
-                }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag images here or click to select files
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Attach as many files as you like, each file should not exceed 5mb
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              {previewImage && (
+          {/* Upload Gambar 1 */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar 1
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
+
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
                 <Image
                   src={previewImage}
-                  alt="Preview"
-                  width={280}
-                  height={180}
-                  fit="cover"
-                  radius="sm"
-                  mt="md"
+                  alt="Preview Gambar 1"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: 'contain',
+                    border: `1px solid ${colors['blue-button']}`,
+                  }}
                 />
-              )}
-            </Box>
+              </Box>
+            )}
           </Box>
-          <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box >
-              <Dropzone
-                onDrop={(files) => {
-                  const file = files[0]; // Hanya ambil file pertama
-                  if (file) {
-                    setFile2(file);
-                    setPreviewImage2(URL.createObjectURL(file)); // Buat preview
-                  }
-                }}
-                maxSize={5 * 1024 ** 2} // 5MB
-                accept={{
-                  'image/*': ['.jpeg', '.jpg', '.png', '.webp']
-                }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag images here or click to select files
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Attach as many files as you like, each file should not exceed 5mb
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              {previewImage2 && (
+          {/* Upload Gambar 2 */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar 2
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile2(selectedFile);
+                  setPreviewImage2(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
+
+            {previewImage2 && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
                 <Image
                   src={previewImage2}
-                  alt="Preview"
-                  width={280}
-                  height={180}
-                  fit="cover"
-                  radius="sm"
-                  mt="md"
+                  alt="Preview Gambar 2"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: 'contain',
+                    border: `1px solid ${colors['blue-button']}`,
+                  }}
                 />
-              )}
-            </Box>
+              </Box>
+            )}
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -2,100 +2,177 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function DetailSuratKeterangan() {
-  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    suratKeteranganState.findUnique.load(params?.id as string)
-  }, [])
+    suratKeteranganState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      suratKeteranganState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/layanan/pelayanan_surat_keterangan")
+      suratKeteranganState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
     }
-  }
+  };
 
   if (!suratKeteranganState.findUnique.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = suratKeteranganState.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Surat Keterangan</Text>
-          {suratKeteranganState.findUnique.data ? (
-            <Paper key={suratKeteranganState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{suratKeteranganState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"}dangerouslySetInnerHTML={{ __html: suratKeteranganState.findUnique.data?.deskripsi }}></Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={suratKeteranganState.findUnique.data?.image2?.link} alt="gambar" />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Surat Keterangan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Nama
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.name || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Deskripsi
+                </Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{
+                    __html: data?.deskripsi || '-',
+                  }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Gambar
+                </Text>
+                {data?.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt="gambar"
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">
+                    Tidak ada gambar
+                  </Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Gambar 2
+                </Text>
+                {data?.image2?.link ? (
+                  <Image
+                    src={data.image2.link}
+                    alt="gambar"
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">
+                    Tidak ada gambar
+                  </Text>
+                )}
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Surat" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (suratKeteranganState.findUnique.data) {
-                        setSelectedId(suratKeteranganState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={suratKeteranganState.delete.loading || !suratKeteranganState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={suratKeteranganState.delete.loading}
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Surat" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (suratKeteranganState.findUnique.data) {
-                        router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${suratKeteranganState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!suratKeteranganState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/desa/layanan/pelayanan_surat_keterangan/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -104,7 +181,7 @@ function DetailSuratKeterangan() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
+        text="Apakah Anda yakin ingin menghapus surat keterangan ini?"
       />
     </Box>
   );

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

@@ -1,9 +1,21 @@
-'use client'
+'use client';
+
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -12,25 +24,25 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function CreateSuratKeterangan() {
-  const stateSurat = useProxy(stateLayananDesa.suratKeterangan)
+  const stateSurat = useProxy(stateLayananDesa.suratKeterangan);
   const [previewImage2, setPreviewImage2] = useState<{ preview: string; file: File } | null>(null);
   const [previewImage, setPreviewImage] = useState<{ preview: string; file: File } | null>(null);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
     stateSurat.create.form = {
-      name: "",
-      deskripsi: "",
-      imageId: "",
-      image2Id: ""
-    }
-    setPreviewImage(null)
-    setPreviewImage2(null)
-  }
+      name: '',
+      deskripsi: '',
+      imageId: '',
+      image2Id: '',
+    };
+    setPreviewImage(null);
+    setPreviewImage2(null);
+  };
 
   const handleSubmit = async () => {
     if (!previewImage) {
-      return toast.warn("Pilih file gambar utama terlebih dahulu");
+      return toast.warn('Pilih file gambar utama terlebih dahulu');
     }
 
     try {
@@ -42,11 +54,10 @@ function CreateSuratKeterangan() {
 
       const uploadedImage1 = res1.data?.data;
       if (!uploadedImage1?.id) {
-        return toast.error("Gagal upload gambar utama");
+        return toast.error('Gagal upload gambar utama');
       }
 
       let uploadedImage2 = null;
-      // Upload gambar kedua jika ada
       if (previewImage2) {
         const res2 = await ApiFetch.api.fileStorage.create.post({
           file: previewImage2.file,
@@ -55,44 +66,58 @@ function CreateSuratKeterangan() {
         uploadedImage2 = res2.data?.data;
       }
 
-      // Set form data
       stateSurat.create.form.imageId = uploadedImage1.id;
       if (uploadedImage2?.id) {
         stateSurat.create.form.image2Id = uploadedImage2.id;
       }
 
-      // Create the record
       await stateSurat.create.create();
-
-      // Reset form dan redirect
       resetForm();
-      toast.success("Data surat keterangan berhasil ditambahkan");
-      router.push("/admin/desa/layanan/pelayanan_surat_keterangan");
+      toast.success('Data surat keterangan berhasil ditambahkan');
+      router.push('/admin/desa/layanan/pelayanan_surat_keterangan');
     } catch (error) {
-      console.error("Error creating surat keterangan:", error);
-      toast.error("Terjadi kesalahan saat menambahkan surat keterangan");
+      console.error('Error creating surat keterangan:', error);
+      toast.error('Terjadi kesalahan saat menambahkan surat keterangan');
     }
   };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Surat Keterangan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Surat Keterangan
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Nama Surat */}
           <TextInput
             value={stateSurat.create.form.name}
-            onChange={(val) => {
-              stateSurat.create.form.name = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
-            placeholder="masukkan nama surat keterangan"
+            onChange={(val) => (stateSurat.create.form.name = val.target.value)}
+            label={<Text fz="sm" fw="bold">Nama Surat Keterangan</Text>}
+            placeholder="Masukkan nama surat keterangan"
+            required
           />
+
+          {/* Konten */}
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten
+            </Text>
             <CreateEditor
               value={stateSurat.create.form.deskripsi}
               onChange={(htmlContent) => {
@@ -100,106 +125,124 @@ function CreateSuratKeterangan() {
               }}
             />
           </Box>
+
+          {/* Gambar Utama */}
           <Box>
-            <Text fz={"md"} fw={"bold"} mb="sm">Gambar Utama</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Utama
+            </Text>
             <Dropzone
               onDrop={(files) => {
                 const file = files[0];
                 if (file) {
                   setPreviewImage({
                     file,
-                    preview: URL.createObjectURL(file)
+                    preview: URL.createObjectURL(file),
                   });
                 }
               }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{
-                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
-              }}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
             >
-              <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+              <Group justify="center" gap="xl" mih={180}>
                 <Dropzone.Accept>
-                  <IconUpload size={32} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
-                  <IconX size={32} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
                 </Dropzone.Reject>
                 <Dropzone.Idle>
-                  <IconPhoto size={32} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
                 </Dropzone.Idle>
-                <div>
-                  <Text size="md" inline>Seret gambar ke sini atau klik untuk memilih</Text>
-                  <Text size="sm" c="dimmed" inline mt={7} display="block">
-                    Ukuran maksimal 5MB (JPEG, JPG, PNG, WebP)
-                  </Text>
-                </div>
               </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
             </Dropzone>
+
             {previewImage && (
-              <Image
-                src={previewImage.preview}
-                alt="Preview Gambar Utama"
-                width={280}
-                height={180}
-                fit="cover"
-                radius="sm"
-                mt="md"
-              />
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage.preview}
+                  alt="Preview Gambar Utama"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
             )}
           </Box>
 
-          <Box mt="lg">
-            <Text fz={"md"} fw={"bold"} mb="sm">Gambar Tambahan (Opsional)</Text>
+          {/* Gambar Tambahan */}
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Tambahan (Opsional)
+            </Text>
             <Dropzone
               onDrop={(files) => {
                 const file = files[0];
                 if (file) {
                   setPreviewImage2({
                     file,
-                    preview: URL.createObjectURL(file)
+                    preview: URL.createObjectURL(file),
                   });
                 }
               }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
               maxSize={5 * 1024 ** 2}
-              accept={{
-                'image/*': ['.jpeg', '.jpg', '.png', '.webp']
-              }}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
             >
-              <Group justify="center" gap="xl" mih={120} style={{ pointerEvents: 'none' }}>
+              <Group justify="center" gap="xl" mih={180}>
                 <Dropzone.Accept>
-                  <IconUpload size={32} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
-                  <IconX size={32} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
                 </Dropzone.Reject>
                 <Dropzone.Idle>
-                  <IconPhoto size={32} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
                 </Dropzone.Idle>
-                <div>
-                  <Text size="md" inline>Seret gambar ke sini atau klik untuk memilih</Text>
-                  <Text size="sm" c="dimmed" inline mt={7} display="block">
-                    Ukuran maksimal 5MB (JPEG, JPG, PNG, WebP)
-                  </Text>
-                </div>
               </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
             </Dropzone>
+
             {previewImage2 ? (
-              <Image
-                src={previewImage2.preview}
-                alt="Preview Gambar Tambahan"
-                width={280}
-                height={180}
-                fit="cover"
-                radius="sm"
-                mt="md"
-              />
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage2.preview}
+                  alt="Preview Gambar Tambahan"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
             ) : (
-              <Text size="sm" c="dimmed" mt="sm">
+              <Text size="sm" c="dimmed" mt="sm" ta="center">
                 Kosongkan jika tidak ada gambar tambahan
               </Text>
             )}
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          {/* Tombol Simpan */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,13 +1,30 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import stateLayananDesa from '../../../_state/desa/layananDesa';
 
 function SuratKeterangan() {
@@ -16,7 +33,7 @@ function SuratKeterangan() {
     <Box>
       <HeaderSearch
         title='Pelayanan Surat Keterangan'
-        placeholder='pencarian'
+        placeholder='Cari nama atau deskripsi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,8 +44,8 @@ function SuratKeterangan() {
 }
 
 function ListSuratKeterangan({ search }: { search: string }) {
-  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan)
-  const router = useRouter()
+  const suratKeteranganState = useProxy(stateLayananDesa.suratKeterangan);
+  const router = useRouter();
 
   const {
     data,
@@ -39,102 +56,111 @@ function ListSuratKeterangan({ search }: { search: string }) {
   } = suratKeteranganState.findMany;
 
   useEffect(() => {
-    load(page, 10)
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
+
+  const filteredData = useMemo(() => {
+    if (!data) return [];
+    const keyword = search.toLowerCase();
+    return data.filter(item =>
+      item.name?.toLowerCase().includes(keyword) ||
+      item.deskripsi?.toLowerCase().includes(keyword)
+    );
+  }, [data, search]);
+
+  // Loading state
+  if (loading || !data) {
+    return (
+      <Stack py={10}>
+        <Skeleton height={600} radius="md" />
+      </Stack>
+    );
+  }
 
-   const filteredData = useMemo(() => {
-      if (!data) return [];
-      return data.filter(item => {
-        const keyword = search.toLowerCase();
-        return (
-          item.name?.toLowerCase().includes(keyword) ||
-          item.deskripsi?.toLowerCase().includes(keyword)
-        );
-      })
-    }, [data, search]); 
-  
-    // Handle loading state
-    if (loading || !data) {
-      return (
-        <Stack py={10}>
-          <Skeleton height={300} />
-        </Stack>
-      );
-    }
-  
-    if (data.length === 0) {
-      return (
-        <Box py={10}>
-           <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Surat Keterangan'
-            href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
-        </Paper>
-        </Box>
-      );
-    }
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Surat Keterangan'
-          href='/admin/desa/layanan/pelayanan_surat_keterangan/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={200}>
-                  <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                  </Box>
-                </TableTd>  
-                <TableTd>
-                  <Box w={300}>
-                  <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Text>
-                    <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </Text>
-              </TableTd>
-            </TableTr>
-          ))}
-          </TableTbody>
-        </Table>
+      <Paper withBorder bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>List Surat Keterangan</Title>
+          <Tooltip label="Tambah Surat Keterangan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/desa/layanan/pelayanan_surat_keterangan/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Nama</TableTh>
+                <TableTh style={{ width: '45%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '15%' }}>Aksi</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd style={{ width: '30%' }}>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '45%' }}>
+                      <Box w={200}>
+                        <Text truncate="end" lineClamp={1} fz="sm" c="dimmed"
+                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        />
+                      </Box>
+                    </TableTd>
+                    <TableTd style={{ width: '15%' }}>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/desa/layanan/pelayanan_surat_keterangan/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data surat keterangan yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
-      <Center> 
+      <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0); 
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

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

@@ -2,22 +2,34 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
+import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 
 function EditPelayananTelunjukSakti() {
-  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
-  const router = useRouter()
-  const params = useParams()
+  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
+  const router = useRouter();
+  const params = useParams();
+
   const [formData, setFormData] = useState({
     name: stateTelunjukDesa.edit.form.name,
     deskripsi: stateTelunjukDesa.edit.form.deskripsi,
     link: stateTelunjukDesa.edit.form.link,
-  })
+  });
 
   useEffect(() => {
     const loadPelayananTelunjukSakti = async () => {
@@ -27,14 +39,14 @@ function EditPelayananTelunjukSakti() {
         const data = await stateTelunjukDesa.edit.load(id);
         if (data) {
           setFormData({
-            name: data.name,
-            deskripsi: data.deskripsi,
-            link: data.link,
+            name: data.name || '',
+            deskripsi: data.deskripsi || '',
+            link: data.link || '',
           });
         }
       } catch (error) {
-        console.error("Error loading pelayanan telunjuk sakti:", error);
-        toast.error("Gagal memuat data pelayanan telunjuk sakti");
+        console.error('Error loading pelayanan telunjuk sakti:', error);
+        toast.error('Gagal memuat data pelayanan telunjuk sakti');
       }
     };
     loadPelayananTelunjukSakti();
@@ -44,57 +56,86 @@ function EditPelayananTelunjukSakti() {
     try {
       stateTelunjukDesa.edit.form = {
         ...stateTelunjukDesa.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        link: formData.link,
-      }
-      await stateTelunjukDesa.edit.update()
-      toast.success("Pelayanan telunjuk sakti berhasil diperbarui!")
-      router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
+        ...formData,
+      };
+      await stateTelunjukDesa.edit.update();
+      toast.success('Pelayanan telunjuk sakti berhasil diperbarui!');
+      router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa');
     } catch (error) {
-      console.error("Error updating pelayanan telunjuk sakti:", error);
-      toast.error("Terjadi kesalahan saat memperbarui pelayanan telunjuk sakti");
+      console.error('Error updating pelayanan telunjuk sakti:', error);
+      toast.error('Terjadi kesalahan saat memperbarui pelayanan telunjuk sakti');
     }
-  }
+  };
 
   return (
-    <Box>
-          <Box mb={10}>
-            <Button variant="subtle" onClick={() => router.back()}>
-              <IconArrowBack color={colors['blue-button']} size={25} />
-            </Button>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Back Button + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Pelayanan Telunjuk Sakti Desa
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Nama */}
+          <TextInput
+            label="Nama Pelayanan"
+            placeholder="Masukkan nama pelayanan"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+
+          {/* Deskripsi pakai editor */}
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(htmlContent) => setFormData({ ...formData, deskripsi: htmlContent })}
+            />
           </Box>
-          <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-            <Stack gap={"xs"}>
-              <Title order={3}>Edit Surat Keterangan</Title>
-              <TextInput
-                value={formData.name}
-                onChange={(val) => {
-                  setFormData({ ...formData, name: val.target.value });
-                }}
-                label={<Text fz={"sm"} fw={"bold"}>Nama Surat Keterangan</Text>}
-                placeholder="masukkan nama surat keterangan"
-              />
-                <TextInput
-                   value={formData.deskripsi}
-                   onChange={(val) => {
-                     setFormData({ ...formData, deskripsi: val.target.value });
-                   }}
-                   label={<Text fz={"sm"} fw={"bold"}>Tautan Link</Text>}
-                   placeholder="masukkan tautan link"
-                 />
-              <TextInput
-                value={formData.link}
-                onChange={(val) => {
-                  setFormData({ ...formData, link: val.target.value });
-                }}
-                label={<Text fz={"sm"} fw={"bold"}>Link</Text>}
-                placeholder="masukkan link"
-              />
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
-            </Stack>
-          </Paper>
-        </Box>
+
+          {/* Link */}
+          <TextInput
+            label="Link"
+            placeholder="Masukkan link terkait"
+            value={formData.link}
+            onChange={(e) => setFormData({ ...formData, link: e.target.value })}
+          />
+
+          {/* Tombol Simpan */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
+    </Box>
   );
 }
 

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

@@ -2,109 +2,166 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 
 function DetailPelayananTelunjukSakti() {
-  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+  const telunjukSaktiState = useProxy(
+    stateLayananDesa.pelayananTelunjukSaktiDesa
+  );
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    telunjukSaktiState.findUnique.load(params?.id as string)
-  }, [])
+    telunjukSaktiState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      telunjukSaktiState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
+      telunjukSaktiState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa');
     }
-  }
+  };
 
   if (!telunjukSaktiState.findUnique.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = telunjukSaktiState.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Pelayanan Telunjuk Sakti Desa</Text>
-          {telunjukSaktiState.findUnique.data ? (
-            <Paper key={telunjukSaktiState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama</Text>
-                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Link</Text>
+    <Box py={10}>
+      {/* Tombol Kembali */}
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Pelayanan Telunjuk Sakti Desa
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Nama
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.name || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Link
+                </Text>
+                {data?.link ? (
                   <Text
+                    fz="md"
                     component="a"
-                    href={telunjukSaktiState.findUnique.data?.link}
+                    href={data.link}
                     target="_blank"
                     rel="noopener noreferrer"
+                    c="blue"
                     style={{
                       display: 'block',
                       overflow: 'hidden',
                       textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap'
+                      whiteSpace: 'nowrap',
                     }}
                   >
-                    {telunjukSaktiState.findUnique.data?.link}
+                    {data.link}
                   </Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"}>{telunjukSaktiState.findUnique.data?.deskripsi}</Text>
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+                ) : (
+                  <Text fz="sm" c="dimmed">
+                    Tidak ada link
+                  </Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Deskripsi
+                </Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{
+                    __html: data?.deskripsi || '-',
+                  }}
+                />
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Layanan" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (telunjukSaktiState.findUnique.data) {
-                        setSelectedId(telunjukSaktiState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={telunjukSaktiState.delete.loading || !telunjukSaktiState.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={telunjukSaktiState.delete.loading}
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Layanan" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (telunjukSaktiState.findUnique.data) {
-                        router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${telunjukSaktiState.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!telunjukSaktiState.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
@@ -113,7 +170,7 @@ function DetailPelayananTelunjukSakti() {
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus berita ini?'
+        text="Apakah Anda yakin ingin menghapus layanan ini?"
       />
     </Box>
   );

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

@@ -1,64 +1,117 @@
-'use client'
+'use client';
+
 import stateLayananDesa from '@/app/admin/(dashboard)/_state/desa/layananDesa';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
+import { toast } from 'react-toastify';
 
 function CreatePelayananTelunjukDesa() {
-  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
-  const router = useRouter()
+  const stateTelunjukDesa = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
+  const router = useRouter();
 
   const resetForm = () => {
     stateTelunjukDesa.create.form = {
-      name: "",
-      deskripsi: "",
-      link: "",
-    }
-  }
+      name: '',
+      deskripsi: '',
+      link: '',
+    };
+  };
 
   const handleSubmit = async () => {
-    await stateTelunjukDesa.create.create()
-    resetForm()
-    router.push("/admin/desa/layanan/pelayanan_telunjuk_sakti_desa")
+    try {
+      await stateTelunjukDesa.create.create();
+      resetForm();
+      toast.success('Data pelayanan telunjuk sakti berhasil ditambahkan');
+      router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa');
+    } catch (error) {
+      console.error('Error create pelayanan telunjuk sakti:', error);
+      toast.error('Terjadi kesalahan saat menambahkan data');
+    }
+  };
 
-  }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Pelayanan Telunjuk Sakti Desa</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Pelayanan Telunjuk Sakti Desa
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Nama */}
           <TextInput
             value={stateTelunjukDesa.create.form.name}
             onChange={(val) => {
               stateTelunjukDesa.create.form.name = val.target.value;
             }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Pelayanan Telunjuk Sakti Desa</Text>}
-            placeholder="masukkan nama pelayanan telunjuk sakti desa"
+            label={<Text fz="sm" fw="bold">Nama Pelayanan</Text>}
+            placeholder="Masukkan nama pelayanan telunjuk sakti desa"
+            required
           />
+
+          {/* Deskripsi */}
           <TextInput
             value={stateTelunjukDesa.create.form.deskripsi}
             onChange={(val) => {
               stateTelunjukDesa.create.form.deskripsi = val.target.value;
             }}
-            label={<Text fz={"sm"} fw={"bold"}>Tautan Link</Text>}
-            placeholder="masukkan tautan link"
+            label={<Text fz="sm" fw="bold">Deskripsi</Text>}
+            placeholder="Masukkan deskripsi pelayanan"
           />
+
+          {/* Link */}
           <TextInput
             value={stateTelunjukDesa.create.form.link}
             onChange={(val) => {
               stateTelunjukDesa.create.form.link = val.target.value;
             }}
-            label={<Text fz={"sm"} fw={"bold"}>Link</Text>}
-            placeholder="masukkan link"
+            label={<Text fz="sm" fw="bold">Link</Text>}
+            placeholder="Masukkan link pelayanan"
           />
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          {/* Tombol Simpan */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,13 +1,187 @@
+// /* eslint-disable react-hooks/exhaustive-deps */
+// 'use client'
+// import colors from '@/con/colors';
+// import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+// import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+// import { useRouter } from 'next/navigation';
+// import { useEffect, useMemo, useState } from 'react';
+// import { useProxy } from 'valtio/utils';
+// import HeaderSearch from '../../../_com/header';
+// import JudulList from '../../../_com/judulList';
+// import stateLayananDesa from '../../../_state/desa/layananDesa';
+
+// function PelayananTelunjukSakti() {
+//   const [search, setSearch] = useState("");
+//   return (
+//     <Box>
+//       <HeaderSearch
+//         title='Posisi Organisasi'
+//         placeholder='pencarian'
+//         searchIcon={<IconSearch size={20} />}
+//         value={search}
+//         onChange={(e) => setSearch(e.currentTarget.value)}
+//       />
+//       <ListPelayananTelunjukSakti search={search} />
+//     </Box>
+//   );
+// }
+
+// function ListPelayananTelunjukSakti({ search }: { search: string }) {
+//   const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
+//   const router = useRouter()
+
+//   const {
+//     data,
+//     page,
+//     totalPages,
+//     loading,
+//     load,
+//   } = telunjukSaktiState.findMany;
+
+//   useEffect(() => {
+//     load(page, 10)
+//   }, [])
+
+//   const filteredData = useMemo(() => {
+//     if (!data) return [];
+//     return data.filter(item => {
+//       const keyword = search.toLowerCase();
+//       return (
+//         item.name?.toLowerCase().includes(keyword) ||
+//         item.link?.toLowerCase().includes(keyword) ||
+//         item.deskripsi?.toLowerCase().includes(keyword)
+//       );
+//     })
+//       .sort((a, b) => a.posisi?.hierarki - b.posisi?.hierarki);
+//   }, [data, search]);
+
+//   if (loading || !data) {
+//     return (
+//       <Stack py={10}>
+//         <Skeleton height={300} />
+//       </Stack>
+//     );
+//   }
+
+//   if (data.length === 0) {
+//     return (
+//       <Box py={10}>
+//         <Paper bg={colors['white-1']} p={'md'}>
+//           <JudulList
+//             title='List Pelayanan Telunjuk Sakti Desa'
+//             href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
+//           />
+//           <Table striped withTableBorder withRowBorders>
+//             <TableThead>
+//               <TableTr>
+//                 <TableTh>Nama</TableTh>
+//                 <TableTh>Link</TableTh>
+//                 <TableTh>Detail</TableTh>
+//               </TableTr>
+//             </TableThead>
+//             <TableTbody>
+//               <TableTr>
+//                 <TableTd colSpan={3}>
+//                   <Text fz={"sm"} color="gray.5">
+//                     Tidak ada data
+//                   </Text>
+//                 </TableTd>
+//               </TableTr>
+//             </TableTbody>
+//           </Table>
+//         </Paper>
+//       </Box>
+//     );
+//   }
+
+//   return (
+//     <Box py={10}>
+//       <Paper bg={colors['white-1']} p={'md'}>
+//         <JudulList
+//           title='List Pelayanan Telunjuk Sakti Desa'
+//           href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
+//         />
+//         <Table striped withTableBorder withRowBorders>
+//           <TableThead>
+//             <TableTr>
+//               <TableTh>Nama</TableTh>
+//               <TableTh>Link</TableTh>
+//               <TableTh>Detail</TableTh>
+//             </TableTr>
+//           </TableThead>
+//           <TableTbody>
+//             {filteredData.map((item) => (
+//               <TableTr key={item.id}>
+//                 <TableTd>
+//                   <Box w={100}>
+//                     <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.name }} />
+//                   </Box>
+//                 </TableTd>
+//                 <TableTd>
+//                   <Box w={100}>
+//                     <a href={item.link} target="_blank" rel="noopener noreferrer">
+//                       <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
+//                     </a>
+//                   </Box>
+//                 </TableTd>
+//                 <TableTd>
+//                   <Text>
+//                     <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`)}>
+//                       <IconDeviceImac size={20} />
+//                     </Button>
+//                   </Text>
+//                 </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>
+//     </Box>
+//   );
+// }
+
+// export default PelayananTelunjukSakti;
+
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
+
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import stateLayananDesa from '../../../_state/desa/layananDesa';
 
 function PelayananTelunjukSakti() {
@@ -15,8 +189,8 @@ function PelayananTelunjukSakti() {
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
-        placeholder='pencarian'
+        title="Pelayanan Telunjuk Sakti"
+        placeholder="Cari layanan..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,125 +201,113 @@ function PelayananTelunjukSakti() {
 }
 
 function ListPelayananTelunjukSakti({ search }: { search: string }) {
-  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa)
-  const router = useRouter()
+  const telunjukSaktiState = useProxy(stateLayananDesa.pelayananTelunjukSaktiDesa);
+  const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = telunjukSaktiState.findMany;
+  const { data, page, totalPages, loading, load } = telunjukSaktiState.findMany;
 
   useEffect(() => {
-    load(page, 10)
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = useMemo(() => {
-    if (!data) return [];
-    return data.filter(item => {
-      const keyword = search.toLowerCase();
-      return (
-        item.name?.toLowerCase().includes(keyword) ||
-        item.link?.toLowerCase().includes(keyword) ||
-        item.deskripsi?.toLowerCase().includes(keyword)
-      );
-    })
-      .sort((a, b) => a.posisi?.hierarki - b.posisi?.hierarki);
-  }, [data, search]);
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={400} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Pelayanan Telunjuk Sakti Desa'
-            href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
-          />
-          <Table striped withTableBorder withRowBorders>
-            <TableThead>
-              <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Link</TableTh>
-                <TableTh>Detail</TableTh>
-              </TableTr>
-            </TableThead>
-            <TableTbody>
-              <TableTr>
-                <TableTd colSpan={3}>
-                  <Text fz={"sm"} color="gray.5">
-                    Tidak ada data
-                  </Text>
-                </TableTd>
-              </TableTr>
-            </TableTbody>
-          </Table>
-        </Paper>
-      </Box>
-    );
-  }
-
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Pelayanan Telunjuk Sakti Desa'
-          href='/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Link</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={100}>
-                    <Text truncate="end" lineClamp={1} fz={"sm"} dangerouslySetInnerHTML={{ __html: item.name }} />
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Box w={100}>
-                    <a href={item.link} target="_blank" rel="noopener noreferrer">
-                      <Text dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
-                    </a>
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Text>
-                    <Button onClick={() => router.push(`/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`)}>
-                      <IconDeviceImac size={20} />
-                    </Button>
-                  </Text>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pelayanan Telunjuk Sakti</Title>
+          <Tooltip label="Tambah Layanan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() =>
+                router.push('/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/create')
+              }
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Nama</TableTh>
+                <TableTh style={{ width: '40%' }}>Link</TableTh>
+                <TableTh style={{ width: '30%' }}>Detail</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text></Box>
+
+                    </TableTd>
+                    <TableTd>
+                      <Box w={200}>
+                        <a href={item.link} target="_blank" rel="noopener noreferrer">
+                          <Text lineClamp={1} dangerouslySetInnerHTML={{ __html: item.deskripsi }} truncate="end" fz={"sm"} />
+                        </a>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(
+                            `/admin/desa/layanan/pelayanan_telunjuk_sakti_desa/${item.id}`
+                          )
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data layanan yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0);
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
@@ -153,3 +315,4 @@ function ListPelayananTelunjukSakti({ search }: { search: string }) {
 }
 
 export default PelayananTelunjukSakti;
+

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

@@ -4,7 +4,18 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
@@ -84,87 +95,104 @@ function EditPenghargaan() {
   }
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Penghargaan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Tombol Back + Title */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Penghargaan
+        </Title>
+      </Group>
+
+      {/* Card Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Input Judul */}
           <TextInput
+            label="Judul"
+            placeholder="Masukkan judul penghargaan"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
+            required
           />
 
+          {/* Input Juara */}
           <TextInput
+            label="Juara"
+            placeholder="Masukkan juara"
             value={formData.juara}
             onChange={(e) => setFormData({ ...formData, juara: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
-            placeholder="masukkan juara"
+            required
           />
+
+          {/* Upload Gambar */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Penghargaan
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 220, objectFit: 'contain', border: `1px solid ${colors['blue-button']}` }}
+                />
+              </Box>
+            )}
           </Box>
 
+          {/* Deskripsi */}
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Deskripsi
+            </Text>
             <EditEditor
               value={formData.deskripsi}
               onChange={(htmlContent) => {
@@ -174,7 +202,21 @@ function EditPenghargaan() {
             />
           </Box>
 
-          <Button onClick={handleSubmit}>Edit Penghargaan</Button>
+          {/* Tombol Simpan */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -4,105 +4,166 @@ import penghargaanState from '../../../_state/desa/penghargaan';
 import { useProxy } from 'valtio/utils';
 import { useParams, useRouter } from 'next/navigation';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
 import colors from '@/con/colors';
-import { IconArrowBack, IconX, IconEdit } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
 import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function DetailPenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState)
+  const statePenghargaan = useProxy(penghargaanState);
   const [modalHapus, setModalHapus] = useState(false);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const router = useRouter()
-  const params = useParams()
+  const router = useRouter();
+  const params = useParams();
 
   useShallowEffect(() => {
-    statePenghargaan.findUnique.load(params?.id as string)
-  }, [])
+    statePenghargaan.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      statePenghargaan.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/penghargaan")
+      statePenghargaan.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/desa/penghargaan');
     }
-  }
+  };
 
   if (!statePenghargaan.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = statePenghargaan.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Penghargaan</Text>
-          {statePenghargaan.findUnique.data ? (
-            <Paper key={statePenghargaan.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 400, md: 400, lg: 400 }} src={statePenghargaan.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{statePenghargaan.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Juara</Text>
-                  <Text fz={"lg"}>{statePenghargaan.findUnique.data?.juara}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: statePenghargaan.findUnique.data?.deskripsi }} />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Penghargaan
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Gambar
+                </Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.name || 'Gambar Penghargaan'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">
+                    Tidak ada gambar
+                  </Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Judul
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.name || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Juara
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data.juara || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Deskripsi
+                </Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                />
+              </Box>
+
+              <Group gap="sm" mt={10}>
+                <Tooltip label="Hapus Penghargaan" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (statePenghargaan.findUnique.data) {
-                        setSelectedId(statePenghargaan.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={statePenghargaan.delete.loading || !statePenghargaan.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Penghargaan" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (statePenghargaan.findUnique.data) {
-                        router.push(`/admin/desa/penghargaan/${statePenghargaan.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!statePenghargaan.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/desa/penghargaan/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus penghargaan ini?'
+        text="Apakah Anda yakin ingin menghapus penghargaan ini?"
       />
     </Box>
   );

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

@@ -1,7 +1,18 @@
-'use client'
+'use client';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -11,74 +22,88 @@ import { useProxy } from 'valtio/utils';
 import CreateEditor from '../../../_com/createEditor';
 import penghargaanState from '../../../_state/desa/penghargaan';
 
-
 function CreatePenghargaan() {
-  const statePenghargaan = useProxy(penghargaanState)
+  const statePenghargaan = useProxy(penghargaanState);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const router = useRouter()
+  const router = useRouter();
 
   const resetForm = () => {
     statePenghargaan.create.form = {
-      name: "",
-      juara: "",
-      deskripsi: "",
-      imageId: "",
-    }
-    setPreviewImage(null)
-    setFile(null)
-  }
+      name: '',
+      juara: '',
+      deskripsi: '',
+      imageId: '',
+    };
+    setPreviewImage(null);
+    setFile(null);
+  };
 
   const handleSubmit = async () => {
     if (!file) {
-      return toast.error("Silahkan pilih file gambar terlebih dahulu")
+      return toast.warn('Silakan pilih file gambar terlebih dahulu');
     }
 
     const res = await ApiFetch.api.fileStorage.create.post({
-      file: file,
-      name: file.name
-    })
+      file,
+      name: file.name,
+    });
+
+    const uploaded = res.data?.data;
 
-    const uploaded = res.data?.data
     if (!uploaded?.id) {
-      return toast.error("Gagal upload gambar")
+      return toast.error('Gagal mengunggah gambar, silakan coba lagi');
     }
 
-    statePenghargaan.create.form.imageId = uploaded.id
+    statePenghargaan.create.form.imageId = uploaded.id;
 
-    await statePenghargaan.create.create()
-    resetForm()
-    router.push("/admin/desa/penghargaan")
+    await statePenghargaan.create.create();
+    resetForm();
+    router.push('/admin/desa/penghargaan');
+  };
 
-  }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Create Penghargaan</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Penghargaan
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
             value={statePenghargaan.create.form.name}
-            onChange={(val) => {
-              statePenghargaan.create.form.name = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Penghargaan</Text>}
-            placeholder="masukkan nama penghargaan"
+            onChange={(val) => (statePenghargaan.create.form.name = val.target.value)}
+            label={<Text fz="sm" fw="bold">Nama Penghargaan</Text>}
+            placeholder="Masukkan nama penghargaan"
+            required
           />
+
           <TextInput
             value={statePenghargaan.create.form.juara}
-            onChange={(val) => {
-              statePenghargaan.create.form.juara = val.target.value;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Juara</Text>}
-            placeholder="masukkan juara"
+            onChange={(val) => (statePenghargaan.create.form.juara = val.target.value)}
+            label={<Text fz="sm" fw="bold">Juara</Text>}
+            placeholder="Masukkan juara"
+            required
           />
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold" mb={6}>Deskripsi</Text>
             <CreateEditor
               value={statePenghargaan.create.form.deskripsi}
               onChange={(htmlContent) => {
@@ -86,63 +111,67 @@ function CreatePenghargaan() {
               }}
             />
           </Box>
+
+          {/* Dropzone Upload */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fz="sm" fw="bold" mb={6}>Gambar</Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
+            )}
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Simpan</Button>
+
+          {/* Button Submit */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -2,21 +2,38 @@
 'use client'
 import penghargaanState from '@/app/admin/(dashboard)/_state/desa/penghargaan';
 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 { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../_com/header';
-import JudulList from '../../_com/judulList';
 
 function Penghargaan() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Penghargaan'
-        placeholder='pencarian'
+        title="Penghargaan"
+        placeholder="Cari nama atau deskripsi..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,125 +44,114 @@ function Penghargaan() {
 }
 
 function ListPenghargaan({ search }: { search: string }) {
-  const state = useProxy(penghargaanState)
-  const router = useRouter()
+  const state = useProxy(penghargaanState);
+  const router = useRouter();
 
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = state.findMany;
+  const { data, page, totalPages, loading, load } = state.findMany;
 
   useEffect(() => {
-    load(page, 10)
-  }, [])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = useMemo(() => {
-    if (!data) return [];
-    return data.filter(item => {
-      const keyword = search.toLowerCase();
-      return (
-        item.name?.toLowerCase().includes(keyword) ||
-        item.deskripsi?.toLowerCase().includes(keyword)
-      );
-    })
-  }, [data, search]);
+  const filteredData = data || []
 
-  // Handle loading state
+  // Loading state
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Penghargaan'
-            href='/admin/desa/penghargaan/create'
-          />
-          <Table striped withTableBorder withRowBorders>
+  return (
+    <Box py={10}>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>List Penghargaan</Title>
+          <Tooltip label="Tambah Penghargaan" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/desa/penghargaan/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
-                <TableTh>Nama</TableTh>
-                <TableTh>Deskripsi</TableTh>
-                <TableTh>Image</TableTh>
-                <TableTh>Detail</TableTh>
+                <TableTh style={{ width: '35%' }}>Nama</TableTh>
+                <TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '30%' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              <TableTr>
-                <TableTd colSpan={4}>
-                  <Text ta="center">Tidak ada data</Text>
-                </TableTd>
-              </TableTr>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text fw={500} truncate="end" lineClamp={1}>
+                          {item.name}
+                        </Text>
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Box w={200}>
+                        <Text
+                          truncate="end"
+                          lineClamp={1}
+                          fz="sm"
+                          c="dimmed"
+                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        />
+                      </Box>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/desa/penghargaan/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">
+                        Tidak ada data penghargaan yang cocok
+                      </Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
             </TableTbody>
           </Table>
-        </Paper>
-      </Box>
-    )
-  }
-
-  return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Penghargaan'
-          href='/admin/desa/penghargaan/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama</TableTh>
-              <TableTh>Deskripsi</TableTh>
-              <TableTh>Image</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={100}>
-                    <Text lineClamp={1} truncate="end" fz={"sm"}>{item.name}</Text>
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Box w={100}>
-                    <Text lineClamp={1} truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                  </Box>
-                </TableTd>
-                <TableTd>
-                  <Image w={100} src={item.image?.link} alt="gambar" />
-                </TableTd>
-                <TableTd>
-                  <Text>
-                    <Button onClick={() => router.push(`/admin/desa/penghargaan/${item.id}`)}>
-                      <IconDeviceImac size={20} />
-                    </Button>
-                  </Text>
-                </TableTd>
-              </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0);
+            load(newPage, 10, search);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/desa/pengumuman/_com/layoutTabs.tsx

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconListDetails, IconCategory } from '@tabler/icons-react';
 
 function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
     const router = useRouter()
@@ -12,16 +13,21 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
         {
             label: "List Pengumuman",
             value: "listpengumuman",
-            href: "/admin/desa/pengumuman/list-pengumuman"
+            href: "/admin/desa/pengumuman/list-pengumuman",
+            icon: <IconListDetails size={18} stroke={1.8} />,
+            tooltip: "Lihat semua daftar pengumuman"
         },
         {
             label: "Kategori Pengumuman",
             value: "kategoripengumuman",
-            href: "/admin/desa/pengumuman/kategori-pengumuman"
+            href: "/admin/desa/pengumuman/kategori-pengumuman",
+            icon: <IconCategory size={18} stroke={1.8} />,
+            tooltip: "Kelola kategori pengumuman"
         },
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
         const tab = tabs.find(t => t.value === value)
@@ -39,24 +45,59 @@ function LayoutTabsLayanan({ children }: { children: React.ReactNode }) {
     }, [pathname])
 
     return (
-        <Stack>
-            <Title order={3}>Pengumuman</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>
+        <Stack gap="lg">
+            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Pengumuman</Title>
+            <Tabs
+                color={colors['blue-button']}
+                variant='pills'
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        {/* Konten dummy, bisa diganti sesuai routing */}
+                        <>{children}</>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }
 
-export default LayoutTabsLayanan;
+export default LayoutTabsLayanan;

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

@@ -1,8 +1,18 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip,
+  Text,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -10,67 +20,108 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditKategoriPengumuman() {
-  const editState = useProxy(stateDesaPengumuman.category)
+  const editState = useProxy(stateDesaPengumuman.category);
   const router = useRouter();
   const params = useParams();
+
   const [formData, setFormData] = useState({
-      name: editState.update.form.name || '',
-    });
+    name: editState.update.form.name || '',
+  });
 
   useEffect(() => {
-      const loadKategori = async () => {
-        const id = params?.id as string;
-        if (!id) return;
-  
-        try {
-          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
-          if (data) {
-            setFormData({
-              name: data.name || '',
-            });
-          }
-        } catch (error) {
-          console.error("Error loading kategori Pengumuman:", error);
-          toast.error("Gagal memuat data kategori Pengumuman");
-        }
-      };
-  
-      loadKategori();
-    }, [params?.id]);
+    const loadKategori = async () => {
+      const id = params?.id as string;
+      if (!id) return;
 
-    const handleSubmit = async () => {
       try {
-        editState.update.form = {
-          ...editState.update.form,
-          name: formData.name,
-        };
-        await editState.update.update();
-        toast.success('Kategori Pengumuman berhasil diperbarui!');
-        router.push('/admin/desa/pengumuman/kategori-pengumuman');
+        const data = await editState.update.load(id);
+        if (data) {
+          setFormData({
+            name: data.name || '',
+          });
+        }
       } catch (error) {
-        console.error('Error updating kategori Pengumuman:', error);
-        toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
+        console.error('Error loading kategori Pengumuman:', error);
+        toast.error('Gagal memuat data kategori Pengumuman');
       }
     };
 
+    loadKategori();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.update.form = {
+        ...editState.update.form,
+        name: formData.name,
+      };
+
+      await editState.update.update();
+      toast.success('Kategori Pengumuman berhasil diperbarui!');
+      router.push('/admin/desa/pengumuman/kategori-pengumuman');
+    } catch (error) {
+      console.error('Error updating kategori Pengumuman:', error);
+      toast.error('Terjadi kesalahan saat memperbarui kategori Pengumuman');
+    }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Kategori Pengumuman</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kategori Pengumuman
+        </Title>
+      </Group>
+
+      {/* Form */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label={
+              <Text fz="sm" fw="bold">
+                Nama Kategori Pengumuman
+              </Text>
+            }
+            placeholder="Masukkan nama kategori Pengumuman"
             value={formData.name}
-            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Pengumuman</Text>}
-            placeholder="masukkan nama kategori Pengumuman"
+            onChange={(e) =>
+              setFormData({ ...formData, name: e.target.value })
+            }
+            required
           />
 
-          <Button onClick={handleSubmit}>Simpan</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,50 +1,87 @@
 'use client'
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
-
-
 function CreateKategoriPengumuman() {
-  const createState = useProxy(stateDesaPengumuman.category)
+  const createState = useProxy(stateDesaPengumuman.category);
   const router = useRouter();
 
   const resetForm = () => {
     createState.create.form = {
-      name: "",
+      name: '',
     };
   };
 
   const handleSubmit = async () => {
     await createState.create.create();
     resetForm();
-    router.push("/admin/desa/pengumuman/kategori-pengumuman")
+    router.push('/admin/desa/pengumuman/kategori-pengumuman');
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan back button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Pengumuman
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kategori Pengumuman</Title>
+      {/* Form utama */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Pengumuman</Text>}
-            placeholder='Masukkan nama kategori Pengumuman'
-            value={createState.create.form.name}
-            onChange={(val) => {
-              createState.create.form.name = val.target.value;
-            }}
+            label={<Text fw="bold" fz="sm">Nama Kategori Pengumuman</Text>}
+            placeholder="Masukkan nama kategori pengumuman"
+            value={createState.create.form.name || ''}
+            onChange={(e) => (createState.create.form.name = e.target.value)}
+            required
           />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,25 +1,26 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import {
+  Box, Button, Center, Paper, Skeleton, Stack,
+  Table, TableTbody, TableTd, TableTh, TableThead, TableTr,
+  Text, Title, Tooltip, Pagination
+} from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash, IconPlus } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import stateDesaPengumuman from '../../../_state/desa/pengumuman';
 
-
-
 function KategoriPengumuman() {
   const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
         title='Kategori Pengumuman'
-        placeholder='pencarian'
+        placeholder='Cari nama kategori...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -34,87 +35,121 @@ function ListKategoriPengumuman({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
+  const { data, page, totalPages, loading, load } = listDataState.findMany;
 
   useEffect(() => {
-    listDataState.findMany.load()
-  }, [])
+    load(1, 10, search)
+  }, [search])
 
   const handleDelete = () => {
     if (selectedId) {
       listDataState.delete.delete(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-
-      listDataState.findMany.load()
+      load(page, 10, search)
     }
   }
 
-  const filteredData = (listDataState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!listDataState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Stack>
-        <JudulList
-          title='List Kategori Pengumuman'
-          href='/admin/desa/pengumuman/kategori-pengumuman/create'
-        />
+          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
+            <Title order={4}>List Kategori Pengumuman</Title>
+            <Tooltip label="Tambah Kategori Pengumuman" withArrow>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/desa/pengumuman/kategori-pengumuman/create')}
+              >
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Box>
+
           <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
               <TableThead>
                 <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Hapus</TableTh>
+                  <TableTh style={{ width: '10%' }}>No</TableTh>
+                  <TableTh style={{ width: '60%' }}>Nama</TableTh>
+                  <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                  <TableTh style={{ width: '15%' }}>Hapus</TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
-                {filteredData.map((item, index) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>{item.name}</TableTd>
-                    <TableTd>
-                      <Button color='green' onClick={() => router.push(`/admin/desa/pengumuman/kategori-pengumuman/${item.id}`)}>
-                        <IconEdit size={20} />
-                      </Button>
-                    </TableTd>
-                    <TableTd>
-                      <Button
-                        color='red'
-                        disabled={listDataState.delete.loading}
-                        onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
-                        }}>
-                        <IconTrash size={20} />
-                      </Button>
+                {filteredData.length > 0 ? (
+                  filteredData.map((item, index) => (
+                    <TableTr key={item.id}>
+                      <TableTd>
+                        <Text fz="sm">{(page - 1) * 10 + index + 1}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text truncate lineClamp={1}>{item.name}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Tooltip label="Edit Kategori Pengumuman" withArrow>
+                          <Button
+                            variant='light'
+                            color='green'
+                            onClick={() => router.push(`/admin/desa/pengumuman/kategori-pengumuman/${item.id}`)}
+                          >
+                            <IconEdit size={20} />
+                          </Button>
+                        </Tooltip>
+                      </TableTd>
+                      <TableTd>
+                        <Tooltip label="Hapus Kategori Pengumuman" withArrow>
+                          <Button
+                            variant='light'
+                            color='red'
+                            disabled={listDataState.delete.loading}
+                            onClick={() => {
+                              setSelectedId(item.id)
+                              setModalHapus(true)
+                            }}>
+                            <IconTrash size={20} />
+                          </Button>
+                        </Tooltip>
+                      </TableTd>
+                    </TableTr>
+                  ))
+                ) : (
+                  <TableTr>
+                    <TableTd colSpan={4}>
+                      <Center py={20}>
+                        <Text c="dimmed">Tidak ada data kategori pengumuman yang cocok</Text>
+                      </Center>
                     </TableTd>
                   </TableTr>
-                ))}
+                )}
               </TableTbody>
             </Table>
           </Box>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
+      <Center mt="md">
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage, 10, search)}
+          total={totalPages}
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

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

@@ -7,12 +7,14 @@ import colors from "@/con/colors";
 import {
   Box,
   Button,
+  Group,
   Paper,
   Select,
   Stack,
   Text,
   TextInput,
-  Title
+  Title,
+  Tooltip,
 } from "@mantine/core";
 import { IconArrowBack } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
@@ -20,34 +22,34 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
 
-
 function EditPengumuman() {
   const editState = useProxy(stateDesaPengumuman);
   const router = useRouter();
   const params = useParams();
 
   const [formData, setFormData] = useState({
-    judul: editState.pengumuman.edit.form.judul || '',
-    deskripsi: editState.pengumuman.edit.form.deskripsi || '',
-    categoryPengumumanId: editState.pengumuman.edit.form.categoryPengumumanId || '',
-    content: editState.pengumuman.edit.form.content || ''
+    judul: editState.pengumuman.edit.form.judul || "",
+    deskripsi: editState.pengumuman.edit.form.deskripsi || "",
+    categoryPengumumanId:
+      editState.pengumuman.edit.form.categoryPengumumanId || "",
+    content: editState.pengumuman.edit.form.content || "",
   });
 
   // Load pengumuman by id saat pertama kali
   useEffect(() => {
-    editState.category.findMany.load()
+    editState.category.findMany.load();
     const loadpengumuman = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await stateDesaPengumuman.pengumuman.edit.load(id); // akses langsung, bukan dari proxy
+        const data = await stateDesaPengumuman.pengumuman.edit.load(id);
         if (data) {
           setFormData({
-            judul: data.judul || '',
-            deskripsi: data.deskripsi || '',
-            categoryPengumumanId: data.categoryPengumumanId || '',
-            content: data.content || '',
+            judul: data.judul || "",
+            deskripsi: data.deskripsi || "",
+            categoryPengumumanId: data.categoryPengumumanId || "",
+            content: data.content || "",
           });
         }
       } catch (error) {
@@ -57,21 +59,18 @@ function EditPengumuman() {
     };
 
     loadpengumuman();
-  }, [params?.id]); // ✅ hapus editState dari dependency
+  }, [params?.id]);
 
   const handleSubmit = async () => {
-
     try {
-      // edit global state with form data
+      // update global state
       editState.pengumuman.edit.form = {
         ...editState.pengumuman.edit.form,
-        judul: formData.judul,
-        deskripsi: formData.deskripsi,
-        content: formData.content,
-        categoryPengumumanId: formData.categoryPengumumanId || ''
+        ...formData,
       };
+
       await editState.pengumuman.edit.update();
-      toast.success("pengumuman berhasil diperbarui!");
+      toast.success("Pengumuman berhasil diperbarui!");
       router.push("/admin/desa/pengumuman/list-pengumuman");
     } catch (error) {
       console.error("Error updating pengumuman:", error);
@@ -80,57 +79,97 @@ function EditPengumuman() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit pengumuman</Title>
+    <Box px={{ base: "sm", md: "lg" }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors["blue-button"]} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Pengumuman
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors["white-1"]}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: "1px solid #e0e0e0" }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Judul Pengumuman"
+            placeholder="Masukkan judul"
             value={formData.judul}
             onChange={(e) => setFormData({ ...formData, judul: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
+            required
           />
 
           <TextInput
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi"
             value={formData.deskripsi}
-            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            onChange={(e) =>
+              setFormData({ ...formData, deskripsi: e.target.value })
+            }
+            required
           />
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
-            <EditEditor
-              value={formData.content}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, content: htmlContent }));
-                editState.pengumuman.edit.form.content = htmlContent;
-              }}
-            />
-          </Box>
 
           <Select
             value={formData.categoryPengumumanId}
-            onChange={(val) => setFormData({ ...formData, categoryPengumumanId: val || "" })}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-            placeholder='Pilih kategori'
+            onChange={(val) =>
+              setFormData({ ...formData, categoryPengumumanId: val || "" })
+            }
+            label="Kategori"
+            placeholder="Pilih kategori"
             data={
               editState.category.findMany.data?.map((v) => ({
                 value: v.id,
-                label: v.name
+                label: v.name,
               })) || []
             }
             clearable
             searchable
             required
-            error={!formData.categoryPengumumanId ? "Pilih kategori" : undefined}
+            error={
+              !formData.categoryPengumumanId ? "Pilih kategori" : undefined
+            }
           />
 
-          <Button onClick={handleSubmit}>Edit pengumuman</Button>
+          <Box>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten Lengkap
+            </Text>
+            <EditEditor
+              value={formData.content}
+              onChange={(htmlContent) =>
+                setFormData({ ...formData, content: htmlContent })
+              }
+            />
+          </Box>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
+                color: "#fff",
+                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,116 +1,163 @@
 'use client'
 
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-
 import colors from '@/con/colors';
-import { useProxy } from 'valtio/utils';
-import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Skeleton,
+  Stack,
+  Text,
+  Tooltip,
+} from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
 import { useState } from 'react';
+import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
+import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 
-
-function DetailPengumuman() {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const params = useParams()
-  const router = useRouter()
+export default function DetailPengumuman() {
+  const pengumumanState = useProxy(stateDesaPengumuman);
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const params = useParams();
+  const router = useRouter();
 
   useShallowEffect(() => {
-    pengumumanState.pengumuman.findUnique.load(params?.id as string)
-  }, [])
-
+    pengumumanState.pengumuman.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      pengumumanState.pengumuman.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/pengumuman/list-pengumuman")
+      pengumumanState.pengumuman.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push('/admin/desa/pengumuman/list-pengumuman');
     }
-  }
+  };
 
   if (!pengumumanState.pengumuman.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={400} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = pengumumanState.pengumuman.findUnique.data;
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: "100%", md: "100%", lg: "50%" }} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Pengumuman</Text>
-          {pengumumanState.pengumuman.findUnique.data ? (
-            <Paper key={pengumumanState.pengumuman.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
-                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.CategoryPengumuman?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.judul}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"}>{pengumumanState.pengumuman.findUnique.data?.deskripsi}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Konten</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: pengumumanState.pengumuman.findUnique.data?.content }} />
-                </Box>
-                <Flex gap={"xs"} mt={10}>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '60%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Pengumuman
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Kategori
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.CategoryPengumuman?.name || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Judul
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.judul || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Deskripsi
+                </Text>
+                <Text fz="md" c="dimmed">
+                  {data?.deskripsi || '-'}
+                </Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">
+                  Konten
+                </Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{
+                    __html: data?.content || '-',
+                  }}
+                />
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Pengumuman" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (pengumumanState.pengumuman.findUnique.data) {
-                        setSelectedId(pengumumanState.pengumuman.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={pengumumanState.pengumuman.delete.loading || !pengumumanState.pengumuman.findUnique.data}
-                    color={"red"}
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
-                    <IconX size={20} />
+                    <IconTrash size={20} />
                   </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Pengumuman" withArrow position="top">
                   <Button
-                    onClick={() => {
-                      if (pengumumanState.pengumuman.findUnique.data) {
-                        router.push(`/admin/desa/pengumuman/list-pengumuman/${pengumumanState.pengumuman.findUnique.data.id}/edit`);
-                      }
-                    }}
-                    disabled={!pengumumanState.pengumuman.findUnique.data}
-                    color={"green"}
+                    color="green"
+                    onClick={() =>
+                      router.push(
+                        `/admin/desa/pengumuman/list-pengumuman/${data.id}/edit`
+                      )
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
                   >
                     <IconEdit size={20} />
                   </Button>
-                </Flex>
-              </Stack>
-            </Paper>
-          ) : null}
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus pengumuman ini?'
+        text="Apakah anda yakin ingin menghapus pengumuman ini?"
       />
     </Box>
   );
 }
-
-export default DetailPengumuman;

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

@@ -1,79 +1,110 @@
-'use client'
+'use client';
+
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import stateDesaPengumuman from '@/app/admin/(dashboard)/_state/desa/pengumuman';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
-
 function CreatePengumuman() {
-  const pengumumanState = useProxy(stateDesaPengumuman)
+  const pengumumanState = useProxy(stateDesaPengumuman);
   const router = useRouter();
 
   useShallowEffect(() => {
-    pengumumanState.category.findMany.load()
-  }, [])
+    pengumumanState.category.findMany.load();
+  }, []);
 
   const handleSubmit = async () => {
-    await pengumumanState.pengumuman.create.create()
-    resetForm()
-    router.push("/admin/desa/pengumuman/list-pengumuman")
-  }
+    await pengumumanState.pengumuman.create.create();
+    resetForm();
+    router.push('/admin/desa/pengumuman/list-pengumuman');
+  };
 
   const resetForm = () => {
     pengumumanState.pengumuman.create.form = {
-      judul: "",
-      deskripsi: "",
-      content: "",
-      categoryPengumumanId: "",
+      judul: '',
+      deskripsi: '',
+      content: '',
+      categoryPengumumanId: '',
     };
   };
-  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 Pengumuman</Title>
+  return (
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Pengumuman
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Judul */}
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
-            onChange={(val) => {
-              pengumumanState.pengumuman.create.form.judul = val.target.value
-            }}
+            value={pengumumanState.pengumuman.create.form.judul}
+            onChange={(val) => (pengumumanState.pengumuman.create.form.judul = val.target.value)}
+            label={<Text fz="sm" fw="bold">Judul</Text>}
+            placeholder="Masukkan judul pengumuman"
+            required
           />
+
+          {/* Kategori */}
           <Select
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-            placeholder='Pilih kategori'
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="Pilih kategori"
+            value={pengumumanState.pengumuman.create.form.categoryPengumumanId || ""}
+            onChange={(val) => {
+              pengumumanState.pengumuman.create.form.categoryPengumumanId = val ?? "";
+            }}
             data={pengumumanState.category.findMany.data?.map((item) => ({
               label: item.name,
               value: item.id,
             }))}
-            onChange={(val) => {
-              const selected = pengumumanState.category.findMany.data?.find((item) => item.id === val);
-              if (selected) {
-                pengumumanState.pengumuman.create.form.categoryPengumumanId = selected.id;
-              }
-            }}
             searchable
             nothingFoundMessage="Tidak ditemukan"
           />
+
+          {/* Deskripsi Singkat */}
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Deskripsi Singkat</Text>}
-            placeholder='Masukkan deskripsi singkat'
-            onChange={(val) => {
-              pengumumanState.pengumuman.create.form.deskripsi = val.target.value
-            }}
+            value={pengumumanState.pengumuman.create.form.deskripsi}
+            onChange={(val) => (pengumumanState.pengumuman.create.form.deskripsi = val.target.value)}
+            label={<Text fz="sm" fw="bold">Deskripsi Singkat</Text>}
+            placeholder="Masukkan deskripsi singkat"
+            required
           />
+
+          {/* Konten Editor */}
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten Lengkap
+            </Text>
             <CreateEditor
               value={pengumumanState.pengumuman.create.form.content}
               onChange={(htmlContent) => {
@@ -82,8 +113,20 @@ function CreatePengumuman() {
             />
           </Box>
 
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+          {/* Tombol Submit */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,6 +1,25 @@
 'use client'
+
 import colors from '@/con/colors';
-import { Box, Button, Center, Grid, GridCol, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { IconCircleDashedPlus, IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -9,14 +28,13 @@ import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
 import stateDesaPengumuman from '../../../_state/desa/pengumuman';
 
-
 function Pengumuman() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='List Pengumuman'
-        placeholder='pencarian'
+        title="Pengumuman Desa"
+        placeholder="Cari judul atau kategori..."
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -27,86 +45,107 @@ function Pengumuman() {
 }
 
 function ListPengumuman({ search }: { search: string }) {
-  const pengumumanState = useProxy(stateDesaPengumuman)
-  const router = useRouter()
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = pengumumanState.pengumuman.findMany;
+  const pengumumanState = useProxy(stateDesaPengumuman);
+  const router = useRouter();
+
+  const { data, page, totalPages, loading, load } = pengumumanState.pengumuman.findMany;
 
   useShallowEffect(() => {
-    load(page, 10, search)
-  }, [page, search])
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (data || [])
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Grid>
-            <GridCol span={{ base: 12, md: 11 }}>
-              <Text fz={"xl"} fw={"bold"}>List Pengumuman</Text>
-            </GridCol>
-            <GridCol span={{ base: 12, md: 1 }}>
-              <Button onClick={() => router.push("/admin/desa/pengumuman/list-pengumuman/create")} bg={colors['blue-button']}>
-                <IconCircleDashedPlus size={25} />
-              </Button>
-            </GridCol>
-          </Grid>
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh w={250}>Judul</TableTh>
-                  <TableTh w={250}>Kategori</TableTh>
-                  <TableTh w={200}>Detail</TableTh>
-
-                </TableTr>
-              </TableThead>
-              <TableTbody >
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Pengumuman</Title>
+          <Tooltip label="Tambah Pengumuman" withArrow>
+            <Button
+              leftSection={<IconCircleDashedPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/desa/pengumuman/list-pengumuman/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '40%' }}>Judul</TableTh>
+                <TableTh style={{ width: '30%' }}>Kategori</TableTh>
+                <TableTh style={{ width: '20%' }}>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
-                  <TableTd >
-                    <Box w={100}>
-                      <Text truncate="end" fz={"sm"}>{item.judul}</Text>
-                    </Box>  
-                  </TableTd>
-                  <TableTd >{item.CategoryPengumuman?.name}</TableTd>
-                  <TableTd>
-                    <Button bg={"green"} onClick={() => router.push(`/admin/desa/pengumuman/list-pengumuman/${item.id}`)}>
-                      <IconDeviceImacCog size={25} />
-                    </Button>
+                    <TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.judul}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed">
+                        {item.CategoryPengumuman?.name || '-'}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() =>
+                          router.push(`/admin/desa/pengumuman/list-pengumuman/${item.id}`)
+                        }
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada pengumuman yang cocok</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default Pengumuman;

src/app/admin/(dashboard)/desa/potensi/_lib/layoutTabs.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconCategory, IconListCheck } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
@@ -12,17 +13,21 @@ function LayoutTabsPotensi({ children }: { children: React.ReactNode }) {
         {
             label: "List Potensi",
             value: "list_potensi",
-            href: "/admin/desa/potensi/list-potensi"
+            href: "/admin/desa/potensi/list-potensi",
+            icon: <IconListCheck size={18} stroke={1.8} />,
+            tooltip: "Lihat semua potensi desa"
         },
         {
             label: "Kategori Potensi",
             value: "kategori_potensi",
-            href: "/admin/desa/potensi/kategori-potensi"
+            href: "/admin/desa/potensi/kategori-potensi",
+            icon: <IconCategory size={18} stroke={1.8} />,
+            tooltip: "Kelola kategori potensi"
         },
-        
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
         const tab = tabs.find(t => t.value === value)
@@ -40,24 +45,59 @@ function LayoutTabsPotensi({ children }: { children: React.ReactNode }) {
     }, [pathname])
 
     return (
-        <Stack>
-            <Title order={3}>Potensi</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>
+        <Stack gap="lg">
+            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Potensi</Title>
+            <Tabs
+                color={colors['blue-button']}
+                variant='pills'
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        {/* Konten dummy, bisa diganti sesuai routing */}
+                        <>{children}</>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }
 
-export default LayoutTabsPotensi;
+export default LayoutTabsPotensi;

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

@@ -1,8 +1,17 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
@@ -10,67 +19,95 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function EditKategoriPotensi() {
-  const editState = useProxy(potensiDesaState.kategoriPotensi)
+  const editState = useProxy(potensiDesaState.kategoriPotensi);
   const router = useRouter();
   const params = useParams();
+
   const [formData, setFormData] = useState({
-      nama: editState.update.form.nama || '',
-    });
+    nama: editState.update.form.nama || '',
+  });
 
   useEffect(() => {
-      const loadKategori = async () => {
-        const id = params?.id as string;
-        if (!id) return;
-  
-        try {
-          const data = await editState.update.load(id); // akses langsung, bukan dari proxy
-          if (data) {
-            setFormData({
-              nama: data.nama || '',
-            });
-          }
-        } catch (error) {
-          console.error("Error loading kategori potensi:", error);
-          toast.error("Gagal memuat data kategori potensi");
-        }
-      };
-  
-      loadKategori();
-    }, [params?.id]);
+    const loadKategori = async () => {
+      const id = params?.id as string;
+      if (!id) return;
 
-    const handleSubmit = async () => {
       try {
-        editState.update.form = {
-          ...editState.update.form,
-          nama: formData.nama,
-        };
-        await editState.update.update();
-        toast.success('Kategori Potensi berhasil diperbarui!');
-        router.push('/admin/desa/potensi/kategori-potensi');
+        const data = await editState.update.load(id);
+        if (data) {
+          setFormData({
+            nama: data.nama || '',
+          });
+        }
       } catch (error) {
-        console.error('Error updating kategori potensi:', error);
-        toast.error('Terjadi kesalahan saat memperbarui kategori potensi');
+        console.error('Error loading kategori potensi:', error);
+        toast.error('Gagal memuat data kategori potensi');
       }
     };
 
+    loadKategori();
+  }, [params?.id]);
+
+  const handleSubmit = async () => {
+    try {
+      editState.update.form = {
+        ...editState.update.form,
+        nama: formData.nama,
+      };
+
+      await editState.update.update();
+      toast.success('Kategori Potensi berhasil diperbarui!');
+      router.push('/admin/desa/potensi/kategori-potensi');
+    } catch (error) {
+      console.error('Error updating kategori potensi:', error);
+      toast.error('Terjadi kesalahan saat memperbarui kategori potensi');
+    }
+  };
+
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors["blue-button"]} size={30} />
-        </Button>
-      </Box>
-      <Paper bg={"white"} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Kategori Potensi</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Kategori Potensi
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Nama Kategori Potensi"
+            placeholder="Masukkan nama kategori potensi"
             value={formData.nama}
             onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama Kategori Potensi</Text>}
-            placeholder="masukkan nama kategori potensi"
+            required
           />
 
-          <Button onClick={handleSubmit}>Simpan</Button>
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,50 +1,87 @@
-'use client'
+'use client';
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
-import { Box, Button, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { IconArrowBack } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 
-
-
 function CreateKategoriPotensi() {
-  const createState = useProxy(potensiDesaState.kategoriPotensi)
+  const createState = useProxy(potensiDesaState.kategoriPotensi);
   const router = useRouter();
 
   const resetForm = () => {
     createState.create.form = {
-      nama: "",
+      nama: '',
     };
   };
 
   const handleSubmit = async () => {
     await createState.create.create();
     resetForm();
-    router.push("/admin/desa/potensi/kategori-potensi")
+    router.push('/admin/desa/potensi/kategori-potensi');
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header dengan back button */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button
+            variant="subtle"
+            onClick={() => router.back()}
+            p="xs"
+            radius="md"
+          >
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Potensi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kategori Potensi</Title>
+      {/* Form utama */}
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Potensi</Text>}
-            placeholder='Masukkan nama kategori Potensi'
-            value={createState.create.form.nama}
-            onChange={(val) => {
-              createState.create.form.nama = val.target.value;
-            }}
+            label={<Text fw="bold" fz="sm">Nama Kategori Potensi</Text>}
+            placeholder="Masukkan nama kategori potensi"
+            value={createState.create.form.nama || ''}
+            onChange={(e) => (createState.create.form.nama = e.target.value)}
+            required
           />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,17 +1,14 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconEdit, IconSearch, IconTrash } from '@tabler/icons-react';
+import { Box, Button, Center, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip, Pagination } from '@mantine/core';
+import { IconEdit, IconSearch, IconTrash, IconPlus } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import potensiDesaState from '../../../_state/desa/potensi';
-
-
+import { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 
 function KategoriPotensi() {
   const [search, setSearch] = useState('');
@@ -19,7 +16,7 @@ function KategoriPotensi() {
     <Box>
       <HeaderSearch
         title='Kategori Potensi'
-        placeholder='pencarian'
+        placeholder='Cari nama kategori...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -34,87 +31,113 @@ function ListKategoriPotensi({ search }: { search: string }) {
   const router = useRouter();
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
+  const { data, page, totalPages, loading, load } = listDataState.findMany;
 
   useEffect(() => {
-    listDataState.findMany.load()
-  }, [])
+    load(1, 10, search)
+  }, [search])
 
   const handleDelete = () => {
     if (selectedId) {
       listDataState.delete.delete(selectedId)
       setModalHapus(false)
       setSelectedId(null)
-
-      listDataState.findMany.load()
+      load(page, 10, search)
     }
   }
 
-  const filteredData = (listDataState.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.nama.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  if (!listDataState.findMany.data) {
+  if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton h={500} />
+        <Skeleton height={500} radius="md" />
       </Stack>
     )
   }
+
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p="md">
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
         <Stack>
-        <JudulList
-          title='List Kategori Potensi'
-          href='/admin/desa/potensi/kategori-potensi/create'
-        />
+          <Box style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 15 }}>
+            <Title order={4}>List Kategori Potensi</Title>
+            <Tooltip label="Tambah Kategori Potensi" withArrow>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                variant="light"
+                onClick={() => router.push('/admin/desa/potensi/kategori-potensi/create')}
+              >
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Box>
+
           <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
+            <Table highlightOnHover striped withRowBorders style={{ minWidth: '700px' }}>
               <TableThead>
                 <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Hapus</TableTh>
+                  <TableTh style={{ width: '10%' }}>No</TableTh>
+                  <TableTh style={{ width: '60%' }}>Nama</TableTh>
+                  <TableTh style={{ width: '15%' }}>Edit</TableTh>
+                  <TableTh style={{ width: '15%' }}>Hapus</TableTh>
                 </TableTr>
               </TableThead>
               <TableTbody>
-                {filteredData.map((item, index) => (
-                  <TableTr key={item.id}>
-                    <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{index + 1}</Text>
-                      </Box>
-                    </TableTd>
-                    <TableTd>{item.nama}</TableTd>
-                    <TableTd>
-                      <Button color='green' onClick={() => router.push(`/admin/desa/potensi/kategori-potensi/${item.id}`)}>
-                        <IconEdit size={20} />
-                      </Button>
-                    </TableTd>
-                    <TableTd>
-                      <Button
-                        color='red'
-                        disabled={listDataState.delete.loading}
-                        onClick={() => {
-                          setSelectedId(item.id)
-                          setModalHapus(true)
-                        }}>
-                        <IconTrash size={20} />
-                      </Button>
+                {filteredData.length > 0 ? (
+                  filteredData.map((item, index) => (
+                    <TableTr key={item.id}>
+                      <TableTd>
+                        <Text fz="sm">{(page - 1) * 10 + index + 1}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Text truncate lineClamp={1}>{item.nama}</Text>
+                      </TableTd>
+                      <TableTd>
+                        <Button variant='light' color='green' onClick={() => router.push(`/admin/desa/potensi/kategori-potensi/${item.id}`)}>
+                          <IconEdit size={20} />
+                        </Button>
+                      </TableTd>
+                      <TableTd>
+                        <Button
+                          variant='light'
+                          color='red'
+                          disabled={listDataState.delete.loading}
+                          onClick={() => {
+                            setSelectedId(item.id)
+                            setModalHapus(true)
+                          }}>
+                          <IconTrash size={20} />
+                        </Button>
+                      </TableTd>
+                    </TableTr>
+                  ))
+                ) : (
+                  <TableTr>
+                    <TableTd colSpan={4}>
+                      <Center py={20}>
+                        <Text color="dimmed">Tidak ada data kategori potensi yang cocok</Text>
+                      </Center>
                     </TableTd>
                   </TableTr>
-                ))}
+                )}
               </TableTbody>
             </Table>
           </Box>
         </Stack>
       </Paper>
 
-      {/* Modal Konfirmasi Hapus */}
+      <Center mt="md">
+        <Pagination
+          value={page}
+          onChange={(newPage) => load(newPage, 10, search)}
+          total={totalPages}
+          color="blue"
+          radius="md"
+        />
+      </Center>
+
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}

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

@@ -5,7 +5,19 @@ import EditEditor from "@/app/admin/(dashboard)/_com/editEditor";
 import potensiDesaState from "@/app/admin/(dashboard)/_state/desa/potensi";
 import colors from "@/con/colors";
 import ApiFetch from "@/lib/api-fetch";
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from "@mantine/core";
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from "@mantine/core";
 import { Dropzone } from "@mantine/dropzone";
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from "@tabler/icons-react";
 import { useParams, useRouter } from "next/navigation";
@@ -13,38 +25,36 @@ import { useEffect, useState } from "react";
 import { toast } from "react-toastify";
 import { useProxy } from "valtio/utils";
 
-
-
 function EditPotensi() {
-  const potensiState = useProxy(potensiDesaState.potensiDesa)
-  const router = useRouter()
-  const params = useParams()
+  const potensiState = useProxy(potensiDesaState.potensiDesa);
+  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: '',
-    deskripsi: '',
-    kategoriId: '',
-    content: '',
-    imageId: ''
+    name: "",
+    deskripsi: "",
+    kategoriId: "",
+    content: "",
+    imageId: "",
   });
 
   useEffect(() => {
-    potensiDesaState.kategoriPotensi.findMany.load()
+    potensiDesaState.kategoriPotensi.findMany.load();
     const loadPotensi = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await potensiState.edit.load(id); // ambil data dari API
+        const data = await potensiState.edit.load(id);
         if (data) {
           setFormData({
-            name: data.name || '',
-            deskripsi: data.deskripsi || '',
-            kategoriId: data.kategoriId || '',
-            content: data.content || '',
-            imageId: data.imageId || '',
+            name: data.name || "",
+            deskripsi: data.deskripsi || "",
+            kategoriId: data.kategoriId || "",
+            content: data.content || "",
+            imageId: data.imageId || "",
           });
 
           if (data?.image?.link) {
@@ -62,13 +72,9 @@ function EditPotensi() {
 
   const handleSubmit = async () => {
     try {
-      // Sinkronkan semua data dari formData ke state global
       potensiState.edit.form = {
         ...potensiState.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
-        kategoriId: formData.kategoriId,
-        content: formData.content,
+        ...formData,
       };
 
       if (file) {
@@ -92,44 +98,52 @@ function EditPotensi() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper bg={colors["white-1"]} p={"md"} w={{ base: "100%", md: "50%" }}>
-        <Stack gap={"xs"}>
-          <Title order={3}>Edit Potensi</Title>
+    <Box px={{ base: "sm", md: "lg" }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors["blue-button"]} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Potensi Desa
+        </Title>
+      </Group>
+
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors["white-1"]}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: "1px solid #e0e0e0" }}
+      >
+        <Stack gap="md">
           <TextInput
+            label="Judul Potensi"
+            placeholder="Masukkan judul"
             value={formData.name}
-            onChange={(e) => {
-              const val = e.target.value;
-              setFormData((prev) => ({ ...prev, name: val }));
-              potensiState.edit.form.name = val;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Judul</Text>}
-            placeholder="masukkan judul"
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
           />
+
           <TextInput
+            label="Deskripsi Singkat"
+            placeholder="Masukkan deskripsi"
             value={formData.deskripsi}
-            onChange={(e) => {
-              const val = e.target.value;
-              setFormData((prev) => ({ ...prev, deskripsi: val }));
-              potensiState.edit.form.deskripsi = val;
-            }}
-            label={<Text fz={"sm"} fw={"bold"}>Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            onChange={(e) => setFormData({ ...formData, deskripsi: e.target.value })}
+            required
           />
+
           <Select
             value={formData.kategoriId}
             onChange={(val) => setFormData({ ...formData, kategoriId: val || "" })}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-            placeholder='Pilih kategori'
+            label="Kategori"
+            placeholder="Pilih kategori"
             data={
               potensiDesaState.kategoriPotensi.findMany.data?.map((v) => ({
                 value: v.id,
-                label: v.nama
+                label: v.nama,
               })) || []
             }
             clearable
@@ -137,77 +151,90 @@ function EditPotensi() {
             required
             error={!formData.kategoriId ? "Pilih kategori" : undefined}
           />
+
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Potensi
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error("File tidak valid, gunakan format gambar")}
+              maxSize={5 * 1024 ** 2}
+              accept={{ "image/*": [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color={colors["blue-button"]} stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="red" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ display: "flex", justifyContent: "center" }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: "contain",
+                    border: `1px solid ${colors["blue-button"]}`,
+                  }}
+                />
+              </Box>
+            )}
           </Box>
+
           <Box>
-            <Text fz={"sm"} fw={"bold"}>Konten</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten Lengkap
+            </Text>
             <EditEditor
               value={formData.content}
-              onChange={(htmlContent) => {
-                setFormData((prev) => ({ ...prev, content: htmlContent }));
-                potensiState.edit.form.content = htmlContent;
-              }}
+              onChange={(htmlContent) => setFormData({ ...formData, content: htmlContent })}
             />
           </Box>
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>Edit Potensi</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors["blue-button"]}, #4facfe)`,
+                color: "#fff",
+                boxShadow: "0 4px 15px rgba(79, 172, 254, 0.4)",
+              }}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>
   );
 }
 
-export default EditPotensi;
+export default EditPotensi;

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

@@ -1,122 +1,151 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Flex, Image, Paper, Skeleton, Stack, Text } from '@mantine/core';
-import { IconArrowBack, IconEdit, IconX } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
-import React from 'react';
+import { Box, Button, Group, Image, Paper, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
+import { IconArrowBack, IconEdit, IconTrash } from '@tabler/icons-react';
+import { useRouter, useParams } from 'next/navigation';
+import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import { useShallowEffect } from '@mantine/hooks';
-import { useParams } from 'next/navigation';
-import { useState } from 'react';
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 
-
 export default function DetailPotensi() {
-  const router = useRouter()
-  const params = useParams()
-  const [modalHapus, setModalHapus] = useState(false)
-  const [selectedId, setSelectedId] = useState<string | null>(null)
-  const potensiState = useProxy(potensiDesaState.potensiDesa)
+  const router = useRouter();
+  const params = useParams();
+  const [modalHapus, setModalHapus] = useState(false);
+  const [selectedId, setSelectedId] = useState<string | null>(null);
+  const potensiState = useProxy(potensiDesaState.potensiDesa);
 
   useShallowEffect(() => {
-    potensiState.findUnique.load(params?.id as string)
-  }, [])
+    potensiState.findUnique.load(params?.id as string);
+  }, []);
 
   const handleHapus = () => {
     if (selectedId) {
-      potensiState.delete.byId(selectedId)
-      setModalHapus(false)
-      setSelectedId(null)
-      router.push("/admin/desa/potensi")
+      potensiState.delete.byId(selectedId);
+      setModalHapus(false);
+      setSelectedId(null);
+      router.push("/admin/desa/potensi");
     }
-  }
+  };
 
   if (!potensiState.findUnique.data) {
     return (
       <Stack py={10}>
-        {Array.from({ length: 10 }).map((_, k) => (
-          <Skeleton key={k} h={40} />
-        ))}
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = potensiState.findUnique.data;
+
   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 Potensi</Text>
-          {potensiState.findUnique.data ? (
-            <Paper key={potensiState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Judul</Text>
-                  <Text fz={"lg"}>{potensiState.findUnique.data.name}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Kategori</Text>
-                  <Text fz={"lg"}>{potensiState.findUnique.data.kategori?.nama}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Deskripsi</Text>
-                  <Text fz={"lg"}>{potensiState.findUnique.data.deskripsi}</Text>
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Gambar</Text>
-                  <Image src={potensiState.findUnique.data.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fz={"lg"} fw={"bold"}>Konten</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: potensiState.findUnique.data.content }} />
-                </Box>
-                <Box>
-                  <Flex gap={"xs"}>
-                    <Button
-                      onClick={() => {
-                        if (potensiState.findUnique.data) {
-                          setSelectedId(potensiState.findUnique.data.id)
-                          setModalHapus(true)
-                        }
-                      }}
-                      disabled={potensiState.delete.loading || !potensiState.findUnique.data}
-                      color="red"
-                    >
-                      <IconX size={20} />
-                    </Button>
-                    <Button
-                      onClick={() => {
-                        if (potensiState.findUnique.data) {
-                          router.push(`/admin/desa/potensi/list-potensi/${potensiState.findUnique.data.id}/edit`)
-                        }
-                      }}
-                      disabled={!potensiState.findUnique.data}
-                      color="green"
-                    >
-                      <IconEdit size={20} />
-                    </Button>
-                  </Flex>
-                </Box>
-              </Stack>
-            </Paper>
-          ) : null}
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        withBorder
+        w={{ base: "100%", md: "60%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Potensi
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
+              <Box>
+                <Text fz="lg" fw="bold">Judul</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Kategori</Text>
+                <Text fz="md" c="dimmed">{data.kategori?.nama || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Deskripsi</Text>
+                <Text fz="md" c="dimmed">{data.deskripsi || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.name || 'Gambar Potensi'}
+                    w={200}
+                    h={200}
+                    radius="md"
+                    fit="cover"
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Konten</Text>
+                <Text
+                  fz="md"
+                  c="dimmed"
+                  dangerouslySetInnerHTML={{ __html: data.content || '-' }}
+                />
+              </Box>
+
+              <Group gap="sm">
+                <Tooltip label="Hapus Potensi" withArrow position="top">
+                  <Button
+                    color="red"
+                    onClick={() => {
+                      setSelectedId(data.id);
+                      setModalHapus(true);
+                    }}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Potensi" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() =>
+                      router.push(`/admin/desa/potensi/list-potensi/${data.id}/edit`)
+                    }
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconEdit size={20} />
+                  </Button>
+                </Tooltip>
+              </Group>
+            </Stack>
+          </Paper>
         </Stack>
       </Paper>
 
-      {/* Modal Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text="Apakah anda yakin ingin menghapus potensi ini?"
+        text="Apakah Anda yakin ingin menghapus potensi ini?"
       />
     </Box>
   );
 }
-
-

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

@@ -4,7 +4,19 @@ import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import potensiDesaState from '@/app/admin/(dashboard)/_state/desa/potensi';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, Select, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Select,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip,
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -12,8 +24,6 @@ import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
-
 function CreatePotensi() {
   const potensiState = useProxy(potensiDesaState.potensiDesa);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
@@ -21,8 +31,8 @@ function CreatePotensi() {
   const router = useRouter();
 
   useEffect(() => {
-    potensiDesaState.kategoriPotensi.findMany.load()
-  }, [])
+    potensiDesaState.kategoriPotensi.findMany.load();
+  }, []);
 
   const handleSubmit = async () => {
     if (!file) return toast.warn('Pilih file gambar terlebih dahulu');
@@ -59,34 +69,50 @@ function CreatePotensi() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-
-      <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }}>
-        <Stack gap="xs">
-          <Title order={3}>Create Potensi</Title>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      {/* Header */}
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Potensi Desa
+        </Title>
+      </Group>
 
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
+          {/* Judul */}
           <TextInput
             value={potensiState.create.form.name}
             onChange={(val) => (potensiState.create.form.name = val.target.value)}
             label={<Text fz="sm" fw="bold">Judul</Text>}
-            placeholder="masukkan judul"
+            placeholder="Masukkan judul potensi"
+            required
           />
 
+          {/* Deskripsi */}
           <TextInput
             value={potensiState.create.form.deskripsi}
             onChange={(val) => (potensiState.create.form.deskripsi = val.target.value)}
             label={<Text fz="sm" fw="bold">Deskripsi</Text>}
-            placeholder="masukkan deskripsi"
+            placeholder="Masukkan deskripsi singkat"
+            required
           />
 
+          {/* Kategori */}
           <Select
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-            placeholder='Pilih kategori'
+            label={<Text fz="sm" fw="bold">Kategori</Text>}
+            placeholder="Pilih kategori"
             value={potensiState.create.form.kategoriId || ""}
             onChange={(val) => {
               potensiState.create.form.kategoriId = val ?? "";
@@ -97,65 +123,58 @@ function CreatePotensi() {
             }))}
           />
 
+          {/* Upload Gambar */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>Gambar</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{ 'image/*': [] }}
-              >
-                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                  <Dropzone.Accept>
-                    <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                  </Dropzone.Accept>
-                  <Dropzone.Reject>
-                    <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                  </Dropzone.Reject>
-                  <Dropzone.Idle>
-                    <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar Potensi
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewImage(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
+              accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={180}>
+                <Dropzone.Accept>
+                  <IconUpload size={48} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                </Dropzone.Accept>
+                <Dropzone.Reject>
+                  <IconX size={48} color="var(--mantine-color-red-6)" stroke={1.5} />
+                </Dropzone.Reject>
+                <Dropzone.Idle>
+                  <IconPhoto size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+              </Group>
+              <Text ta="center" mt="sm" size="sm" color="dimmed">
+                Seret gambar atau klik untuk memilih file (maks 5MB)
+              </Text>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag gambar ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format gambar
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-
-              {/* Tampilkan preview kalau ada */}
-              {previewImage && (
-                <Box mt="sm">
-                  <Image
-                    src={previewImage}
-                    alt="Preview"
-                    style={{
-                      maxWidth: '100%',
-                      maxHeight: '200px',
-                      objectFit: 'contain',
-                      borderRadius: '8px',
-                      border: '1px solid #ddd',
-                    }}
-                  />
-                </Box>
-              )}
-
-            </Box>
+            {previewImage && (
+              <Box mt="sm" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
+              </Box>
+            )}
           </Box>
 
+          {/* Konten Editor */}
           <Box>
-            <Text fz="sm" fw="bold">Konten</Text>
+            <Text fz="sm" fw="bold" mb={6}>
+              Konten Lengkap
+            </Text>
             <CreateEditor
               value={potensiState.create.form.content}
               onChange={(htmlContent) => {
@@ -164,9 +183,21 @@ function CreatePotensi() {
             />
           </Box>
 
-          <Button bg={colors['blue-button']} onClick={handleSubmit}>
-            Simpan Potensi
-          </Button>
+          {/* Tombol Simpan */}
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan Potensi
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -1,25 +1,40 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-
 'use client'
+
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
-import { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import {
+  Box,
+  Button,
+  Center,
+  Group,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+  Tooltip
+} from '@mantine/core';
+import { IconDeviceImacCog, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import potensiDesaState from '../../../_state/desa/potensi';
 
-
-
 function Potensi() {
   const [search, setSearch] = useState("");
   return (
     <Box>
       <HeaderSearch
-        title='Posisi Organisasi'
-        placeholder='pencarian'
+        title='Potensi Desa'
+        placeholder='Cari potensi atau kategori...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -30,8 +45,8 @@ function Potensi() {
 }
 
 function ListPotensi({ search }: { search: string }) {
-  const potensiState = useProxy(potensiDesaState)
-  const router = useRouter()
+  const potensiState = useProxy(potensiDesaState);
+  const router = useRouter();
 
   const {
     data,
@@ -42,117 +57,108 @@ function ListPotensi({ search }: { search: string }) {
   } = potensiState.potensiDesa.findMany;
 
   useEffect(() => {
-    potensiState.kategoriPotensi.findMany.load()
-    load(page, 10)
-  }, [])
+    potensiState.kategoriPotensi.findMany.load();
+    load(page, 10, search);
+  }, [page, search]);
 
-  const filteredData = (potensiState.potensiDesa.findMany.data || []).filter(item => {
-    const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword) ||
-      item.kategori?.nama.toLowerCase().includes(keyword) ||
-      item.deskripsi.toLowerCase().includes(keyword)
-    );
-  });
+  const filteredData = data || []
 
-  // Handle loading state
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={300} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <Stack>
-            <JudulList
-              title='List Potensi'
-              href='/admin/desa/potensi/list-potensi/create'
-            />
-            <Box style={{ overflowX: "auto" }}>
-              <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-                <TableThead>
-                  <TableTr>
-                    <TableTh>Judul</TableTh>
-                    <TableTh>Kategori</TableTh>
-                    <TableTh>Deskripsi</TableTh>
-                    <TableTh>Detail</TableTh>
-                  </TableTr>
-                </TableThead>
-                <TableTbody>
-                  <TableTr>
-                    <TableTd colSpan={4}>Tidak Ada Data</TableTd>
-                  </TableTr>
-                </TableTbody>
-              </Table>
-            </Box>
-          </Stack>
-        </Paper>
-      </Box>
-    )
-  }
-
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Potensi'
-            href='/admin/desa/potensi/list-potensi/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Judul</TableTh>
-                  <TableTh>Kategori</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Potensi Desa</Title>
+          <Tooltip label="Tambah Potensi" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/desa/potensi/list-potensi/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover style={{ minWidth: '700px' }}>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '20%' }}>Judul</TableTh>
+                <TableTh style={{ width: '20%' }}>Kategori</TableTh>
+                <TableTh style={{ width: '35%' }}>Deskripsi</TableTh>
+                <TableTh style={{ width: '15%' }}>Detail</TableTh>
+              </TableTr>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
                   <TableTr key={item.id}>
                     <TableTd>
-                      <Box w={100}>
-                        <Text truncate="end" fz={"sm"}>{item.name}</Text>
-                      </Box></TableTd>
-                    <TableTd>{item.kategori?.nama}</TableTd>
+                      <Text fw={500} truncate="end" lineClamp={1}>
+                        {item.name}
+                      </Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text fz="sm" c="dimmed">{item.kategori?.nama || '-'}</Text>
+                    </TableTd>
                     <TableTd>
                       <Box w={300}>
-                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
+                        <Text
+                          truncate
+                          fz="sm"
+                          dangerouslySetInnerHTML={{ __html: item.deskripsi }}
+                        />
                       </Box>
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/desa/potensi/list-potensi/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/desa/potensi/list-potensi/${item.id}`)}
+                      >
+                        <IconDeviceImacCog size={20} />
+                        <Text ml={5}>Detail</Text>
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={4}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data potensi yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
       <Center>
         <Pagination
           value={page}
           onChange={(newPage) => {
             load(newPage, 10);
-            window.scrollTo(0, 0);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
           }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>
-  )
+  );
 }
 
 export default Potensi;

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

@@ -1,9 +1,10 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { IconUser, IconUsers, IconCalendar } from '@tabler/icons-react';
 
 function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
     const router = useRouter()
@@ -12,21 +13,28 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
         {
             label: "Profile Desa",
             value: "profiledesa",
-            href: "/admin/desa/profile/profile-desa"
+            href: "/admin/desa/profile/profile-desa",
+            icon: <IconUser size={18} stroke={1.8} />,
+            tooltip: "Lihat dan kelola profil desa"
         },
         {
             label: "Profile Perbekel",
             value: "profileperbekel",
-            href: "/admin/desa/profile/profile-perbekel"
+            href: "/admin/desa/profile/profile-perbekel",
+            icon: <IconUsers size={18} stroke={1.8} />,
+            tooltip: "Kelola data Perbekel"
         },
         {
             label: "Profile Perbekel Dari Masa Ke Masa",
             value: "profile-perbekel-dari-masa-ke-masa",
-            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa"
+            href: "/admin/desa/profile/profile-perbekel-dari-masa-ke-masa",
+            icon: <IconCalendar size={18} stroke={1.8} />,
+            tooltip: "Riwayat Perbekel dari masa ke masa"
         }
     ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+
+    const currentTab = tabs.find(tab => tab.href === pathname)
+    const [activeTab, setActiveTab] = useState<string | null>(currentTab?.value || tabs[0].value);
 
     const handleTabChange = (value: string | null) => {
         const tab = tabs.find(t => t.value === value)
@@ -44,24 +52,59 @@ function LayoutTabsDetail({ children }: { children: React.ReactNode }) {
     }, [pathname])
 
     return (
-        <Stack>
-            <Title order={3}>Profile Desa</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>
+        <Stack gap="lg">
+            <Title order={3} fw={700} style={{ color: "#1A1B1E" }}>Profile Desa</Title>
+            <Tabs
+                color={colors['blue-button']}
+                variant='pills'
+                value={activeTab}
+                onChange={handleTabChange}
+                radius="lg"
+                keepMounted={false}
+            >
+                <TabsList
+                    p="sm"
+                    style={{
+                        background: "linear-gradient(135deg, #e7ebf7, #f9faff)",
+                        borderRadius: "1rem",
+                        boxShadow: "inset 0 0 10px rgba(0,0,0,0.05)",
+                    }}
+                >
+                    {tabs.map((tab, i) => (
+                        <Tooltip key={i} label={tab.tooltip} position="bottom" withArrow transitionProps={{ transition: 'pop', duration: 200 }}>
+                            <TabsTab
+                                value={tab.value}
+                                leftSection={tab.icon}
+                                style={{
+                                    fontWeight: 600,
+                                    fontSize: "0.9rem",
+                                    transition: "all 0.2s ease",
+                                }}
+                            >
+                                {tab.label}
+                            </TabsTab>
+                        </Tooltip>
                     ))}
                 </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
+
+                {tabs.map((tab, i) => (
+                    <TabsPanel
+                        key={i}
+                        value={tab.value}
+                        style={{
+                            padding: "1.5rem",
+                            background: "linear-gradient(180deg, #ffffff, #f5f6fa)",
+                            borderRadius: "1rem",
+                            boxShadow: "0 4px 16px rgba(0,0,0,0.05)",
+                        }}
+                    >
+                        {/* Konten dummy, bisa diganti sesuai routing */}
+                        <>{children}</>
                     </TabsPanel>
                 ))}
             </Tabs>
-            {children}
         </Stack>
     );
 }
 
-export default LayoutTabsDetail;
+export default LayoutTabsDetail;

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

@@ -3,8 +3,8 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Alert, Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -15,7 +15,7 @@ function Page() {
     const router = useRouter()
     const params = useParams()
     const [isSubmitting, setIsSubmitting] = useState(false);
-
+    // Load data
     useEffect(() => {
         const loadData = async () => {
             const id = params?.id as string;
@@ -25,9 +25,12 @@ function Page() {
                 return;
             }
 
-            const data = await lambangState.findUnique.load(id);
-            if (data) {
+            try {
+                const data = await lambangState.findUnique.load(id);
                 lambangState.update.initialize(data);
+            } catch (error) {
+                console.error("Error loading lambang:", error);
+                toast.error("Gagal memuat data lambang desa");
             }
         };
 
@@ -35,19 +38,21 @@ function Page() {
 
         return () => {
             lambangState.update.reset();
-            lambangState.findUnique.reset(); // opsional: reset juga data lama
+            lambangState.findUnique.reset();
         };
     }, [params?.id, router]);
 
-
     const handleSubmit = async () => {
         if (isSubmitting || !lambangState.update.form.judul.trim()) {
             toast.error("Judul wajib diisi");
             return;
         }
-        setIsSubmitting(true)
+
+        setIsSubmitting(true);
+
         try {
-            const success = await lambangState.update.submit()
+            const success = await lambangState.update.submit();
+
             if (success) {
                 toast.success("Data berhasil disimpan");
                 router.push("/admin/desa/profile/profile-desa");
@@ -58,17 +63,12 @@ function Page() {
         } finally {
             setIsSubmitting(false);
         }
-    }
+    };
 
-    const handleBack = () => {
-        router.back()
-    }
+    const handleBack = () => router.back();
 
-    if (
-        lambangState.findUnique.loading ||
-        !lambangState.findUnique.data ||
-        lambangState.update.loading
-    ) {
+    // Loading state
+    if (lambangState.findUnique.loading || lambangState.update.loading) {
         return (
             <Box>
                 <Center h={400}>
@@ -77,45 +77,73 @@ function Page() {
             </Box>
         );
     }
-    return (
-        <Box>
-            <Stack gap={'xs'}>
-                <Group>
+
+    // Error state
+    if (lambangState.findUnique.error) {
+        return (
+            <Box>
+                <Stack gap="md">
                     <Button variant="subtle" onClick={handleBack}>
                         <IconArrowBack color={colors['blue-button']} size={20} />
                     </Button>
+                    <Alert icon={<IconAlertCircle size={16} />} color="red">
+                        <Text fw="bold">Error</Text>
+                        <Text>{lambangState.findUnique.error}</Text>
+                    </Alert>
+                </Stack>
+            </Box>
+        );
+    }
+
+    return (
+        <Box>
+            <Stack gap="xs">
+                <Group mb="md">
+                    <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+                        <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+                            <IconArrowBack color={colors['blue-button']} size={24} />
+                        </Button>
+                    </Tooltip>
+                    <Title order={4} ml="sm" c="dark">Edit Lambang Desa</Title>
                 </Group>
-                <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '50%' }}>
-                    <Stack gap={'xs'}>
+
+                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+                    <Stack gap="xs">
+                        <Title order={3}>Edit Lambang Desa</Title>
+
+                        {/* Judul */}
+                        <TextInput
+                            label={<Text fw="bold">Judul</Text>}
+                            placeholder="Judul lambang"
+                            value={lambangState.update.form.judul}
+                            onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
+                            error={!lambangState.update.form.judul && "Judul wajib diisi"}
+                        />
+
+                        {/* Deskripsi */}
                         <Box>
-                            <Box>
-                                <Stack>
-                                    <Title order={3}>Edit Lambang Desa</Title>
-                                    <TextInput
-                                        label={<Text fz={"md"} fw={"bold"}>Judul</Text>}
-                                        placeholder="Judul"
-                                        value={lambangState.update.form.judul}
-                                        onChange={(e) => lambangState.update.form.judul = e.currentTarget.value}
-                                        error={!lambangState.update.form.judul && "Judul wajib diisi"}
-                                    />
-                                    <Box>
-                                        <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
-                                        <EditEditor
-                                            value={lambangState.update.form.deskripsi}
-                                            onChange={(val) => lambangState.update.form.deskripsi = val}
-                                        />
-                                    </Box>
-                                    <Group>
-                                        <Button
-                                            onClick={handleSubmit}
-                                            bg={colors['blue-button']}
-                                        >
-                                            Submit
-                                        </Button>
-                                    </Group>
-                                </Stack>
-                            </Box>
+                            <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+                            <EditEditor
+                                value={lambangState.update.form.deskripsi}
+                                onChange={(val) => lambangState.update.form.deskripsi = val}
+                            />
                         </Box>
+
+                        {/* Buttons */}
+                        <Group>
+                            <Button
+                                bg={colors['blue-button']}
+                                onClick={handleSubmit}
+                                loading={isSubmitting || lambangState.update.loading}
+                                disabled={!lambangState.update.form.judul}
+                            >
+                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                            </Button>
+
+                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || lambangState.update.loading}>
+                                Batal
+                            </Button>
+                        </Group>
                     </Stack>
                 </Paper>
             </Stack>

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

@@ -5,38 +5,40 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title } from '@mantine/core';
+import { Box, Button, Group, Image, Paper, SimpleGrid, Stack, Text, TextInput, Title, Tooltip, Center, Alert } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, IconUpload, IconX, IconAlertCircle } 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 Page() {
-  const maskotState = useProxy(stateProfileDesa.maskotDesa)
-  const router = useRouter()
-  const params = useParams()
-
-  const [images, setImages] = useState<
-    Array<{ file: File; preview: string; label: string }>
-  >([]);
+  const maskotState = useProxy(stateProfileDesa.maskotDesa);
+  const router = useRouter();
+  const params = useParams();
 
+  const [images, setImages] = useState<Array<{ file: File | null; preview: string; label: string }>>([]);
   const [formData, setFormData] = useState({
-    judul: maskotState.update.form.judul || '',
-    deskripsi: maskotState.update.form.deskripsi || '',
-    images: [] as Array<{ label: string; imageId: string }>
-  })
+    judul: '',
+    deskripsi: '',
+    images: [] as Array<{ label: string; imageId: string }>,
+  });
+  const [isSubmitting, setIsSubmitting] = useState(false);
 
+  // Load data
   useEffect(() => {
     const loadData = async () => {
       const id = params?.id as string;
-      if (!id) return;
+      if (!id) {
+        toast.error("ID tidak valid");
+        router.push("/admin/desa/profile/profile-desa");
+        return;
+      }
 
       try {
         const data = await maskotState.findUnique.load(id);
         if (data) {
-          // 🔥 INI YANG KURANG!
           maskotState.update.initialize(data);
 
           setFormData({
@@ -57,28 +59,39 @@ function Page() {
           }
         }
       } catch (error) {
-        console.error("Error loading berita:", error);
-        toast.error("Gagal memuat data berita");
+        console.error("Error loading maskot:", error);
+        toast.error("Gagal memuat data maskot");
       }
     };
 
     loadData();
-  }, [params?.id]);
 
+    return () => {
+      maskotState.update.reset();
+      maskotState.findUnique.reset();
+    };
+  }, [params?.id, router]);
 
-  const handleBack = () => {
-    router.back()
-  }
+  const handleBack = () => router.back();
 
   const handleSubmit = async () => {
+    if (isSubmitting || !formData.judul.trim()) {
+      toast.error("Judul wajib diisi");
+      return;
+    }
+
+    setIsSubmitting(true);
+
     try {
       const uploadedImages = [];
 
       // Upload semua gambar baru
       for (const img of images) {
-        if (!img.file || !(img.file instanceof File)) {
-          toast.error("File tidak valid untuk di-upload");
-          continue; // atau return kalau kamu mau hentikan semua
+        if (!img.file) {
+          // Kalau gambar lama, skip upload
+          if (!img.preview) continue;
+          uploadedImages.push({ imageId: '', label: img.label });
+          continue;
         }
 
         const res = await ApiFetch.api.fileStorage.create.post({
@@ -92,10 +105,7 @@ function Page() {
           return;
         }
 
-        uploadedImages.push({
-          imageId: uploaded.id,
-          label: img.label || 'main',
-        });
+        uploadedImages.push({ imageId: uploaded.id, label: img.label || 'main' });
       }
 
       // Update ke global state
@@ -109,130 +119,159 @@ function Page() {
         toast.success("Maskot berhasil diperbarui!");
         router.push("/admin/desa/profile/profile-desa");
       }
-
     } catch (error) {
       console.error("Error update maskot:", error);
       toast.error("Gagal update maskot");
+    } finally {
+      setIsSubmitting(false);
     }
   };
 
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Group>
+  // Loading state
+  if (maskotState.findUnique.loading || maskotState.update.loading) {
+    return (
+      <Box>
+        <Center h={400}>
+          <Text>Memuat data...</Text>
+        </Center>
+      </Box>
+    );
+  }
+
+  // Error state
+  if (maskotState.findUnique.error) {
+    return (
+      <Box>
+        <Stack gap="md">
           <Button variant="subtle" onClick={handleBack}>
             <IconArrowBack color={colors['blue-button']} size={20} />
           </Button>
-        </Group>
-        <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '100%' }}>
-          <Stack gap={'xs'}>
-            <Box>
-              <Box>
-                <Stack>
-                  <Title order={3}>Edit Maskot Desa</Title>
-                  <TextInput
-                    w={{ base: '100%', md: '50%' }}
-                    label={<Text fz={"md"} fw={"bold"}>Judul</Text>}
-                    placeholder="Masukkan judul"
-                    value={formData.judul}
-                    onChange={(val) => setFormData({ ...formData, judul: val.currentTarget.value })}
-                  />
-                  <Box w={{ base: '100%', md: '50%' }}>
-                    <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
-                    <EditEditor
-                      value={formData.deskripsi}
-                      onChange={(val) => setFormData({ ...formData, deskripsi: val })}
-                    />
-                  </Box>
-                  <Box>
-                    <Text fz={"md"} fw={"bold"}>Gambar</Text>
-                    <Box w={{ base: '100%', md: '50%' }}>
-                      <Dropzone
-                        onDrop={(files) => {
-                          const newImages = files.map((file) => ({
-                            file,
-                            preview: URL.createObjectURL(file),
-                            label: '',
-                          }));
-                          setImages((prev) => [...prev, ...newImages]);
-                        }}
-                      >
-                        <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>
+          <Alert icon={<IconAlertCircle size={16} />} color="red">
+            <Text fw="bold">Error</Text>
+            <Text>{maskotState.findUnique.error}</Text>
+          </Alert>
+        </Stack>
+      </Box>
+    );
+  }
 
-                          <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>
-                  </Box>
-                  <SimpleGrid cols={{ base: 2, md: 4 }} >
-                    {images.map((img, index) => (
-                      <Box key={index} mb="md">
-                        <Paper p="sm" radius="md" withBorder style={{ position: 'relative', maxWidth: 300 }}>
-                          <Stack gap={'xs'}>
-                            <Group>
-                              <Button
-                                size="xs"
-                                color="red"
-                                variant="light"
-                                onClick={() => {
-                                  const updated = [...images];
-                                  updated.splice(index, 1);
-                                  setImages(updated);
-                                }}
-                              >
-                                Hapus
-                              </Button>
-                            </Group>
-                            <Image
-                              src={img.preview}
-                              alt={`Preview ${index}`}
-                              width={280}
-                              height={180}
-                              fit="cover"
-                              radius="sm"
-                            />
-                            <TextInput
-                              label={`Label Gambar ${index + 1}`}
-                              placeholder="Contoh: Logo, Maskot, Dll"
-                              value={img.label}
-                              onChange={(e) => {
-                                const updated = [...images];
-                                updated[index].label = e.currentTarget.value;
-                                setImages(updated);
-                              }}
-                            />
-                          </Stack>
-                        </Paper>
-                      </Box>
-                    ))}
-                  </SimpleGrid>
-                  <Group>
-                    <Button
-                      onClick={handleSubmit}
-                      bg={colors['blue-button']}
-                    >
-                      Submit
-                    </Button>
-                  </Group>
-                </Stack>
-              </Box>
+  return (
+    <Box>
+      <Stack gap="xs">
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">Edit Maskot Desa</Title>
+        </Group>
+
+        <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+          <Stack gap="xs">
+            <Title order={3}>Edit Maskot Desa</Title>
+
+            {/* Judul */}
+            <TextInput
+              label={<Text fw="bold">Judul</Text>}
+              placeholder="Masukkan judul maskot"
+              value={formData.judul}
+              onChange={(e) => setFormData({ ...formData, judul: e.currentTarget.value })}
+              error={!formData.judul && "Judul wajib diisi"}
+            />
+
+            {/* Deskripsi */}
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+              <EditEditor
+                value={formData.deskripsi}
+                onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+              />
             </Box>
+
+            {/* Upload Gambar */}
+            <Box>
+              <Text fz={"md"} fw={"bold"}>Gambar</Text>
+              <Dropzone
+                onDrop={(files) => {
+                  const newImages = files.map((file) => ({
+                    file,
+                    preview: URL.createObjectURL(file),
+                    label: '',
+                  }));
+                  setImages((prev) => [...prev, ...newImages]);
+                }}
+              >
+                <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 max 5mb</Text>
+                  </div>
+                </Group>
+              </Dropzone>
+            </Box>
+
+            {/* Preview Gambar */}
+            <SimpleGrid cols={{ base: 2, md: 4 }}>
+              {images.map((img, index) => (
+                <Box key={index} mb="md">
+                  <Paper p="sm" radius="md" withBorder style={{ position: 'relative', maxWidth: 300 }}>
+                    <Stack gap="xs">
+                      <Group justify="space-between">
+                        <Button
+                          size="xs"
+                          color="red"
+                          variant="light"
+                          onClick={() => {
+                            const updated = [...images];
+                            updated.splice(index, 1);
+                            setImages(updated);
+                          }}
+                        >
+                          Hapus
+                        </Button>
+                      </Group>
+                      <Image
+                        src={img.preview}
+                        alt={`Preview ${index}`}
+                        width={280}
+                        height={180}
+                        fit="cover"
+                        radius="sm"
+                      />
+                      <TextInput
+                        label={`Label Gambar ${index + 1}`}
+                        placeholder="Contoh: Logo, Maskot, Dll"
+                        value={img.label}
+                        onChange={(e) => {
+                          const updated = [...images];
+                          updated[index].label = e.currentTarget.value;
+                          setImages(updated);
+                        }}
+                      />
+                    </Stack>
+                  </Paper>
+                </Box>
+              ))}
+            </SimpleGrid>
+
+            {/* Buttons */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || maskotState.update.loading}
+                disabled={!formData.judul}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+              <Button variant="outline" onClick={handleBack} disabled={isSubmitting || maskotState.update.loading}>
+                Batal
+              </Button>
+            </Group>
           </Stack>
         </Paper>
       </Stack>

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

@@ -3,8 +3,8 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Alert, Box, Button, Center, Group, Paper, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
+import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -16,6 +16,7 @@ function Page() {
     const params = useParams()
     const [isSubmitting, setIsSubmitting] = useState(false);
 
+    // Load data
     useEffect(() => {
         const loadData = async () => {
             const id = params?.id as string;
@@ -25,9 +26,14 @@ function Page() {
                 return;
             }
 
-            const data = await sejarahState.findUnique.load(id);
-            if (data) {
-                sejarahState.update.initialize(data);
+            try {
+                const data = await sejarahState.findUnique.load(id);
+                if (data) {
+                    sejarahState.update.initialize(data);
+                }
+            } catch (error) {
+                console.error("Error loading sejarah:", error);
+                toast.error("Gagal memuat data sejarah desa");
             }
         };
 
@@ -35,19 +41,19 @@ function Page() {
 
         return () => {
             sejarahState.update.reset();
-            sejarahState.findUnique.reset(); // opsional: reset juga data lama
+            sejarahState.findUnique.reset();
         };
     }, [params?.id, router]);
 
-
     const handleSubmit = async () => {
         if (isSubmitting || !sejarahState.update.form.judul.trim()) {
             toast.error("Judul wajib diisi");
             return;
         }
-        setIsSubmitting(true)
+
+        setIsSubmitting(true);
         try {
-            const success = await sejarahState.update.submit()
+            const success = await sejarahState.update.submit();
             if (success) {
                 toast.success("Data berhasil disimpan");
                 router.push("/admin/desa/profile/profile-desa");
@@ -58,17 +64,12 @@ function Page() {
         } finally {
             setIsSubmitting(false);
         }
-    }
+    };
 
-    const handleBack = () => {
-        router.back()
-    }
+    const handleBack = () => router.back();
 
-    if (
-        sejarahState.findUnique.loading ||
-        !sejarahState.findUnique.data ||
-        sejarahState.update.loading
-    ) {
+    // Loading state
+    if (sejarahState.findUnique.loading || sejarahState.update.loading) {
         return (
             <Box>
                 <Center h={400}>
@@ -77,45 +78,73 @@ function Page() {
             </Box>
         );
     }
-    return (
-        <Box>
-            <Stack gap={'xs'}>
-                <Group>
+
+    // Error state
+    if (sejarahState.findUnique.error) {
+        return (
+            <Box>
+                <Stack gap="md">
                     <Button variant="subtle" onClick={handleBack}>
                         <IconArrowBack color={colors['blue-button']} size={20} />
                     </Button>
+                    <Alert icon={<IconAlertCircle size={16} />} color="red">
+                        <Text fw="bold">Error</Text>
+                        <Text>{sejarahState.findUnique.error}</Text>
+                    </Alert>
+                </Stack>
+            </Box>
+        );
+    }
+
+    return (
+        <Box>
+            <Stack gap="xs">
+                <Group mb="md">
+                    <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+                        <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+                            <IconArrowBack color={colors['blue-button']} size={24} />
+                        </Button>
+                    </Tooltip>
+                    <Title order={4} ml="sm" c="dark">Edit Sejarah Desa</Title>
                 </Group>
-                <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '50%' }}>
-                    <Stack gap={'xs'}>
+
+                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+                    <Stack gap="xs">
+                        <Title order={3}>Edit Sejarah Desa</Title>
+
+                        {/* Judul */}
+                        <TextInput
+                            label={<Text fw="bold">Judul</Text>}
+                            placeholder="Judul sejarah"
+                            value={sejarahState.update.form.judul}
+                            onChange={(e) => sejarahState.update.form.judul = e.currentTarget.value}
+                            error={!sejarahState.update.form.judul && "Judul wajib diisi"}
+                        />
+
+                        {/* Deskripsi */}
                         <Box>
-                            <Box>
-                                <Stack>
-                                    <Title order={3}>Edit Sejarah Desa</Title>
-                                    <TextInput
-                                        label={<Text fz={"md"} fw={"bold"}>Judul</Text>}
-                                        placeholder="Judul"
-                                        value={sejarahState.update.form.judul}
-                                        onChange={(e) => sejarahState.update.form.judul = e.currentTarget.value}
-                                        error={!sejarahState.update.form.judul && "Judul wajib diisi"}
-                                    />
-                                    <Box>
-                                        <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
-                                        <EditEditor
-                                            value={sejarahState.update.form.deskripsi}
-                                            onChange={(val) => sejarahState.update.form.deskripsi = val}
-                                        />
-                                    </Box>
-                                    <Group>
-                                        <Button
-                                            onClick={handleSubmit}
-                                            bg={colors['blue-button']}
-                                        >
-                                            Submit
-                                        </Button>
-                                    </Group>
-                                </Stack>
-                            </Box>
+                            <Text fz={"md"} fw={"bold"}>Deskripsi</Text>
+                            <EditEditor
+                                value={sejarahState.update.form.deskripsi}
+                                onChange={(val) => sejarahState.update.form.deskripsi = val}
+                            />
                         </Box>
+
+                        {/* Buttons */}
+                        <Group>
+                            <Button
+                                bg={colors['blue-button']}
+                                onClick={handleSubmit}
+                                loading={isSubmitting || sejarahState.update.loading}
+                                disabled={!sejarahState.update.form.judul}
+                            >
+                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                            </Button>
+
+                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || sejarahState.update.loading}>
+                                Batal
+                            </Button>
+                        </Group>
                     </Stack>
                 </Paper>
             </Stack>

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

@@ -3,122 +3,153 @@
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
-import { Box, Button, Center, Group, Paper, Stack, Text, Title } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Alert, Box, Button, Center, Group, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
+import { IconAlertCircle, IconArrowBack } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 function Page() {
-  const visiMisiState = useProxy(stateProfileDesa.visiMisiDesa)
-  const router = useRouter()
-  const params = useParams()
-  const [isSubmitting, setIsSubmitting] = useState(false);
+    const visiMisiState = useProxy(stateProfileDesa.visiMisiDesa)
+    const router = useRouter()
+    const params = useParams()
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
-  useEffect(() => {
-    const loadData = async () => {
-      const id = params?.id as string;
-      if (!id) {
-        toast.error("ID tidak valid");
-        router.push("/admin/desa/profile/profile-desa");
-        return;
-      }
+    // Load data
+    useEffect(() => {
+        const loadData = async () => {
+            const id = params?.id as string;
+            if (!id) {
+                toast.error("ID tidak valid");
+                router.push("/admin/desa/profile/profile-desa");
+                return;
+            }
 
-      const data = await visiMisiState.findUnique.load(id);
-      if (data) {
-        visiMisiState.update.initialize(data);
-      }
+            try {
+                const data = await visiMisiState.findUnique.load(id);
+                visiMisiState.update.initialize(data);
+            } catch (error) {
+                console.error("Error loading visi misi:", error);
+                toast.error("Gagal memuat data visi misi desa");
+            }
+        };
+
+        loadData();
+
+        return () => {
+            visiMisiState.update.reset();
+            visiMisiState.findUnique.reset();
+        };
+    }, [params?.id, router]);
+
+    const handleSubmit = async () => {
+        if (isSubmitting || !visiMisiState.update.form.visi.trim()) {
+            toast.error("Visi wajib diisi");
+            return;
+        }
+
+        setIsSubmitting(true);
+
+        try {
+            const success = await visiMisiState.update.submit();
+
+            if (success) {
+                toast.success("Data berhasil disimpan");
+                router.push("/admin/desa/profile/profile-desa");
+            }
+        } catch (error) {
+            console.error("Error update visi misi desa:", error);
+            toast.error("Terjadi kesalahan saat update visi misi desa");
+        } finally {
+            setIsSubmitting(false);
+        }
     };
 
-    loadData();
+    const handleBack = () => router.back();
 
-    return () => {
-      visiMisiState.update.reset();
-      visiMisiState.findUnique.reset(); // opsional: reset juga data lama
-    };
-  }, [params?.id, router]);
-
-
-  const handleSubmit = async () => {
-    if (isSubmitting || !visiMisiState.update.form.visi.trim()) {
-      toast.error("Visi wajib diisi");
-      return;
-    }
-    setIsSubmitting(true)
-    try {
-      const success = await visiMisiState.update.submit()
-      if (success) {
-        toast.success("Data berhasil disimpan");
-        router.push("/admin/desa/profile/profile-desa");
-      }
-    } catch (error) {
-      console.error("Error update sejarah desa:", error);
-      toast.error("Terjadi kesalahan saat update sejarah desa");
-    } finally {
-      setIsSubmitting(false);
-    }
-  }
-
-  const handleBack = () => {
-    router.back()
-  }
-
-  if (
-    visiMisiState.findUnique.loading ||
-    !visiMisiState.findUnique.data ||
-    visiMisiState.update.loading
-  ) {
-    return (
-      <Box>
-        <Center h={400}>
-          <Text>Memuat data...</Text>
-        </Center>
-      </Box>
-    );
-  }
-  return (
-    <Box>
-      <Stack gap={'xs'}>
-        <Group>
-          <Button variant="subtle" onClick={handleBack}>
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
-        </Group>
-        <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '50%' }}>
-          <Stack gap={'xs'}>
+    // Loading state
+    if (visiMisiState.findUnique.loading || visiMisiState.update.loading) {
+        return (
             <Box>
-              <Box>
-                <Stack>
-                  <Title order={3}>Edit Visi Misi Desa</Title>
-                  <Text fz={"md"} fw={"bold"}>Visi</Text>
-                  <EditEditor
-                    value={visiMisiState.update.form.visi}
-                    onChange={(val) => visiMisiState.update.form.visi = val}
-                  />
-                  <Box>
-                    <Text fz={"md"} fw={"bold"}>Misi</Text>
-                    <EditEditor
-                      value={visiMisiState.update.form.misi}
-                      onChange={(val) => visiMisiState.update.form.misi = val}
-                    />
-                  </Box>
-                  <Group>
-                    <Button
-                      onClick={handleSubmit}
-                      bg={colors['blue-button']}
-                    >
-                      Submit
-                    </Button>
-                  </Group>
-                </Stack>
-              </Box>
+                <Center h={400}>
+                    <Text>Memuat data...</Text>
+                </Center>
             </Box>
-          </Stack>
-        </Paper>
-      </Stack>
-    </Box>
-  );
+        );
+    }
+
+    // Error state
+    if (visiMisiState.findUnique.error) {
+        return (
+            <Box>
+                <Stack gap="md">
+                    <Button variant="subtle" onClick={handleBack}>
+                        <IconArrowBack color={colors['blue-button']} size={20} />
+                    </Button>
+                    <Alert icon={<IconAlertCircle size={16} />} color="red">
+                        <Text fw="bold">Error</Text>
+                        <Text>{visiMisiState.findUnique.error}</Text>
+                    </Alert>
+                </Stack>
+            </Box>
+        );
+    }
+
+    return (
+        <Box>
+            <Stack gap="xs">
+                <Group mb="md">
+                    <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+                        <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+                            <IconArrowBack color={colors['blue-button']} size={24} />
+                        </Button>
+                    </Tooltip>
+                    <Title order={4} ml="sm" c="dark">Edit Visi Misi Desa</Title>
+                </Group>
+
+                <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p="md" radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+                    <Stack gap="xs">
+                        <Title order={3}>Edit Visi Misi Desa</Title>
+
+                        {/* Visi */}
+                        <Box>
+                            <Text fz={"md"} fw={"bold"}>Visi</Text>
+                            <EditEditor
+                                value={visiMisiState.update.form.visi}
+                                onChange={(val) => visiMisiState.update.form.visi = val}
+                            />
+                        </Box>
+
+                        {/* Misi */}
+                        <Box>
+                            <Text fz={"md"} fw={"bold"}>Misi</Text>
+                            <EditEditor
+                                value={visiMisiState.update.form.misi}
+                                onChange={(val) => visiMisiState.update.form.misi = val}
+                            />
+                        </Box>
+
+                        {/* Buttons */}
+                        <Group>
+                            <Button
+                                bg={colors['blue-button']}
+                                onClick={handleSubmit}
+                                loading={isSubmitting || visiMisiState.update.loading}
+                                disabled={!visiMisiState.update.form.visi}
+                            >
+                                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+                            </Button>
+
+                            <Button variant="outline" onClick={handleBack} disabled={isSubmitting || visiMisiState.update.loading}>
+                                Batal
+                            </Button>
+                        </Group>
+                    </Stack>
+                </Paper>
+            </Stack>
+        </Box>
+    );
 }
 
 export default Page;

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

@@ -1,7 +1,7 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Card, Center, Grid, GridCol, Group, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Card, Center, Divider, Grid, GridCol, Image, Paper, SimpleGrid, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { useSnapshot } from 'valtio';
 import stateProfileDesa from '../../../_state/desa/profile';
 import { useEffect } from 'react';
@@ -12,7 +12,6 @@ function Page() {
   const router = useRouter();
   const snap = useSnapshot(stateProfileDesa);
 
-  // Panggil load data sekali saat komponen mount
   useEffect(() => {
     stateProfileDesa.sejarahDesa.findUnique.load("edit");
     stateProfileDesa.visiMisiDesa.findUnique.load("edit");
@@ -26,142 +25,219 @@ function Page() {
   const maskot = snap.maskotDesa.findUnique.data;
 
   return (
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"lg"}>
-        <Title order={2}>Preview Profile Desa</Title>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="lg">
+        <Title order={2} c={colors['blue-button']}>Preview Profile Desa</Title>
+
         {/* Sejarah Desa */}
         {sejarah && (
-          <Box>
-            <Stack gap={'lg'}>
-              <Paper p={"md"} bg={colors['BG-trans']}>
-                <Grid>
-                  <GridCol span={{ base: 12, md: 11 }}>
-                    <Title order={2}>Preview Sejarah Desa</Title>
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 1 }}>
-                    <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/desa/profile/profile-desa/${sejarah.id}/sejarah_desa`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </GridCol>
-                </Grid>
-                <Box pb={30}>
+          <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
+            <Grid align="center">
+              <GridCol span={{ base: 12, md: 11 }}>
+                <Title order={3} c={colors['blue-button']}>Preview Sejarah Desa</Title>
+              </GridCol>
+              <GridCol span={{ base: 12, md: 1 }}>
+                <Tooltip label="Edit Sejarah Desa" withArrow>
+                  <Button
+                    c="green"
+                    variant="light"
+                    leftSection={<IconEdit size={18} stroke={2} />}
+                    radius="md"
+                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${sejarah.id}/sejarah_desa`)}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+              </GridCol>
+            </Grid>
+
+            <Box px={{ base: 0, md: 50 }} py="xl">
+              <Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
+                <Stack gap={0}>
                   <Center>
-                    <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                    <Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
                   </Center>
-                  <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>{sejarah.judul}</Text>
-                </Box>
-                <Paper p={"xl"} bg={colors['white-trans-1']}>
-                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: sejarah.deskripsi }} />
-                </Paper>
+                  <Paper
+                    bg={colors['blue-button']}
+                    py="md"
+                    px="sm"
+                    radius="md"
+                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
+                  >
+                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+                      {sejarah.judul}
+                    </Text>
+                  </Paper>
+                </Stack>
+                <Divider my="md" color={colors['blue-button']} />
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: sejarah.deskripsi }} />
               </Paper>
-            </Stack>
-          </Box>
+            </Box>
+          </Paper>
         )}
 
         {/* Visi Misi Desa */}
         {visiMisi && (
-          <Box>
-            <Stack gap={'lg'}>
-              <Paper p={"md"} bg={colors['BG-trans']}>
-                <Grid>
-                  <GridCol span={{ base: 12, md: 11 }}>
-                    <Title order={2}>Preview Visi Misi Desa</Title>
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 1 }}>
-                    <Button onClick={() => router.push(`/admin/desa/profile/profile-desa/${visiMisi.id}/visi_misi_desa`)} bg={colors['blue-button']}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </GridCol>
-                </Grid>
-                <Box pb={30}>
+          <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
+            <Grid align="center">
+              <GridCol span={{ base: 12, md: 11 }}>
+                <Title order={3} c={colors['blue-button']}>Preview Visi Misi Desa</Title>
+              </GridCol>
+              <GridCol span={{ base: 12, md: 1 }}>
+                <Tooltip label="Edit Visi Misi Desa" withArrow>
+                  <Button
+                    c="green"
+                    variant="light"
+                    leftSection={<IconEdit size={18} stroke={2} />}
+                    radius="md"
+                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${visiMisi.id}/visi_misi_desa`)}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+              </GridCol>
+            </Grid>
+
+            <Box px={{ base: 0, md: 50 }} py="xl">
+              <Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
+                <Stack gap={0}>
                   <Center>
-                    <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                    <Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
                   </Center>
-                  <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Visi Misi Desa</Text>
-                </Box>
-                <Paper p={"xl"} bg={colors['white-trans-1']}>
-                  <Text fw={"bold"} fz={{ base: "lg", md: "h2" }}>Visi Desa</Text>
-                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: visiMisi.visi }} />
-                  <Text fw={"bold"} fz={{ base: "lg", md: "h2" }}>Misi Desa</Text>
-                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: visiMisi.misi }} />
-                </Paper>
+                  <Paper
+                    bg={colors['blue-button']}
+                    py="md"
+                    px="sm"
+                    radius="md"
+                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
+                  >
+                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+                      Visi Misi Desa
+                    </Text>
+                  </Paper>
+                </Stack>
+                <Divider my="md" color={colors['blue-button']} />
+                <Text fw="bold" fz={{ base: "lg", md: "h2" }}>Visi Desa</Text>
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: visiMisi.visi }} />
+                <Text fw="bold" fz={{ base: "lg", md: "h2" }}>Misi Desa</Text>
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: visiMisi.misi }} />
               </Paper>
-            </Stack>
-          </Box>
+            </Box>
+          </Paper>
         )}
 
         {/* Lambang Desa */}
         {lambang && (
-          <Box>
-            <Stack gap={'lg'}>
-              <Paper p={"md"} bg={colors['BG-trans']}>
-                <Grid>
-                  <GridCol span={{ base: 12, md: 11 }}>
-                    <Title order={2}>Preview Lambang Desa</Title>
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 1 }}>
-                    <Button onClick={() => router.push(`/admin/desa/profile/profile-desa/${lambang.id}/lambang_desa`)} bg={colors['blue-button']}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </GridCol>
-                </Grid>
-                <Box pb={30}>
+          <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
+            <Grid align="center">
+              <GridCol span={{ base: 12, md: 11 }}>
+                <Title order={3} c={colors['blue-button']}>Preview Lambang Desa</Title>
+              </GridCol>
+              <GridCol span={{ base: 12, md: 1 }}>
+                <Tooltip label="Edit Lambang Desa" withArrow>
+                  <Button
+                    c="green"
+                    variant="light"
+                    leftSection={<IconEdit size={18} stroke={2} />}
+                    radius="md"
+                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${lambang.id}/lambang_desa`)}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+              </GridCol>
+            </Grid>
+
+            <Box px={{ base: 0, md: 50 }} py="xl">
+              <Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
+                <Stack gap={0}>
                   <Center>
-                    <Image src={"/darmasaba-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                    <Image src="/darmasaba-icon.png" w={{ base: 150, md: 250 }} alt="Logo Desa" />
                   </Center>
-                  <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Lambang Desa</Text>
-                </Box>
-                <Paper p={"xl"} bg={colors['white-trans-1']}>
-                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: lambang.deskripsi }} />
-                </Paper>
+                  <Paper
+                    bg={colors['blue-button']}
+                    py="md"
+                    px="sm"
+                    radius="md"
+                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
+                  >
+                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+                      Lambang Desa
+                    </Text>
+                  </Paper>
+                </Stack>
+                <Divider my="md" color={colors['blue-button']} />
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: lambang.deskripsi }} />
               </Paper>
-            </Stack>
-          </Box>
+            </Box>
+          </Paper>
         )}
 
         {/* Maskot Desa */}
         {maskot && (
-          <Box>
-            <Stack gap={'lg'}>
-              <Paper p={"md"} bg={colors['BG-trans']}>
-                <Grid>
-                  <GridCol span={{ base: 12, md: 11 }}>
-                    <Title order={2}>Preview Maskot Desa</Title>
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 1 }}>
-                    <Button onClick={() => router.push(`/admin/desa/profile/profile-desa/${maskot.id}/maskot_desa`)} bg={colors['blue-button']}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </GridCol>
-                </Grid>
-                <Box pb={30}>
+          <Paper p="xl" bg={'white'} withBorder radius="md" shadow="xs">
+            <Grid align="center">
+              <GridCol span={{ base: 12, md: 11 }}>
+                <Title order={3} c={colors['blue-button']}>Preview Maskot Desa</Title>
+              </GridCol>
+              <GridCol span={{ base: 12, md: 1 }}>
+                <Tooltip label="Edit Maskot Desa" withArrow>
+                  <Button
+                    c="green"
+                    variant="light"
+                    leftSection={<IconEdit size={18} stroke={2} />}
+                    radius="md"
+                    onClick={() => router.push(`/admin/desa/profile/profile-desa/${maskot.id}/maskot_desa`)}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+              </GridCol>
+            </Grid>
+
+            <Box px={{ base: 0, md: 50 }} py="xl">
+              <Paper bg={colors['white-1']} withBorder radius="md" shadow="xs" p="lg">
+                <Stack gap={0}>
                   <Center>
-                    <Image src={"/pudak-icon.png"} alt="" w={{ base: 200, md: 300 }} />
+                    <Image src="/pudak-icon.png" w={{ base: 150, md: 250 }} alt="Maskot Desa" />
                   </Center>
-                  <Text c={colors['blue-button']} ta={"center"} fw={"bold"} fz={"2.5rem"}>Maskot Desa</Text>
-                </Box>
-                <Paper p={"xl"} bg={colors['white-trans-1']}>
-                  <Text fz={{ base: "md", md: "h3" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
-                  <Group wrap="wrap" gap="md">
-                    {maskot.images.map((img, index) => (
-                      <Card key={index} p="xs" w={220}>
-                        <Image
-                         src={img.image.link}
-                         alt={img.label}
-                         w={200}
-                         h={200}
-                         fit="cover"
-                         radius="md"
-                         style={{ border: '1px solid #ccc', objectFit: 'cover' }}
-                        />
+                  <Paper
+                    bg={colors['blue-button']}
+                    py="md"
+                    px="sm"
+                    radius="md"
+                    style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
+                  >
+                    <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+                      Maskot Desa
+                    </Text>
+                  </Paper>
+                </Stack>
+                <Divider my="md" color={colors['blue-button']} />
+                <Text fz={{ base: "md", md: "h3" }} ta="justify" dangerouslySetInnerHTML={{ __html: maskot.deskripsi }} />
+                <Stack mt="md" gap="sm">
+                  <SimpleGrid cols={{ base: 2, md: 4 }} spacing="md">
+                    {maskot.images.map((img, idx) => (
+                      <Card withBorder key={idx} p="xs" w={{ base: '100%', md: 180 }}>
+                        <Center>
+                          <Image
+                            src={img.image.link}
+                            alt={img.label}
+                            w={150}
+                            h={150}
+                            fit="cover"
+                            radius="md"
+                            style={{ border: '1px solid #ccc' }}
+                          />
+                        </Center>
                         <Text ta="center" mt="xs" fw="bold">{img.label}</Text>
                       </Card>
                     ))}
-                  </Group>
-                </Paper>
+                  </SimpleGrid>
+                </Stack>
               </Paper>
-            </Stack>
-          </Box>
+            </Box>
+          </Paper>
         )}
       </Stack>
     </Paper>

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

@@ -3,17 +3,27 @@
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, Group, Image, Paper, Stack, Text, TextInput, Title } from '@mantine/core';
+import {
+  Box,
+  Button,
+  Group,
+  Image,
+  Paper,
+  Stack,
+  Text,
+  TextInput,
+  Title,
+  Tooltip
+} from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconImageInPicture, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-
 function EditPerbekelDariMasaKeMasa() {
-  const state = useProxy(stateProfileDesa.mantanPerbekel)
+  const state = useProxy(stateProfileDesa.mantanPerbekel);
   const router = useRouter();
   const params = useParams();
   const [previewImage, setPreviewImage] = useState<string | null>(null);
@@ -38,9 +48,7 @@ function EditPerbekelDariMasaKeMasa() {
             periode: data.periode || '',
             imageId: data.imageId || ''
           });
-          if (data?.imageGalleryFoto?.link) {
-            setPreviewImage(data.imageGalleryFoto.link);
-          }
+          if (data?.imageGalleryFoto?.link) setPreviewImage(data.imageGalleryFoto.link);
         }
       } catch (error) {
         console.error('Error loading foto:', error);
@@ -52,24 +60,18 @@ function EditPerbekelDariMasaKeMasa() {
 
   const handleSubmit = async () => {
     try {
-      state.update.form = {
-        ...state.update.form,
-        nama: formData.nama,
-        daerah: formData.daerah,
-        periode: formData.periode,
-        imageId: formData.imageId
-      };
+      state.update.form = { ...state.update.form, ...formData };
+
       if (file) {
         const res = await ApiFetch.api.fileStorage.create.post({
           file,
           name: file.name,
         });
         const uploaded = res.data?.data;
-        if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
-        }
+        if (!uploaded?.id) return toast.error("Gagal upload gambar");
         state.update.form.imageId = uploaded.id;
       }
+
       await state.update.update();
       toast.success('Perbekel dari masa ke masa berhasil diperbarui!');
       router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa');
@@ -80,86 +82,119 @@ function EditPerbekelDariMasaKeMasa() {
   };
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
+    <Box px={{ base: 'sm', md: 'lg' }} py="md">
+      <Group mb="md">
+        <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+          <Button variant="subtle" onClick={() => router.back()} p="xs" radius="md">
+            <IconArrowBack color={colors['blue-button']} size={24} />
+          </Button>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Edit Perbekel Dari Masa Ke Masa
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Perbekel Dari Masa Ke Masa</Title>
+      <Paper
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        style={{ border: '1px solid #e0e0e0' }}
+      >
+        <Stack gap="md">
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Nama</Text>}
-            placeholder='Masukkan nama'
+            label="Nama"
+            placeholder="Masukkan nama"
             value={formData.nama}
-            onChange={(e) =>
-              (formData.nama = e.target.value)
-            }
+            onChange={(e) => setFormData({ ...formData, nama: e.target.value })}
+            required
           />
+
           <Box>
-            <Text>Upload Foto</Text>
+            <Text fw="bold" fz="sm" mb={6}>
+              Foto Perbekel
+            </Text>
             <Dropzone
               onDrop={(files) => {
-                const selectedFile = files[0]; // Ambil file pertama
+                const selectedFile = files[0];
                 if (selectedFile) {
                   setFile(selectedFile);
-                  setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
+                  setPreviewImage(URL.createObjectURL(selectedFile));
                 }
               }}
-              onReject={() => toast.error('File tidak valid.')}
-              maxSize={5 * 1024 ** 2} // Maks 5MB
+              onReject={() => toast.error('File tidak valid, gunakan format gambar')}
+              maxSize={5 * 1024 ** 2}
               accept={{ 'image/*': [] }}
+              radius="md"
+              p="xl"
             >
-              <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+              <Group justify="center" gap="xl" mih={180}>
                 <Dropzone.Accept>
-                  <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
+                  <IconUpload size={48} color={colors['blue-button']} stroke={1.5} />
                 </Dropzone.Accept>
                 <Dropzone.Reject>
-                  <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
+                  <IconX size={48} color="red" stroke={1.5} />
                 </Dropzone.Reject>
                 <Dropzone.Idle>
-                  <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                  <IconPhoto size={48} color="#868e96" stroke={1.5} />
                 </Dropzone.Idle>
-
-                <div>
-                  <Text size="xl" inline>
-                    Drag gambar ke sini atau klik untuk pilih file
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret gambar atau klik untuk memilih file
                   </Text>
-                  <Text size="sm" c="dimmed" inline mt={7}>
-                    Maksimal 5MB dan harus format gambar
+                  <Text size="sm" c="dimmed">
+                    Maksimal 5MB, format gambar wajib
                   </Text>
-                </div>
+                </Stack>
               </Group>
             </Dropzone>
 
-            {previewImage ? (
-              <Image alt="" src={previewImage} w={200} h={200} />
-            ) : (
-              <Center w={200} h={200} bg={"gray"}>
-                <IconImageInPicture />
-              </Center>
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{
+                    maxHeight: 220,
+                    objectFit: 'contain',
+                    border: `1px solid ${colors['blue-button']}`,
+                  }}
+                />
+              </Box>
             )}
           </Box>
+
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Daerah</Text>}
-            placeholder='Masukkan daerah'
+            label="Daerah"
+            placeholder="Masukkan daerah"
             value={formData.daerah}
-            onChange={(e) =>
-              (formData.daerah = e.target.value)
-            }
+            onChange={(e) => setFormData({ ...formData, daerah: e.target.value })}
+            required
           />
+
           <TextInput
-            label={<Text fw={"bold"} fz={"sm"}>Periode</Text>}
-            placeholder='Masukkan periode'
+            label="Periode"
+            placeholder="Masukkan periode"
             value={formData.periode}
-            onChange={(e) =>
-              (formData.periode = e.target.value)
-            }
+            onChange={(e) => setFormData({ ...formData, periode: e.target.value })}
+            required
           />
-          <Group>
-            <Button onClick={handleSubmit} bg={colors['blue-button']}>Submit</Button>
+
+          <Group justify="right">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              style={{
+                background: `linear-gradient(135deg, ${colors['blue-button']}, #4facfe)`,
+                color: '#fff',
+                boxShadow: '0 4px 15px rgba(79, 172, 254, 0.4)',
+              }}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

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

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

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

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

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text } from '@mantine/core';
+import { Box, Button, Center, Group, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title, Tooltip } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImac, IconPlus, IconSearch } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import { useProxy } from 'valtio/utils';
 import HeaderSearch from '../../../_com/header';
-import JudulList from '../../../_com/judulList';
 import stateProfileDesa from '../../../_state/desa/profile';
 
 function PerbekelDariMasaKeMasa() {
@@ -16,7 +15,7 @@ function PerbekelDariMasaKeMasa() {
     <Box>
       <HeaderSearch
         title='Perbekel Dari Masa Ke Masa'
-        placeholder='pencarian'
+        placeholder='Cari nama perbekel...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -29,74 +28,96 @@ function PerbekelDariMasaKeMasa() {
 function ListPerbekelDariMasaKeMasa({ search }: { search: string }) {
   const state = useProxy(stateProfileDesa.mantanPerbekel)
   const router = useRouter();
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = state.findMany;
+  const { data, page, totalPages, loading, load } = state.findMany;
 
   useShallowEffect(() => {
     load(page, 10, search)
-  }, [page, search])
+  }, [page, search]);
 
-  const filteredData = (data || [])
+  const filteredData = data || [];
 
   if (loading || !data) {
     return (
-      <Box py={10}>
-        <Skeleton h={500} />
-      </Box>
-    )
+      <Stack py={10}>
+        <Skeleton height={500} radius="md" />
+      </Stack>
+    );
   }
 
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Perbekel Dari Masa Ke Masa'
-          href='/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/create'
-        />
-        <Table striped withTableBorder withRowBorders>
-          <TableThead>
-            <TableTr>
-              <TableTh>Nama Perbekel</TableTh>
-              <TableTh>Periode</TableTh>
-              <TableTh>Detail</TableTh>
-            </TableTr>
-          </TableThead>
-          <TableTbody>
-            {filteredData.map((item) => (
-              <TableTr key={item.id}>
-                <TableTd>
-                  <Box w={200}>
-                    <Text lineClamp={1}>{item.nama}</Text>
-                  </Box>
-                </TableTd>
-                
-                <TableTd>
-                <Box w={200}>
-                    <Text lineClamp={1}>{item.periode}</Text>
-                  </Box>  
-                </TableTd>
-                <TableTd>
-                  <Button onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}>
-                    <IconDeviceImac size={20} />
-                  </Button>
-                </TableTd>
+      <Paper withBorder bg={colors['white-1']} p="lg" shadow="md" radius="md">
+        <Group justify='space-between' mb="md">
+          <Title order={4}>List Perbekel Dari Masa Ke Masa</Title>
+          <Tooltip label="Tambah Perbekel Baru" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '35%' }}>Nama Perbekel</TableTh>
+                <TableTh style={{ width: '35%' }}>Periode</TableTh>
+                <TableTh style={{ width: '20%' }}>Aksi</TableTh>
               </TableTr>
-            ))}
-          </TableTbody>
-        </Table>
+            </TableThead>
+            <TableTbody>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500} lineClamp={1}>{item.nama}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Text lineClamp={1}>{item.periode}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/desa/profile/profile-perbekel-dari-masa-ke-masa/${item.id}`)}
+                      >
+                        <IconDeviceImac size={20} />
+                        <Text ml={5}>Detail</Text>
+                      </Button>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Center py={20}>
+                      <Text color="dimmed">Tidak ada data perbekel yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
+
       <Center>
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)} // ini penting!
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
           mt="md"
           mb="md"
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

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

@@ -4,9 +4,9 @@ import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 import stateProfileDesa from '@/app/admin/(dashboard)/_state/desa/profile';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Center, Group, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Group, Image, Paper, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { Dropzone } from '@mantine/dropzone';
-import { IconArrowBack, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconPhoto, IconUpload, IconX, IconImageInPicture } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -30,22 +30,29 @@ function ProfilePerbekel() {
       }
 
       const data = await perbekelState.findUnique.load(id);
-      if (data) {
-        perbekelState.edit.initialize(data);
-      }
-      if (data?.image?.link) {
-        setPreviewImage(data.image.link);
-      }
+      if (data) perbekelState.edit.initialize(data);
+      if (data?.image?.link) setPreviewImage(data.image.link);
     };
 
     loadData();
 
     return () => {
       perbekelState.edit.reset();
-      perbekelState.findUnique.reset(); // opsional: reset juga data lama
+      perbekelState.findUnique.reset();
     };
   }, [params?.id, router]);
 
+  const handleFileChange = (newFile: File | null) => {
+    if (!newFile) {
+      setFile(null);
+      setPreviewImage(null);
+      return;
+    }
+    setFile(newFile);
+    const reader = new FileReader();
+    reader.onload = (event) => setPreviewImage(event.target?.result as string);
+    reader.readAsDataURL(newFile);
+  }
 
   const handleSubmit = async () => {
     if (isSubmitting || !perbekelState.edit.form.biodata.trim()) {
@@ -62,7 +69,6 @@ function ProfilePerbekel() {
           toast.error("Gagal upload gambar");
           return;
         }
-
         perbekelState.edit.form.imageId = uploaded.id;
       }
       const success = await perbekelState.edit.submit()
@@ -78,15 +84,9 @@ function ProfilePerbekel() {
     }
   }
 
-  const handleBack = () => {
-    router.back()
-  }
+  const handleBack = () => router.back();
 
-  if (
-    perbekelState.findUnique.loading ||
-    !perbekelState.findUnique.data ||
-    perbekelState.edit.loading
-  ) {
+  if (perbekelState.findUnique.loading || perbekelState.edit.loading) {
     return (
       <Box>
         <Center h={400}>
@@ -98,117 +98,112 @@ function ProfilePerbekel() {
 
   return (
     <Box py={10}>
-      <Stack gap={'xs'}>
-        <Group>
-          <Button variant="subtle" onClick={handleBack}>
-            <IconArrowBack color={colors['blue-button']} size={20} />
-          </Button>
+      <Stack gap="xs">
+        {/* Header */}
+        <Group mb="md">
+          <Tooltip label="Kembali ke halaman sebelumnya" withArrow>
+            <Button variant="subtle" onClick={handleBack} p="xs" radius="md">
+              <IconArrowBack color={colors['blue-button']} size={24} />
+            </Button>
+          </Tooltip>
+          <Title order={4} ml="sm" c="dark">
+            Edit Profil Perbekel
+          </Title>
         </Group>
-        <Paper bg={colors['white-1']} p={'xs'} w={{ base: '100%', md: '50%' }}>
-          <Stack gap={'xs'}>
+
+        <Paper bg={colors['white-1']} p="md" w={{ base: '100%', md: '50%' }} radius="md" shadow="sm" style={{ border: '1px solid #e0e0e0' }}>
+          <Stack gap="xs">
+            {/* Biodata */}
             <Box>
-              <Box>
-                <Stack>
-                  <Title order={3}>Edit Profil Perbekel</Title>
-                  <Text fz={"md"} fw={"bold"}>Biodata</Text>
-                  <EditEditor
-                    value={perbekelState.edit.form.biodata}
-                    onChange={(val) => perbekelState.edit.form.biodata = val}
-                  />
-                  <Box>
-                    <Text fz={"md"} fw={"bold"}>Gambar</Text>
-                    <Box>
-                      <Dropzone
-                        onDrop={(files) => {
-                          const selectedFile = files[0]; // Ambil file pertama
-                          if (selectedFile) {
-                            setFile(selectedFile);
-                            setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                          }
-                        }}
-                        onReject={() => toast.error('File tidak valid.')}
-                        maxSize={5 * 1024 ** 2} // Maks 5MB
-                        accept={{ 'image/*': [] }}
-                      >
-                        <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
-                          <Dropzone.Accept>
-                            <IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} />
-                          </Dropzone.Accept>
-                          <Dropzone.Reject>
-                            <IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} />
-                          </Dropzone.Reject>
-                          <Dropzone.Idle>
-                            <IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                          </Dropzone.Idle>
+              <Text fz="md" fw="bold">Biodata</Text>
+              <EditEditor
+                value={perbekelState.edit.form.biodata}
+                onChange={(val) => perbekelState.edit.form.biodata = val}
+              />
+            </Box>
 
-                          <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>
+            {/* Gambar */}
+            <Box>
+              <Text fz="md" fw="bold">Gambar</Text>
+              <Dropzone
+                onDrop={(files) => handleFileChange(files[0])}
+                onReject={() => toast.error('File tidak valid.')}
+                maxSize={5 * 1024 ** 2} // 5MB
+                accept={{ 'image/*': [] }}
+              >
+                <Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
+                  <Dropzone.Accept><IconUpload size={52} color="var(--mantine-color-blue-6)" stroke={1.5} /></Dropzone.Accept>
+                  <Dropzone.Reject><IconX size={52} color="var(--mantine-color-red-6)" stroke={1.5} /></Dropzone.Reject>
+                  <Dropzone.Idle><IconPhoto size={52} color="var(--mantine-color-dimmed)" stroke={1.5} /></Dropzone.Idle>
+                  <div>
+                    <Text size="xl" inline>Drag gambar ke sini atau klik untuk pilih file</Text>
+                    <Text size="sm" c="dimmed" inline mt={7}>Maksimal 5MB dan harus format gambar</Text>
+                  </div>
+                </Group>
+              </Dropzone>
 
-                      {/* Tampilkan preview kalau ada */}
-                      {previewImage && (
-                        <Box mt="sm">
-                          <Image
-                            src={previewImage}
-                            alt="Preview"
-                            style={{
-                              maxWidth: '100%',
-                              maxHeight: '200px',
-                              objectFit: 'contain',
-                              borderRadius: '8px',
-                              border: '1px solid #ddd',
-                            }}
-                          />
-                        </Box>
-                      )}
-
-                    </Box>
-                  </Box>
-
-                  <Box>
-                    <Text fz={"md"} fw={"bold"}>Pengalaman</Text>
-                    <EditEditor
-                      value={perbekelState.edit.form.pengalaman}
-                      onChange={(val) => perbekelState.edit.form.pengalaman = val}
-                    />
-                  </Box>
-                  <Box>
-                    <Text fz={"md"} fw={"bold"}>Pengalaman Organisasi</Text>
-                    <EditEditor
-                      value={perbekelState.edit.form.pengalamanOrganisasi}
-                      onChange={(val) => perbekelState.edit.form.pengalamanOrganisasi = val}
-                    />
-                  </Box>
-                  <Box>
-                    <Text fz={"md"} fw={"bold"}>Program Unggulan</Text>
-                    <EditEditor
-                      value={perbekelState.edit.form.programUnggulan}
-                      onChange={(val) => perbekelState.edit.form.programUnggulan = val}
-                    />
-                  </Box>
-                  <Group>
-                    <Button
-                      onClick={handleSubmit}
-                      bg={colors['blue-button']}
-                    >
-                      Submit
-                    </Button>
-                  </Group>
-                </Stack>
+              {/* Preview */}
+              <Box mt="sm">
+                {previewImage ? (
+                  <Image src={previewImage} alt="Preview" w={200} h={200} fit="cover" radius="md" />
+                ) : (
+                  <Center w={200} h={200} bg="gray.2">
+                    <Stack align="center" gap="xs">
+                      <IconImageInPicture size={48} color="gray" />
+                      <Text size="sm" c="gray">Tidak ada gambar</Text>
+                    </Stack>
+                  </Center>
+                )}
               </Box>
             </Box>
+
+            {/* Pengalaman */}
+            <Box>
+              <Text fz="md" fw="bold">Pengalaman</Text>
+              <EditEditor
+                value={perbekelState.edit.form.pengalaman}
+                onChange={(val) => perbekelState.edit.form.pengalaman = val}
+              />
+            </Box>
+
+            {/* Pengalaman Organisasi */}
+            <Box>
+              <Text fz="md" fw="bold">Pengalaman Organisasi</Text>
+              <EditEditor
+                value={perbekelState.edit.form.pengalamanOrganisasi}
+                onChange={(val) => perbekelState.edit.form.pengalamanOrganisasi = val}
+              />
+            </Box>
+
+            {/* Program Unggulan */}
+            <Box>
+              <Text fz="md" fw="bold">Program Unggulan</Text>
+              <EditEditor
+                value={perbekelState.edit.form.programUnggulan}
+                onChange={(val) => perbekelState.edit.form.programUnggulan = val}
+              />
+            </Box>
+
+            {/* Submit */}
+            <Group>
+              <Button
+                bg={colors['blue-button']}
+                onClick={handleSubmit}
+                loading={isSubmitting || perbekelState.edit.loading}
+                disabled={!perbekelState.edit.form.biodata.trim()}
+              >
+                {isSubmitting ? 'Menyimpan...' : 'Simpan Perubahan'}
+              </Button>
+
+              <Button variant="outline" onClick={handleBack} disabled={isSubmitting || perbekelState.edit.loading}>
+                Batal
+              </Button>
+            </Group>
           </Stack>
         </Paper>
       </Stack>
     </Box>
-  );
+  )
 }
 
 export default ProfilePerbekel;

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

@@ -1,7 +1,7 @@
 'use client'
 
 import colors from '@/con/colors';
-import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Stack, Text, Title } from '@mantine/core';
+import { Box, Button, Center, Divider, Grid, GridCol, Image, Paper, Skeleton, Stack, Text, Title, Tooltip } from '@mantine/core';
 import { IconEdit } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -12,98 +12,102 @@ function Page() {
   const router = useRouter();
   const snap = useSnapshot(stateProfileDesa);
 
-  // Panggil load data sekali saat komponen mount
+  // Load data saat mount
   useEffect(() => {
     stateProfileDesa.profilPerbekel.findUnique.load("edit");
   }, []);
 
   const perbekel = snap.profilPerbekel.findUnique.data;
 
+  if (!perbekel) {
+    return (
+      <Stack align="center" justify="center" py="xl">
+        <Skeleton radius="md" height={800} />
+      </Stack>
+    );
+  }
+
   return (
-    <Paper bg={colors['white-1']} p={'md'}>
-      <Stack gap={"xs"}>
-        <Grid>
+    <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm">
+      <Stack gap="md">
+        {/* Header + tombol edit */}
+        <Grid align="center">
           <GridCol span={{ base: 12, md: 11 }}>
-            <Title order={3}>Preview Profile PPID</Title>
+            <Title order={3} c={colors['blue-button']}>Preview Profil PPID</Title>
           </GridCol>
           <GridCol span={{ base: 12, md: 1 }}>
-            <Button bg={colors['blue-button']} onClick={() => router.push(`/admin/desa/profile/profile-perbekel/${snap.profilPerbekel.findUnique.data?.id}`)}>
-              <IconEdit size={16} />
-            </Button>
+            <Tooltip label="Edit Profil Perbekel" withArrow>
+              <Button
+                c="green"
+                variant="light"
+                leftSection={<IconEdit size={18} stroke={2} />}
+                radius="md"
+                onClick={() => router.push(`/admin/desa/profile/profile-perbekel/${perbekel.id}`)}
+              >
+                Edit
+              </Button>
+            </Tooltip>
           </GridCol>
         </Grid>
-        {perbekel && (
-          <Box>
-            <Paper p={"xl"} bg={colors['BG-trans']}>
-              <Box px={{ base: "md", md: 100 }}>
-                <Grid>
-                  <GridCol span={{ base: 12, md: 12 }}>
-                    <Center>
-                      <Image src={"/darmasaba-icon.png"} w={{ base: 100, md: 150 }} alt='' />
-                    </Center>
-                  </GridCol>
-                  <GridCol span={{ base: 12, md: 12 }}>
-                    <Text ta={"center"} fz={{ base: "1.2rem", md: "1.8rem" }} fw={'bold'}>PROFIL PIMPINAN BADAN PUBLIK DESA DARMASABA </Text>
-                  </GridCol>
-                </Grid>
-              </Box>
-              <Divider my={"md"} color={colors['blue-button']} />
-              {/* biodata perbekel */}
-              <Box px={{ base: 0, md: 50 }} pb={30}>
-                <Box pb={20} px={{ base: 0, md: 50 }}>
-                  <Paper bg={colors['BG-trans']} w={{ base: "100%", md: "100%" }}>
-                    <Stack gap={0}>
-                      <Center>
-                        <Image
-                          pt={{ base: 0, md: 90 }}
-                          src={perbekel.image?.link || "/perbekel.png"}
-                          w={{ base: 250, md: 350 }}
-                          alt='Foto Profil PPID'
-                          onError={(e) => {
-                            e.currentTarget.src = "/perbekel.png";
-                          }}
-                        />
-                      </Center>
-                      <Paper
-                        bg={colors['blue-button']}
-                        py={20}
-                        className="glass3"
-                        px={{ base: 10, md: 10 }}
 
-                      >
-                        <Text ta={"center"} c={colors['white-1']} fw={"bolder"} fz={{ base: "1.2rem", md: "1.6rem" }}>
-                        I.B. Surya Prabhawa Manuaba, S.H.,M.H.,NL.P.
-                        </Text>
-                      </Paper>
-                    </Stack>
-                  </Paper>
-                </Box>
-                <Box pt={10}>
-                  <Box>
-                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Biodata</Text>
-                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
-                  </Box>
-                  <Box>
-                    <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman</Text>
-                    <Text fz={{ base: "1rem", md: "1.5rem" }} dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
-                  </Box>
-                </Box>
-                <Box pb={30}>
-                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Pengalaman Organisasi</Text>
-                  <Box px={20}>
-                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
-                  </Box>
-                </Box>
-                <Box pb={20}>
-                  <Text fz={{ base: "1.125rem", md: "1.6rem" }} fw={'bold'}>Program Kerja Unggulan</Text>
-                  <Box px={20}>
-                    <Text fz={{ base: "1rem", md: "1.5rem" }} ta={"justify"} dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
-                  </Box>
-                </Box>
-              </Box>
-            </Paper>
+        {/* Card Profil */}
+        <Paper p="xl" bg={colors['white-1']} withBorder radius="md" shadow="xs">
+          <Box px={{ base: "sm", md: 100 }}>
+            <Grid>
+              <GridCol span={12}>
+                <Center>
+                  <Image src="/darmasaba-icon.png" w={{ base: 100, md: 150 }} alt="Logo Desa" />
+                </Center>
+              </GridCol>
+              <GridCol span={12}>
+                <Text ta="center" fz={{ base: "1.2rem", md: "1.8rem" }} fw="bold" c={colors['blue-button']}>
+                  Profil Pimpinan Badan Publik Desa Darmasaba
+                </Text>
+              </GridCol>
+            </Grid>
           </Box>
-        )}
+          <Divider my="md" color={colors['blue-button']} />
+
+          <Stack gap={0} px={{ base: 0, md: 50 }} pb="xl">
+            <Center>
+              <Image
+                pt={{ base: 0, md: 60 }}
+                src={perbekel.image?.link || "/perbekel.png"}
+                w={{ base: 250, md: 350 }}
+                alt="Foto Profil Perbekel"
+                radius="md"
+                onError={(e) => { e.currentTarget.src = "/perbekel.png"; }}
+              />
+            </Center>
+            <Paper
+              bg={colors['blue-button']}
+              py="md"
+              px="sm"
+              radius="md"
+              className="glass3"
+              style={{ mt: -30, boxShadow: '0 4px 20px rgba(0,0,0,0.15)' }}
+            >
+              <Text ta="center" c={colors['white-1']} fw="bolder" fz={{ base: "1.2rem", md: "1.6rem" }}>
+              I.B. Surya Prabhawa Manuaba, S.H., M.H.
+              </Text>
+            </Paper>
+          </Stack>
+
+          {/* Biodata & Info */}
+          <Box mt="lg">
+            <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mb={4}>Biodata</Text>
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.biodata }} />
+
+            <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman</Text>
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalaman }} />
+
+            <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Pengalaman Organisasi</Text>
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.pengalamanOrganisasi }} />
+
+            <Text fz={{ base: "1.125rem", md: "1.5rem" }} fw="bold" mt="md" mb={4}>Program Kerja Unggulan</Text>
+            <Text fz={{ base: "1rem", md: "1.4rem" }} ta="justify" dangerouslySetInnerHTML={{ __html: perbekel.programUnggulan }} />
+          </Box>
+        </Paper>
       </Stack>
     </Paper>
   );

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

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

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

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

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

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

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

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

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

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