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

@@ -202,7 +202,7 @@ model PrestasiDesa {
   deskripsi  String               @db.Text
   kategori   KategoriPrestasiDesa @relation(fields: [kategoriId], references: [id])
   kategoriId String
-  image      FileStorage?          @relation(fields: [imageId], references: [id])
+  image      FileStorage?         @relation(fields: [imageId], references: [id])
   imageId    String?
   createdAt  DateTime             @default(now())
   updatedAt  DateTime             @updatedAt
@@ -293,9 +293,9 @@ model PosisiOrganisasiPPID {
   pegawai            PegawaiPPID[]
   strukturOrganisasi StrukturPPID[] // Relasi balik
   parentId           String?
-  isActive           Boolean              @default(true)
-  createdAt          DateTime             @default(now())
-  updatedAt          DateTime             @updatedAt
+  isActive           Boolean                @default(true)
+  createdAt          DateTime               @default(now())
+  updatedAt          DateTime               @updatedAt
   parent             PosisiOrganisasiPPID?  @relation("Parent", fields: [parentId], references: [id])
   children           PosisiOrganisasiPPID[] @relation("Parent")
 }
@@ -1639,28 +1639,29 @@ 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
-  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())
+  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)
+  createdAt DateTime     @default(now())
+  updatedAt DateTime     @updatedAt
+  deletedAt DateTime     @default(now())
+  isActive  Boolean      @default(true)
 }
+
 // ========================================= INFO TEKHNOLOGI TEPAT GUNA ========================================= //
 model InfoTekno {
   id        String      @id @default(cuid())
@@ -2102,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

@@ -52,8 +52,65 @@ import tempatKegiatan from "./data/pendidikan/pendidikan-non-formal/tempat-kegia
 import tujuanProgram2 from "./data/pendidikan/pendidikan-non-formal/tujuan-program2.json";
 import programUnggulan from "./data/pendidikan/program-pendidikan-anak/program-unggulan.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 ===========
   // =========== SUBMENU PROFILE ===========
   // =========== PROFILE PEJABAT DESA ===========

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/lingkungan/pengelolaan-sampah.ts

@@ -269,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) {
@@ -291,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<{
@@ -306,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;
@@ -328,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",
@@ -363,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",
@@ -408,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/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

@@ -333,43 +333,56 @@ const lembagaPendidikan = proxy({
       Prisma.LembagaGetPayload<{
         include: {
           jenjangPendidikan: true;
-          siswa: true;
-          pengajar: true;
         };
-      }>
+      }> & {
+        siswa?: [];
+        pengajar?: [];
+      }
     > | null,
     page: 1,
     totalPages: 1,
     total: 0,
     loading: false,
     search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      lembagaPendidikan.findMany.loading = true; // Use the full path to access the property
+    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 };
-        if (search) query.search = search;
-        const res =
-          await ApiFetch.api.pendidikan.infosekolahpaud.lembagapendidikan[
-            "find-many"
-          ].get({
-            query,
-          });
+        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) {
-          lembagaPendidikan.findMany.data = res.data.data || [];
-          lembagaPendidikan.findMany.total = res.data.total || 0;
-          lembagaPendidikan.findMany.totalPages = res.data.totalPages || 1;
+          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
+            res.data?.message || 'No error message provided'
           );
-          lembagaPendidikan.findMany.data = [];
-          lembagaPendidikan.findMany.total = 0;
-          lembagaPendidikan.findMany.totalPages = 1;
+          throw new Error(res.data?.message || 'Failed to load lembaga pendidikan');
         }
       } catch (error) {
         console.error("Error loading lembaga pendidikan:", error);
@@ -621,7 +634,11 @@ const siswa = proxy({
     data: null as Array<
       Prisma.SiswaGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true;
+            };
+          };
         };
       }>
     > | null,
@@ -630,14 +647,16 @@ const siswa = proxy({
     total: 0,
     loading: false,
     search: "",
-    load: async (page = 1, limit = 10, search = "") => {
-      // Change to arrow function
-      siswa.findMany.loading = true; // Use the full path to access the property
+    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({
@@ -894,7 +913,11 @@ const pengajar = proxy({
     data: null as Array<
       Prisma.PengajarGetPayload<{
         include: {
-          lembaga: true;
+          lembaga: {
+            include: {
+              jenjangPendidikan: true
+            }
+          }
         };
       }>
     > | null,
@@ -903,14 +926,17 @@ const pengajar = proxy({
     total: 0,
     loading: false,
     search: "",
-    load: async (page = 1, limit = 10, 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({

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/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]/edit/page.tsx

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

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/create/page.tsx

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

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)/landing-page/apbdes/[id]/edit/page.tsx

@@ -1,26 +1,27 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-"use client";
+'use client';
 
-
-import apbdes from "@/app/admin/(dashboard)/_state/landing-page/apbdes";
-import colors from "@/con/colors";
-import ApiFetch from "@/lib/api-fetch";
+import apbdes from '@/app/admin/(dashboard)/_state/landing-page/apbdes';
+import colors from '@/con/colors';
+import ApiFetch from '@/lib/api-fetch';
 import {
   Box,
   Button,
   Group,
+  Image,
   Paper,
   Stack,
   Text,
   TextInput,
-  Title
-} from "@mantine/core";
-import { Dropzone } from "@mantine/dropzone";
-import { IconArrowBack, IconFile, IconImageInPicture, 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";
+  Title,
+  Tooltip,
+} from '@mantine/core';
+import { Dropzone } from '@mantine/dropzone';
+import { IconArrowBack, IconFile, 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 EditAPBDes() {
   const apbdesState = useProxy(apbdes);
@@ -38,14 +39,14 @@ function EditAPBDes() {
     fileId: apbdesState.edit.form.fileId || ''
   });
 
-  // Load sdgs desa by id saat pertama kali
+  // Load APBDes data by id
   useEffect(() => {
-    const loadKolaborasi = async () => {
+    const loadAPBDes = async () => {
       const id = params?.id as string;
       if (!id) return;
 
       try {
-        const data = await apbdesState.edit.load(id); // akses langsung, bukan dari proxy
+        const data = await apbdesState.edit.load(id);
         if (data) {
           setFormData({
             name: data.name || '',
@@ -53,202 +54,238 @@ function EditAPBDes() {
             imageId: data.imageId || '',
             fileId: data.fileId || ''
           });
-          if (data.image) {
-            if (data?.image?.link) {
-              setPreviewImage(data.image.link);
-            }
-          }
-          if (data.file) {
-            if (data?.file?.link) {
-              setPreviewDoc(data.file.link);
-            }
-          }
+          
+          if (data.image?.link) setPreviewImage(data.image.link);
+          if (data.file?.link) setPreviewDoc(data.file.link);
         }
       } catch (error) {
-        console.error("Error loading apbdes:", error);
-        toast.error("Gagal memuat data apbdes");
+        console.error('Error loading APBDes:', error);
+        toast.error('Gagal memuat data APBDes');
       }
     };
 
-    loadKolaborasi();
+    loadAPBDes();
   }, [params?.id]);
 
   const handleSubmit = async () => {
-
     try {
-      // edit global state with form data
+      // Update global state with form data
       apbdesState.edit.form = {
         ...apbdesState.edit.form,
-        name: formData.name,
-        jumlah: formData.jumlah,
-        imageId: formData.imageId // Keep existing imageId if not changed
+        ...formData,
       };
 
-      // Jika ada file image baru, upload
+      // Upload new image if exists
       if (imageFile) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file: imageFile, name: imageFile.name });
+        const res = await ApiFetch.api.fileStorage.create.post({ 
+          file: imageFile, 
+          name: imageFile.name 
+        });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload gambar");
+          return toast.error('Gagal upload gambar');
         }
 
-        // edit imageId in global state
         apbdesState.edit.form.imageId = uploaded.id;
       }
 
-      // Jika ada file doc baru, upload
+      // Upload new document if exists
       if (docFile) {
-        const res = await ApiFetch.api.fileStorage.create.post({ file: docFile, name: docFile.name });
+        const res = await ApiFetch.api.fileStorage.create.post({ 
+          file: docFile, 
+          name: docFile.name 
+        });
         const uploaded = res.data?.data;
 
         if (!uploaded?.id) {
-          return toast.error("Gagal upload doc");
+          return toast.error('Gagal upload dokumen');
         }
 
-        // edit fileId in global state
         apbdesState.edit.form.fileId = uploaded.id;
       }
 
       await apbdesState.edit.update();
-      toast.success("apbdes berhasil diperbarui!");
-      router.push("/admin/landing-page/APBDes");
+      toast.success('APBDes berhasil diperbarui!');
+      router.push('/admin/landing-page/APBDes');
     } catch (error) {
-      console.error("Error updating apbdes:", error);
-      toast.error("Terjadi kesalahan saat memperbarui apbdes");
+      console.error('Error updating APBDes:', error);
+      toast.error('Terjadi kesalahan saat memperbarui APBDes');
     }
   };
 
   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 APBDes</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 APBDes
+        </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 APBDes"
+            placeholder="Masukkan nama APBDes"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Nama</Text>}
-            placeholder="masukkan nama"
+            required
           />
 
           <TextInput
+            label="Jumlah Anggaran"
+            placeholder="Masukkan jumlah anggaran"
             value={formData.jumlah}
             onChange={(e) => setFormData({ ...formData, jumlah: e.target.value })}
-            label={<Text fz={"sm"} fw={"bold"}>Jumlah</Text>}
-            placeholder="masukkan jumlah"
+            required
           />
-          <Box>
-            <Text fz={"md"} fw={"bold"}>File Image</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setImageFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{
-                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
-                }}
-              >
-                <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>
-                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag file ke sini atau klik untuk pilih image
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format image
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Image</Text>
-                {previewImage ? (
-                  <iframe
-                    src={previewImage}
-                    width="100%"
-                    height="500px"
-                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                  />
-                ) : (
-                  <Text>Tidak ada image tersedia</Text>
-                )}
-              </Box>
-            </Box>
-          </Box>
           <Box>
-            <Text fz={"md"} fw={"bold"}>File Doc</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setDocFile(selectedFile);
-                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{
-                  'application/*': ['.pdf', '.doc', '.docx'],
-                }}
-              >
-                <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>
-                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar APBDes
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setImageFile(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 file ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format doc
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                {previewDoc ? (
-                  <iframe
-                    src={previewDoc}
-                    width="100%"
-                    height="500px"
-                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                  />
-                ) : (
-                  <Text>Tidak ada doc tersedia</Text>
-                )}
+            {previewImage && (
+              <Box mt="sm" style={{ display: 'flex', justifyContent: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ 
+                    maxHeight: 300, 
+                    objectFit: 'contain', 
+                    border: `1px solid ${colors['blue-button']}` 
+                  }}
+                />
               </Box>
-            </Box>
+            )}
           </Box>
-          <Button onClick={handleSubmit}>Simpan</Button>
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Dokumen APBDes
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setDocFile(selectedFile);
+                  setPreviewDoc(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format dokumen')}
+              maxSize={10 * 1024 ** 2} // 10MB
+              accept={{
+                'application/pdf': ['.pdf'],
+                'application/msword': ['.doc'],
+                'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+                'application/vnd.ms-excel': ['.xls'],
+                'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
+              }}
+              radius="md"
+              p="xl"
+            >
+              <Group justify="center" gap="xl" mih={150}>
+                <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>
+                  <IconFile size={48} color="#868e96" stroke={1.5} />
+                </Dropzone.Idle>
+                <Stack gap="xs" align="center">
+                  <Text size="md" fw={500}>
+                    Seret dokumen atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed">
+                    Maksimal 10MB, format PDF/DOC/DOCX/XLS/XLSX
+                  </Text>
+                </Stack>
+              </Group>
+            </Dropzone>
+
+            {previewDoc && (
+              <Box mt="sm">
+                <Text size="sm" c="dimmed" mb="xs">
+                  Dokumen terpilih: {docFile?.name || 'Dokumen'}
+                </Text>
+                <Button
+                  component="a"
+                  href={previewDoc}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  variant="light"
+                  leftSection={<IconFile size={16} />}
+                  size="sm"
+                >
+                  Lihat Dokumen
+                </Button>
+              </Box>
+            )}
+          </Box>
+
+          <Group justify="right" mt="md">
+            <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)/landing-page/apbdes/[id]/page.tsx

@@ -1,9 +1,9 @@
 'use client'
 import { useProxy } from 'valtio/utils';
 
-import { ActionIcon, 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, IconFile, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconEdit, IconFile, IconTrash } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 
@@ -35,89 +35,125 @@ function DetailAPBDes() {
   if (!apbdesState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={600} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = apbdesState.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 APBDes</Text>
-          {apbdesState.findUnique.data ? (
-            <Paper key={apbdesState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Nama APBDes</Text>
-                  <Text fz={"lg"}>{apbdesState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Jumlah</Text>
-                  <Text fz={"lg"}>{apbdesState.findUnique.data?.jumlah}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Gambar</Text>
-                  <Image w={{ base: 150, md: 150, lg: 150 }} src={apbdesState.findUnique.data?.image?.link} alt="gambar" />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                  {apbdesState.findUnique.data?.file?.link ? (
-                    <ActionIcon
-                      component="a"
-                      href={apbdesState.findUnique.data.file.link}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      variant="transparent"
-                    >
-                      <IconFile size={25} color={colors['blue-button']}/>
-                    </ActionIcon>
-                  ) : (
-                    <Text>Tidak ada dokumen tersedia</Text>
-                  )}
-                </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 APBDes
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="md">
+              <Box>
+                <Text fz="lg" fw="bold">Nama APBDes</Text>
+                <Text fz="md" c="dimmed">{data.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Jumlah Anggaran</Text>
+                <Text fz="md" c="dimmed">Rp. {data.jumlah || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Gambar</Text>
+                {data.image?.link ? (
+                  <Image
+                    src={data.image.link}
+                    alt={data.name || 'Gambar APBDes'}
+                    w={200}
+                    height={150}
+                    radius="md"
+                    fit="contain"
+                    style={{ border: '1px solid #ddd' }}
+                  />
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada gambar</Text>
+                )}
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold">Dokumen</Text>
+                {data.file?.link ? (
                   <Button
-                    onClick={() => {
-                      if (apbdesState.findUnique.data) {
-                        setSelectedId(apbdesState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
-                    }}
-                    disabled={apbdesState.delete.loading || !apbdesState.findUnique.data}
-                    color={"red"}
+                    component="a"
+                    href={data.file.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    variant="light"
+                    leftSection={<IconFile size={18} />}
+                    size="sm"
+                    mt="xs"
                   >
-                    <IconX size={20} />
+                    Lihat Dokumen
                   </Button>
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada dokumen</Text>
+                )}
+              </Box>
+
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus APBDes" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (apbdesState.findUnique.data) {
-                        router.push(`/admin/landing-page/APBDes/${apbdesState.findUnique.data.id}/edit`);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={!apbdesState.findUnique.data}
-                    color={"green"}
+                    disabled={apbdesState.delete.loading}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit APBDes" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/landing-page/APBDes/${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 APBDes ini?'
+        text="Apakah Anda yakin ingin menghapus APBDes ini?"
       />
     </Box>
   );

src/app/admin/(dashboard)/landing-page/apbdes/create/page.tsx

@@ -1,10 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-import { Box, Button, Group, 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, IconFile, IconImageInPicture, IconUpload, IconX } from '@tabler/icons-react';
+import { IconArrowBack, IconFile, IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { toast } from 'react-toastify';
@@ -70,140 +81,168 @@ function CreateAPBDes() {
   };
   
   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">
+          Tambah APBDes
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create APBDes</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">
+          {/* Gambar APBDes */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>File Image</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setImageFile(selectedFile);
-                    setPreviewImage(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{
-                  'application/*': ['.jpeg', '.jpg', '.png', '.gif', '.webp', '.svg'],
-                }}
-              >
-                <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>
-                    <IconImageInPicture size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Gambar APBDes
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setImageFile(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>
+                <Box>
+                  <Text size="xl" inline>
+                    Seret gambar atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline display="block" mt={7}>
+                    Maksimal 5MB (format: JPEG, JPG, PNG, GIF, WEBP, SVG)
+                  </Text>
+                </Box>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag file ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format image
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                {previewImage ? (
-                  <iframe
-                    src={previewImage}
-                    width="100%"
-                    height="500px"
-                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                  />
-                ) : (
-                  <Text>Tidak ada image tersedia</Text>
-                )}
+            {previewImage && (
+              <Box mt="md" style={{ textAlign: 'center' }}>
+                <Image
+                  src={previewImage}
+                  alt="Preview Gambar"
+                  radius="md"
+                  style={{ maxHeight: 200, objectFit: 'contain', border: '1px solid #ddd' }}
+                />
               </Box>
-            </Box>
+            )}
           </Box>
+
+          {/* Dokumen APBDes */}
           <Box>
-            <Text fz={"md"} fw={"bold"}>File Dokumen</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setDocFile(selectedFile);
-                    setPreviewDoc(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{
-                  'application/*': ['.pdf', '.doc', '.docx'],
-                }}
-              >
-                <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>
-                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
+            <Text fw="bold" fz="sm" mb={6}>
+              Dokumen APBDes
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setDocFile(selectedFile);
+                  setPreviewDoc(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format PDF, DOC, atau DOCX')}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'application/pdf': ['.pdf'],
+                'application/msword': ['.doc'],
+                'application/vnd.openxmlformats-officedocument.wordprocessingml.document': ['.docx'],
+              }}
+              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>
+                  <IconFile size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <Box>
+                  <Text size="xl" inline>
+                    Seret dokumen atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline display="block" mt={7}>
+                    Maksimal 5MB (format: PDF, DOC, DOCX)
+                  </Text>
+                </Box>
+              </Group>
+            </Dropzone>
 
-                  <div>
-                    <Text size="xl" inline>
-                      Drag file ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format dokumen
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                {previewDoc ? (
-                  <iframe
-                    src={previewDoc}
-                    width="100%"
-                    height="500px"
-                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                  />
-                ) : (
-                  <Text>Tidak ada dokumen tersedia</Text>
-                )}
+            {previewDoc && (
+              <Box mt="md">
+                <Text fw="bold" fz="sm" mb={6}>
+                  Pratinjau Dokumen
+                </Text>
+                <iframe
+                  src={previewDoc}
+                  width="100%"
+                  height="500px"
+                  style={{ border: '1px solid #ddd', borderRadius: '8px' }}
+                />
               </Box>
-            </Box>
+            )}
           </Box>
+
+          {/* Form Input */}
           <TextInput
-            value={stateAPBDes.create.form.name}
-            onChange={(val) => {
-              stateAPBDes.create.form.name = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
+            label="Nama APBDes"
+            placeholder="Masukkan nama APBDes"
+            value={stateAPBDes.create.form.name || ''}
+            onChange={(e) => (stateAPBDes.create.form.name = e.target.value)}
+            required
           />
-           <TextInput
-            value={stateAPBDes.create.form.jumlah}
-            onChange={(val) => {
-              stateAPBDes.create.form.jumlah = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Jumlah</Text>}
-            placeholder='Masukkan jumlah'
+          <TextInput
+            label="Jumlah Anggaran"
+            placeholder="Masukkan jumlah anggaran"
+            value={stateAPBDes.create.form.jumlah || ''}
+            onChange={(e) => (stateAPBDes.create.form.jumlah = e.target.value)}
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right" mt="md">
+            <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)',
+              }}
+              disabled={!imageFile || !docFile || !stateAPBDes.create.form.name || !stateAPBDes.create.form.jumlah}
+            >
+              Simpan
+            </Button>
           </Group>
         </Stack>
       </Paper>

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

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { ActionIcon, Box, Button, Center, 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 { IconDeviceImacCog, IconFile, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImacCog, IconFile, 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 apbdes from '../../_state/landing-page/apbdes';
 
 
@@ -17,7 +16,7 @@ function APBDes() {
     <Box>
       <HeaderSearch
         title='APBDes'
-        placeholder='pencarian'
+        placeholder='Cari APBDes...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -48,73 +47,102 @@ function ListAPBDes({ search }: { search: string }) {
   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 APBDes'
-            href='/admin/landing-page/APBDes/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama APBDes</TableTh>
-                  <TableTh>Jumlah APBDes</TableTh>
-                  <TableTh>Document</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 APBDes</Title>
+          <Tooltip label="Tambah APBDes" withArrow>
+            <Button 
+              leftSection={<IconPlus size={18} />} 
+              color="blue" 
+              variant="light" 
+              onClick={() => router.push('/admin/landing-page/APBDes/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        
+        <Box style={{ overflowX: 'auto' }}>
+          <Table highlightOnHover>
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '30%' }}>Nama APBDes</TableTh>
+                <TableTh style={{ width: '25%' }}>Jumlah</TableTh>
+                <TableTh style={{ width: '25%' }}>Dokumen</TableTh>
+                <TableTh style={{ width: '20%' }}>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.name}</Text>
-                      </Box>
+                      <Text fw={500} truncate="end">{item.name}</Text>
                     </TableTd>
                     <TableTd>
-                      <Text truncate="end" fz={"sm"}>Rp. {item.jumlah}</Text>
+                      <Text>Rp. {item.jumlah}</Text>
                     </TableTd>
                     <TableTd>
                       {item.file?.link ? (
-                        <ActionIcon
+                        <Button
                           component="a"
                           href={item.file.link}
                           target="_blank"
                           rel="noopener noreferrer"
-                          variant='transparent'
+                          variant="light"
+                          leftSection={<IconFile size={18} />}
+                          size="sm"
                         >
-                          <IconFile size={25} color={colors['blue-button']} />
-                        </ActionIcon>
+                          Lihat Dokumen
+                        </Button>
                       ) : (
-                        <Text>Tidak ada dokumen tersedia</Text>
+                        <Text c="dimmed" fz="sm">Tidak ada dokumen</Text>
                       )}
                     </TableTd>
                     <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/APBDes/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                      <Button
+                        variant="light"
+                        color="blue"
+                        onClick={() => router.push(`/admin/landing-page/APBDes/${item.id}`)}
+                        fullWidth
+                      >
+                        <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 APBDes yang cocok</Text>
+                    </Center>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Box>
       </Paper>
-      <Center>
+      
+      <Center mt="md">
         <Pagination
           value={page}
-          onChange={(newPage) => load(newPage)}
+          onChange={(newPage) => {
+            load(newPage, 10);
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+          }}
           total={totalPages}
-          my={"md"}
+          color="blue"
+          radius="md"
         />
       </Center>
     </Box>

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/_lib/layouTabs.tsx

@@ -1,60 +1,103 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconList, IconCategory } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
+    const router = useRouter();
+    const pathname = usePathname();
+
     const tabs = [
         {
             label: "List Desa Anti Korupsi",
             value: "listDesaAntiKorupsi",
-            href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi"
+            href: "/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi",
+            icon: <IconList size={18} stroke={1.8} />,
+            tooltip: "Kelola daftar program desa anti korupsi",
         },
         {
             label: "Kategori Desa Anti Korupsi",
             value: "kategoriDesaAntiKorupsi",
-            href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi"
+            href: "/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi",
+            icon: <IconCategory size={18} stroke={1.8} />,
+            tooltip: "Kelola kategori desa anti korupsi",
         },
     ];
-    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)
     }
 
     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}>Desa Anti Korupsi</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={2} fw={700} style={{ color: "#1A1B1E" }}>
+                Desa Anti Korupsi
+            </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>
     );
 }

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

@@ -2,14 +2,14 @@
 'use client'
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 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';
 import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
-function EditKategoriDesaAntiKorupsi() {
+export default function EditKategoriDesaAntiKorupsi() {
   const router = useRouter();
   const params = useParams();
   const id = params?.id as string;
@@ -18,16 +18,17 @@ function EditKategoriDesaAntiKorupsi() {
   const [formData, setFormData] = useState({
     name: "",
   });
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    const loadKategorikegiatan = async () => {
+    const loadKategori = async () => {
       if (!id) return;
-
+      setIsLoading(true);
+      
       try {
         const data = await stateKategori.edit.load(id);
 
         if (data) {
-          // pastikan id-nya masuk ke state edit
           stateKategori.edit.id = id;
           setFormData({
             name: data.name || '',
@@ -36,63 +37,88 @@ function EditKategoriDesaAntiKorupsi() {
       } catch (error) {
         console.error("Error loading kategori desa anti korupsi:", error);
         toast.error("Gagal memuat data kategori desa anti korupsi");
+      } finally {
+        setIsLoading(false);
       }
     };
 
-    loadKategorikegiatan();
+    loadKategori();
   }, [id]);
 
   const handleSubmit = async () => {
-    try {
-      if (!formData.name.trim()) {
-        toast.error('Nama kategori desa anti korupsi tidak boleh kosong');
-        return;
-      }
+    if (!formData.name.trim()) {
+      return toast.error('Nama kategori tidak boleh kosong');
+    }
 
+    try {
+      setIsLoading(true);
       stateKategori.edit.form = {
         name: formData.name.trim(),
       };
 
-      // Safety check tambahan: pastikan ID tidak kosong
       if (!stateKategori.edit.id) {
-        stateKategori.edit.id = id; // fallback
+        stateKategori.edit.id = id;
       }
 
-      const success = await stateKategori.edit.update();
-
-      if (success) {
-        router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
-      }
+      await stateKategori.edit.update();
+      toast.success('Kategori berhasil diperbarui');
+      router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
     } catch (error) {
       console.error("Error updating kategori desa anti korupsi:", error);
-      // toast akan ditampilkan dari fungsi update
+      toast.error(error instanceof Error ? error.message : 'Gagal memperbarui kategori');
+    } finally {
+      setIsLoading(false);
     }
   };
 
   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 Kategori Desa Anti Korupsi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Kategori Desa Anti Korupsi</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="Nama Kategori"
+            placeholder="Masukkan nama kategori"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
-            placeholder='Masukkan nama kategori desa anti korupsi'
+            required
+            disabled={isLoading}
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+
+          <Group justify="right" mt="md">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={isLoading}
+              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 EditKategoriDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create/page.tsx

@@ -1,16 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
 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 { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
 import { useProxy } from 'valtio/utils';
 import korupsiState from '../../../../_state/landing-page/desa-anti-korupsi';
 
-function CreateKategoriDesaAntiKorupsi() {
+export default function CreateKategoriDesaAntiKorupsi() {
   const router = useRouter();
-  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi)
+  const stateKategori = useProxy(korupsiState.kategoriDesaAntiKorupsi);
 
   useEffect(() => {
     stateKategori.findMany.load();
@@ -20,42 +20,64 @@ function CreateKategoriDesaAntiKorupsi() {
     stateKategori.create.form = {
       name: "",
     };
-  }
+  };
 
   const handleSubmit = async () => {
+    if (!stateKategori.create.form.name) {
+      return alert('Nama kategori harus diisi');
+    }
+    
     await stateKategori.create.create();
     resetForm();
-    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi")
-  }
+    router.push("/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi");
+  };
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <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>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Desa Anti Korupsi
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Kategori Desa Anti Korupsi</Title>
-            <TextInput
-              value={stateKategori.create.form.name}
-              onChange={(val) => {
-                stateKategori.create.form.name = val.target.value;
+      <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"
+            placeholder="Masukkan nama kategori"
+            value={stateKategori.create.form.name || ''}
+            onChange={(e) => (stateKategori.create.form.name = e.target.value)}
+            required
+          />
+
+          <Group justify="right" mt="md">
+            <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)',
               }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Desa Anti Korupsi</Text>}
-              placeholder='Masukkan nama kategori desa anti korupsi'
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }
-
-export default CreateKategoriDesaAntiKorupsi;

src/app/admin/(dashboard)/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/page.tsx

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } 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 { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconSearch, IconTrash } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
 
@@ -56,74 +55,84 @@ function ListKategoriKegiatan({ search }: { search: string }) {
 
   const filteredData = data || []
 
-  // Handle loading state
   if (loading || !data) {
     return (
       <Stack py={10}>
-        <Skeleton height={550} />
+        <Skeleton height={600} radius="md" />
       </Stack>
     );
   }
 
-  if (data.length === 0) {
-    return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Kategori Kegiatan'
-            href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Edit</TableTh>
-                  <TableTh>Delete</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
-        </Paper>
-      </Box>
-    );
-  }
-
   return (
     <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Kategori Kegiatan'
-          href='/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create'
-        />
-        <Box style={{ overflowY: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+      <Paper bg={colors['white-1']} p={'lg'} shadow="md" radius="md">
+        <Group justify="space-between" mb="md">
+          <Title order={4}>Daftar Kategori Kegiatan</Title>
+          <Tooltip label="Tambah Kategori" withArrow>
+            <Button
+              leftSection={<IconPlus size={18} />}
+              color="blue"
+              variant="light"
+              onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/create')}
+            >
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+        <Box style={{ overflowX: "auto" }}>
+          <Table highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh>Nama Kategori</TableTh>
                 <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh>Hapus</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>
-                    <Button color="green" onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button color="red" onClick={() => {
-                      setSelectedId(item.id)
-                      setModalHapus(true)
-                    }}>
-                      <IconX size={20} />
-                    </Button>
+              {filteredData.length > 0 ? (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>
+                      <Text fw={500}>{item.name}</Text>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Edit" withArrow>
+                        <Button
+                          variant="light"
+                          color="green"
+                          size="sm"
+                          onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/kategori-desa-anti-korupsi/${item.id}`)}
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd>
+                      <Tooltip label="Hapus" withArrow>
+                        <Button
+                          variant="light"
+                          color="red"
+                          size="sm"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrash size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={2}>
+                    <Center py={20}>
+                      <Text c="dimmed">Tidak ada data kategori yang ditemukan</Text>
+                    </Center>
                   </TableTd>
                 </TableTr>
-              ))}
+              )}
             </TableTbody>
           </Table>
         </Box>
@@ -133,11 +142,13 @@ function ListKategoriKegiatan({ search }: { search: string }) {
           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>
       {/* Modal Konfirmasi Hapus */}

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

@@ -1,18 +1,16 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
-import { useProxy } from 'valtio/utils';
-
-import { Box, Button, Group, Paper, Select, Stack, Text, TextInput } from '@mantine/core';
+'use client';
+import { Box, Button, Group, Paper, Select, Stack, Text, TextInput, Title, Tooltip } from '@mantine/core';
 import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
 import { useParams, useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import { toast } from 'react-toastify';
+import { useProxy } from 'valtio/utils';
 
 import colors from '@/con/colors';
-
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import ApiFetch from '@/lib/api-fetch';
 import { Dropzone } from '@mantine/dropzone';
-import { toast } from 'react-toastify';
 import EditEditor from '@/app/admin/(dashboard)/_com/editEditor';
 
 interface FormDesaAntiKorupsi {
@@ -22,18 +20,20 @@ interface FormDesaAntiKorupsi {
   fileId: string;
 }
 
-function EditDesaAntiKorupsi() {
-  const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi)
+export default function EditDesaAntiKorupsi() {
+  const desaAntiKorupsiState = useProxy(korupsiState.desaAntikorupsi);
   const [previewFile, setPreviewFile] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-  const params = useParams()
-  const router = useRouter()
+  const [isLoading, setIsLoading] = useState(false);
+  const params = useParams();
+  const router = useRouter();
+  
   const [formData, setFormData] = useState<FormDesaAntiKorupsi>({
     name: '',
     deskripsi: '',
     kategoriId: '',
     fileId: '',
-  })
+  });
 
   useEffect(() => {
     const loadDesaAntiKorupsi = async () => {
@@ -43,7 +43,6 @@ function EditDesaAntiKorupsi() {
       try {
         const data = await desaAntiKorupsiState.edit.load(id);
         if (data) {
-          // ⬇️ FIX PENTING: tambahkan ini
           desaAntiKorupsiState.edit.id = id;
 
           desaAntiKorupsiState.edit.form = {
@@ -61,169 +60,198 @@ function EditDesaAntiKorupsi() {
           });
 
           if (data?.file?.link) {
-            setPreviewFile(data.file.link)
+            setPreviewFile(data.file.link);
           }
         }
       } catch (error) {
-        console.error("Error loading program penghijauan:", error);
-        toast.error("Gagal memuat data program penghijauan");
+        console.error('Error loading data:', error);
+        toast.error('Gagal memuat data Desa Anti Korupsi');
       }
-    }
+    };
 
     loadDesaAntiKorupsi();
   }, [params?.id]);
 
-
   const handleSubmit = async () => {
+    if (!formData.name) {
+      return toast.warn('Masukkan judul dokumen');
+    }
+    if (!formData.kategoriId) {
+      return toast.warn('Pilih kategori dokumen');
+    }
 
+    setIsLoading(true);
     try {
       // Update global state with form data
       desaAntiKorupsiState.edit.form = {
         ...desaAntiKorupsiState.edit.form,
-        name: formData.name,
-        deskripsi: formData.deskripsi,
+        ...formData,
         kategoriId: formData.kategoriId || '',
-        fileId: formData.fileId // Keep existing imageId if not changed
       };
 
-      // Jika ada file baru, upload
+      // Upload new file if exists
       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");
+          throw new Error('Gagal mengunggah dokumen');
         }
-
-        // Update imageId in global state
         desaAntiKorupsiState.edit.form.fileId = uploaded.id;
       }
 
       await desaAntiKorupsiState.edit.update();
-      toast.success("desa anti korupsi berhasil diperbarui!");
-      router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi");
+      toast.success('Data berhasil diperbarui');
+      router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi');
     } catch (error) {
-      console.error("Error updating desa anti korupsi:", error);
-      toast.error("Terjadi kesalahan saat memperbarui desa anti korupsi");
+      console.error('Error updating data:', error);
+      toast.error('Terjadi kesalahan saat memperbarui data');
+    } finally {
+      setIsLoading(false);
     }
   };
 
   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"}>Edit List Desa Anti Korupsi</Text>
-          {desaAntiKorupsiState.findUnique.data ? (
-            <Paper key={desaAntiKorupsiState.findUnique.data.id}>
-              <Stack gap={"xs"}>
-                <TextInput
-                  value={formData.name}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      name: val.target.value
-                    })
+    <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 Desa Anti Korupsi
+        </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 Dokumen"
+            placeholder="Masukkan judul dokumen"
+            value={formData.name}
+            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <EditEditor
+              value={formData.deskripsi}
+              onChange={(val) => setFormData({ ...formData, deskripsi: val })}
+            />
+          </Box>
+
+          <Select
+            label="Kategori"
+            placeholder="Pilih kategori"
+            value={formData.kategoriId}
+            onChange={(val) => setFormData({ ...formData, kategoriId: val || '' })}
+            data={
+              korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
+                value: v.id,
+                label: v.name,
+              })) || []
+            }
+            required
+            searchable
+            clearable
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Dokumen
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewFile(URL.createObjectURL(selectedFile));
+                }
+              }}
+              onReject={() => toast.error('File tidak valid, gunakan format dokumen')}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'application/*': ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'],
+              }}
+              radius="md"
+            >
+              <Group justify="center" gap="xl" mih={180} style={{ pointerEvents: 'none' }}>
+                <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>
+                  <IconFile size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="lg" inline>
+                    Seret dokumen ke sini atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX)
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewFile && (
+              <Box mt="md">
+                <Text fw="bold" fz="sm" mb={6}>
+                  Pratinjau Dokumen
+                </Text>
+                <Box
+                  style={{
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                    overflow: 'hidden',
+                    height: '500px',
+                    width: '100%',
                   }}
-                  label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-                  placeholder='Masukkan judul'
-                />
-                <Box>
-                  <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
-                  <EditEditor
-                    value={formData.deskripsi}
-                    onChange={(val) => {
-                      setFormData({
-                        ...formData,
-                        deskripsi: val
-                      })
-                    }}
+                >
+                  <iframe
+                    src={previewFile}
+                    width="100%"
+                    height="100%"
+                    style={{ border: 'none' }}
                   />
                 </Box>
-                <Select
-                  value={formData.kategoriId}
-                  onChange={(val) => {
-                    setFormData({
-                      ...formData,
-                      kategoriId: val ?? ""
-                    })
-                  }}
-                  label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
-                  placeholder="Pilih kategori"
-                  data={
-                    korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
-                      value: v.id,
-                      label: v.name,
-                    })) || []
-                  }
-                />
-                <Box>
-                  <Text fz={"md"} fw={"bold"}>File Document</Text>
-                  <Box>
-                    <Dropzone
-                      onDrop={(files) => {
-                        const selectedFile = files[0]; // Ambil file pertama
-                        if (selectedFile) {
-                          setFile(selectedFile);
-                          setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
-                        }
-                      }}
-                      onReject={() => toast.error('File tidak valid.')}
-                      maxSize={5 * 1024 ** 2} // Maks 5MB
-                      accept={{
-                        'application/*': ['.pdf', '.doc', '.docx'],
-                      }}
-                    >
-                      <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>
-                          <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                        </Dropzone.Idle>
+              </Box>
+            )}
+          </Box>
 
-                        <div>
-                          <Text size="xl" inline>
-                            Drag file ke sini atau klik untuk pilih file
-                          </Text>
-                          <Text size="sm" c="dimmed" inline mt={7}>
-                            Maksimal 5MB dan harus format document
-                          </Text>
-                        </div>
-                      </Group>
-                    </Dropzone>
-                    <Box>
-                      <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                      {previewFile ? (
-                        <iframe
-                          src={previewFile}
-                          width="100%"
-                          height="500px"
-                          style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                        />
-                      ) : (
-                        <Text>Tidak ada dokumen tersedia</Text>
-                      )}
-                    </Box>
-                  </Box>
-                </Box>
-                <Group>
-                  <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-                </Group>
-              </Stack>
-            </Paper>
-          ) : null}
+          <Group justify="right" mt="xl">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={isLoading}
+              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 EditDesaAntiKorupsi;
+}

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

@@ -2,15 +2,15 @@
 import { ModalKonfirmasiHapus } from '@/app/admin/(dashboard)/_com/modalKonfirmasiHapus';
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 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 DetailKegiatanDesa() {
+export default function DetailKegiatanDesa() {
   const detailState = useProxy(korupsiState.desaAntikorupsi)
   const [modalHapus, setModalHapus] = useState(false)
   const [selectedId, setSelectedId] = useState<string | null>(null)
@@ -34,89 +34,123 @@ function DetailKegiatanDesa() {
   if (!detailState.findUnique.data) {
     return (
       <Stack py={10}>
-        <Skeleton h={40} />
+        <Skeleton height={500} radius="md" />
       </Stack>
-    )
+    );
   }
 
+  const data = detailState.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 List Desa Anti Korupsi</Text>
-          {detailState.findUnique.data ? (
-            <Paper key={detailState.findUnique.data.id} bg={colors['BG-trans']} p={'md'}>
-              <Stack gap={"xs"}>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Judul</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Deskripsi</Text>
-                  <Text fz={"lg"} dangerouslySetInnerHTML={{ __html: detailState.findUnique.data?.deskripsi }} />
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Kategori</Text>
-                  <Text fz={"lg"}>{detailState.findUnique.data?.kategori?.name}</Text>
-                </Box>
-                <Box>
-                  <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                  {detailState.findUnique.data?.file?.link ? (
-                    <iframe
-                      src={detailState.findUnique.data.file.link}
-                      width="100%"
-                      height="500px"
-                      style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                    />
-                  ) : (
-                    <Text>Tidak ada dokumen tersedia</Text>
-                  )}
-                </Box>
-                <Flex gap={"xs"} mt={10}>
-                  <Button
-                    onClick={() => {
-                      if (detailState.findUnique.data) {
-                        setSelectedId(detailState.findUnique.data.id);
-                        setModalHapus(true);
-                      }
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
+
+      <Paper
+        w={{ base: "100%", md: "50%" }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+        withBorder
+      >
+        <Stack gap="md">
+          <Text fz="2xl" fw="bold" c={colors['blue-button']}>
+            Detail Desa Anti Korupsi
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="md">
+              <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?.name || '-'}</Text>
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb="xs">Deskripsi</Text>
+                <Box 
+                  fz="md" 
+                  c="dimmed" 
+                  dangerouslySetInnerHTML={{ __html: data.deskripsi || '-' }}
+                  style={{ lineHeight: 1.6 }}
+                />
+              </Box>
+
+              <Box>
+                <Text fz="lg" fw="bold" mb="xs">Dokumen</Text>
+                {data.file?.link ? (
+                  <Box 
+                    style={{
+                      border: '1px solid #e0e0e0',
+                      borderRadius: '8px',
+                      overflow: 'hidden',
+                      height: '500px',
+                      width: '100%'
                     }}
-                    disabled={detailState.delete.loading || !detailState.findUnique.data}
-                    color={"red"}
                   >
-                    <IconX size={20} />
-                  </Button>
+                    <iframe
+                      src={data.file.link}
+                      width="100%"
+                      height="100%"
+                      style={{ border: 'none' }}
+                    />
+                  </Box>
+                ) : (
+                  <Text fz="sm" c="dimmed">Tidak ada dokumen tersedia</Text>
+                )}
+              </Box>
+
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Data" withArrow position="top">
                   <Button
+                    color="red"
                     onClick={() => {
-                      if (detailState.findUnique.data) {
-                        router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${detailState.findUnique.data.id}/edit`);
-                      }
+                      setSelectedId(data.id);
+                      setModalHapus(true);
                     }}
-                    disabled={!detailState.findUnique.data}
-                    color={"green"}
+                    variant="light"
+                    radius="md"
+                    size="md"
+                    disabled={detailState.delete.loading}
+                  >
+                    <IconTrash size={20} />
+                  </Button>
+                </Tooltip>
+
+                <Tooltip label="Edit Data" withArrow position="top">
+                  <Button
+                    color="green"
+                    onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${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 desa anti korupsi ini?'
+        text="Apakah Anda yakin ingin menghapus data Desa Anti Korupsi ini?"
       />
     </Box>
   );
-}
-
-export default DetailKegiatanDesa;
+}

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

@@ -1,10 +1,21 @@
 /* eslint-disable react-hooks/exhaustive-deps */
-'use client'
+'use client';
 import CreateEditor from '@/app/admin/(dashboard)/_com/createEditor';
 import korupsiState from '@/app/admin/(dashboard)/_state/landing-page/desa-anti-korupsi';
 import colors from '@/con/colors';
 import ApiFetch from '@/lib/api-fetch';
-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 { Dropzone } from '@mantine/dropzone';
 import { IconArrowBack, IconFile, IconUpload, IconX } from '@tabler/icons-react';
 import { useRouter } from 'next/navigation';
@@ -13,12 +24,12 @@ import { toast } from 'react-toastify';
 import { useProxy } from 'valtio/utils';
 
 
-function CreateDesaAntiKorupsi() {
+export default function CreateDesaAntiKorupsi() {
   const router = useRouter();
-  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi)
+  const stateKorupsi = useProxy(korupsiState.desaAntikorupsi);
   const [previewFile, setPreviewFile] = useState<string | null>(null);
   const [file, setFile] = useState<File | null>(null);
-
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     stateKorupsi.findMany.load();
@@ -27,140 +38,181 @@ function CreateDesaAntiKorupsi() {
 
   const resetForm = () => {
     stateKorupsi.create.form = {
-      name: "",
-      deskripsi: "",
-      kategoriId: "",
-      fileId: "",
+      name: '',
+      deskripsi: '',
+      kategoriId: '',
+      fileId: '',
     };
     setFile(null);
     setPreviewFile(null);
   };
+
   const handleSubmit = async () => {
     if (!file) {
-      return toast.warn("Pilih file pdf terlebih dahulu");
+      return toast.warn('Pilih file dokumen terlebih dahulu');
+    }
+    if (!stateKorupsi.create.form.name) {
+      return toast.warn('Masukkan judul dokumen');
+    }
+    if (!stateKorupsi.create.form.kategoriId) {
+      return toast.warn('Pilih kategori dokumen');
     }
 
-    const res = await ApiFetch.api.fileStorage.create.post({
-      file,
-      name: file.name,
-    })
+    setIsLoading(true);
+    try {
+      const res = await ApiFetch.api.fileStorage.create.post({
+        file,
+        name: file.name,
+      });
 
-    const uploaded = res.data?.data;
+      const uploaded = res.data?.data;
 
-    if (!uploaded?.id) {
-      return toast.error("Gagal mengupload file");
+      if (!uploaded?.id) {
+        throw new Error('Gagal mengunggah dokumen');
+      }
+
+      stateKorupsi.create.form.fileId = uploaded.id;
+      await stateKorupsi.create.create();
+      
+      toast.success('Data berhasil disimpan');
+      resetForm();
+      router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi');
+    } catch (error) {
+      console.error('Error:', error);
+      toast.error('Terjadi kesalahan saat menyimpan data');
+    } finally {
+      setIsLoading(false);
     }
-
-    stateKorupsi.create.form.fileId = uploaded.id;
-
-    await stateKorupsi.create.create();
-
-    resetForm();
-    router.push("/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi")
-  }
+  };
   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">
+          Tambah Dokumen Desa Anti Korupsi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Create Kegiatan Desa</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">
           <Box>
-            <Text fz={"md"} fw={"bold"}>File Document</Text>
-            <Box>
-              <Dropzone
-                onDrop={(files) => {
-                  const selectedFile = files[0]; // Ambil file pertama
-                  if (selectedFile) {
-                    setFile(selectedFile);
-                    setPreviewFile(URL.createObjectURL(selectedFile)); // Buat preview
-                  }
-                }}
-                onReject={() => toast.error('File tidak valid.')}
-                maxSize={5 * 1024 ** 2} // Maks 5MB
-                accept={{
-                  'application/*': ['.pdf', '.doc', '.docx'],
-                }}
-              >
-                <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>
-                    <IconFile size={52} color="var(--mantine-color-dimmed)" stroke={1.5} />
-                  </Dropzone.Idle>
-
-                  <div>
-                    <Text size="xl" inline>
-                      Drag file ke sini atau klik untuk pilih file
-                    </Text>
-                    <Text size="sm" c="dimmed" inline mt={7}>
-                      Maksimal 5MB dan harus format document
-                    </Text>
-                  </div>
-                </Group>
-              </Dropzone>
-              <Box>
-                <Text fw={"bold"} fz={"lg"}>Dokumen</Text>
-                {previewFile ? (
-                  <iframe
-                    src={previewFile}
-                    width="100%"
-                    height="500px"
-                    style={{ border: "1px solid #ccc", borderRadius: "8px" }}
-                  />
-                ) : (
-                  <Text>Tidak ada dokumen tersedia</Text>
-                )}
-              </Box>
-            </Box>
-          </Box>
-          <TextInput
-            value={stateKorupsi.create.form.name}
-            onChange={(val) => {
-              stateKorupsi.create.form.name = val.target.value;
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Judul</Text>}
-            placeholder='Masukkan judul'
-          />
-          <Box>
-            <Text fz={"sm"} fw={"bold"}>Deskripsi</Text>
-            <CreateEditor
-              value={stateKorupsi.create.form.deskripsi}
-              onChange={(val) => {
-                stateKorupsi.create.form.deskripsi = val;
+            <Text fw="bold" fz="sm" mb={6}>
+              Dokumen
+            </Text>
+            <Dropzone
+              onDrop={(files) => {
+                const selectedFile = files[0];
+                if (selectedFile) {
+                  setFile(selectedFile);
+                  setPreviewFile(URL.createObjectURL(selectedFile));
+                }
               }}
+              onReject={() => toast.error('File tidak valid, gunakan format dokumen')}
+              maxSize={5 * 1024 ** 2}
+              accept={{
+                'application/*': ['.pdf', '.doc', '.docx', '.xls', '.xlsx', '.ppt', '.pptx'],
+              }}
+              radius="md"
+            >
+              <Group justify="center" gap="xl" mih={180} style={{ pointerEvents: 'none' }}>
+                <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>
+                  <IconFile size={48} color="var(--mantine-color-dimmed)" stroke={1.5} />
+                </Dropzone.Idle>
+                <div>
+                  <Text size="lg" inline>
+                    Seret dokumen ke sini atau klik untuk memilih file
+                  </Text>
+                  <Text size="sm" c="dimmed" inline mt={7}>
+                    Maksimal 5MB (PDF, DOC, DOCX, XLS, XLSX, PPT, PPTX)
+                  </Text>
+                </div>
+              </Group>
+            </Dropzone>
+
+            {previewFile && (
+              <Box mt="md" style={{ textAlign: 'center' }}>
+                <iframe
+                  src={previewFile}
+                  width="100%"
+                  height="500px"
+                  style={{
+                    border: '1px solid #e0e0e0',
+                    borderRadius: '8px',
+                    maxWidth: '100%',
+                  }}
+                />
+              </Box>
+            )}
+          </Box>
+
+          <TextInput
+            label="Judul Dokumen"
+            placeholder="Masukkan judul dokumen"
+            value={stateKorupsi.create.form.name || ''}
+            onChange={(e) => (stateKorupsi.create.form.name = e.target.value)}
+            required
+          />
+
+          <Box>
+            <Text fw="bold" fz="sm" mb={6}>
+              Deskripsi
+            </Text>
+            <CreateEditor
+              value={stateKorupsi.create.form.deskripsi || ''}
+              onChange={(val) => (stateKorupsi.create.form.deskripsi = val)}
             />
           </Box>
+
           <Select
-            value={stateKorupsi.create.form.kategoriId}
-            onChange={(val) => {
-              stateKorupsi.create.form.kategoriId = val ?? "";
-            }}
-            label={<Text fw={"bold"} fz={"sm"}>Kategori</Text>}
+            label="Kategori"
             placeholder="Pilih kategori"
+            value={stateKorupsi.create.form.kategoriId || ''}
+            onChange={(val) => (stateKorupsi.create.form.kategoriId = val || '')}
             data={
               korupsiState.kategoriDesaAntiKorupsi.findMany.data?.map((v) => ({
                 value: v.id,
                 label: v.name,
               })) || []
             }
+            required
+            searchable
+            clearable
           />
 
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
+          <Group justify="right" mt="xl">
+            <Button
+              onClick={handleSubmit}
+              radius="md"
+              size="md"
+              loading={isLoading}
+              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 CreateDesaAntiKorupsi;

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

@@ -1,13 +1,12 @@
 '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 { 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 { IconDeviceImacCog, IconSearch } from '@tabler/icons-react';
+import { IconDeviceImacCog, 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 korupsiState from '../../../_state/landing-page/desa-anti-korupsi';
 
 function DesaAntiKorupsi() {
@@ -15,9 +14,9 @@ function DesaAntiKorupsi() {
   return (
     <Box>
       <HeaderSearch
-        title='List Desa Anti Korupsi'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
+        title="Program Desa Anti Korupsi"
+        placeholder="Cari nama program atau kategori..."
+        searchIcon={<IconSearch size={18} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
@@ -27,114 +26,131 @@ function DesaAntiKorupsi() {
 }
 
 function ListDesaAntiKorupsi({ search }: { search: string }) {
-  const listState = useProxy(korupsiState.desaAntikorupsi)
   const router = useRouter();
-
-  const {
-    data,
-    page,
-    totalPages,
-    loading,
-    load,
-  } = listState.findMany;
+  const listState = useProxy(korupsiState.desaAntikorupsi);
+  const { data, page, totalPages, loading, load } = listState.findMany;
 
   useShallowEffect(() => {
     load(page, 10, search);
   }, [page, search]);
 
-  const filteredData = data || []
+  const filteredData = data || [];
 
-  // Handle loading state
   if (loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton height={550} />
+      <Stack py="md">
+        <Skeleton height={650} radius="lg" />
       </Stack>
     );
   }
 
   if (data.length === 0) {
     return (
-      <Box py={10}>
-        <Paper bg={colors['white-1']} p={'md'}>
-          <JudulList
-            title='List Desa Anti Korupsi'
-            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
-          />
-          <Box style={{ overflowX: "auto" }}>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Deskripsi</TableTh>
-                  <TableTh>Kategori</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-          </Box>
+      <Box py="md">
+        <Paper p="lg" radius="lg" shadow="md" withBorder>
+          <Stack align="center" gap="sm">
+            <Title order={4}>Data Program Desa Anti Korupsi</Title>
+            <Text c="dimmed" ta="center">
+              Belum ada data program yang tersedia
+            </Text>
+          </Stack>
         </Paper>
       </Box>
     );
   }
+
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <JudulList
-            title='List Desa Anti Korupsi'
-            href='/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create'
-          />
-          <Box style={{ overflowX: 'auto' }}>
-            <Table striped withRowBorders withTableBorder style={{ minWidth: '700px' }}>
-              <TableThead>
-                <TableTr>
-                  <TableTh>Nama Desa Anti Korupsi</TableTh>
-                  <TableTh>Deskripsi Desa Anti Korupsi</TableTh>
-                  <TableTh>Kategori Desa Anti Korupsi</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-              <TableTbody>
-                {filteredData.map((item) => (
+    <Box>
+      <Stack gap="md">
+        <Paper p="lg" radius="lg" shadow="md" withBorder>
+          <Group justify="space-between" mb="md">
+            <Title order={4}>Daftar Program Desa Anti Korupsi</Title>
+            <Tooltip label="Tambah Program Baru" withArrow>
+              <Button
+                leftSection={<IconPlus size={18} />}
+                color="blue"
+                onClick={() => router.push('/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/create')}
+              >
+                Tambah Baru
+              </Button>
+            </Tooltip>
+          </Group>
+
+          <Table
+            striped
+            highlightOnHover
+            
+            withRowBorders
+            verticalSpacing="sm"
+          >
+            <TableThead>
+              <TableTr>
+                <TableTh style={{ width: '50%' }}>Nama Program</TableTh>
+                <TableTh style={{ width: '30%' }}>Kategori</TableTh>
+                <TableTh style={{ width: '20%', textAlign: 'center' }}>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.name}</Text>
-                      </Box>
+                    <TableTd style={{ width: '50%' }}>
+                      <Text fw={500} lineClamp={1}>
+                        {item.name || '-'}
+                      </Text>
                     </TableTd>
-                    <TableTd>
-                      <Box w={200}>
-                        <Text truncate="end" fz={"sm"} dangerouslySetInnerHTML={{ __html: item.deskripsi }} />
-                      </Box>
+                    <TableTd style={{ width: '30%' }}>
+                      <Text fz="sm" c="dimmed">
+                        {item.kategori?.name || '-'}
+                      </Text>
                     </TableTd>
-                    <TableTd>{item.kategori?.name}</TableTd>
-                    <TableTd>
-                      <Button onClick={() => router.push(`/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`)}>
-                        <IconDeviceImacCog size={25} />
+                    <TableTd style={{ width: '20%', textAlign: 'center' }}>
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImacCog size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/landing-page/desa-anti-korupsi/list-desa-anti-korupsi/${item.id}`
+                          )
+                        }
+                      >
+                        Detail
                       </Button>
                     </TableTd>
                   </TableTr>
-                ))}
-              </TableTbody>
-            </Table>
-          </Box>
-        </Stack>
-      </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => {
-            load(newPage, 10);
-            window.scrollTo(0, 0);
-          }}
-          total={totalPages}
-          mt="md"
-          mb="md"
-        />
-      </Center>
+                ))
+              ) : (
+                <TableTr>
+                  <TableTd colSpan={3}>
+                    <Text ta="center" c="dimmed">
+                      Tidak ditemukan data dengan kata kunci pencarian
+                    </Text>
+                  </TableTd>
+                </TableTr>
+              )}
+            </TableTbody>
+          </Table>
+        </Paper>
+
+        <Center>
+          <Pagination
+            value={page}
+            total={totalPages}
+            onChange={(newPage) => {
+              load(newPage, 10, search);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
+            }}
+            size="md"
+            radius="md"
+            mt="md"
+          />
+        </Center>
+      </Stack>
     </Box>
-  )
+  );
 }
 
 export default DesaAntiKorupsi;

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

@@ -1,63 +1,90 @@
 /* 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 { IconChartBar, IconUsers } from '@tabler/icons-react';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
 
 function LayoutTabsKepuasan({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "Grafik Kepuasan Masyarakat",
-            value: "grafikkepuasannamasyarakat",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat"
-        },
-        {
-            label: "Responden",
-            value: "responden",
-            href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden"
-        },
-        
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+  const router = useRouter();
+  const pathname = usePathname();
+  const tabs = [
+    {
+      label: "Grafik Kepuasan",
+      description: "Lihat visualisasi grafik kepuasan masyarakat",
+      value: "grafik",
+      href: "/admin/landing-page/indeks-kepuasan-masyarakat/grafik-kepuasan-masyarakat",
+      icon: <IconChartBar size={18} stroke={1.8} />
+    },
+    {
+      label: "Responden",
+      description: "Kelola dan tinjau data responden",
+      value: "responden",
+      href: "/admin/landing-page/indeks-kepuasan-masyarakat/responden",
+      icon: <IconUsers size={18} stroke={1.8} />
+    },
+  ];
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
-    }
+  const curentTab = tabs.find(tab => tab.href === pathname);
+  const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+  const handleTabChange = (value: string | null) => {
+    const tab = tabs.find(t => t.value === value);
+    if (tab) router.push(tab.href);
+    setActiveTab(value);
+  };
 
-    return (
-        <Stack>
-            <Title order={3}>Indeks Kepuasan Masyarakat</Title>
-            <Tabs color={colors['blue-button']} variant='pills' value={activeTab} onChange={handleTabChange}>
-                <TabsList p={"xs"} bg={"#BBC8E7FF"}>
-                    {tabs.map((e, i) => (
-                        <TabsTab key={i} value={e.value}>{e.label}</TabsTab>
-                    ))}
-                </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
-                    </TabsPanel>
-                ))}
-            </Tabs>
-            {children}
-        </Stack>
-    );
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) setActiveTab(match.value);
+  }, [pathname]);
+
+  return (
+    <Stack gap="lg">
+      <Title order={2} style={{ fontWeight: 700, color: "#1a1a1a" }}>
+        Indeks Kepuasan Masyarakat
+      </Title>
+      <Tabs
+        radius="xl"
+        color={colors['blue-button']}
+        variant="pills"
+        value={activeTab}
+        onChange={handleTabChange}
+      >
+        <TabsList
+          p="sm"
+          style={{
+            background: "#F3F4FB",
+            borderRadius: "1rem",
+            
+          }}
+        >
+          {tabs.map((e, i) => (
+            <Tooltip key={i} label={e.description} withArrow position="bottom" transitionProps={{ transition: 'pop', duration: 200 }}>
+              <TabsTab
+                value={e.value}
+                leftSection={e.icon}
+                style={{
+                  fontWeight: 500,
+                  fontSize: "0.9rem",
+                  transition: "all 0.2s ease",
+                }}
+              >
+                {e.label}
+              </TabsTab>
+            </Tooltip>
+          ))}
+        </TabsList>
+        {tabs.map((e, i) => (
+          <TabsPanel key={i} value={e.value} mt="md">
+            <></>
+          </TabsPanel>
+        ))}
+      </Tabs>
+      {children}
+    </Stack>
+  );
 }
 
-export default LayoutTabsKepuasan;
+export default LayoutTabsKepuasan;

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

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import colors from '@/con/colors';
-import { PieChart, BarChart } from '@mantine/charts'; // ✅ Ganti recharts dengan Mantine
+import { PieChart, BarChart } from '@mantine/charts';
 import {
   Box,
   Center,
@@ -22,11 +22,8 @@ interface ChartDataItem {
   name: string;
   value: number;
   color: string;
-  label?: string;
 }
 
-
-
 function Page() {
   const state = useProxy(indeksKepuasanState.responden);
   const { data, loading } = state.findMany;
@@ -41,28 +38,23 @@ function Page() {
       return;
     }
     if (data) {
-      // Hitung total berdasarkan jenis kelamin
       const totalLaki = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'laki-laki').length;
       const totalPerempuan = data.filter((item: any) => item.jenisKelamin?.name?.toLowerCase() === 'perempuan').length;
 
-      // Hitung total berdasarkan rating
       const totalSangatBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat baik').length;
       const totalBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'baik').length;
       const totalKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'kurang baik').length;
       const totalSangatKurangBaik = data.filter((item: any) => item.rating?.name?.toLowerCase() === 'sangat kurang baik').length;
 
-      // Hitung total berdasarkan kelompok umur
       const totalMuda = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'muda').length;
       const totalDewasa = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'dewasa').length;
       const totalLansia = data.filter((item: any) => item.kelompokUmur?.name?.toLowerCase() === 'lansia').length;
 
-      // Update gender chart data
       setDonutDataJenisKelamin([
         { name: 'Laki-laki', value: totalLaki, color: colors['blue-button'] },
         { name: 'Perempuan', value: totalPerempuan, color: '#10A85AFF' },
       ]);
 
-      // Update rating chart data
       setDonutDataRating([
         { name: 'Sangat Baik', value: totalSangatBaik, color: colors['blue-button'] },
         { name: 'Baik', value: totalBaik, color: '#10A85AFF' },
@@ -70,18 +62,15 @@ function Page() {
         { name: 'Sangat Kurang Baik', value: totalSangatKurangBaik, color: '#FF4500' },
       ]);
 
-      // Update age group chart data
       setDonutDataKelompokUmur([
         { name: 'Muda', value: totalMuda, color: colors['blue-button'] },
         { name: 'Dewasa', value: totalDewasa, color: '#10A85AFF' },
         { name: 'Lansia', value: totalLansia, color: '#FFA500' },
       ]);
 
-      // Process data for bar chart (group by month)
       const monthYearMap = new Map<string, number>();
 
       data.forEach((item: any) => {
-        // Try both createdAt and tanggal fields
         const dateValue = item.tanggal || item.createdAt;
         if (!dateValue) return;
 
@@ -95,7 +84,6 @@ function Page() {
         monthYearMap.set(monthYearKey, (monthYearMap.get(monthYearKey) || 0) + 1);
       });
 
-      // Convert map to array and sort by date
       const barData = Array.from(monthYearMap.entries())
         .map(([key, count]) => {
           const [year, month] = key.split('-');
@@ -104,7 +92,7 @@ function Page() {
           return {
             month: `${monthName} ${year}`,
             count,
-            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10)
+            sortKey: parseInt(`${year}${String(month).padStart(2, '0')}`, 10),
           };
         })
         .sort((a, b) => a.sortKey - b.sortKey)
@@ -116,28 +104,27 @@ function Page() {
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton height={730} />
+      <Stack py="xl">
+        <Skeleton height={750} radius="lg" />
       </Stack>
     );
   }
 
   if (data.length === 0) {
     return (
-      <Stack py={10}>
-        <Text c="dimmed" ta="center" my="md">
-          Belum ada data untuk ditampilkan
+      <Stack py="xl">
+        <Text c="dimmed" ta="center" size="lg">
+          Belum ada data yang tersedia
         </Text>
       </Stack>
     );
   }
 
   return (
-    <Stack gap="xs">
-      {/* Bar Chart - Data per Tanggal */}
-      <Paper bg={colors['white-1']} p="md" radius="md" mb="md">
-        <Title order={4} mb="md" ta="center">Jumlah Responden per Bulan</Title>
-        <Box h={300}>
+    <Stack gap="lg">
+      <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
+        <Title order={3} mb="md" ta="center">Tren Jumlah Responden</Title>
+        <Box h={320}>
           <BarChart
             h={300}
             data={barChartData}
@@ -152,14 +139,13 @@ function Page() {
         </Box>
       </Paper>
 
-      <SimpleGrid cols={{ base: 1, md: 3 }}>
-        {/* Chart Jenis Kelamin */}
-        <Paper bg={colors['white-1']} p="md" radius="md">
+      <SimpleGrid cols={{ base: 1, md: 3 }} spacing="lg">
+        <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
           <Stack>
-            <Title order={4}>Jenis Kelamin</Title>
+            <Title order={4} ta="center">Distribusi Jenis Kelamin</Title>
             {donutDataJenisKelamin.every(item => item.value === 0) ? (
               <Text c="dimmed" ta="center" my="md">
-                Belum ada data untuk ditampilkan dalam grafik
+                Tidak ada data
               </Text>
             ) : (
               <Box>
@@ -168,15 +154,15 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={250}
+                    size={220}
                     data={donutDataJenisKelamin}
                   />
                 </Center>
-                <Stack gap="sm" mt="md">
+                <Stack gap="xs" mt="md">
                   {donutDataJenisKelamin.map((entry) => (
-                    <Flex key={entry.name} gap="md" align="center">
-                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    <Flex key={entry.name} gap="sm" align="center">
+                      <Box bg={entry.color} w={14} h={14} style={{ borderRadius: 4, flexShrink: 0 }} />
+                      <Text size="sm" fw={500}>{entry.name}: {entry.value}</Text>
                     </Flex>
                   ))}
                 </Stack>
@@ -185,13 +171,12 @@ function Page() {
           </Stack>
         </Paper>
 
-        {/* Chart Rating */}
-        <Paper bg={colors['white-1']} p="md" radius="md">
+        <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
           <Stack>
-            <Title order={4}>Pilihan</Title>
+            <Title order={4} ta="center">Distribusi Penilaian</Title>
             {donutDataRating.every(item => item.value === 0) ? (
               <Text c="dimmed" ta="center" my="md">
-                Belum ada data untuk ditampilkan dalam grafik
+                Tidak ada data
               </Text>
             ) : (
               <Box>
@@ -200,15 +185,15 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={250}
+                    size={220}
                     data={donutDataRating}
                   />
                 </Center>
-                <Stack gap="sm" mt="md">
+                <Stack gap="xs" mt="md">
                   {donutDataRating.map((entry) => (
-                    <Flex key={entry.name} gap="md" align="center">
-                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    <Flex key={entry.name} gap="sm" align="center">
+                      <Box bg={entry.color} w={14} h={14} style={{ borderRadius: 4, flexShrink: 0 }} />
+                      <Text size="sm" fw={500}>{entry.name}: {entry.value}</Text>
                     </Flex>
                   ))}
                 </Stack>
@@ -217,13 +202,12 @@ function Page() {
           </Stack>
         </Paper>
 
-        {/* Chart Kelompok Umur */}
-        <Paper bg={colors['white-1']} p="md" radius="md">
+        <Paper withBorder bg={colors['white-1']} p="lg" radius="xl" shadow="sm">
           <Stack>
-            <Title order={4}>Umur</Title>
+            <Title order={4} ta="center">Distribusi Kelompok Umur</Title>
             {donutDataKelompokUmur.every(item => item.value === 0) ? (
               <Text c="dimmed" ta="center" my="md">
-                Belum ada data untuk ditampilkan dalam grafik
+                Tidak ada data
               </Text>
             ) : (
               <Box>
@@ -232,15 +216,15 @@ function Page() {
                     withLabels
                     withTooltip
                     labelsType="percent"
-                    size={250}
+                    size={220}
                     data={donutDataKelompokUmur}
                   />
                 </Center>
-                <Stack gap="sm" mt="md">
+                <Stack gap="xs" mt="md">
                   {donutDataKelompokUmur.map((entry) => (
-                    <Flex key={entry.name} gap="md" align="center">
-                      <Box bg={entry.color} w={20} h={20} style={{ flexShrink: 0 }} />
-                      <Text size="sm">{entry.name}: {entry.value}</Text>
+                    <Flex key={entry.name} gap="sm" align="center">
+                      <Box bg={entry.color} w={14} h={14} style={{ borderRadius: 4, flexShrink: 0 }} />
+                      <Text size="sm" fw={500}>{entry.name}: {entry.value}</Text>
                     </Flex>
                   ))}
                 </Stack>
@@ -253,4 +237,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default Page;

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

@@ -4,8 +4,8 @@ import React, { useEffect, useState } from 'react';
 import { useRouter, useParams } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
 import colors from '@/con/colors';
-import { Box, Button, Paper, Stack, Title, TextInput, Text, Select } from '@mantine/core';
-import { IconArrowBack } from '@tabler/icons-react';
+import { Box, Button, Group, Paper, Stack, Title, TextInput, Text, Select, Tooltip } from '@mantine/core';
+import { IconArrowBack, IconDeviceFloppy } from '@tabler/icons-react';
 import indeksKepuasanState from '@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan';
 import { toast } from 'react-toastify';
 
@@ -74,23 +74,39 @@ function EditResponden() {
     state.update.id = id;
     state.update.form = { ...formData }; // <-- sinkronisasi manual
     await state.update.submit();
-    router.push('/admin/ppid/ikm-desa-darmasaba/responden')
+    router.push('/admin/landing-page/indeks-kepuasan-masyarakat/responden')
   }
 
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack size={20} />
-        </Button>
-      </Box>
-      <Paper bg={colors['white-1']} w={{ base: '100%', md: '50%' }} p={'md'}>
-        <Stack>
-          <Title order={3}>Edit Responden</Title>
+    <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 Responden
+        </Title>
+      </Group>
+
+      <Paper
+        withBorder
+        w={{ base: '100%', md: '50%' }}
+        bg={colors['white-1']}
+        p="lg"
+        radius="md"
+        shadow="sm"
+      >
+        <Stack gap="md">
           <TextInput
-            label="Nama"
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Nama Responden
+              </Text>
+            }
             type='text'
-            placeholder="masukkan nama"
+            placeholder="Masukkan nama responden"
             value={formData.name}
             onChange={(val) => {
               setFormData({
@@ -98,9 +114,15 @@ function EditResponden() {
                 name: val.currentTarget.value
               })
             }}
+            radius="md"
+            required
           />
           <TextInput
-            label="Tanggal"
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Tanggal
+              </Text>
+            }
             type="date"
             placeholder='Pilih tanggal'
             value={formData.tanggal ? new Date(formData.tanggal).toISOString().split('T')[0] : ''}
@@ -111,32 +133,43 @@ function EditResponden() {
                 tanggal: selectedDate,
               });
             }}
+            radius="md"
+            required
           />
           <Select
-            key={"jenisKelamin"}
-            label={<Text fw="bold" fz="sm">Jenis Kelamin</Text>}
+            key="jenisKelamin"
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Jenis Kelamin
+              </Text>
+            }
             placeholder="Pilih jenis kelamin"
             value={formData.jenisKelaminId}
             onChange={(val) => setFormData({ ...formData, jenisKelaminId: val || "" })}
             data={
               (indeksKepuasanState.jenisKelaminResponden.findMany.data || [])
-                .filter(Boolean) // Hapus null/undefined
+                .filter(Boolean)
                 .map((v) => ({
                   value: v.id || '',
                   label: typeof v.name === 'string' ? v.name : 'Tanpa Nama'
                 }))
             }
-            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading} // ✅ disable saat loading
+            disabled={indeksKepuasanState.jenisKelaminResponden.findMany.loading}
             clearable
             searchable
             required
+            radius="md"
             error={!formData.jenisKelaminId ? "Pilih jenis kelamin" : undefined}
           />
           <Select
-            key={"rating"}
+            key="rating"
             value={formData.ratingId}
             onChange={(val) => setFormData({ ...formData, ratingId: val || "" })}
-            label={<Text fw={"bold"} fz={"sm"}>Rating</Text>}
+            label={
+              <Text fw="bold" fz="sm" mb={4}>
+                Rating
+              </Text>
+            }
             placeholder='Pilih rating'
             data={
               (indeksKepuasanState.pilihanRatingResponden.findMany.data || [])
@@ -150,6 +183,7 @@ function EditResponden() {
             clearable
             searchable
             required
+            radius="md"
             error={!formData.ratingId ? "Pilih rating" : undefined}
           />
 
@@ -173,14 +207,24 @@ function EditResponden() {
             required
             error={!formData.kelompokUmurId ? "Pilih kelompok umur" : undefined}
           />
-
-          <Button
-            mt={10}
-            bg={colors['blue-button']}
-            onClick={handleSubmit}
-          >
-            Submit
-          </Button>
+          
+          <Group justify="flex-end" mt="md">
+            <Button 
+              variant="light" 
+              color="red" 
+              onClick={() => router.back()}
+            >
+              Batal
+            </Button>
+            <Button 
+              leftSection={<IconDeviceFloppy size={20} />}
+              onClick={handleSubmit} 
+              loading={state.update.loading}
+              color={colors['blue-button']}
+            >
+              Simpan
+            </Button>
+          </Group>
         </Stack>
       </Paper>
     </Box>

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

@@ -3,10 +3,10 @@
 import { ModalKonfirmasiHapus } from "@/app/admin/(dashboard)/_com/modalKonfirmasiHapus"
 import indeksKepuasanState from "@/app/admin/(dashboard)/_state/landing-page/indeks-kepuasan"
 import colors from "@/con/colors"
-import { Box, Button, Flex, Paper, Skeleton, Stack, Text } from "@mantine/core"
+import { 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 { useRouter, useParams } from "next/navigation"
+import { IconArrowBack, IconEdit, IconTrash } from "@tabler/icons-react"
+import { useParams, useRouter } from "next/navigation"
 import { useState } from "react"
 import { useProxy } from "valtio/utils"
 
@@ -38,67 +38,89 @@ export default function DetailResponden() {
     )
   }
   return (
-    <Box>
-      <Box mb={10}>
-        <Button variant="subtle" onClick={() => router.back()}>
-          <IconArrowBack color={colors['blue-button']} size={25} />
-        </Button>
-      </Box>
-      <Paper w={{ base: "100%", md: "50%" }} bg={colors['white-1']} p={'md'}>
-        <Stack>
-          <Text fz={"xl"} fw={"bold"}>Detail Responden</Text>
+    <Box py={10}>
+      <Button
+        variant="subtle"
+        onClick={() => router.back()}
+        leftSection={<IconArrowBack size={24} color={colors['blue-button']} />}
+        mb={15}
+      >
+        Kembali
+      </Button>
 
-          <Paper bg={colors['BG-trans']} p={'md'}>
-            <Stack gap={"xs"}>
+      <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 Responden
+          </Text>
+
+          <Paper bg="#ECEEF8" p="md" radius="md" shadow="xs">
+            <Stack gap="sm">
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Nama Responden</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.name}</Text>
+                <Text fz="lg" fw="bold">Nama Responden</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.name || '-'}</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Tanggal</Text>
-                <Text fz={"lg"}>{
+                <Text fz="lg" fw="bold">Tanggal</Text>
+                <Text fz="md" c="dimmed">{
                   stateDetail.findUnique.data?.tanggal
                     ? new Date(stateDetail.findUnique.data.tanggal).toLocaleDateString('id-ID')
                     : '-'
                 }</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Jenis Kelamin</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.jenisKelamin?.name}</Text>
+                <Text fz="lg" fw="bold">Jenis Kelamin</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.jenisKelamin?.name || '-'}</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Rating</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.rating?.name}</Text>
+                <Text fz="lg" fw="bold">Rating</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.rating?.name || '-'}</Text>
               </Box>
               <Box>
-                <Text fz={"lg"} fw={"bold"}>Kelompok Umur</Text>
-                <Text fz={"lg"}>{stateDetail.findUnique.data?.kelompokUmur?.name}</Text>
+                <Text fz="lg" fw="bold">Kelompok Umur</Text>
+                <Text fz="md" c="dimmed">{stateDetail.findUnique.data?.kelompokUmur?.name || '-'}</Text>
               </Box>
-              <Flex gap={"xs"} mt={10}>
-                <Button
-                  onClick={() => {
-                    if (stateDetail.findUnique.data) {
-                      setSelectedId(stateDetail.findUnique.data.id);
-                      setModalHapus(true);
-                    }
-                  }}
-                  disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
-                  color={"red"}
-                >
-                  <IconX size={20} />
-                </Button>
-                <Button
-                  onClick={() => {
-                    if (stateDetail.findUnique.data) {
-                      router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${stateDetail.findUnique.data.id}/edit`);
-                    }
-                  }}
-                  disabled={!stateDetail.findUnique.data}
-                  color={"green"}
-                >
-                  <IconEdit size={20} />
-                </Button>
-              </Flex>
+              
+              <Group gap="sm" mt="md">
+                <Tooltip label="Hapus Responden" withArrow position="top">
+                  <Button
+                    color="red"
+                    variant="light"
+                    onClick={() => {
+                      if (stateDetail.findUnique.data) {
+                        setSelectedId(stateDetail.findUnique.data.id);
+                        setModalHapus(true);
+                      }
+                    }}
+                    disabled={stateDetail.delete.loading || !stateDetail.findUnique.data}
+                    leftSection={<IconTrash size={20} />}
+                  >
+                    Hapus
+                  </Button>
+                </Tooltip>
+                <Tooltip label="Edit Responden" withArrow position="top">
+                  <Button
+                    color="green"
+                    variant="light"
+                    onClick={() => {
+                      if (stateDetail.findUnique.data) {
+                        router.push(`/admin/landing-page/indeks-kepuasan-masyarakat/responden/${stateDetail.findUnique.data.id}/edit`);
+                      }
+                    }}
+                    disabled={!stateDetail.findUnique.data}
+                    leftSection={<IconEdit size={20} />}
+                  >
+                    Edit
+                  </Button>
+                </Tooltip>
+              </Group>
             </Stack>
           </Paper>
         </Stack>

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

@@ -1,22 +1,37 @@
 'use client';
-import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr, Text, Title } from '@mantine/core';
-import { useShallowEffect } from '@mantine/hooks';
-import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import { useProxy } from 'valtio/utils';
+import { useShallowEffect } from '@mantine/hooks';
+import {
+  Box,
+  Button,
+  Center,
+  Pagination,
+  Paper,
+  Skeleton,
+  Stack,
+  Table,
+  TableTbody,
+  TableTd,
+  TableTh,
+  TableThead,
+  TableTr,
+  Text,
+  Title,
+} from '@mantine/core';
+import { IconDeviceImac, IconSearch } from '@tabler/icons-react';
 import HeaderSearch from '../../../_com/header';
 import indeksKepuasanState from '../../../_state/landing-page/indeks-kepuasan';
 
 function Responden() {
-  const [search, setSearch] = useState("");
+  const [search, setSearch] = useState('');
   return (
     <Box>
       <HeaderSearch
-        title='Responden'
-        placeholder='pencarian'
-        searchIcon={<IconSearch size={20} />}
+        title="Data Responden"
+        placeholder="Cari nama responden..."
+        searchIcon={<IconSearch size={18} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
       />
@@ -34,84 +49,98 @@ function ListResponden({ search }: ListRespondenProps) {
   const router = useRouter();
   const { data, page, totalPages, loading, load } = state.findMany;
 
-
   useShallowEffect(() => {
-    load(page, 10)
+    load(page, 10);
   }, [page]);
 
-
-  const filteredData = (data || []).filter(item => {
+  const filteredData = (data || []).filter((item) => {
     const keyword = search.toLowerCase();
-    return (
-      item.name.toLowerCase().includes(keyword)
-    );
+    return item.name.toLowerCase().includes(keyword);
   });
 
   if (loading || !data) {
     return (
-      <Stack py={10}>
-        <Skeleton height={730} />
+      <Stack py="md">
+        <Skeleton height={650} radius="lg" />
       </Stack>
     );
   }
+
   if (data.length === 0) {
     return (
-      <Box py={10}>
-        <Paper p="md">
-          <Stack>
-            <Title>Responden</Title>
-            <Table striped withTableBorder withRowBorders>
-              <TableThead>
-                <TableTr>
-                  <TableTh>No</TableTh>
-                  <TableTh>Nama</TableTh>
-                  <TableTh>Tanggal</TableTh>
-                  <TableTh>Jenis Kelamin</TableTh>
-                  <TableTh>Detail</TableTh>
-                </TableTr>
-              </TableThead>
-            </Table>
-            <Text ta="center">Tidak ada data berdasarkan jenis kelamin responden yang tersedia</Text>
+      <Box py="md">
+        <Paper p="lg" radius="lg" shadow="md" withBorder>
+          <Stack align="center" gap="sm">
+            <Title order={4}>Data Responden</Title>
+            <Text c="dimmed" ta="center">
+              Belum ada data responden yang tersedia
+            </Text>
           </Stack>
         </Paper>
-      </Box >
+      </Box>
     );
   }
 
   return (
     <Box>
-      <Stack gap="xs">
-        <Paper bg={colors['white-1']} p="md" h={{ base: 730, md: 650 }}>
-          <Title mb={10} order={3}>List Responden</Title>
-          <Table striped withTableBorder withRowBorders>
+      <Stack gap="md">
+        <Paper p="lg" radius="lg" shadow="md" withBorder>
+          <Title order={4} mb="sm">
+            Daftar Responden
+          </Title>
+          <Table
+            striped
+            highlightOnHover
+            withRowBorders
+            verticalSpacing="sm"
+          >
             <TableThead>
               <TableTr>
                 <TableTh style={{ width: '5%', textAlign: 'center' }}>No</TableTh>
-                <TableTh style={{ width: '20%', textAlign: 'center' }}>Nama</TableTh>
+                <TableTh style={{ width: '25%', textAlign: 'center' }}>Nama</TableTh>
                 <TableTh style={{ width: '20%', textAlign: 'center' }}>Tanggal</TableTh>
                 <TableTh style={{ width: '20%', textAlign: 'center' }}>Jenis Kelamin</TableTh>
-                <TableTh style={{ width: '15%', textAlign: 'center' }}>Detail</TableTh>
+                <TableTh style={{ width: '15%', textAlign: 'center' }}>Aksi</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
               {filteredData.length === 0 ? (
                 <TableTr>
-                  <TableTd colSpan={6}>
-                    <Text ta='center' c='dimmed'>Belum ada data responden</Text>
+                  <TableTd colSpan={5}>
+                    <Text ta="center" c="dimmed">
+                      Tidak ditemukan data dengan kata kunci pencarian
+                    </Text>
                   </TableTd>
                 </TableTr>
               ) : (
                 filteredData.map((item, index) => (
                   <TableTr key={item.id}>
-                    <TableTd style={{ width: '5%', textAlign: 'center' }}>{index + 1}</TableTd>
-                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.name}</TableTd>
-                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.tanggal
-                      ? new Date(item.tanggal).toLocaleDateString('id-ID')
-                      : '-'}</TableTd>
-                    <TableTd style={{ width: '20%', textAlign: 'center' }}>{item.jenisKelamin.name}</TableTd>
-                    <TableTd style={{ width: '15%', textAlign: 'center' }}>
-                      <Button color='green' onClick={() => router.push(`/admin/ppid/ikm-desa-darmasaba/responden/${item.id}`)}>
-                        <IconDeviceImac size={20} />
+                    <TableTd ta="center">{index + 1}</TableTd>
+                    <TableTd ta="center">{item.name}</TableTd>
+                    <TableTd ta="center">
+                      {item.tanggal
+                        ? new Date(item.tanggal).toLocaleDateString('id-ID', {
+                            day: '2-digit',
+                            month: 'long',
+                            year: 'numeric',
+                          })
+                        : '-'}
+                    </TableTd>
+                    <TableTd ta="center">{item.jenisKelamin.name}</TableTd>
+                    <TableTd ta="center">
+                      <Button
+                        size="xs"
+                        radius="md"
+                        variant="light"
+                        color="blue"
+                        leftSection={<IconDeviceImac size={16} />}
+                        onClick={() =>
+                          router.push(
+                            `/admin/landing-page/indeks-kepuasan-masyarakat/responden/${item.id}`
+                          )
+                        }
+                      >
+                        Detail
                       </Button>
                     </TableTd>
                   </TableTr>
@@ -123,22 +152,19 @@ function ListResponden({ search }: ListRespondenProps) {
         <Center>
           <Pagination
             value={page}
+            total={totalPages}
             onChange={(newPage) => {
               load(newPage, 10);
-              window.scrollTo(0, 0);
+              window.scrollTo({ top: 0, behavior: 'smooth' });
             }}
-            total={totalPages}
+            size="md"
+            radius="md"
             mt="md"
-            mb="md"
           />
         </Center>
-
-       
       </Stack>
     </Box>
   );
 }
 
 export default Responden;
-
-

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

@@ -1,62 +1,105 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 'use client'
-import colors from '@/con/colors';
-import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title } from '@mantine/core';
 import { usePathname, useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { Stack, Tabs, TabsList, TabsPanel, TabsTab, Title, Tooltip } from '@mantine/core';
+import { IconCategory, IconListDetails } from '@tabler/icons-react';
+import colors from '@/con/colors';
 
 function LayoutTabs({ children }: { children: React.ReactNode }) {
-    const router = useRouter()
-    const pathname = usePathname()
-    const tabs = [
-        {
-            label: "List Prestasi Desa",
-            value: "listPrestasiDesa",
-            href: "/admin/landing-page/prestasi-desa/list-prestasi-desa"
-        },
-        {
-            label: "Kategori Prestasi Desa",
-            value: "kategoriPrestasiDesa",
-            href: "/admin/landing-page/prestasi-desa/kategori-prestasi-desa"
-        },
-    ];
-    const curentTab = tabs.find(tab => tab.href === pathname)
-    const [activeTab, setActiveTab] = useState<string | null>(curentTab?.value || tabs[0].value);
+  const router = useRouter();
+  const pathname = usePathname();
 
-    const handleTabChange = (value: string | null) => {
-        const tab = tabs.find(t => t.value === value)
-        if (tab) {
-            router.push(tab.href)
-        }
-        setActiveTab(value)
+  const tabs = [
+    {
+      label: "Daftar Prestasi",
+      value: "listPrestasiDesa",
+      href: "/admin/landing-page/prestasi-desa/list-prestasi-desa",
+      icon: <IconListDetails size={18} stroke={1.8} />,
+      tooltip: "Kelola daftar prestasi desa",
+    },
+    {
+      label: "Kategori Prestasi",
+      value: "kategoriPrestasiDesa",
+      href: "/admin/landing-page/prestasi-desa/kategori-prestasi-desa",
+      icon: <IconCategory size={18} stroke={1.8} />,
+      tooltip: "Kelola kategori prestasi desa",
+    },
+  ];
+
+  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);
+    if (tab) {
+      router.push(tab.href);
     }
+    setActiveTab(value);
+  };
 
-    useEffect(() => {
-        const match = tabs.find(tab => tab.href === pathname)
-        if (match) {
-            setActiveTab(match.value)
-        }
-    }, [pathname])
+  useEffect(() => {
+    const match = tabs.find(tab => tab.href === pathname);
+    if (match) {
+      setActiveTab(match.value);
+    }
+  }, [pathname]);
 
-    return (
-        <Stack>
-            <Title order={3}>Prestasi 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>
-                    ))}
-                </TabsList>
-                {tabs.map((e, i) => (
-                    <TabsPanel key={i} value={e.value}>
-                        {/* Konten dummy, bisa diganti tergantung routing */}
-                        <></>
-                    </TabsPanel>
-                ))}
-            </Tabs>
+  return (
+    <Stack gap="lg">
+      <Title order={2} fw={700} style={{ color: "#1A1B1E" }}>
+        Prestasi 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((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}
-        </Stack>
-    );
+          </TabsPanel>
+        ))}
+      </Tabs>
+    </Stack>
+  );
 }
 
 export default LayoutTabs;

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

@@ -2,7 +2,7 @@
 'use client'
 import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
 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';
@@ -45,7 +45,7 @@ function EditKategoriPrestasi() {
   const handleSubmit = async () => {
     try {
       if (!formData.name.trim()) {
-        toast.error('Nama kategori prestasi desa tidak boleh kosong');
+        toast.error('Nama kategori prestasi tidak boleh kosong');
         return;
       }
 
@@ -70,24 +70,48 @@ function EditKategoriPrestasi() {
   };
 
   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 Kategori Prestasi
+        </Title>
+      </Group>
 
-      <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-        <Stack gap={"xs"}>
-          <Title order={4}>Edit Kategori Prestasi Desa</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="Nama Kategori Prestasi"
+            placeholder="Masukkan nama kategori prestasi"
             value={formData.name}
             onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-            label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Prestasi Desa</Text>}
-            placeholder='Masukkan nama kategori prestasi desa'
+            required
           />
-          <Group>
-            <Button bg={colors['blue-button']} onClick={handleSubmit}>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)/landing-page/prestasi-desa/kategori-prestasi-desa/create/page.tsx

@@ -2,7 +2,7 @@
 'use client'
 import prestasiState from '@/app/admin/(dashboard)/_state/landing-page/prestasi-desa';
 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 { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
@@ -30,31 +30,51 @@ function CreateKategoriPrestasi() {
   }
 
   return (
-    <Box>
-      <Box>
-        <Box mb={10}>
-          <Button onClick={() => router.back()} variant='subtle' color={'blue'}>
-            <IconArrowBack color={colors['blue-button']} size={25} />
+    <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>
-        </Box>
+        </Tooltip>
+        <Title order={4} ml="sm" c="dark">
+          Tambah Kategori Prestasi
+        </Title>
+      </Group>
 
-        <Paper w={{ base: '100%', md: '50%' }} bg={colors['white-1']} p={'md'}>
-          <Stack gap={"xs"}>
-            <Title order={4}>Create Kategori Prestasi Desa</Title>
-            <TextInput
-              value={stateKategori.create.form.name}
-              onChange={(val) => {
-                stateKategori.create.form.name = val.target.value;
+      <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 Prestasi"
+            placeholder="Masukkan nama kategori prestasi"
+            value={stateKategori.create.form.name || ''}
+            onChange={(val) => (stateKategori.create.form.name = val.target.value)}
+            required
+          />
+
+          <Group justify="right" mt="md">
+            <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)',
               }}
-              label={<Text fw={"bold"} fz={"sm"}>Nama Kategori Prestasi Desa</Text>}
-              placeholder='Masukkan nama kategori prestasi desa'
-            />
-            <Group>
-              <Button bg={colors['blue-button']} onClick={handleSubmit}>Submit</Button>
-            </Group>
-          </Stack>
-        </Paper>
-      </Box>
+            >
+              Simpan
+            </Button>
+          </Group>
+        </Stack>
+      </Paper>
     </Box>
   );
 }

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

@@ -1,13 +1,12 @@
 'use client'
 import colors from '@/con/colors';
-import { Box, Button, Center, Pagination, Paper, Skeleton, Stack, Table, TableTbody, TableTd, TableTh, TableThead, TableTr } 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 { IconEdit, IconSearch, IconX } from '@tabler/icons-react';
+import { IconEdit, IconPlus, IconSearch, IconTrash } 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 { ModalKonfirmasiHapus } from '../../../_com/modalKonfirmasiHapus';
 import prestasiState from '../../../_state/landing-page/prestasi-desa';
 
@@ -18,7 +17,7 @@ function KategoriPrestasiDesa() {
     <Box>
       <HeaderSearch
         title='Kategori Prestasi Desa'
-        placeholder='pencarian'
+        placeholder='Cari kategori prestasi...'
         searchIcon={<IconSearch size={20} />}
         value={search}
         onChange={(e) => setSearch(e.currentTarget.value)}
@@ -65,60 +64,100 @@ function ListKategoriPrestasi({ search }: { search: string }) {
   }
 
   return (
-    <Box py={10}>
-      <Paper bg={colors['white-1']} p={'md'}>
-        <JudulList
-          title='List Kategori Prestasi Desa'
-          href='/admin/landing-page/prestasi-desa/kategori-prestasi-desa/create'
-        />
-        <Box style={{ overflowY: "auto" }}>
-          <Table striped withTableBorder withRowBorders>
+    <Box>
+      <Paper bg={colors['white-1']} p="lg" radius="md" shadow="sm" withBorder>
+        <Group justify="space-between" mb="md">
+          <Title order={4} c="dark">List Kategori Prestasi</Title>
+          <Tooltip label="Tambah Kategori Prestasi" withArrow>
+            <Button leftSection={<IconPlus size={18} />} color="blue" variant="light" onClick={() => router.push('/admin/landing-page/prestasi-desa/kategori-prestasi-desa/create')}>
+              Tambah Baru
+            </Button>
+          </Tooltip>
+        </Group>
+
+        <Box style={{ overflowX: 'auto' }}>
+          <Table verticalSpacing="sm" highlightOnHover>
             <TableThead>
               <TableTr>
                 <TableTh>Nama Kategori</TableTh>
-                <TableTh>Edit</TableTh>
-                <TableTh>Delete</TableTh>
+                <TableTh style={{ width: '120px' }} ta={'center'}>Edit</TableTh>
+                <TableTh ta={'center'} style={{ width: '120px' }}>Delete</TableTh>
               </TableTr>
             </TableThead>
             <TableTbody>
-              {filteredData.map((item) => (
-                <TableTr key={item.id}>
-                  <TableTd>{item.name}</TableTd>
-                  <TableTd>
-                    <Button color="green" onClick={() => router.push(`/admin/landing-page/prestasi-desa/kategori-prestasi-desa/${item.id}`)}>
-                      <IconEdit size={20} />
-                    </Button>
-                  </TableTd>
-                  <TableTd>
-                    <Button color="red" onClick={() => {
-                      setSelectedId(item.id)
-                      setModalHapus(true)
-                    }}>
-                      <IconX size={20} />
-                    </Button>
+              {filteredData.length === 0 ? (
+                <TableTr>
+                  <TableTd colSpan={2} style={{ textAlign: 'center' }}>
+                    <Text py="md" c="dimmed">
+                      {search ? 'Tidak ada hasil yang cocok' : 'Belum ada data kategori'}
+                    </Text>
                   </TableTd>
                 </TableTr>
-              ))}
+              ) : (
+                filteredData.map((item) => (
+                  <TableTr key={item.id}>
+                    <TableTd>{item.name}</TableTd>
+                    <TableTd style={{ textAlign: 'center', width: '120px' }}>
+                      <Tooltip label="Edit" withArrow position="top">
+                        <Button
+                          variant="light"
+                          color="blue"
+                          size="sm"
+                          onClick={() => router.push(`/admin/landing-page/prestasi-desa/kategori-prestasi-desa/${item.id}`)}
+                        >
+                          <IconEdit size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                    <TableTd style={{ textAlign: 'center', width: '120px' }}>
+                      <Tooltip label="Hapus" withArrow position="top">
+                        <Button
+                          variant="light"
+                          color="red"
+                          size="sm"
+                          onClick={() => {
+                            setSelectedId(item.id);
+                            setModalHapus(true);
+                          }}
+                        >
+                          <IconTrash size={18} />
+                        </Button>
+                      </Tooltip>
+                    </TableTd>
+                  </TableTr>
+                ))
+              )}
             </TableTbody>
           </Table>
         </Box>
+
+        {totalPages > 1 && (
+          <Center mt="lg">
+            <Pagination
+              value={page}
+              onChange={(newPage) => load(newPage)}
+              total={totalPages}
+              withEdges
+              size="sm"
+              styles={{
+                control: {
+                  '&[data-active]': {
+                    background: `${colors['blue-button']} !important`,
+                  },
+                },
+              }}
+            />
+          </Center>
+        )}
       </Paper>
-      <Center>
-        <Pagination
-          value={page}
-          onChange={(newPage) => load(newPage)}
-          total={totalPages}
-          my={"md"}
-        />
-      </Center>
       {/* Modal Konfirmasi Hapus */}
       <ModalKonfirmasiHapus
         opened={modalHapus}
         onClose={() => setModalHapus(false)}
         onConfirm={handleHapus}
-        text='Apakah anda yakin ingin menghapus kategori prestasi desa ini?'
+        text='Apakah anda yakin ingin menghapus kategori prestasi ini?'
       />
-    </Box>
+    </Box >
   );
 }